On my website I have a slider to only show on the Homepage. My home page looks something like this:
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
</body>
My Pages are the same layout, except I only want the Slider div to show on the first page. So when the user first arrives to the website, they can see the slider, but if they go to a different page, the slider is gone.
I was wondering if there was a way to do that with, jquery? Cookies? If anyone has any suggestions, please let me know how I would do this. Thanks!
On my website I have a slider to only show on the Homepage. My home page looks something like this:
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
</body>
My Pages are the same layout, except I only want the Slider div to show on the first page. So when the user first arrives to the website, they can see the slider, but if they go to a different page, the slider is gone.
I was wondering if there was a way to do that with, jquery? Cookies? If anyone has any suggestions, please let me know how I would do this. Thanks!
Share Improve this question asked Dec 5, 2012 at 18:33 JCBiggarJCBiggar 2,5073 gold badges23 silver badges34 bronze badges 6- 2 Wait - do you want the slider to only show on the home page, or on any page but only on the first visit? The question can be read both ways. – Christian Commented Dec 5, 2012 at 18:35
- 1 If they go back to the home page do they see it again? – Cymen Commented Dec 5, 2012 at 18:35
- 3 I suggest you add the slider div to the home page only using server side code. Why put it on every page if you're not using it? – Sidharth Mudgal Commented Dec 5, 2012 at 18:35
- What server framework are you using? Or is this only plain html files? – João Simões Commented Dec 5, 2012 at 18:37
- I'm using wordpress. I would like to add the slider to ONLY the first page that user see when they are on the website, besides the homepage. – JCBiggar Commented Dec 5, 2012 at 18:53
3 Answers
Reset to default 4Yes, there is a way to do this. In fact, there are multiple ways. You can do it both using Javascript and a server-side scripting language like PHP. I remend using a server-side scripting language, because there's no point in adding an element to a page if it isn't used, while it does take up a tiny amount of bandwidth. Anyways, an example using both methods follows:
Using PHP:
<body>
<div class="wrapper">
<div class="header"></div>
<?php
if (!isset($_COOKIE['visisted'])) {
setcookie('visited', true, time() + 3600 * 24); // Save a cookie for 1 day
echo '<div class="slider"></div>';
}
?>
<div class="maincontent"></div>
</div>
</body>
And using Javascript:
<head>
<style type="text/css">
div#slider {
/* Hide the div */
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate()+1);
document.cookie = 'visited=1;expires=' + expiration + ';path=/';
var element = document.getElementById('slider');
element.style.display = 'block';
}
</script>
</body>
By the way, I assume this isn't your whole HTML page? Because obviously you should add a doctype, tags, etc.
Sure, you can use:
- Cookies, that can be accessed from js
- HTML5 WebStorage, which is a great place too, but works only on new browsers
If you aren't bound to browsers I'd remend to use the HTML5 LocalStorage variable.
http://www.w3schools./html/html5_webstorage.asp
However if you are supposed to be browser independent (support IE6 etc.) I would go with cookies or a database with visited IP's.