I am looking for a slider that disappears when you scroll down on a web page. I want the functionality to have similar ability to this web site: I have a slider in place, just need to figure out which code needs to be utilized to make it work. I'm thinking Javascript or jQuery...but im unsure? Any help would be appreciated! P.S This is for a Wordpress site...IF this can be done with a widget or plugin I am open to those ideas too! Thank you
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Slideshow that disappears when scrolling down on a page
- Thread starter yaknowss
- Start date
Actually the page you linked to simply does it with CSS. No Javascript or JQuery involved. The Slider doesn't really disappear, its simply covered up by the content under it scrolling up.
Judiciously applied Z-indexes and positioning is all it takes.
Here's a basic mockup. You can test it out as is, just fill the content div with stuff to make it scroll, I used lots of text, to get it to sroll properly.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
Judiciously applied Z-indexes and positioning is all it takes.
Here's a basic mockup. You can test it out as is, just fill the content div with stuff to make it scroll, I used lots of text, to get it to sroll properly.
Code:
<!DOCTYPE HTML>
<html>
<head><title>Hideable Slider</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#menu
{
height:80px;
line-height:80px;
background-color:#dedede;
border-bottom:4px solid #0066cc;
top:0px;
left:0px;
position:fixed;
width:100%;
z-index:110;
}
#slider
{
position:fixed;
z-index:-50;
height:370px;
width:100%;
top:81px;
background-color:#363636;
color:#fcfcfc;
}
#spacer
{
height:451px;
z-index:0;
position:relative;
}
#content
{
z-index:100;
background-color:#ffffff;
}
</style>
</head>
<body>
<div id="menu"><h1>MENU BAR</h1></div>
<div id="slider"><h1>Slider</h1></div>
<div id="spacer"> </div>
<div id="content"><h1>CONTENT</h1>
...
</div>
</body>
</html>----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
- Thread starter
- #3
This looks like it could work, but, I dont know how to apply this to my wordpress theme. I'm having trouble figuring out where this css code goes and how to call the css from my frontpage. Would you mind taking a look?
the url is
username: mcohen
password: today123
the url is
username: mcohen
password: today123
Assuming you are using the Customizr theme, just add this in the Custom CSS section for it.
That should work with the current classes and ID's used in that particular theme.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
Code:
header.tc-header
{
position:fixed;
z-index:100;
top:0px;
width:100%;
}
div#customizr-slider
{
position:fixed;
z-index:-50;
width:100%;
}
div#main-wrapper
{
position:relative;
top:500px;
background-color:#ffffff;
width:100%;
}That should work with the current classes and ID's used in that particular theme.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
- Thread starter
- #5
- Thread starter
- #6
Yeah, seems they get covered by a transparetn object.
Add a Z-Index to the wrapper div and it should be fixed.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
Add a Z-Index to the wrapper div and it should be fixed.
Code:
header.tc-header
{
position:fixed;
z-index:100;
top:0px;
width:100%;
}
div#customizr-slider
{
position:fixed;
[COLOR=#A40000][b]z-index:50;[/b][/color]
width:100%;
}
div#main-wrapper
{
position:relative;
top:500px;
background-color:#ffffff;
width:100%;
[COLOR=#A40000][b]z-index:60;[/b][/color]
}----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
- Thread starter
- #8
- Status
Similar threads
- Locked
- Question