SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    delay with window.onload

    hi,

    i have show and hide functions where the user clicks a link to show the content inside that div. There are a few of these on the page, and when the user gets into the page i want them all to initially be hidden until they are clicked.

    i am using
    Code:
    window.onload=function(){
     hide('content1','content2','content3','content4');
    }
    This does the job, except everything on the page loads 1st before this is initiated therefore displaying everything for about 5 secs... defeating the purpose of it being hidden. Is there something i can add to the code to giv it priority so the content supposed to be hidden loads up that way?

    cheers
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I do is add the attribute style="display: none;" to each of the appropriate divs instead of using a function to hide them initially.

    Dave

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Or better still put that in an external CSS file.

  4. #4
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, yeah i tried that... but if people don't have javascript enabled i still want them to be able to see the content displayed and if i set it to display:none the option to show them wont work.

    edit: i suppose i could duplicate everything into <noscript> tags but just wondering if there's an easier way
    Last edited by Mr Blonde; Jan 12, 2007 at 17:59. Reason: add
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use a script loaded in the head of the document to write a new style element before the body loads. If javascript is not enabled the style is not applied.

    Something like:
    <script type="text/javascript">
    <!--
    var str='<style type="text\/css" media="screen">';
    str+='#content1,#content2,#content3,#content4{display:none}';
    document.write(str+'<\/style>');
    -->
    </script>
    </head>
    <body>

    Or load a remote stylesheet using the link element with a similar script

  6. #6
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As mrhoo said try it that way, maybe disable all stylesheet and then allow just style made for javascript- This way
    Code:
    <link rel="alternate stylesheet" type="text/css" media="screen,projection" title="js" href="js.css" />
    <link rel="stylesheet" type="text/css" media="screen,projection" href="default.css" title="default" />
    
    function setid() {
    sheet=document.getElementsByTagName('link');
    for(var i=0;i<sheet.length;i++){
    var popisek=sheet[i].getAttribute('title');
    if(popisek){
    sheet[i].setAttribute('id',popisek);
    }}}
    function styl(jaky) {
    sheet=document.getElementsByTagName('link');
    for(var i=0;i<sheet.length;i++){
    if (sheet[i].getAttribute("rel").indexOf("style")!=-1 && el[i].getAttribute("media")!="print"){
    sheet[i].disabled=true;
    if(jaky){
    document.getElementById(jaky).disabled=false;
    }}}}
    function styljs(){styl('js');}
    if(document.childNodes){window.onload=styljs}

  7. #7
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome thanks for the help guys.

    ive used mrhoo's code and it works perfect. thanks heaps
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •