Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help: Hiding and showing table on page load

    Ok lets start.

    Im working on a page that has this "loading effect." As the page loads, the content of the page is hidden and there is this text/image that is visible to say to the viewer that the page is still loading. The image/text will disappear as page completely loads everything, and the content will be visible.

    This effect is easy to code but my problem is... I can only add javascripts and css to the template. I could not insert any layer ID or even modify any tag within the template. So, I need to work on the Javascript and CSS to be inserted so that I could modify the looks and effects of the page.

    Here is what I did...

    Since the entire page is inside one table... this is what I did.
    Code:
    <STYLE type=text/css>
    table, td { 
    background-color: transparent;
    display: none
    }
    </STYLE>
    Nevermind the background-color... lets concentrate on the topic. I made the table unseen by default so that as the visitor enters the page... he/she could see nothing.

    Then I added this script for the loading effect...
    Code:
    <script language="JavaScript">
    function load(){
    hide('ld')
    }
    
    function show(name){
    document.all[name].style.visibility='visible'}
    function hide(name){
    document.all[name].style.visibility='hidden'}
    
    window.onload = load;
    </script>
    
    <div id="ld" style="visibility: visible">LOADING.. please wait.</div>
    So, my problem is... how to make the table to show again as the page loads? Since I made the table property into hidden using CSS.... how could I make it visible again using JS so that I could include it with the load function?

    Thank you in advance!
    Last edited by pharma; 06-12-2004 at 12:10 PM.
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try using: <body onload="show(name)"....

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, you're not getting me.

    Ive got no problem with the onload thing. If you will take a look with my codes, what I am asking is how to make the table visible again using JS. I made the table hidden using CSS and now, I want to make it appear using JS without using any ID.

    Another thing. I could not change the tags/codes in the page. All I can do is add more.... so changing the BODY tag is impossible.
    Last edited by pharma; 06-12-2004 at 06:01 PM.
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I would say that you are not getting me. You are hiding the table on window onload and you need to fire your show function after your page has loaded. The easiest way to do that is with body.onload....

    If you can not change any of the page codes, I would say you have other problems, like the page you are waiting to load doesn't belong to you. Either way, you havent provided enough code to adequately describe your problem.

    Besides, your use of document.all is IE proprietary and therefore not cross-browser compatable.

  • #5
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What Im hiding on the window onload is the "loading... please wait" text. As I hide that text.. I want the entire content in the hidden table to show up.

    So... It should be something like this...

    function load(){
    hide('ld')
    show('table ID here')
    }


    But then, the table im referring to does not have any ID. So Im only just relying on the CSS for the table property.


    What should I do about that cross-browser thing?

    Anyway, does the body.onload works? Hehe.. coz I learned from a tutorial that I should use the window.onload
    Last edited by pharma; 06-13-2004 at 06:08 AM.
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can get to the table thru the DOM without using an ID but you still have not provided your codes which include the table so someone can see what you are doing. And quite frankly, so far it doesn't make sense to me. However, here is an example of using the DOM to get to the table.

    Code:
    <BASE HREF="http://strangebutuntrue.tripod.com/images/">
    
    <style type="text/css">
     <!--
      table{ background-color: transparent; 
             display: none;
      }
     -->
    </style>
    
    <script type="text/javascript">
     <!--//
      function show(){
       var tables = document.getElementsByTagName('table');
        for(var i=0; i<tables.length;i++){
         tables[i].style.display = 'block';
        }
      }  
     //-->
    </script>
    </head>
    
    <body>
    <table><tr><td>
    <img src="monkey.gif" onload="show()">
    </td></tr></table>
    Good Luck....

  • #7
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok... let me clear everything out..

    Here is the complete code...

    Code:
    <script language="JavaScript">
    function load(){
    hide('ld')
    }
    
    function show(name){
    document.all[name].style.visibility='visible'}
    function hide(name){
    document.all[name].style.visibility='hidden'}
    
    window.onload = load;
    </script>
    
    <div id="ld" style="visibility: visible">LOADING.. please wait.</div>
    
    <STYLE type=text/css>
    table, td { 
    background-color: transparent;
    display: none
    }
    </STYLE>
    
    <body>
    <table>
    <tr><td>Hello! I am pharma, a codingforum poster.</td></tr>
    </table>

    So, as you could see.. the content of the table is not really relevant in my question.

    But then, I think this is the code I'm looking for...
    Code:
    <script type="text/javascript">
     <!--//
      function show(){
       var tables = document.getElementsByTagName('table');
        for(var i=0; i<tables.length;i++){
         tables[i].style.display = 'block';
        }
      }  
     //-->
    </script>
    Ill go try it out. Thanks!
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by pharma
    So, my problem is... how to make the table to show again as the page loads? Since I made the table property into hidden using CSS.... how could I make it visible again using JS so that I could include it with the load function?


    Quote Originally Posted by pharma
    So, as you could see.. the content of the table is not really relevant in my question.
    Ok, if you say so. But if I had to bet the farm, I would bet you are trying to load someone elses page into your document and trying to hide everything but a certain table. Which of course is moraly wrong.


  •  

    Posting Permissions

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