SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: disable div

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    disable div

    I have a table row with <div> surrounded.
    ......
    <div id="idx1">
    <tr>

    //html elements

    </tr>
    </div>


    <input type="button" value="enableDiv" onclick="toggleAlert()" />

    I want when page loads , <div> be disabled and when button clicked <div> enabled.


    How do I do it ? Can we do it using javascript ?

    Can JQuery be used here ?how?

  2. #2
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change your input to;

    Code:
    <input type="button" value="enableDiv" id="myButton" />
    Put this javascript in the page (will need <script> tags if you don't already have them);

    Code:
    $("#myButton").click(function() { 
        $("#idx1").toggle();
    });
    Should work (assuming you already have jQuery loaded).

  3. #3
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops, forgot that you wanted the <div> hidden to start with. Put this before the javascript I supplied;

    Code:
    $("#idx1").hide();

  4. #4
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternatively, to ensure that the div is hidden when the page first loads you can hide it using the css for your page. If you don't have css for the page you would need to place <style> tags around this codebyte.

    #idx1 {
    display: none;
    }

  5. #5
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by benzittlau View Post
    Alternatively, to ensure that the div is hidden when the page first loads you can hide it using the css for your page. If you don't have css for the page you would need to place <style> tags around this codebyte.

    #idx1 {
    display: none;
    }
    The problem with doing it this way is that if the client doesn't have javascript enabled, they can't make the element appear, and probably won't even realise that something is missing.


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
  •