SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with simple, from scratch jQuery tabs (almost there)

    So I had this idea for tabs and I am almost there but not quite (I know there is jQuery UI, but I thought I would tinker anyway). The idea is to add a class to the content div when the corresponding menu/toolbar item is clicked to make it the top in in the stack. I was thinking there must be some way to increment the z-index (on each click of the menu/toolbar) via an operator (or something like that - not sure of the right terminology) or maybe some other even better approach...

    Here is what I have so far (any ideas as to how I can get this to behave as I am shooting for?):
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title></title>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
        </script>
    
        <script type="text/javascript">
            $(document).ready(function() {
                $('.curr-content-trigger').click(function() {
                    $('.content').addClass('curr-content');
                });
            });
        </script>
    
        <style type="text/css" media="screen">
            .content
            {
                background: red;
            }
            .curr-content
            {
                background: yellow;
                z-index: 999;
                display: block
            }
            .cont-content
            {
                position: relative;
            }
            .content
            {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="cont-app">
            <ul id="toolbar">
                <li><a href="#sect-1" class="curr-content-trigger">Section 1</a></li>
                <li><a href="#sect-2" class="curr-content-trigger">Section 2</a></li>
                <li><a href="#sect-3" class="curr-content-trigger">Section 3</a></li>
            </ul>
            <div class="cont-content">
                <div class="content" id="sect-1">
                    <h2>
                        Section 1</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
                <div class="content" id="sect-2">
                    <h2>
                        Section 2</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
                <div class="content" id="sect-3">
                    <h2>
                        Section 3</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
            </div>
        </div>
    </body>
    </html>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    That code will add the class to all elements with class 'content'.

    Because the href attribute of the clicked element is the id of the element you want to toggle it should be pretty straight foward.
    Code:
    $('.curr-content-trigger').click(function() {
        // inside here 'this' is the clicked element
        // remove current class
        $('.curr-content').removeClass('curr-content');
        // add current class
        $(this.attr('href')).addClass('curr-content');
    });
    Hope it helps,

  3. #3
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^Hey there...I really appreciate your help.

    Hope all is well with you!

    So I thought I was following you (I wrote this page at 3am when I had the idea), but I can't seem to get "this" to write in the new class and grab the associated ID.

    The below should work, no (please try the page)? What am I doing wrong? Syntax? Please fully enlighten me as apparently I need it !

    Any thoughts on my idea in the original post about somehow incrementing z-index?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title></title>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
        </script>
    
        <script type="text/javascript">
            $(document).ready(function() {
            $('.curr-content-trigger').click(function() {
                // inside here 'this' is the clicked element       
                // add current class
                $(this.attr('href')).addClass('curr-content');
            });
            });
        </script>
    
        <style type="text/css" media="screen">
            .content
            {
                background: red;
            }
            .curr-content
            {
                background: yellow;
                z-index: 999;
                display: block
            }
            .cont-content
            {
                position: relative;
            }
            .content
            {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="cont-app">
            <ul id="toolbar">
                <li><a href="#sect-1" class="curr-content-trigger">Section 1</a></li>
                <li><a href="#sect-2" class="curr-content-trigger">Section 2</a></li>
                <li><a href="#sect-3" class="curr-content-trigger">Section 3</a></li>
            </ul>
            <div class="cont-content">
                <div class="content" id="sect-1">
                    <h2>
                        Section 1</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
                <div class="content" id="sect-2">
                    <h2>
                        Section 2</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
                <div class="content" id="sect-3">
                    <h2>
                        Section 3</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
            </div>
        </div>
    </body>
    </html>

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Oh yes, I'm doing just fine and dandy thanks. Sorry, I assumed this was the jQuery extended element so would have the attr function. it just needs to be wrapped in a dollar function to get that extra goodness.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title></title>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
        </script>
    
        <script type="text/javascript">
            $(document).ready(function() {
    	        $('.curr-content-trigger').click(function() {
    	  				$('.curr-content').removeClass('curr-content');
    	          $($(this).attr('href')).addClass('curr-content');
    	        });
            });
        </script>
    
        <style type="text/css" media="screen">
            .content
            {
                background: red;
            }
            .curr-content
            {
                background: yellow;
                z-index: 999;
                display: block
            }
            .cont-content
            {
                position: relative;
            }
            .content
            {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="cont-app">
            <ul id="toolbar">
                <li><a href="#sect-1" class="curr-content-trigger">Section 1</a></li>
                <li><a href="#sect-2" class="curr-content-trigger">Section 2</a></li>
                <li><a href="#sect-3" class="curr-content-trigger">Section 3</a></li>
            </ul>
            <div class="cont-content">
                <div class="content curr-content" id="sect-1">
                    <h2>
                        Section 1</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
                <div class="content" id="sect-2">
                    <h2>
                        Section 2</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
                <div class="content" id="sect-3">
                    <h2>
                        Section 3</h2>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                        ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                        Mauris placerat eleifend leo.</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    I wouldn't recommend simply iterating the z-index - just assign the classes as you are and setup up your z-indexes there.

    All the best,

  5. #5
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^Sweet! So awesome how elegant and simple it reads when done and how nicely it works.

    Thanks so much for helping me flesh out and iron out this idea. I can envision lots of places where this could be useful - e.g. those where I don't need all the functionality and canned styling (and overhead) of the UI tabs...

    Best


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
  •