locked
Hide/Show table on click? RRS feed

  • Question

  • How do I add a simple table listing to a page with Expression Web, and "onclick" expand or collapse it?? Many thanks if you know a script that will do this!
    Saturday, March 20, 2010 3:51 AM

Answers

  • Lee,

    You have some other problems with your page. There are a number of errors with your CSS. Open the page with Firefox and go to the menu:

    Tools -> Error Console. Then hit the clear button and use the blue circular arrow on the main browser window to refresh your page once more. Now you will see a list of errors your page is throwing.

    For one thing you have a <style>**code**</style> section in the body of your document. That is not allowed. Move it to the head. Read the errors in Firefox and correct them.

    As far as opening with the table closed, I will change my source on my example page so that the css for the class ="hideable" is display="none" and the button label at open is Show.

    In the mean time please fix the css problems in you page and we will be in touch.

     

    Edit:OK, my example page has been change to open closed. Get rid of that three lines of javascript at the bottom of your page that you most recently added, change the name on the button, and add in your style section:

    .hideable{
    display:none;
    }

     

    http://php-insite.com/javascriptExamples/displayVisibility.html

    • Marked as answer by Lee Hintz Monday, March 22, 2010 9:30 PM
    Monday, March 22, 2010 5:19 PM

All replies

  • <!DOCTYPE stuff/>
    <html>
    <head>
    <meta stuff/>
    <!-- head stuff -->
    <script type="text/javascript">
            function tableHide(){ document.getElementById("hintzTable").display = "none";}
            function tableShow(){document.getElementById("hintzTable").display = "block";}
    </script>
    </head>
    <body>
    <table id="hintzTable">
          <tr><td>Hello World</td></tr>
    </table>
    <button onclick="tableShow()">Show Table</button>
    <button onclick="tableHide()">Hide Table</button>
    </body>
    </html>
    Saturday, March 20, 2010 4:04 AM
  • Hi and thanks for your help!

    I have tried the above code and It doesn't hide the table. Maybe you can see what I have done wrong. The code is below:

    Thanks again!

    Lee

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>RCC News &amp; Events RCC Ready to Help</title>
    <script type="text/javascript">
    		function tableHide(){document.getElementById("hintzTable").display = "none";}
    		function tableShow(){document.getElementById("hintzTable").display = "block";}
    </script>
    </head>
    
    <body>
    <table id="hintzTable">
          <tr><td>Hello World</td></tr>
    </table>
    <button onclick="tableShow()">Show Table</button>
    <button onclick="tableHide()">Hide Table</button>
    </body>
    
    </html>
    
    Saturday, March 20, 2010 3:54 PM
  • One thing to check out is the jQuery library.  Will offer more options and an easier framework to work with for what you're trying to accomplish.

    jQuery:

    http://jquery.com/

    Look at the sample code on the homepage.  Should be easy enough to adapt that to what you want (hint: use the toggle method).


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 4:15 PM
  • Yes, I'm sorry I made an error in the code I gave you. This time I loaded up in EW and tested it and it will work. The attribute that need changing is the "style" and I left that out. Add in two places as in:

     

            function tableShow(){
                document.getElementById("hintzTable").style .display = "none";
            }

     

    and

     

            function tableHide(){
                document.getElementById("hintzTable").style .display = "none";
            }

    Saturday, March 20, 2010 5:01 PM
  • One thing to check out is the jQuery library.  Will offer more options and an easier framework to work with for what you're trying to accomplish.

    jQuery:

    http://jquery.com/

    Look at the sample code on the homepage.  Should be easy enough to adapt that to what you want (hint: use the toggle method).


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign


    Chris,

     

    As much as we love JQuery I think it is better for Grass-Hooper to study pure JavaScript for a while. To use jQuery I think you should have at least a cursory understanding of closers.

    Saturday, March 20, 2010 5:05 PM
  • I put up an example of the working code and did it with both the display="none" and the visibility="hidden" nameValue pairs. We had a discussion about the effects of those properties in a recent thread here.

     

    http://php-insite.com/index.php?content=displayVisibility

    Saturday, March 20, 2010 6:05 PM
  • jQuery is easier to use then writing, or using, Javascript wihout a framework.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 6:17 PM
  • Here's a Sample:

    http://veign.com/preview/jquery/index.htm

    Using this JS code:

     

    $("a#toggle_table").toggle(
    	function () {
    		$("div#table_data").slideUp("slow");
    	},
    	function () {
    		$("div#table_data").slideDown("slow");
    	}
    );

     

    The code makes much more sense when you look at, is simple to create, produces a much better effect, is built on a solid framework that handles issues for you and give the OP a foundation to do even more.

     


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 6:28 PM
  • I respectfully disagree. There is a lot more abstraction going on in that code than there is in the simple JavaScript version. I really beleive that if a person starts copying jQuery before they understand the DOM in it's essential form, and JavaScript, that the new developer will not go very far.
    Saturday, March 20, 2010 6:48 PM
  • Using a Framework to obfuscate the underpinnings of more complex tasks is a common development tactic and one that is almost universally preferred. For example, a developer of Windows or Web applications could spend years learning memory management, Windows APIs, and other advanced topics or just use the .NET Framework and let the framework handle the heavy lifting.

    I agree with Chris here. Using jQuery is going to be much easier, even for new users. That's why it was created!

    Jim

     

    Saturday, March 20, 2010 7:19 PM
    Moderator
  • Hi again, thanks so much for your help and prompt respnses! I have one final request: How can I have the area to be hidden (bottom half of the table), be hidden when the page opens, and to "view all" of the table, they would click or toggle the Show function button? Thanks again!!  
    Saturday, March 20, 2010 7:22 PM
  • I don't argue with easy. jQuery is no doubt easier in most cases. But I still maintain that a jQuery user who first learned the DOM and javascript will ultimately be a much better jQuery developer than one who jump directly into using jQuery. 
    Saturday, March 20, 2010 7:24 PM
  • I don't argue with easy. jQuery is no doubt easier in most cases. But I still maintain that a jQuery user who first learned the DOM and javascript will ultimately be a much better jQuery developer than one who jumps directly into using jQuery.

     

    Have a look at my gallery scroll: http://php-insite.com/index.php?content=galleryScroll

    It uses jQuery heavily yet it is still about 50% bare metal javaScript & DOM. Can't escape knowing javascript.

     

    Saturday, March 20, 2010 7:24 PM
  • You haven't said which way you went.  What did you end up implementing?
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 7:33 PM
  • Saying 50% like its a lot when the code you're referring to takes up 1.5 lines.

     

    I have numerous examples, which I consider professional level, that don't go beyond jQuery.

    That's not the point, the point is its better to learn a way that tied to a framework, that does all the heavy lifting for you, then re-inventing the wheel.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 7:43 PM
  • The code I was referring to takes 54 lines of Javascript. Take another look:

     

    http://php-insite.com/phpExamples/galleryResponder.php

     

     

    Saturday, March 20, 2010 7:50 PM
  • That's not the point, the point is its better to learn a way that tied to a framework, that does all the heavy lifting for you, then re-inventing the wheel.



    That is just like saying it is easy to learn to run by riding in a car because you go faster.
    Saturday, March 20, 2010 7:53 PM
  • The code, I suspect, came from a jQuery plugin which means the user would have had to know 0 code beyond jQuery.  If its not using a plugin then there are 100's of jQuery plugins to produce the same effect that will require the user to go no further then a few lines of jQuery code.

    You're trying to introduce a red-herring into the discussion.  Its like saying look jQuery is 1000's of line of Javascript code therefore you need to know how to create the framework yourself.

    I'm done...


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 7:55 PM
  • The code, I suspect, came from a jQuery plugin which means the user would have had to know 0 code beyond jQuery.  If its not using a plugin then there are 100's of jQuery plugins to produce the same effect that will require the user to go no further then a few lines of jQuery code.

     

    That code did not come from a jQuery plugin. You will not find any plug in to do what that page does. It is reading the current contents of a database table and displaying a set of randomly selected images pointed to by the table. There are currently 2500 images indexed in the table but that changes all the time. If someone updates the image gallery then it's photos would be included in the scroll without the page being refreshed.

    Saturday, March 20, 2010 8:03 PM
  • You're kidding right?  Do you even believe that comparison....too funny.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Saturday, March 20, 2010 8:07 PM
  • Hi again, thanks so much for your help and prompt respnses! I have one final request: How can I have the area to be hidden (bottom half of the table), be hidden when the page opens, and to "view all" of the table, they would click or toggle the Show function button? Thanks again!!  


    Lee, here is a link to an example that will add and remove parts of a table. The last button will add or subtract rows with a class="hideable". You can see the source easily by using the "View Source" menu item on your browser. This uses pure JavaScript and yes it would have been much easier to do it in jQuery. For what it's worth to you, here it is: 

    http://php-insite.com/index.php?content=displayVisibility

    It's not so easy to find the page source with that link. Easier here:

    http://php-insite.com/javascriptExamples/displayVisibility.html

     

     

    Saturday, March 20, 2010 11:19 PM
  • Hi Time Bandit,

    Thank you so much. That looks like what I want to do. I will give it a try and let you know tomorrow.

     

    Lee

    Sunday, March 21, 2010 12:32 AM
  • Hi again TB,

    Just one more bit of help needed. The code is working, but not exactly the way I want it to. When the page opens, the table is fully open and the button says Close. (I have now changed the button text to read "view all"). What I need is for the page to open with the table partially closed and the button to allow them to click to ("view all") open it fully. Hopefully this is an easy fix. The page in question can be seen here: http://www.artgals.com/robeson_edu/default_workcopy8.htm Many thanks!!

     

    Lee Hintz

    Monday, March 22, 2010 5:56 AM
  • Hi again TB,

    Just one more bit of help needed. The code is working, but not exactly the way I want it to. When the page opens, the table is fully open and the button says Close. (I have now changed the button text to read "view all"). What I need is for the page to open with the table partially closed and the button to allow them to click to ("view all") open it fully. Hopefully this is an easy fix. The page in question can be seen here: http://www.artgals.com/robeson_edu/default_workcopy8.htm Many thanks!!

     

    Lee Hintz

    Monday, March 22, 2010 5:58 AM
  • Lee, I am in the middle of Battle Star Galactica for the next 2 hours and don't have time to look at your example. However I did accompish exactly what you are asking in my sample code by calling the close function just before the end of the document </body>. That code was:

     

    <script type="text/javascript">
        tableHideX(); // puts it in the row initial state.   
    </script>

    </body> // add here

     

    This needs to happen after the entire document is loaded.

    Edit: I took a look at your code, and if you call with the code I listed above it should open up in the closed form. Also the first four functions are not need for your application. Those are:

    		function tableHide(){
    document.getElementById("hintzTable").style.display = "none";
    }
    function tableShow(){
    document.getElementById("hintzTable").style.display = "block";
    }
    function tableHideV(){
    document.getElementById("hintzTable2").style.visibility = "hidden";
    }
    function tableShowV(){
    document.getElementById("hintzTable2").style.visibility = "visible";
    }

     

     

     

    Monday, March 22, 2010 6:03 AM
  • Hi TB,

    I hope that Battle Star Gallactica went well! I play in a multi-player world called "URU Live".

    I was hoping that you could take another look at my code, (li 86-105, li 416-418), because the page is still opening in the fully-open state, instead of the closed state, showing the "view more" button text.

     http://www.artgals.com/robeson_edu/default_workcopy8.htm 

    Many thanks!

     

    Lee Hintz

    Monday, March 22, 2010 3:25 PM
  • Lee,

    You have some other problems with your page. There are a number of errors with your CSS. Open the page with Firefox and go to the menu:

    Tools -> Error Console. Then hit the clear button and use the blue circular arrow on the main browser window to refresh your page once more. Now you will see a list of errors your page is throwing.

    For one thing you have a <style>**code**</style> section in the body of your document. That is not allowed. Move it to the head. Read the errors in Firefox and correct them.

    As far as opening with the table closed, I will change my source on my example page so that the css for the class ="hideable" is display="none" and the button label at open is Show.

    In the mean time please fix the css problems in you page and we will be in touch.

     

    Edit:OK, my example page has been change to open closed. Get rid of that three lines of javascript at the bottom of your page that you most recently added, change the name on the button, and add in your style section:

    .hideable{
    display:none;
    }

     

    http://php-insite.com/javascriptExamples/displayVisibility.html

    • Marked as answer by Lee Hintz Monday, March 22, 2010 9:30 PM
    Monday, March 22, 2010 5:19 PM
  • Hi TB,

     

    It is working now and looks good in IE8 browser.

    I inherited this web site from other people who originally designed the site. I was just asked to add a drop-down menu, image rotator and add the table drop effect.

    The vast majority of the errors in Firefox were due to 8 images that are rotating in the image rotator software. It is repeating the errors indefinately. I will fix the other 6 errors in the top of the error log, because Firefox is the only browser that doesn't display the page correctly. It looks good in IE, Safari and Chrome.

    Thanks a million for you help!! I didn't realize how good this forum was, but I do now.

     

    Lee Hintz

    • Marked as answer by Lee Hintz Monday, March 22, 2010 7:37 PM
    • Unmarked as answer by Lee Hintz Monday, March 22, 2010 9:30 PM
    Monday, March 22, 2010 7:37 PM
  • Lee, you seem to have the wrong idea about the "Mark as Answer" thing. It is appropriate for you to mark as answer the reply(s) of the person who resolved your issue , not your own response. That way he receives acknowledgement for the time (fairly significant in this case) that he put in to help you, and later searchers of the forum can locate the actual answer(s), not your response to the solution. It is good forum etiquette to do so, as well as good practice to further the usefulness of the forum. Just sayin'...

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Monday, March 22, 2010 7:52 PM
  • Thanks, I fixed it!

     

    Lee Hintz

    Monday, March 22, 2010 9:31 PM