Advanced Search

Results 1 to 4 of 4

Thread: Sliding content on to the page.

  1. #1
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Sliding content on to the page.

    First off here is a link to my site http://www.rezzurrectiontaxidermy.com, Rezzurrection Taxidermy.

    Not sure if this is more a Javascript or jquery question. What I'm wanting to do is when the user hovers over the menu img and the menu slides in from the left, then the user will click on an item and instead of it loading another page via 'a href' have the content slide in from the bottom right like the menu did. Here is the script that initiates the menu but there is also a jquery file that goes along with it. I can attach it on here if need be otherwise you can get it off the site. Can this be done?

    Code:
    	$(document).ready(function() {	
    		$("#menu, #white_line, #logo").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px' 
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    	
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:300},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){ 
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'easeOutBack');			
    			}, 30);			
    		});
    		
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){ 
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'linear');	
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    			
    			
    		});
    		
    		
    		
    		
    		$('#menu ul li').mouseenter(function(element) {			
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5' 
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPosition: "300px 0px",
    				opacity: '1' 
    			}, 600, 'easeOutBounce');	
    			$(this).find('a').css("color","#916153");
    		});
    		
    		$('#menu ul li').mouseleave(function(element) {			
    			$(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '1' 
    			}, 200, 'linear');	
    			$(this).find('a').css("color","#000");
    		});
    		
    	});
    Last edited by jscheuer1; 08-16-2013 at 09:13 AM. Reason: Format

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rezzurrection Taxedermy</title>
    <link rel="stylesheet" href="http://www.rezzurrectiontaxidermy.com/css/styles.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://www.rezzurrectiontaxidermy.com/css/media-queries.css" type="text/css"/>
    <style type="text/css">
    /*<![CDATA[*/
    #pages {
      position:absolute;z-Index:200;left:20px;top:350px;height:500px;
    }
    
    .page {
      position:absolute;z-Index:200;left:-1020px;top:0px;height:500px;width:1000px;background-Color:red;font-Size:40px;
    }
    
    /*]]>*/
    </style><script type="text/javascript" src="http://www.rezzurrectiontaxidermy.com/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://www.rezzurrectiontaxidermy.com/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="http://www.rezzurrectiontaxidermy.com/js/jquery.delay.js"></script>
    <script type="text/javascript" src="http://www.rezzurrectiontaxidermy.com/js/jquery.backgroundPosition.js"></script>
    
    
    <script>
    	$(document).ready(function() {
    		$("#menu, #white_line, #logo").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px'
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:300},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'easeOutBack');
    			}, 30);
    		});
    
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'linear');
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    
    
    		});
    
    
    
    
    		$('#menu ul li').mouseenter(function(element) {
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5'
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPosition: "300px 0px",
    				opacity: '1'
    			}, 600, 'easeOutBounce');
    			$(this).find('a').css("color","#916153");
    		});
    
    		$('#menu ul li').mouseleave(function(element) {
    			$(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '1'
    			}, 200, 'linear');
    			$(this).find('a').css("color","#000");
    		});
    
    	});
    </script>
    </head>
    <body >
    
    	<div id="pagewrap">
    
    		<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;"></div>
    
    	<div id="content1">
    		<div id="filter"></div>
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item1"><a href="">Gallery555</a></li>
    				<li class="item2"><a href="">Tips & Hints</a></li>
    				<li class="item3"><a href="">About</a></li>
    				<li class="item4"><a href="">Contact</a></li>
    
    			</ul>
    
    		</div>
    	</div>
    		<div id="logo"><img src="http://www.rezzurrectiontaxidermy.com/./Rez_Pics/RezzTax-Black2.png"></div>
    	</div>
    
       <div id="pages" >
        <div class="page" >Page 1</div>
        <div class="page" style="background-Color:blue;" >Page 2</div>
        <div class="page" style="background-Color:green;" >Page 3</div>
        <div class="page" style="background-Color:#FFCC66;" >Page 4</div>
      </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlidePage={
    
     Open:function(id,n){
      var o=this['zxc'+id],a;
      if (o){
       a=o.lst;
       a[0][0].style.zIndex='1';
       this.animate(o,a[0],a[0][4],a[0][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
       this.animate(o,a[1],a[1][4],a[1][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
       a=o.lst=o.ary[n];
       a[0][0].style.zIndex='2';
       this.animate(o,a[0],a[0][4],a[0][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
       this.animate(o,a[1],a[1][4],a[1][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
      }
      return false;
     },
    
     init:function(o){
      var id=o.MenuID,pgs=document.getElementById(o.PagesID),f=o.From,t=o.To,ms=o.Animate,f=typeof(f)=='number'?f:0,t=typeof(t)=='number'?t:0,clds=pgs.childNodes,m=document.getElementById(id),as=m.getElementsByTagName('A'),a,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       a=as[ary.length];
       if (a&&clds[z0].nodeType==1){
        this.addevt(a,'click','Open',id,ary.length);
        ary.push([[clds[z0],'left',f,t,f],[clds[z0],'',0,100,0]]);
        clds[z0].style.left=f+'px';
       }
      }
      o.ary=ary;
      o.ms=typeof(ms)=='number'?ms:1000;
      o.lst=o.ary[0];
      this['zxc'+id]=o;
     },
    
     animate:function(o,a,f,t,srt,mS,s,i){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=Math.max(f<0||t<0?n:0,n);
       a[1]?a[0].style[a[1]]=a[4]+'px':oop.opc(a[0],a[4]);
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
      }
      else {
       a[4]=t;
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       t==a[2]?a[0].style.zIndex='0':null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    
    }
    
    
    zxcSlidePage.init({
     MenuID:'menu',
     PagesID:'pages',
     From:-1020,
     To:20,
     Animate:1000
    });
    
    /*]]>*/
    </script>
    
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    chadlexmorgan (08-17-2013)

  4. #3
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Not sure what is suppose to happen but nothing is happening.. Am I missing something?



    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rezzurrection Taxedermy</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
    <style type="text/css">
    /*<![CDATA[*/
    #pages {
     	position:absolute;
      	z-Index:200;
    	left:20px;
    	top:350px;
    	height:500px;
    }
    
    .page {
      	position:absolute;
    	z-Index:200;
    	left:-1020px;
    	top:0px;
    	height:500px;
    	width:1000px;
    	background-Color:red;
    	font-Size:40px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.delay.js"></script>
    <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
    
    
    <script>
    	$(document).ready(function() {	
    		$("#menu, #white_line, #logo").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px' 
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    	
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:300},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){ 
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'easeOutBack');			
    			}, 30);			
    		});
    		
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){ 
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'linear');	
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    			
    			
    		});
    		
    		
    		
    		
    		$('#menu ul li').mouseenter(function(element) {			
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5' 
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPosition: "300px 0px",
    				opacity: '1' 
    			}, 600, 'easeOutBounce');	
    			$(this).find('a').css("color","#916153");
    		});
    		
    		$('#menu ul li').mouseleave(function(element) {			
    			$(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '1' 
    			}, 200, 'linear');	
    			$(this).find('a').css("color","#000");
    		});
    		
    	});
    		
    </script>
    <!--[if lt IE 9]>
    <style type="text/css">
    #bg {
    	background-image: none !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
    }
    </style>
    <![endif]-->
    </head>
    <body >
    
    	<div id="pagewrap">
    		
    		<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;"></div>
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item1"><a href="">Gallery</a></li>
    				<li class="item2"><a href="">Tips & Hints</a></li>
    				<li class="item3"><a href="">About</a></li>
    				<li class="item4"><a href="">Contact</a></li>
    				
    			</ul>
    			
    		</div>
    	</div>
    		<div id="logo"><img src="./Rez_Pics/RezzTax-Black2.png"></div>
    	</div>
    	<div id="pages" >
       		 <div class="page" >Page 1</div>
        		 <div class="page" style="background-Color:blue;" >Page 2</div>
       		 <div class="page" style="background-Color:green;" >Page 3</div>
        		 <div class="page" style="background-Color:#FFCC66;" >Page 4</div>
      	</div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlidePage={
    
     Open:function(id,n){
      var o=this['zxc'+id],a;
      if (o){
       a=o.lst;
       a[0][0].style.zIndex='1';
       this.animate(o,a[0],a[0][4],a[0][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
       this.animate(o,a[1],a[1][4],a[1][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
       a=o.lst=o.ary[n];
       a[0][0].style.zIndex='2';
       this.animate(o,a[0],a[0][4],a[0][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
       this.animate(o,a[1],a[1][4],a[1][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
      }
      return false;
     },
    
     init:function(o){
      var id=o.MenuID,pgs=document.getElementById(o.PagesID),f=o.From,t=o.To,ms=o.Animate,f=typeof(f)=='number'?f:0,t=typeof(t)=='number'?t:0,clds=pgs.childNodes,m=document.getElementById
    
    (id),as=m.getElementsByTagName('A'),a,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       a=as[ary.length];
       if (a&&clds[z0].nodeType==1){
        this.addevt(a,'click','Open',id,ary.length);
        ary.push([[clds[z0],'left',f,t,f],[clds[z0],'',0,100,0]]);
        clds[z0].style.left=f+'px';
       }
      }
      o.ary=ary;
      o.ms=typeof(ms)=='number'?ms:1000;
      o.lst=o.ary[0];
      this['zxc'+id]=o;
     },
    
     animate:function(o,a,f,t,srt,mS,s,i){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=Math.max(f<0||t<0?n:0,n);
       a[1]?a[0].style[a[1]]=a[4]+'px':oop.opc(a[0],a[4]);
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
      }
      else {
       a[4]=t;
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       t==a[2]?a[0].style.zIndex='0':null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    
    }
    
    
    zxcSlidePage.init({
     MenuID:'menu',
     PagesID:'pages',
     From:-1020,
     To:20,
     Animate:1000
    });
    
    /*]]>*/
    </script>
    
    </body>
    </html>

  5. #4
    Join Date
    Apr 2011
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Got it working, thanks a bunch!!!!

Similar Threads

  1. sliding pop up at bottom right of page
    By Dips in forum JavaScript
    Replies: 4
    Last Post: 12-27-2011, 11:02 AM
  2. fundamentals of content sliding technique
    By stardom in forum JavaScript
    Replies: 0
    Last Post: 05-10-2010, 08:57 PM
  3. Sliding content to pull op new content
    By HTMLquestion in forum HTML
    Replies: 1
    Last Post: 03-23-2010, 07:01 PM
  4. Resolved I'm looking for a sliding div and page content script
    By IC619 in forum Looking for such a script or service
    Replies: 9
    Last Post: 01-06-2009, 08:12 AM
  5. Load Sliding Content externally?
    By tp4fp in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-04-2008, 08:38 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •