Playing with jQuery and SharePoint 2010 and created an IPad like swish/slider affect with following single pagelayout and CSS – Take a look at the pagelayout for CSS and jQuey file locations where you can add to the hive or change references and store files in a folder on the site (you can download latest jquery.easing files from the jQuery plugin site http://gsgd.co.uk/sandbox/jquery/easing/ and see the strict jquery demo site which gave me the idea here http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/). What’s happening -- CSS stretches 1 page to give affect that you’re scrolling 3 pages. I added 3 web part zones and wrapped with Classes to show only that portion. In edit mode, all three web part zones are displayed in a single page view which required a separate CSS reference for edit mode. This is fun but think about performance on home page before loading it up with web parts.
PAGE LAYOUT:
<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ID="Content1" ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<ContentTemplate>
<style type="text/css">
.ms-pagetitleareaframe table, .ms-titleareaframe
{
background: none;
height: 10px;
overflow:hidden;
}
.ms-pagetitle, .ms-titlearea
{
display:none;
}
</style>
<SharePointWebControls:CssRegistration ID="CssRegistration1" name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" runat="server"/>
<SharePointWebControls:CssRegistration ID="CssRegistrationScroll" name="<% $SPUrl:~sitecollection/_layouts/1033/styles/mmbranding/mmscroll.css %>" runat="server" />
<PublishingWebControls:editmodepanel ID="Editmodepanel1" runat="server">
<!-- Styles for edit mode only-->
<SharePointWebControls:CssRegistration ID="CssRegistration2" name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/zz2_editMode.css %>" runat="server"/>
</PublishingWebControls:editmodepanel>
</ContentTemplate>
<SharePointWebControls:UIVersionedContent ID="UIVersionedContent1" UIVersion="4" runat="server">
</SharePointWebControls:UIVersionedContent>
<ContentTemplate>
<style type="text/css">
.v4master #s4-leftpanel { display: none; }
.v4master .s4-ca { margin-left: 0px; }
</style>
<SharePointWebControls:CssRegistration ID="CssRegistration3" name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
<PublishingWebControls:EditModePanel ID="EditModePanel3" runat="server">
<!-- Styles for edit mode only-->
<SharePointWebControls:CssRegistration ID="CssRegistration4" name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>"
After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
<SharePointWebControls:CssRegistration ID="CssRegistrationScrollEdit" name="<% $SPUrl:~sitecollection/_layouts/1033/styles/xyzbranding/xyzscrolledit.css %>"
After="<% $SPUrl:~sitecollection/_layouts/1033/styles/xyzbranding/xyzscroll.css %>" runat="server"/>
</PublishingWebControls:EditModePanel>
</ContentTemplate>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePointWebControls:TextField ID="TextField2" runat="server" FieldName="Title"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server">
<SharePointWebControls:VersionedPlaceHolder ID="VersionedPlaceHolder1" UIVersion="3" runat="server">
</SharePointWebControls:VersionedPlaceHolder>
<SharePointWebControls:UIVersionedContent ID="UIVersionedContent2" UIVersion="4" runat="server">
</SharePointWebControls:UIVersionedContent>
<ContentTemplate>
<SharePointWebControls:ListSiteMapPath ID="ListSiteMapPath1" runat="server" SiteMapProviders="CurrentNavigation" RenderCurrentNodeAsLink="false" PathSeparator="" CssClass="s4-breadcrumb" NodeStyle-CssClass="s4-breadcrumbNode" CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" RootNodeStyle-CssClass="s4-breadcrumbRootNode" NodeImageOffsetX=0 NodeImageOffsetY=353 NodeImageWidth=16 NodeImageHeight=16 NodeImageUrl="/_layouts/images/fgimg.png" HideInteriorRootNodes="true" SkipLinkText=""/> </ContentTemplate> </asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<SharePointWebControls:UIVersionedContent ID="UIVersionedContent7" UIVersion="4" runat="server">
<ContentTemplate>
<PublishingWebControls:EditModePanel ID="EditModePanel2" runat="server" CssClass="edit-mode-panel">
<SharePointWebControls:TextField ID="TextField1" runat="server" FieldName="Title" />
</PublishingWebControls:EditModePanel>
</ContentTemplate>
</SharePointWebControls:UIVersionedContent>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/_layouts/xyzbranding/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('ul.nav a').bind('click', function (event) {
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
<div class="section home" id="section1">
<table>
<tr>
<td >
<table>
<tr>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterLeft%>" ID="CenterLeftColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="CenterColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterRight%>" ID="CenterRightColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
</table>
</td>
</tr>
<script language="javascript"> if (typeof (MSOLayout_MakeInvisibleIfEmpty) == "function") { MSOLayout_MakeInvisibleIfEmpty(); }</script>
</table>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section my" id="section2">
<table>
<tr>
<td>
<table>
<tr>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="CenterLeftMy" ID="CenterLeftMyColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="CenterMy" ID="CenterMyColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="CenterRightMy" ID="CenterRightMyColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
</table>
</td>
</tr>
<script language="javascript"> if (typeof (MSOLayout_MakeInvisibleIfEmpty) == "function") { MSOLayout_MakeInvisibleIfEmpty(); }</script>
</table>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section home" id="section3">
<table>
<tr>
<td>
<table>
<tr>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="CenterLeftNews" ID="CenterLeftNewsColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="CenterNews" ID="CenterNewsColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="CenterRightNews" ID="CenterRightNewsColumn"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
</table>
</td>
</tr>
<script language="javascript"> if (typeof (MSOLayout_MakeInvisibleIfEmpty) == "function") { MSOLayout_MakeInvisibleIfEmpty(); }</script>
</table>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li>3</li>
</ul>
</div>
</asp:Content>
CSS: You’ll need to come up with your own images for the background or can get the black/white images from http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
XYZScroll.CSS:
*{
margin:0;
padding:0;
}
body{
background-color:transparent;
width:12000px !important;
position:absolute;
top:0px;
left:0px;
bottom:0px;
height:100%
}
BODY #s4-ribbonrow
{
position:fixed;
z-index:99;
overflow:visible !important;
}
BODY #s4-titlerow
{
position:fixed;
z-index:98;
margin-top:43px;
}
.section
{
padding-top:134px;
bottom:0px;
width:4000px;
float:left;
height:900px;
}
.section h2{
margin:50px 0px 30px 50px;
}
.section table{
margin:0px 0px 0px 0px;
}
.home{
background:url(/_layouts/images/xyzbranding/black.jpg) no-repeat top left;
}
.my{
background:url(/_layouts/images/xyzbranding/white.jpg) no-repeat top left;
}
.news{
background:url(/_layouts/images/xyzbranding/black.jpg) no-repeat top left;
}
.section ul{
list-style:none;
margin:20px 0px 0px 550px;
font-weight:bold;
font-size:14pt;
}
.home ul li{
float:left;
padding:5px;
margin:5px;
color:#aaa;
}
.home ul li a{
display:block;
color:#f0f0f0;
}
.home ul li a:hover{
text-decoration:none;
color:#fff;
}
.my ul li{
float:left;
padding:5px;
margin:5px;
color:#aaa;
}
.my ul li a{
display:block;
color:#222;
}
.my ul li a:hover{
text-decoration:none;
color:#000;
}
.news ul li{
float:left;
padding:5px;
margin:5px;
color:#aaa;
}
.news ul li a{
display:block;
color:#222;
}
.news ul li a:hover{
text-decoration:none;
color:#000;
}XYZScrollEdit.CSS (for edit mode):
*{
margin:0;
padding:0;
}
body{
background:#000;
width:1400px !important;
top:0px;
left:0px;
bottom:0px;
overflow:visible !important;
}
.section{
margin:0px;
bottom:0px;
width:1400px;
height:100%;
}
.section table{
margin:0px 0px 0px 0px;
height:100%;
}
No comments:
Post a Comment