trigger fade on scrolling section change
hoping that someone can help me out here - i have this code
which works just fine - for what it is - basically click a link and the box in the middle of the page fades to the relevant text (one div - two div etc...)
but i need to add this to another document which uses a parallax scrolling effect - the has sections the change the suffix of the url to match the section (kind of like deep linking - kinda)
so when the page scrolls to section-one the url will say ".../index.html#section-one" and so on...
how do i rewrite the code to say that if button-one is clicked or section-one is active - show "one div text"
does that make sense? hope you know what i mean!
guess it is in these lines that i should be looking - and i have - but i don't really know what i should be looking to change/edit/add etc...
...any takers?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#one {
display:none;
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
background-color:#666;
position:fixed;
text-align:center;
}
#two {
display:none;
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
background-color:#666;
position:fixed;
text-align:center;
}
#three {
display:none;
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
background-color:#666;
position:fixed;
text-align:center;
}
#four {
display:none;
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
background-color:#666;
position:fixed;
text-align:center;
}
#five {
display:none;
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
background-color:#666;
position:fixed;
text-align:center;
}
#six {
display:none;
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
background-color:#666;
position:fixed;
text-align:center;
}
#fancy {
left:50%;
top:50%;
width: 200px;
margin-left:-100px;
margin-top:-15px;
position:fixed;
text-align:center;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btnbck').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#one').fadeIn('slow');
});
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn1').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#two').fadeIn('slow');
});
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn2').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#three').fadeIn('slow');
});
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn3').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#four').fadeIn('slow');
});
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn4').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#five').fadeIn('slow');
});
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn5').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#six').fadeIn('slow');
});
});
});//]]>
</script>
</head>
<body>
<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn1">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn2">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn3">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn4">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn5">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btnbck">hide fancy div</a></div>
<div id="one">one Div</div>
<div id="two">two Div</div>
<div id="three">three Div</div>
<div id="four">four Div</div>
<div id="five">five Div</div>
<div id="six">six Div</div>
<div id="fancy"></div>
</body>
</html>
which works just fine - for what it is - basically click a link and the box in the middle of the page fades to the relevant text (one div - two div etc...)
but i need to add this to another document which uses a parallax scrolling effect - the has sections the change the suffix of the url to match the section (kind of like deep linking - kinda)
so when the page scrolls to section-one the url will say ".../index.html#section-one" and so on...
how do i rewrite the code to say that if button-one is clicked or section-one is active - show "one div text"
does that make sense? hope you know what i mean!
guess it is in these lines that i should be looking - and i have - but i don't really know what i should be looking to change/edit/add etc...
but i can't get my head around :-(<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#one').fadeIn('slow');
});
});
});//]]>
...any takers?
Topic Participants
dean_eastment
jakecigar