SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show and hide div

    Dear All,
    I have an application where at the top I have a div id="title" for the title then in the midlle div id="map" I have the google map then bottom I have buttons div id="mainOption". So what I want is that I want another few div at the right. By default one of the div I will fill up with a combo box and and submit button. The problem I want the div only to be shown when I pressed the button at the bottom div. Below is my code but without the side div.


    PHP Code:
    <body onload="createMap()" onunload="GUnload()">
              <div id="title1" style="padding: 4px; overflow: auto; background-color: #8EB4E3;">
                  <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                        <td></td>
                        </tr>
                         
                        <tr>
                        <td>OUR SYSTEM</td><td width="11%" height="10"><div align="right"><img src="../fleet/images/logos/<?=$fleetID?>.png" width="100" height="50" /></div></td>
                        </tr>
                        </table>
            </div>
            <div id="map" style="width:100%; height:80%">Map goes here.</div>
            <div id="mainOptions" style="position:absolute; left: 10px; background-color: #8EB4E3;">
                            <table border="0" cellspacing="0" cellpadding="0">                                
                                    <tr>
                                      <td><img src="tracking.png" width="128" height="29" border="0" NAME="but1" onClick="change(this)" /></td>
                                    </tr> 
                             </table>
            </div>
        </body>

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,
    Have you tried this on jQuery? It should be easy. I actually had the same equation few weeks ago here check if an element is hidden in jquery

    here are the simple codes you could use

    to hide
    Code:
    $("#DIV_ID").hide();
    to show
    Code:
    $("#DIV_ID").show();
    basically if you would like to trigger a show or hide event from a click of a button, you can do something like this;

    Code:
    $("#BUTTON_ID").click(function(){
         $("#DIV_ID").show();
    });
    if you would like to interchange the effects on the same button, you can use the is:hidden selector to check whether an element is hidden or not and perform your action based on the output of your is:hidden function

    something like this

    Code:
    $("#BUTTON_ID").click(function(){
         if($("#DIV_ID").is(":hidden")){
              $("#DIV_ID").show();
         }
         else{
              $("#DIV_ID").hide();
         }
    });
    you can also add some simple animations while hiding or showing your divs. these includes slideUp(), slideDown(), fadeIn(), fadeOut() among others.

    this is how to apply simple animation on your code
    Code:
    $("#BUTTON_ID").click(function(){
         if($("#DIV_ID").is(":hidden")){
              $("#DIV_ID").fadeIn("slow");
         }
         else{
              $("#DIV_ID").fadeOut("slow");
         }
    });
    References:
    http://jquery.com/
    http://api.jquery.com/show/
    http://api.jquery.com/hide/

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,830
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The plain JavaScript commands (without the huge JQuery library) are about as much code as that. It's only if you want to start adding fadein/out or other animations that you would even consider adding jQuery to perform that task.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also just use the toggle(), if you truly need a library. But Stephen is right, you can accomplish the same using basic JS with less overhead.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Funktify,
    Do you have the example of the toggle() then I can compare it with jQuery? Thank you.


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
  •