Grow your CSS skills. Land your dream job.

jQuery Moving Tabs !

  • # January 1, 2013 at 7:56 am

    hi everyone,

    I’m trying to add this moving/sliding tab into my page.
    Here’s its demo page:
    http://www.queness.com/resources/html/movetab/index.html

    I’ve done everything to make it work but its not, take a look:
    http://www.tradeglobus.com/index2.php

    Can anyone point out what mistake I’m doing ?

    # January 1, 2013 at 10:22 am

    I see you have jQuery 1.3.2 linked directly above the code, but you also have jQuery 1.6.2 as your dependency for other plugins and functions on the site. There’s no need for the extra jQuery link. The plugin you’re using works with 1.8.2, so it will work with anything less (considering it was built on 1.3.2).

    Check this. This is the script being used with the latest jQuery, so no problems. It could be that you a have a conflict, regardless of defining noConflict in your code. It could be a CSS conflict, the classes are pretty common names such as “tabs”, “content” and “panel”.

    Check for absolute references to the code. :)

    # January 2, 2013 at 3:21 am

    Thanks for reply **James**

    Well, at first I used jQuery 1.8.3 but I changed it to the exact version which was used in its tutorial.
    Its working on both versions of jQuery on my local pc & even on a page where no jquery is being used.

    I understand it could be the CSS conflict, but I just tried to remove the noConflict code, & its working now…..but the jquery image slider has stopped working.

    So I guess there’s no problem with CSS.

    Any idea ?

    Thanks in advance bro :)

    # January 2, 2013 at 3:52 am

    Is this still a problem? It seems to be working to me.

    # January 2, 2013 at 4:02 am

    yes jamy, its working but only if I remove the noConflict code.
    then other jquery stuff stops working.

    its really confusing now :(

    # January 2, 2013 at 4:51 am

    You’re including 3 versions of jQuery, [never a good idea](http://css-plus.com/2010/03/6-steps-to-take-if-your-jquery-is-not-working/).

    change this:

    to this:

    # January 2, 2013 at 5:10 am

    I tried it but same results, cant get it to work without adding noConflict code.

    here’s the full code:

    # January 2, 2013 at 6:39 am

    Part of debugging is to fix things which may not actually be the problem. Before I can help I’ll need you to only include the latest version of jQuery. Also the page has 211 HTML errors. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tradeglobus.com%2Findex2.php&charset=%28detect+automatically%29&doctype=Inline&group=0

    # January 2, 2013 at 7:12 am

    ok bro, I’m doing this error correction & jquery version, then I’ll update you tomorrow.

    tell me one thing, should I include the same latest jQuery everywhere ?
    or should I just include the latest jquery once ?

    # January 2, 2013 at 7:45 am

    Include the latest jQuery once in the `` element. Usually you would include jQuery just before the closing body tag but due to the fact that you have scripts opening in random areas in the body it’s best to include it in the head.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".