SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 74
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery & CSS Tabs

    I'm hoping I can get some help, I'm trying to get dynamic tabs as seen here for this I've been informed that it can be as simple as replacing the images.

    That is where I'm a little confused and not confident enough to tackle solo, I'm hoping someone could help ?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's a cool image. Follow these steps http://www.visibilityinherit.com/cod...ading-tabs.php and simply place the links were they go and the tabs (the content) in the stone.

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx. I will over look that page and update !

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the class=tabs-container you replace the color with the graphic background image ? What about the non-active tabs what do you do for them ? I can't get the style=#tabnav li to position down so that the text can (link) fit within the tabs, I'm also having problems getting style=tabone p to position into the tabs which once completed I'm assuming is the same procedure to position the other content for the tabs?

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: How do I get the content I want in each tab ? And why when I test it does the page just move to the bottom ?

    I've also fixed one of my issues but I still can't get the text Popular/Active Posts/Recent to position so they are on top of the other words that you see.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didn't give us a link to the page you were testing on.

    Anyway you will need to do something like this which is a very rough mock up cut from your image with no care taken. the example was based on the one here.

    The tabs need to be separated from your background image so that you have the on and off states in one image for each tab and then swap the background position (as shown in the demo). This will take quite a bit of graphic work to get it to all match up though because of the shadows and overlays etc.

    Then you will need to add a class on each list and use a unique image for each tab assuming that you are not going to use browser text. If you are using browser text then you can just use the method in the demo I put up.

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link is in message #5 where the words say link

    I have a ID for each list and I have text in place, but it won't position correctly take a look at the page you'll see what I've done. I understand that I'll have to cut the tabs out of the image, do you mean place the active and non-active tab in one image?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you are going to use an image replacement technique, then ok. If not, then it's a bit awkward because the text isn't the same width/height as the image text, and ..yeah lol.

    If you just want the text on top for image replacement, then on "#tabwrap" give that a 1px top padding to avoid margin collapse, and then on "#tabnav" give it..oh lets say 17px top margin?

    It's sorta .. awkward to place the text considering how hte image is sliced.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uhh I don't have any style named #tabwrap or #tabnav and when I create a style called #tabwrap and applying padding-top: 1px it doesn't solve the problem.

    What do you mean...
    It's sorta .. awkward to place the text considering how hte image is sliced

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I know you don't have a style for those elements. You gave those elements in the HTML an ID though .

    True the padding-top:1px doesn't do crap by itself..you need the top margin set on the other element.

    Reread my post. This is the CSS you should have
    Code:
    #tabnav{margin-top:17px;}
    #tabwrap{padding-top:1px;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright that worked. I hope Paul can give me the heads up regarding the images.
    That text that we just positioned that will work in conjunction with the jQuery tab system or in the end I'll have to change the text that me and Ryan fixed ?

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you're asking. You'd have to see the documentation to see how the Jquery tabs are even supposed to be set up . Some have you set up the HTML differently I'd assume.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some have you set up the HTML differently I'd assume.
    ???

  14. #14
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the jQuery Tabs I'm using...Paul

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I've given you the whole working code in post #6. You just need to create the images properly. Look at my images they are double images that swap states. You just need to make these properly and make then fit.

    I can't do more than that

  16. #16
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What confuses me is this code because referencing the jQuery tabs that I was going by which you can see in the link I posted...somewhere I don't see that code in that example ?

    html ul.tabs li.active, html ul.tabs li.active a:hover {
    background:url(images/tab.png)
    Just to recap the tabs active/non-active have to be together in one single graphic, just so I know and don't do it and find out I'm wrong What about the text that Ryan and I worked on is that alright where it is ?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assumed you would be making graphics for the tabs because the text is too small for browser text.

    You don't seem to have added any of the JS to make the tabs work. Where is the jquery js and what's going on here:

    Code:
    <!--[if lt IE 7]>
    <script type="text/javascript" src="js/iehover.js"></script>
    // fxSpeed can be slow, normal, or fast
    $(function() {$('#tabwrap').tabs({ fxFade: true, fxSpeed: 'slow' }); });
    
    <![endif]-->
    The code in bold looks like it was part of the tab function but why is it inside the IE conditional comment and why isn't it contained within a script element anyway?

    I gave you a working example of the tabs specifically for this reason that you would have all the code and all the files that you need to make this work. All you had to was create the graphics

    I suggest that when you make the tabs that you revise them slightly so that they don't overlap otherwise it will be very awkward.

    To recap you will need 3 sets of tabs that will look something like this except that yours will be done properly with the correct transparency and contain the text on them for each tab.

  18. #18
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my mistake for putting it in a conditional statement !
    I was right, in regards to the point that I had to put the on/off switch in one graphic, but is there something wrong with my current setup which was taken from that jQuery example site ? Or can I use what I currently have and just place the tab images where they should be, and I should remove the browser text that is one thing I wanted to know

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Oh my mistake for putting it in a conditional statement !
    I was right, in regards to the point that I had to put the on/off switch in one graphic, but is there something wrong with my current setup which was taken from that jQuery example site ? Or can I use what I currently have and just place the tab images where they should be, and I should remove the browser text that is one thing I wanted to know
    I'd need to see the page with the JS in place and in working order to see if it will work with the approach you have taken. The routine I used in my example handles the current tab automatically which is why I chose it because I don't like messing around with js.

    You can always hide the anchor text off-screen if you are to be using images or use an image replacement technique instead.

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've update the link you can take a look at it online, the changes I had applied were still local

  21. #21
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm going to add a harmony here, higher in the scale than Paul as he's located to the South of me.

    Where oh where's jQueeeeeeeery?

    i.e. You need to include a link to the jQuery library in your page. Paul, for example is using this:

    Code:
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    A good starting point may be to follow P's lead and get the Tabs running in a fresh page without any other distracting code, then do the customisation and then import it into your design. Well, this process tends to work for me anyway.

    Oh, and please include the link when you refer to it - it'll save us rummaging around in the topic to find it.

  22. #22
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    My link above has like 5 oh-so-simple steps to implement. If it doesn't click while following that tut, then it's not going to.

  23. #23
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where oh where's jQueeeeeeeery?
    Ohhh riiiightt

    Now ask my question again so no one has to piece previous question from what I had mentioned in the past few messages. That question is can I use the current setup and place the background tabs in a style sheet associated with this version of jQuery tabs, unlike the one Paul is using ?

    I know to eliminate the browser text from the tabs but is there a style sheet causing the narrow content box between tabs, it can be easily seen when you switch between tabs you'll see the words "active post" in a narrow white box.

  24. #24
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I know to eliminate the browser text from the tabs but is there a style sheet causing the narrow content box between tabs, it can be easily seen when you switch between tabs you'll see the words "active post" in a narrow white box.
    If you mean the white background behind the revealed content i.e. "Popular Stuff", "Active Posts Stuff" and "Recent Stuff", then it's due to this embedded style:

    .tabs-container {
    background:#fff; /* kills fadding in/out IE text bug */
    }

    It's 2am, and my concentration is fadding out, else I might have some alternative ideas for the IE fading text rendering problem. Meantime, Try Google.

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There is no cure for Ie's fading filter problem other than removing it.

    It doesn't look as though its needed in that example or I didn;t notice any ill effects by removing the white background.

    Now ask my question again so no one has to piece previous question from what I had mentioned in the past few messages. That question is can I use the current setup and place the background tabs in a style sheet associated with this version of jQuery tabs, unlike the one Paul is using ?
    You just style the tabs like any other tabs that would you do.

    The jquery dynamically adds a class of "tabs-selected" to the currently clicked tab as shown below.

    Code:
    <ul class="tabs-nav" id="tabnav">
     <li class=""><a href="#tab1">Popular</a></li>
     <li class=""><a href="#tab2">Active Posts</a></li>
     <li class="tabs-selected"><a href="#tab3">Recent</a></li>
    </ul>
    Therefore you should code the tabs as per normal but set up a class of .tabs-selected to style the tab in its active state. When the jquery runs the class gets added to the element and the styles you defined are then revealed.

    So if you had double images you would say something like:

    li.tabs-selected a {background-position:0 -13px}/* or whatever the dimension is required to show the over state of the tab */

    As I mentioned earlier it would be better if you spread the tabs out so they don't overlap and make life easier for us all

    You can hide the text with text-indent (although there are better methods ) but you will need to size the anchors to fill the space of course.

    Code:
    #tabnav li a {
        text-indent:-999em;
        float:left;
        width:75px;
        height:12px;
    }
    Why are you putting different margins on one tab content only? Surely all content should be in the same place?

    Code:
    #tabnav p {
        margin:0 0 0 21px;
    }
    Of course you would be better defining the size of the container rather than adding margins to each individual element.


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
  •