CODEWITHSUNDEEP
javascriptcss
DB_876
DB_876

Reputation: 41

Page flickers on load - hide/show javascript - Total Newbie

Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:

http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/

Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.

I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!

Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?

I know it's a lot too ask but i've been trying to fix this all day. Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)

link to the site: http://www.adam-ashton.co.uk/homepage.html

(sorry to be so long winded)

Thanks, David

Upvotes: 0

Views: 4334

Answers (2)

Kabilan S
Kabilan S

Reputation: 1094

Add this one line code at 46th line .. Means first line of window.load

   $('.container').removeClass('hideMe');

Upvotes: 0

Kabilan S
Kabilan S

Reputation: 1094

Page Flicker can be handled with the help of some css 

.hideME {

visibility:hidden;
}

Add this class to the Top Most Element (Mostly a div ) of you html page

And inside the script tag ,

write a window.load function

$(window).load(function() {

  $(selector).removeClass('hideMe');
});

this should do the magic :)

Upvotes: 3

Related Questions