[HTML/PHP]Preloader for gallery

ringo747 · 30 Mar 2008 at 23:23

still might have one or two more questions for you as it currently only works with javascript enabled!

http://www.stephencaldwell.co.uk/galleries/motorsport/

Let me know what you think!

ringo747 · 30 Mar 2008 at 23:25

At the moment the transparent layers are set by css and then hidden by javascript. If javascript is turned off then the 'loading....' animation always is visible! To resolve this I tried setting the css to display:none by default and if javascript is enabled then id make the layer visible, and then hide it again. I cannot get the javascript to override the display:none setting in the css at all. Really am confused!

meghatronic · 30 Mar 2008 at 23:27

ringo747 said:
still might have one or two more questions for you as it currently only works with javascript enabled!

http://www.stephencaldwell.co.uk/galleries/motorsport/

Let me know what you think!

That's pretty damn special!

I realise now, you could've also used http://demos.mootools.net/DomReadyVS.Load.

meghatronic · 30 Mar 2008 at 23:28

ringo747 said:
At the moment the transparent layers are set by css and then hidden by javascript. If javascript is turned off then the 'loading....' animation always is visible! To resolve this I tried setting the css to display:none by default and if javascript is enabled then id make the layer visible, and then hide it again. I cannot get the javascript to override the display:none setting in the css at all. Really am confused!

I'll try and do this tomorrow.

But you could just set the display to none, then on load (body tag) set it to show...

ringo747 · 30 Mar 2008 at 23:35

jdickerson said:
That's pretty damn special!

I realise now, you could've also used http://demos.mootools.net/DomReadyVS.Load.

Thanks! Have been working on all this for some time - basically its my own css for the gallery layout, my own php script to trawl a directory for image with exif data descriptions, slimbox for the gallery functionality and your code modified to do the page load stuff so its a mix of everything!

I looked at the DomReady but this doesn't appear to include images loading so not much good to me really.

jdickerson said:
I'll try and do this tomorrow.

But you could just set the display to none, then on load (body tag) set it to show...

OK, but will the body onload function execute immediately as the link is clicked on? These elements are hidden as soon as the page fully loaded so I need the 'loading ...' thing to appear first.

meghatronic · 30 Mar 2008 at 23:49

ringo747 said:
OK, but will the body onload function execute immediately as the link is clicked on? These elements are hidden as soon as the page fully loaded so I need the 'loading ...' thing to appear first.

No. it wont'.

Just have a javascript function show the box right at the top of the <head> declaration.

ringo747 · 30 Mar 2008 at 23:56

yeah i tried something like...

Code:

document.getElementById('transparency').style.display="inline";
document.getElementById('loading').style.display="inline";

but this didn't work.

my code was like:

Code:

<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%.......></div>

<div id="loading" style="display:none;position: absolute; z-index: 100........</div>

The divs transparency and loading just never appeared. Would it be anything to do with having the css styles associated with the tag itself rather than within style tags at the top of page?

meghatronic · 31 Mar 2008 at 00:05

ringo747 said:
yeah i tried something like...

Code:

document.getElementById('transparency').style.display="inline"; document.getElementById('loading').style.display="inline";

but this didn't work.

my code was like:

Code:

<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%.......></div> <div id="loading" style="display:none;position: absolute; z-index: 100........</div>

The divs transparency and loading just never appeared. Would it be anything to do with having the css styles associated with the tag itself rather than within style tags at the top of page?

Try block instead of inline?

ringo747 · 31 Mar 2008 at 00:09

i did that too - it was weird. It was exactly the same code as you used to hide the divs once the page has loaded only doing the reverse operation. I really am missing my sleep from the clock change so maybe it was something stupid. Will look again tomorrow all being well. Thanks for the help!

meghatronic · 31 Mar 2008 at 13:16

ringo747 said:
i did that too - it was weird. It was exactly the same code as you used to hide the divs once the page has loaded only doing the reverse operation. I really am missing my sleep from the clock change so maybe it was something stupid. Will look again tomorrow all being well. Thanks for the help!

Let me know how it goes, if it doesn't work I'll have a closer look.

ringo747 · 31 Mar 2008 at 18:02

still not having any luck here... this is what i have so far

javascript

Code:

<script type="text/javascript">
	document.getElementById('transparency').style.display="block";
	document.getElementById('loading').style.display="block";
</script>

html

Code:

<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%; height: 100%; background-color:#000; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; left:0;top:0"></div>

<div id="loading" style="display:none;position: absolute; z-index: 100; width:100%; left:0; top:25%"></div>

Any ideas why the script isn't overriding the display:none ??

meghatronic · 31 Mar 2008 at 18:06

ringo747 said:
s
Any ideas why the script isn't overriding the display:none ??

Bad practice, but move the JS to after the div. That is:

Code:

<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%; height: 100%; background-color:#000; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; left:0;top:0"></div>
<div id="loading" style="display:none;position: absolute; z-index: 100; width:100%; left:0; top:25%"></div>
<script type="text/javascript">
	document.getElementById('transparency').style.display="block";
	document.getElementById('loading').style.display="block";
</script>

ringo747 · 31 Mar 2008 at 18:56

jdickerson said:

Bad practice, but move the JS to after the div. That is:

Code:

<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%; height: 100%; background-color:#000; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; left:0;top:0"></div>
<div id="loading" style="display:none;position: absolute; z-index: 100; width:100%; left:0; top:25%"></div>
<script type="text/javascript">
	document.getElementById('transparency').style.display="block";
	document.getElementById('loading').style.display="block";
</script>

Cool will try that... bad practice meaning having the script to override css?

meghatronic · 31 Mar 2008 at 22:05

ringo747 said:
Cool will try that... bad practice meaning having the script to override css?

No, having JS outside <head></head>

ringo747 · 31 Mar 2008 at 22:09

jdickerson said:
No, having JS outside <head></head>

Ahh, I'm with you now! Is it better practice to have the function inside the <head> and then call it from within the <body>?

meghatronic · 31 Mar 2008 at 23:21

ringo747 said:
Ahh, I'm with you now! Is it better practice to have the function inside the <head> and then call it from within the <body>?

Yeah, generally.

ringo747 · 31 Mar 2008 at 23:27

Thanks for your help with all this - really is appreciated. Any more javascript help and I know who to ask! Thanks again.

meghatronic · 31 Mar 2008 at 23:58

ringo747 said:
Thanks for your help with all this - really is appreciated. Any more javascript help and I know who to ask! Thanks again.

Anytime