SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 73 of 73
  1. #51
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    Oh there is one last thing, how do I add css for the active slide number so it stands out from the inactive one?
    Well, in the mean-time you could add it to the updateActivePagerLink method, but I can't help but think that there may be a better solution.

    Code javascript:
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        $([$(pager), $('#pager')]).each(function() {
            ...

    A better way though may be to update the pagerAnchorBuilder method instead so that it can create both images and numbers, then to use CSS to disable the appearance of one or the other. That way, both #nav and #pager can then be referred to as being pagers in the cycle setup, and things automatically work as they should.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #52
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Well, in the mean-time you could add it to the updateActivePagerLink method, but I can't help but think that there may be a better solution.

    Code javascript:
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        $([$(pager), $('#pager')]).each(function() {
            ...
    I have added this code but I still cant see any class or id in firebug that I can add a:active to.

    What am I missing? You can see a link here

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    and here is how I have used your code

    Code:
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        $([$(pager), $('#pager')]).each(function() {
            console.log(clsName + '; ' + currSlide ); 
            $(this).children().removeClass('activeLI').filter(':eq('+currSlide+')').addClass('activeLI');
        });
    };

  3. #53
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    I have added this code but I still cant see any class or id in firebug that I can add a:active to.
    There isn't on the initial page load due to the updateActivePagerLink code running long before the numbered pager even exists.
    Once the image changes though, the class is there.

    You can solve that by, and this shouldn't come as much of a surprise, by creating the numbered pager section first before the updateActivePagerLink is run by the cycle plugin.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #54
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I add a current id selector for the current number slide?

  5. #55
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    How do I add a current id selector for the current number slide?
    There is already one that exists on the current number, but only after the slide has changed.

    To have it also appear when the page first loads, you need to create that numbered pager section first, before the cycle plugin uses the updateActivePagerLink function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #56
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can see the active li class for the thumbnail pager but I cant see anything for the numbered pager

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

  7. #57
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    I can see the active li class for the thumbnail pager but I cant see anything for the numbered pager

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo
    On that different page, you are not using the code that in post #52 you said you were using.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #58
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I already put it in, must have put it into the wrong copy

    Here it is again

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    still cant see anything on the selected number which I can mark with css as being selected.

  9. #59
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    still cant see anything on the selected number which I can mark with css as being selected.
    I see you have CSS for the activeLI in the #nav element, but what CSS are you using for the activeLI in the .pager element?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #60
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    firebug is not showing any activeLI class on any of the numbered anchors, what are you seeing that I am not?

  11. #61
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    firebug is not showing any activeLI class on any of the numbered anchors, what are you seeing that I am not?
    Set up a class for .pager activeLI and you will see it:

    Code css:
    }.pager activeLI {
        border: 1px solid black;
    }

    You've done something odd with the prev/next links by mixing them in with the pager, but that shouldn't be too tricky to resolve.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #62
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The slideshow also seems break when moving from the thumb nav to the number nav and back to the thumbs activeLI nav

  13. #63
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    The slideshow also seems break when moving from the thumb nav to the number nav and back to the thumbs activeLI nav
    There's also another problem, where you're misunderstood what to do.

    To have it also appear when the page first loads, you need to create that numbered pager section first, before the cycle plugin uses the updateActivePagerLink function.
    That does not mean to move the code throughout the page until it is visually above the other code.

    It means instead that the script that creates the numbered pager section needs to be executed first, before the cycle plugin executes the updateActivePagerLink method.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #64
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    There's also another problem, where you're misunderstood what to do.



    That does not mean to move the code throughout the page until it is visually above the other code.

    It means instead that the script that creates the numbered pager section needs to be executed first, before the cycle plugin executes the updateActivePagerLink method.
    How would I achieve this? with a conditional statement?

  15. #65
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    How would I achieve this? with a conditional statement?
    No, by understanding what the code is doing.

    Here's what you currently have:

    Code:
    $(function () {
        // pager handler, create tabs
    });
    
    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
        ...
    };
     
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        ...
    };
     
    $(function() {
        // init cycle
    });
    The parts in the $(function() { sections are inside callback functions, which are delayed until the page exists, which is required for those parts of the code to run properly.

    However, you also have updateActivePagerLink being defined twice. The first one will just be overwritten by the second, so you should completely remove that first one.

    What is normally done is for all of the jQuery code to be placed inside a single callback function, so what you need to have instead with your code is this:


    Code:
    $(function () {
        ... pagerHandler
        ... create tabs
    
        $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
            ...
        };
     
        ... init cycle code
    });
    After that, you need to add the CSS code so that you can see the effect that the activeLI is having on the numbered links, and to then reorganise the structure of that pager to fix a problem that the prev/next links are causing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #66
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry I am a little confused I cant see where in the code comments where it mentions anything about tabs?

  17. #67
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WavyDavy View Post
    I am sorry I am a little confused I cant see where in the code comments where it mentions anything about tabs?
    Pardon?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #68
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the code blocks in your previous post you mention create tabs.

    I cant see any function in the code on my page which does that.

  19. #69
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I'm becoming exhausted by trying to help you understand this.

    Not tabs, the numbered pager code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #70
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am so sorry paul I am not trying to give you a hard time, its been seven years since I last looked at javascript

  21. #71
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, I think I have it working now

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

  22. #72
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am almost there, I just have to try and figure out why the previous and next arrows are not updating the current slide number.

    JQuery Cycle Plugin - 'updateActivePagerLink' Demo

    This is the code I had
    Code:
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        $([$(pager), $('#pager')]).each(function() { 
        .........
        .........
    }:
    I changed it to this to try and fix the arrows but still not working, its not throwing up any syntax errors either so I am not sure where I went wrong
    Code:
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        $([$(pager), $('#pager, #prev, #next')]).each(function() { 
        .........
        .........
    }:

  23. #73
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would I have to create a whole new function to get the prev/next arrows to show the currently selected number


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
  •