Solved

jQuery conflict between responsive horizontal tabs and slideshow

Posted on 2013-11-25
5
322 Views
Last Modified: 2013-12-13
I have jQuery responsive horizontal tabs working here: http://sitedesyne.com/responsive_tabs/index.html

And I have jQuery responsive slideshow working here: http://sitedesyne.com/responsive_tabs/slideshow.html

However, when I try to put the slideshow within the first tab, apparently there is a conflict or unknown issue and neither will work.
http://www.sitedesyne.com/responsive_tabs/wbca_tabs.html

Any help is greatly appreciated.
0
Comment
Question by:Elizabeth2
  • 4
5 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 125 total points
ID: 39676857
I problem that I see is that you're initializing the slider like: $('#banner-fade')
But there's no div with that ID on the page.

I think you forgot to set the ID on it.

Fixing this issue should do the trick
0
 

Author Comment

by:Elizabeth2
ID: 39685893
Oh, ok, thank you. I'll check that out and get back to you asap.
0
 

Author Comment

by:Elizabeth2
ID: 39685945
Thank you for that help. I have the slideshow now appearing correctly in the first tab, however, now the other tabs do not work. Please see: www.sitedesyne.com/responsive_tabs/test_2_tabs_wbca.html.

Basically what I've tried to do, is to take one working feature (the slideshow) and another working feature (the tabs), and combine them into one, the slideshow within the tabs.

And,  I understand that they both are needing jQuery, and both came with calls to their own JS files, so I think each is using a different version of jQuery. I've tried using just one call to one jQuery source:        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

but then the slideshow stops working.

I did the same for the tabs, tried removing the call to it's jQuery source, and then the display broke. At least with the file, the display is correct.

I'm at a loss for how to fix this. It's so close.

Is there anything you see that can be done to fix this and make it work?

Thank you so much for your help.
0
 

Accepted Solution

by:
Elizabeth2 earned 0 total points
ID: 39705182
The tabs and the slideshow were purchased features, and I had no idea how to edit the code/javascript or HTML to fix the conflict between the two. I ended up using iFrames for the content in each of the tabs, so that solved the jQuery conflict. Since I did have a missing DIV that AlexCode discovered, that was partially helpful, but in the end, the iFrames did the trick.
0
 

Author Closing Comment

by:Elizabeth2
ID: 39716213
My solution...The tabs and the slideshow were purchased features, and I had no idea how to edit the code/javascript or HTML to fix the conflict between the two. I ended up using iFrames for the content in each of the tabs, so that solved the jQuery conflict. Since I did have a missing DIV that AlexCode discovered, that was partially helpful, but in the end, the iFrames did the trick.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now