Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    Im looking for a tutorial on the jquery toggle for cross compatibility. I will be throwing this into VB and adding lists with VB txtboxes, rdbs, chks, and dropdowns. So i need to know how to do this with some code examples that will work across the board.

    Thanks!!

    i did find this:
    http://www.webdesignerwall.com/demo/jquery/

    this might work, unless you guys suggest anything better:
    http://www.sohtanaka.com/web-design/...uery-tutorial/
    http://web-kreation.com/index.php/tu...-mootools-1-2/


  2.  

  3. #2
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    no one?


  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    jQuery's pretty good for cross-browser compatibility. If you want something bulletproof, code it yourself. A toggle is easy.

    Code:
    var on = false;
    var inToggle = false;
    var toggle = function() {
        if (inToggle) return;
        inToggle = true;
        if (on) {
            // Turn it off
        } else {
            // Turn it on
        }
        inToggle = false;
        on = !on;
    }

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Now the display/hide logic is where it gets tricky.

    Code:
    var isNS = (document.layers) ? true : false;
    var isIE = (document.all) ? true : false;
    var isDOM = (document.getElementById) ? true : false;
    
    var getElement = function(id) {
        if (isDOM) {
            return document.getElementById(id);
        } else if (isIE) {
            return document.all[id];
        } else if (isNS) {
            return document.layers[id]
        }
    }
    Then you have to handle their different methods for changing the style of the object.

    [SIZE=11px]Of course, jQuery already handles cross-browser code very well. If you can tolerate how slow it is, you should stick with it.[/SIZE]

  6. #5
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    well i can get the jquery toggle to work on W3schools, however if i hit one button all the buttons open or colapse


  7. #6
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
    $("p").toggle("slow");
    });
    });
    </script>
    </head>
    <body>

    <button>Toggle</button>
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>

    <button>Toggle</button>
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>

    </html>

    i will go back and change the buttons for <ul>s and <p> with <li>s


  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    It's all about specificity. Wrap them and then use sibling selectors and it should work how you want it to.
    Code:
    <html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    $(this).siblings("p").toggle("slow");
                });
            });
        </script>
    </head>
    <body>
        <div>
            <button>Toggle</button>
            <p>This is a paragraph with little content.</p>
            <p>This is another small paragraph.</p>
        </div>
    
        <div>
            <button>Toggle</button>
            <p>This is a paragraph with little content.</p>
            <p>This is another small paragraph.</p>
        </div>
    </html>

  9. #8
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    you need to target the specific selectors you're looking for.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com