PDA

View Full Version : Sliding content on to the page.



chadlexmorgan
08-16-2013, 02:28 AM
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?


$(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");
});

});

vwphillips
08-16-2013, 01:29 PM
<!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=docume nt.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>

chadlexmorgan
08-16-2013, 11:56 PM
Not sure what is suppose to happen but nothing is happening.. Am I missing something?





<!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=docume nt.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>

chadlexmorgan
08-17-2013, 07:22 AM
Got it working, thanks a bunch!!!!