slow delay with hidden divs in css

@SiddanJan 27.2005

Now I am finally done converting my site to css and ditching the tables… but when I check it I can see it is loading quite slow, or loading differently at least. Even after when I uploaded it. Everytime I visit a page with hidden layers they will be shown a second or two and then disappear. This didn´t occur when I had everything in tables, very strange.

to post a comment

CSS

26 Comments(s) _↴

@TriumphJan 27.2005 — #CSS coding can be as bloated as tables. It's all in how you plan it out...

So, let's see it.

@SiddanauthorJan 27.2005 — #well I have the structure in the source as it appears in the layout... from top to bottom. So i guess I would have to absolute positioning the hidden layers and have them at the very top in the source code so they are loaded first...

only thing I could think of now which may help. but I rather not use the absolute position when I can contain it...

----
and btw

I am using a very simple form of javascript to hide the layers. Looks much cleaner than what dreamweaver default does

@TriumphJan 27.2005 — #[i]Originally posted by Triumph [/i]

[B] [SIZE=4]So, let's see it. [/SIZE] [/B][/QUOTE]

?

@SiddanauthorJan 27.2005 — #ah well ok,,, here it is. Absolute position didn´t help either, just tried it. I´ve put the div at the very beginning. so perhaps the small nice and tidy javascript isn´t better than the clumpsy one which can be made in dreamweaver...

or perhaps an extra line is needed to put in this javascript

[URL=http://www.eurorider.se/usr_images/siddan/hph/pics.php]page, normal[/URL]

[URL=http://www.eurorider.se/usr_images/siddan/hph/pics2.php]page2, absolute pos[/URL]

everytime a refresh is made the hidden pics will be visible and if I set this div container to hidden, then they won´t be shown at all

@SiddanauthorJan 27.2005 — #hehe I just tried looking at this page on a mac, with both netscape and explorer... turned out to be fecked up :/

---
obviously, mac doesn´t support the display:inline

@TriumphJan 27.2005 — #[i]Originally posted by Siddan [/i]

[B]obviously, mac doesn´t support the display:inline [/B][/QUOTE] It doesn't?

I figure that since it is the initial value that it probably does.

@SiddanauthorJan 27.2005 — #well either that or I did something wrong, but it is working on every pc with IE at least, haven´t tried with mozilla nor netscape from a pc. On mac every inline is displayed in one single row, but on pc they are displayed next to eachother.

Dreamweaver claims the inline is not supported for IE 5.0 at least

Still the main issue remains... the hidden layers shows up before they hide away... annoying

@BeachSideJan 27.2005 — #It is waaaay messed up in FireFox! Both links. It is all black with bullets and a dog that is it oh and I almost forgot the swirly thing at the bottem. Also it is overlapping real bad.

@SiddanauthorJan 27.2005 — #ah well, no one seems to know.. perhaps I should use dreamweavers alternative of hide/show layers then

@BeachSideJan 27.2005 — #IMO I think it would be best to get the layout right in FF and IE then add the wiz bang pop stuff like hidden layers that is only my opinion though

@SiddanauthorJan 27.2005 — #those hidden layers that I have is a part of the layout.. but only 4 pages are like that

@TriumphJan 28.2005 — #[i]Originally posted by Triumph [/i]

[B]CSS coding can be as bloated as tables. [/B][/QUOTE] You've got a case of divitis and classitis...but there is a cure. ? It is not a bad case and not really enough to make a page load extremely slow so perhaps there is something else on the server side causing the delay?

All of this:

 &lt;div id="marg"&gt;
 
 <i>    </i>&lt;a class="padd" href="start.php" target="_parent"&gt;&lt;img src="img/men_home.gif" alt="Start" width="25" height="31" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 <i>    </i>&lt;a class="padd" href="pics.php" target="_parent"&gt;&lt;img src="img/men_pic.gif" alt="Bilder" width="24" height="31" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 <i>    </i>&lt;a class="padd" href="flash.php" target="_parent"&gt;&lt;img src="img/men_flash.gif" alt="Flash" width="26" height="31" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 <i>    </i>&lt;a class="padd" href="dikter.php" target="_parent"&gt;&lt;img src="img/men_dikter.gif" alt="Dikter" width="23" height="30" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 <i>    </i>&lt;a class="padd" href="links.php" target="_parent"&gt;&lt;img src="img/men_links.gif" alt="L&amp;auml;nkar" width="23" height="31" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 <i>    </i>&lt;a class="padd" href="guestbook.php" target="_parent"&gt;&lt;img src="img/men_gbok.gif" alt="G&amp;auml;stbok" width="31" height="31" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 <i>    </i>&lt;a class="padd" href="tools.php" target="_parent"&gt;&lt;img src="img/men_kugg.gif" alt="Tips&amp;Verktyg" width="46" height="31" border="0"&gt;&lt;/a&gt;&amp;nbsp;
 
 <i>	</i>&lt;/div&gt;

could be replaced by:

 &lt;div id="marg"&gt;
 &lt;a href="start.php" target="_parent"&gt;&lt;img src="img/men_home.gif" alt="Start" width="25" height="31" border="0"&gt;&lt;/a&gt;
 &lt;a href="pics.php" target="_parent"&gt;&lt;img src="img/men_pic.gif" alt="Bilder" width="24" height="31" border="0"&gt;&lt;/a&gt;
 &lt;a href="flash.php" target="_parent"&gt;&lt;img src="img/men_flash.gif" alt="Flash" width="26" height="31" border="0"&gt;&lt;/a&gt;
 &lt;a href="dikter.php" target="_parent"&gt;&lt;img src="img/men_dikter.gif" alt="Dikter" width="23" height="30" border="0"&gt;&lt;/a&gt;
 &lt;a href="links.php" target="_parent"&gt;&lt;img src="img/men_links.gif" alt="L&amp;auml;nkar" width="23" height="31" border="0"&gt;&lt;/a&gt;
 &lt;a href="guestbook.php" target="_parent"&gt;&lt;img src="img/men_gbok.gif" alt="G&amp;auml;stbok" width="31" height="31" border="0"&gt;&lt;/a&gt;
 &lt;a href="tools.php" target="_parent"&gt;&lt;img src="img/men_kugg.gif" alt="Tips&amp;Verktyg" width="46" height="31" border="0"&gt;&lt;/a&gt;
 &lt;/div&gt;

by making a "div#marg a" definition in your css. not a lot but that's just one small part. ?

smaller pages load faster which I doubt is something dreamweaver can help you with.

@SiddanauthorJan 28.2005 — #yea I could make that change.. but dreamweaver has an own way of hide/show layers so they will be hidden at the very first glance... this small javascript doesn´t seem to do so.... I know where I got it from but doubt he knows much about javascript...

@TriumphJan 28.2005 — #[i]Originally posted by Siddan [/i]

[B]yea I could make that change.. but dreamweaver has an own way of hide/show layers so they will be hidden at the very first glance... [/B][/QUOTE] Give it a try and let us see the results! ?

@SiddanauthorJan 28.2005 — #and it is changed.. as you requested. Still the same prob remains...

I will make the hid/show layer within dreamweaver when I get the time .. mabybe late friday

@TriumphJan 28.2005 — #[i]Originally posted by Siddan [/i]

[B]and it is changed.. as you requested. Still the same prob remains...

I will make the hid/show layer within dreamweaver when I get the time .. mabybe late friday [/B][/QUOTE] I never said it would cure your problem (I'm still not clear on what the problem is) I just said your code was bloated and that that was just an example. It continues throughout the rest of the page.

@SiddanauthorJan 28.2005 — #hehe ok...

but don´t you see all the hidden pics below load before they go invisible? Everytime you refresh you should the se pics visible a small fraction of time

@TriumphJan 28.2005 — #[i]Originally posted by Siddan [/i]

[B]hehe ok...

but don´t you see all the hidden pics below load before they go invisible? Everytime you refresh you should the se pics visible a small fraction of time [/B][/QUOTE] You are allowing them to be visible in the css document and then hiding them with the javascript. If you want them to start out invisible from the start use "display: none" in the css. I did not see a "display: none" in your css.

@SiddanauthorJan 28.2005 — #omg haha that was embarrasing...

i really thought I did try that tho
---

I am also having trouble finding a suitable doc type to fit in my pages...

I am trying to read throughout the validator page... tried a couple but it just refuses to except

@TriumphJan 28.2005 — #[i]Originally posted by Siddan [/i]

[B]I am also having trouble finding a suitable doc type to fit in my pages...

I am trying to read throughout the validator page... tried a couple but it just refuses to except [/B][/QUOTE] You'll have to really clean up your code first then validate.

@SiddanauthorJan 28.2005 — #wow that was a quick dumb reply of me...

when I set the display to none, then it will not display at all, just like with visibility:hidden

so when I hover the text they won´t be visible at all

@SiddanauthorJan 28.2005 — #ok there, finally. I had to put an inline style to display none on those every ID layers. I can live with that by adding that line to every layer I wish to be hidden at page load

@TriumphJan 28.2005 — #[i]Originally posted by Siddan [/i]

[B]...by adding that line to every layer...[/B][/QUOTE] Oh, no!!! More lines! ?

Let me know when you get it validated and/or working on a Mac.

@SiddanauthorJan 28.2005 — #hehe I said I could live with that :p

but alright... get it validated and properly rendered on a mac will take forever I guess. Since it won´t work with inline, I don´t know yet what to replace so the layout will be the same..

the validator doesn´t like when the H1 has an own font size property, silly

@TriumphJan 28.2005 — #[i]Originally posted by Siddan [/i]

[B]hehe I said I could live with that :p [/B][/QUOTE]
That was my concern. ? If you don't mind alienating mac users and most likely others from viewing your website then I won't mind either.
[i]Originally posted by Siddan [/i]

[B]but alright... get it validated and properly rendered on a mac will take forever I guess.[/B][/QUOTE]Forever? No way. It would already work if you used web standards in the beginning. ?
[i]Originally posted by Siddan [/i]

[B]Since it won´t work with inline, I don´t know yet what to replace so the layout will be the same.. [/B][/QUOTE] Huh? This really concerns me. What makes you think that macs don't "work with inline"?

[i]Originally posted by Siddan [/i]

[B]the validator doesn´t like when the H1 has an own font size property, silly [/B][/QUOTE] WHAT?!?!?! ? You can make h1 have any font size you desire.

It seems you have many, many misconceptions about css and how it works. Stick around here and read everything.

@SiddanauthorJan 28.2005 — #hm,, i must have been tired when I read about that H1... but it was something like that.. nevermind

but the inline.. I have 4 macs around me and they can´t understand that inline display. On that page I have linked to, each text is in an inline div box and there are 7 or those equal inline boxes next to eachother. Still on mac it shows as one single row

would be nice if anyone could check it out a quicky with firefox

Also in #CSS _↴

How to make a footer look like this?Height W3 says </head><body> are errors? Y?

Success!

Help @Siddan spread the word by sharing this article on Twitter...

Tweet This

slow delay with hidden divs in css

26 Comments(s) _↴

i really thought I did try that tho
---

Also in #CSS _↴

Success!

Social

Version

slow delay with hidden divs in css

26 Comments(s) ↴

i really thought I did try that tho ---

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

26 Comments(s) _↴

i really thought I did try that tho
---

Also in #CSS _↴