PDA

View Full Version : How to using light on/off button for index page



sanduwa
05-06-2010, 01:24 AM
This relates to:

http://www.dynamicdrive.com/forums/showthread.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 ??? :confused:
will it works on any browser ?

thank you,
sanduwa

jscheuer1
05-06-2010, 04:31 AM
I'm replying here just so I don't lose track of this new thread since I've removed your comments from the other thread from which this one is a spin off.

I have already begun looking into this request and should have more details soon.

sanduwa
05-06-2010, 04:59 AM
Oh...! it's ok.... :)
I'm waiting for your respond.

thank you,
sanduwa

jscheuer1
05-06-2010, 11:39 AM
OK, same thing as far as compatibility goes. IE 7+ and virtually all other browsers:


<!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">
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;">');
(function($){
var w = $(window), dimmer = $('#dimmer').css({opacity: 0.65}), all = $('.splash, #dimmer');
$('.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);});}
dresize();
w.bind('resize', dresize);
})(jQuery);
</script>
</body>
</html>

Few things though, I didn't know the exact size or names of your images. The fps.jpg is the footprints and the enter.png is the enter image. The size is only important because the left margin of each should be negative half their width, and the top margin for footprints should be negative half its height. The top margin for enter should be positive half the height of footprints plus a few pixels extra (I used two for a total of 244).

sanduwa
05-06-2010, 12:26 PM
working fine. thanks
but as i said we can use this effect at the default(home) page to enter a new web site.
then this effect 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.
i think my explanation clear for you.

thank you,
sanuwa

jscheuer1
05-06-2010, 04:35 PM
This relates to:

http://www.dynamicdrive.com/forums/showthread.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 ??? :confused:
will it works on any browser ?

thank you,
sanduwa

I don't see where the above asks for:


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:


<!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>

hansan
05-06-2010, 05:22 PM
hmmmmmmmm...... well,
can have a flash movie instead of the iamge ?

i replace this coding

<object class="splash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="927" height="252">
<param name="movie" value="Flash/home.swf">
<param name="quality" value="high">
<embed src="Flash/home.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="927" height="252">
</embed>
</object>

instead of

<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;">

but it's don't working.....

sanduwa
05-06-2010, 07:16 PM
Yes jscheuer1, that is effect I wanted :)
and it's working all the browsers also. thank you very much.


If you have time please look at this also,
the page will 100% complete when the image following a loading gif as the lightbox. 1st appear loading gif then appear the image.
as a example: http://www.daniweb.com/forums/thread245943.html

however your coding working pretty well
thank you again
sanduwa

sanduwa
05-07-2010, 04:13 PM
yes might be this is not possible.because it's not easy.
but as hansan post can't apply a flash movie instead of the iamge ???

thank you,
sanduwa

jscheuer1
05-07-2010, 05:24 PM
Most if not all Flash splash screens I've seen are separate pages. It's the Flash application itself that switches to the real page when done. Usually there is a 'skip intro' button, either as part of the Flash or as a normal link on the page.

I'm not sure what the best method for doing this all on one page would be. I doubt you can fade a Flash app except with Flash. Unless you have something like the Google YouTube api, you cannot even guarantee that your Flash will stop unless it is over, or if it's in an iframe that gets its src or location changed (but that's no longer really one page, and would probably not allow for any fading of the Flash). I'm not real up on Flash programming (action script), but I'd think you would need hooks into the Flash for javascript, or have most things be handled internally by the Flash application and have it pass some commands off to javascript, like for getting rid of the dimmer overlay.

I've been going in a different direction with this though, improving the interface for configuration purposes, and making the scroll in IE 6 smoother for when that has to happen. My next move will probably be to try to combine it with the original script from the other post, so it could do either. Or perhaps to make another lightbox clone out of it. I like the handling of the overlay better in this script than I have in any other lightbox type script I've seen. And I've seen tons of them.

But it would make a good "Simple jQuery Splash Overlay" script just the way I have it now, not the one in this thread, but the configurable one I've been working on. I may submit that version to Dynamic Drive.

sanduwa
05-07-2010, 07:11 PM
wow that's interesting.... I'm sure you will success.
please post a link in this page, as soon as you submit that version to Dynamic Drive.

thank you,
sanduwa.