SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 74
  1. #26
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <ul class= id="tabnav">
    <li><a href="#tab1">Popular</a></li>
    <li><a href="#tab2">Active Posts</a></li>
    <li><a href="#tab3">Recent</a></li>
    <li class="tabs-selected"><a href="#tab3">Recent</a></li>
    etc
    etc
    </ul>

    Add as you see above a class called tab-selected and style that for when you select the tab? And the non-selected tab is when it's not selected.

    The jquery dynamically adds a class of "tabs-selected" to the currently clicked tab as shown below.
    I don't understand what you mean ?
    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
    I'm going to do that, don't worry Hide the browser text you mean, I was going to eliminate it from the HTML completely.

    Why are you putting different margins on one tab content only? Surely all content should be in the same place?
    I was going to do each one individually but now you mentioned that I should size the container, the container being id=tabnav correct ?

  2. #27
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Paul means that Javascript inserts the class .tabs-selected to your li element dynamically, meaning you don't need to add it to your HTML because jQuery is appending that class to your existing markup.

    You can style .tabs-selected within your CSS stylesheet just like every other element.

    The container for your tabs is #tabwrap.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #28
    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 understand, there is a problem I can't load jQuery to position one of the tabs I've finished as my connection is preventing it unless there is another way ?

  4. #29
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you mean you want to load the jQuery library locally without an internet connection rather than hotlinking from googleapis, then simply download the file from there and point your link that instead.

  5. #30
    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 still don't know why I can't see my tabs to position.

  6. #31
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I don't understand the question? You can't see your tabs to what position? Are we still talking about jQuery?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #32
    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 can't see my tabs to position them with jQuery.

  8. #33
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Do you have the jQuery file properly linked to in your document? Otherwise it won't work.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #34
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup

  10. #35
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Is it the bg_sidebar background image you're missing? It's not at the URL you've specified.

    .bg_sidebar {
    background-image: url(images/sidebar.png); /* not at this URL */
    height: 308px;
    margin: 145px 0 65px 52px;
    width: 292px;
    }

    Can you refresh my memory as to why you need a .bg_sidebar div rather than applying the background to #sidebar ?

    Also, do you use Firebug? It makes tracking and fixing this kind of stuff very simple.

  11. #36
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not the background image, the dynamic tabs I don't see to position.

    Can you refresh my memory as to why you need a .bg_sidebar div rather than applying the background to #sidebar ?
    I think I see what you mean, merge them both together ? And get rid of the class bg.sidebar!

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Not the background image, the dynamic tabs I don't see to position.
    lol - We've asked about 4 times now but we don't know what you mean so repeating the same phrase back to us isn't making it any clearer to us

    Can you elaborate a bit more as we dont know what you mean by "the dynamic tabs I don't see to position". It just doesn't make sense and we can't get a grasp on what you want.

    Why do you have to see them before you can position them?

    Just apply the css to the elements concerned as per normal but use the "tabs-selected" class for the current item as mentioned before.

    You won't actually see html like this in your document.
    Code:
    <li class="tabs-selected"><a  href="#tab3">Recent</a></li>
    The class is added dynamically so your normal html will look like this at first:

    Code:
    <li><a  href="#tab3">Recent</a></li>
    You will only see the html with dynamic classes added if you use a web developer tool and get it to print out the "generated source" of the document.

    However I don't think that's what you are talking about.

  13. #38
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I understand that the jQuery script add that line of code to the HTML automatically without me having to enter it What I mean is the tabs that I created with the on/off state in one image I can't see them so that I know where to position them exactly ?

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Just run the code and the current tab will be selected by jquery and it will show. You can then click the other tabs to see where they appear. If you've placed the normal tab correctly then the active tab should also be correct automatically assuming you made the images correctly.

    You'll have to put it live so we can see what's going on.

  15. #40
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Run what code ? I have everything setup local and I also have the copy live(beta) and I can't see it to position it, and my paths are correct as well.

  16. #41
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'm not really even participating in this thread and it's frustrating the hell out of me.

  17. #42
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you turn off Javascript, you will see exactly where your three tabs are positioned. Is that what you mean?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  18. #43
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Is this the URL we're supposed to be working with? Anyone?

    http://www.thecreativesheep.ca/page8_adjust/home3.htm

    If so, there's no #tabnav element present in the markup for jQuery to get it's teeth into. e.g. something like this should be within the #tabwrap div:

    <ul id="tabnav">
    <li><a href="#tab1">Link1</a></li>
    <li><a href="#tab2">Link2</a></li>
    <li><a href="#tab3">Link3</a></li>
    </ul>

  19. #44
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My connection is tanking on me tonight, if someone can notify me if the page is loading with the tabs showing so I can try this locally in the AM. I inserted the code as suggested I noticed I was styling the code based on Paul's jQuery Tabs suggestion, oops

  20. #45
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The page shows a javascript error. Looks like you have incorrect paths for

    jquery-1.4.2.min.js
    fading-tabs.js

  21. #46
    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 fixed the path for the tabs and they are not showing up as well the font for "Title" should show the correct font as I had hoped that the conversion for all browsers to load a specific would work as mentioned by Font Squirrel but it doesn't appear as it is

  22. #47
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Please confirm whether your updated page is

    http://www.thecreativesheep.ca/page8_adjust/home3.htm

    because the path is still incorrect there:

    Code:
    <script type="text/javascript" src="images/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="images/fading-tabs.js"></script>
    i.e. the js files are not in the images directory. I believe them to be in the same directory as the html file, so the paths should be

    Code:
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="fading-tabs.js"></script>
    ...the font for "Title" should show the correct font...
    Hold your horses! How about sorting out the tabs first and leaving @font-face fixes for a separate topic?

  23. #48
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hold your horses! How about sorting out the tabs first and leaving @font-face fixes for a separate topic?
    OK, after the tab issue is resolved

    Now the paths should be fixed, but the tabs continue to not load on my connection for me to align properly.

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You still have the page showing jquery in the images folder but it doesn't seem to be there.

    It seems to have gone missing from the other folder now as well (which is where it was before).

  25. #50
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have a hunch they are in an folder named "images" in the root.

    My vote is for their permanent home to be the "js" folder in the root along with styleswitcher.js and others. The path will then be:

    Code:
    <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/js/fading-tabs.js"></script>
    Last edited by Victorinox; Mar 21, 2010 at 12:31. Reason: new intelligence


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
  •