Originally Posted by
sanduwa
This relates to:
http://www.dynamicdrive.com/forums/s...ad.php?t=54441
I would like to go further in using of light on/off button.
this is a simple explanation,
- when page is upload, the state is " light off " with a image. (Example: look at JPG that I have attached)
- once click on the ENTER (i.e lights_on.gif) button, the state become "light on"
- then ENTER button and image should not be appeared (in here no lights_off.gif)
- and should appear only, what page is containing.
when enter a new web site we can use this effect at the default(home) page.
But is it be possible ???
will it works on any browser ?
thank you,
sanduwa
I don't see where the above asks for:
Originally Posted by
sanduwa
should only appear at the very 1st time. it should not appear when refresh (i.e. coming back to the home page from another page)
further when close the window and open it again the effect should appear only at the very 1st time.
And I'm still not clear on what you want to happen under various circumstances. I think you want a session cookie. As long as the browser remains open, the effect will only be seen once. Close the browser - all tabs and windows of the browser - then the next time you go to the page the effect will happen once again for that browser session. I'll put that in, hopefully it will be OK. It's either that or a cookie that lasts for a specified amount of time, usually a number of days. Those are the only two options with cookies. If you have a server side language available, there might be other options available with that.
OK, I also added support for IE 6, it might even work with earlier versions of IE, but I'm not sure if jQuery as a whole will or not:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<div>
<a href="http://www.google.com">Google</a>
</div>
<script type="text/javascript">
(function($){
var cookie = {
set: function(n, v, d){ // cookie.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cookie.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
}
};
if(cookie.get('__splash')){return;}
cookie.set('__splash', 'yes');
document.write('<div id="dimmer" style="position:fixed;z-index:10;top:0;left:0;background-color:#000;"><\/div>\n' +
'<img class="splash" src="fps.jpg" alt="Footprints on the Sand" title="Enter" style="position:fixed;z-index:11;top:50%;left:50%;margin-top:-242px;margin-left:-176px;">\n' +
'<img class="splash" src="enter.png" alt="Enter" title="Enter" style="position:fixed;z-index:11;top:50%;left:50%;margin-top:244px;margin-left:-34px;">');
var w = $(window), dimmer = $('#dimmer').css({opacity: 0.65}), all = $('.splash, #dimmer');
if(dimmer.offset().top){
all.css({position: 'absolute'});
$('.splash').each(function(){$(this).data('top', parseInt($(this).css('marginTop'))); $(this).data('left', parseInt($(this).css('marginLeft')));});
function fixscroll(){
$('.splash').each(function(){$(this).css({marginTop: $(this).data('top') + w.scrollTop() + 'px', marginLeft: $(this).data('left') + w.scrollLeft() + 'px'});});
dimmer.css({top: w.scrollTop(), left: w.scrollLeft()});
}
w.scroll(fixscroll);
}
$('.splash').click(lightsOn).css({cursor: 'pointer'});
function dresize(){dimmer.css({height: w.height(), width: w.width()});}
function lightsOn(){this.style.cursor = this.title = ''; all.fadeOut('slow', function(){
w.unbind('resize', dresize);
$('.splash').unbind('click', lightsOn);
if(typeof fixscroll === 'function'){
w.unbind('scroll', fixscroll);
}
});
}
dresize();
w.bind('resize', dresize);
})(jQuery);
</script>
</body>
</html>
How to using light on/off button for index page
Reply With Quote
Bookmarks