Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts

    jQuery beginner seeks advice

    Hi,

    I have been tweaking some code and css that uses jQuery - a featured content slider. However, there is one part that I can't get to work (although I know it's possible using jQuery).

    I'm trying to learn but my head hurts so wondered if any good samaritan could point me in the right direction...

    Basically I want to show the arrow (the one you see if you hover your mouse over each link) beside each block as it scrolls through each link without having to hover over it (although we keep the hover there as well)

    Also, what do I need to add to stop the script from scrolling once a user has placed their mouse into the main content area?

    Any help would really be appreciated

    Here's a link to the page: http://213.175.199.34/~coodesdi/test...er/index2.html

    Thanks, Jock
    Last edited by jockturner; 01-03-2012 at 02:38 PM.

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Try this:
    1. Change the initialisation code like follows:
      Code:
      $(document).ready(function(){
          $("#featured > ul").tabs({fx:{opacity: "toggle"}})
          .tabs("rotate", 5000, true)
          .bind("tabsshow", function(event, ui) {
              $("a.hover", ui.target).removeClass("hover");
              $(".ui-tabs-selected > a", ui.target).addClass("hover");
          })
          .find("a.first").addClass("hover");
          $(".ui-tabs-panel").hover(
              function() { $("#featured > ul").tabs("rotate", 0); },
              function() { $("#featured > ul").tabs("rotate", 5000, true); }
          );
      });
    2. Correct slightly CSS in the following way:
      Code:
      #featured li.ui-tabs-nav-item a:hover.first,#featured li.ui-tabs-nav-item a.hover.first{ 
      	background-image: url(1_active.png);
      }
      #featured li.ui-tabs-nav-item a:hover.second,#featured li.ui-tabs-nav-item a.hover.second{ 
      	background-image: url(2_active.png);
      }
      #featured li.ui-tabs-nav-item a:hover.third,#featured li.ui-tabs-nav-item a.hover.third{ 
      	background-image: url(3_active.png);
      }
      /* ... and so on up to eigth ... */
    I am still learning English

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Wow! It works - thank you, thank you.

    Just one minor tweak (don't know if it's possible) - can the synchronisation of the arrow and the changing picture be the same? Right now the arrow changes after the picture changes.

    Sorry to be picky!

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Sure. But as I understand it, the version of the UI widget you are using is somewhat out of date as compared with the latest version available at the official website… In fact, the latest API differs from the version you are using. =(
    Code:
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}})
        .tabs("rotate", 5000, true)
        .bind("tabsselect", function(event, el, ui) {
            $("a.hover", el.target).removeClass("hover");
            $(".ui-tabs-nav-item:eq(" + ui.index + ") > a", el.target).addClass("hover");
        })
        .find("a.first").addClass("hover");
        $(".ui-tabs-panel").hover(
            function() { $("#featured > ul").tabs("rotate", 0); },
            function() { $("#featured > ul").tabs("rotate", 5000, true); }
        );
    });
    I am still learning English

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I've made the change and all is working perfectly.

    Are you suggesting that I update the links to jQuery?

    Will this mess up what's been done?

    Is it wrong for me to be using an older version?

    PS: Thanks again!!

  • #6
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    It is always a good practice to keep the used libraries up to date. But unfortunately there is a risk that you will have to correct your scripts after update.
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    jockturner (01-03-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •