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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    javascript to jquery

    Hi,

    Can anyone help me on converting this code to jquery:



    Code:
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    function showonlyone(thechosenone) {
    var noticecontent = document.getElementsByTagName("div");
    for(var x=1; x < noticecontent.length; x++) {
    name = noticecontent[x].getAttribute("name");
    if (name == 'noticecontent') {
    if (noticecontent[x].id == thechosenone) {
    noticecontent[x].style.display = 'block';
    }
    else {
    noticecontent[x].style.display = 'none';
    }
    }
    }
    }
    function showall(id) {
     showall.ud=showall.ud||false;
     var i=1;
     while (document.getElementById(id+i)){
      document.getElementById(id+i).style.display=showall.ud?'block':'none';
      i++;
     }
     showall.ud=!showall.ud;
    }
    </script>
    
    </head>
    <body>
    <center>
    <div id="parentdiv" >
    <div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div>
    <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
    <div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
    <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
    <div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
    <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
    <div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
    </div>
    </center>
    </body>
    </html>

    thanks

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Code:
    var ud = false;
    function showonlyone(thechosenone) {
       $('.noticecontent').hide();
       $('#' + thechosenone).show();
    }
    
    function showall() {
       if(ud) {
          $('.noticecontent').show();
       } else {
          $('.noticecontent').hide();
       }
       ud = !ud;
    }
    
    
    HTML:
    <center>
    <div id="parentdiv" >
    <div id="expandall" onmouseup="showall()" >OPEN/CLOSE ALL</div>
    <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
    <div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
    <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
    <div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
    <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
    <div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
    </div>
    </center>

  • Users who have thanked devnull69 for this post:

    qaa (07-20-2011)

  • #3
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    id="id1news"
    id="id2news"
    id="id3news"

    if i have this id created dynamicly via server, how can i set the script to this?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I don't understand ... id's for what? Can you show the HTML please?

  • #5
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    the problem is:

    i give information via sql server and those are the ID's that sql create automatic i need to know if it is possible to use them with the jquery script

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You can use any id you want as long as they don't start with a numeric character

  • Users who have thanked devnull69 for this post:

    qaa (07-22-2011)

  • #7
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks



    how can i change this to jquery

    Code:
            var notic = document.getElementById(thechosenone);
            if (notic.style.display == "none") {
                notic.style.display = "inline"
            }
            else {
                //if (notic.style.display == "inline") {
                    notic.style.display = "none"
                //}
            }


    this is working on click a button is possible to when this button is clicked it change to other buttion

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Code:
    var myElement = $('#' + thechosenone);
    if(myElement.css('display') == "none") {
       myElement.css('display', 'inline');
    } else {
       myElement.css('display', 'none');
    }

  • Users who have thanked devnull69 for this post:

    qaa (07-22-2011)

  • #9
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    how can i show only 1 new at a time?

    like if one is open when i click on other the opened is closed

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You should do that with classes. First of all you give all your elements the same class (let's say "myelements"). You add a class (let's say "active") to the active element and remove it if another element becomes active. In CSS you can set display to "block" or "inline" for the active class and initially to "none" for the elements using style="display:none"

    Something in the lines of (jQuery)
    Code:
    $('.myelements').removeClass('active');
    $('#' + thechosenone).addClass('active');
    You can even react on the active state programmatically
    Code:
    if($('#' + thechosenone).hasClass('active')) {...}

  • #11
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    didn't understand what you mean :S

  • #12
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    how can i show all or hide all?

  • #13
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    CSS:

    Code:
    #idname {display:none;}
    jQuery
    Code:
    $('#idname').css('display' : 'none');
    Not 100% on the jQuery whether or not .css should be .attr, but when I've done it before i've used .css

    Hope this is of some help to you!

  • #14
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    how can i change image like:

    image click show hiden div and then change image

  • #15
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Can you print screen it, I don't understand what you mean.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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