jQuery interfering with Twitter bootstrap carousel - javascript

While creating a website using Twitter Bootstrap's carousel, it seems that some scripts are interfering from it auto-sliding when the website is loaded. But it works fine once you click one of the controls in the carousel. It then slides every 5 seconds, the default time.
I'd rather not post a jsfiddle because of the size, so the production website will have to do (not sure if this is against the rules - otherwise I'll delete it).
Now there are some plugins I'm using (Newsletter and Contact Form 7) which also include scripts from jQuery. I'm not sure how to implement the noconflict from jQuery, or if it will even help.
Can anyone spot the problem?

I got this working by saving a copy of your site to my local drive, I moved the bootstrap .js file to the bottom of the file right above </body> and called the carousel manually so it ends up looking like this
<script type="text/javascript" src="./PRO-Intermediair Your Next Step!_files/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel();
</script>
</body></html>
edit
I posted a copy so you can see http://tctel.com/pro/

Related

Jquery works on one page and doesn't work on another with the same code/links

I'm trying to make my website work, but there seems to be some annoying issue. Everything works on local machine, but once I upload it to the server, only some pages have jquery plugins working while others don't. Even as I use the same exact links to jquery script files on both pages. I changed permissions back and forth but it didn't help. I don't even know why is it happening.
And when it doesn't work, no jquery on this pages works at all.
Here is example a working page:
working jquery page
And not working one:
jquery doesn't work
You forgot to include :
//include from here see if this works or remove your script and copy from this path it will work
<script src="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/jquery.li-scroller.1.0.js"></script>
instead include jquery twice :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="jquery.js"></script>

jQuery tabs not working properly in Magento

I've been trying to create a set of tabs in Magento using the following plugin:
http://os.alfajango.com/easytabs/
After setting it all up, adding the HTML, CSS & javascript the tabs seem to not work correctly instead they sort of act like anchor points on the page.
I've added this to the header of the site:
<script type="text/javascript" src="/javascripts/jquery.hashchange.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.easytabs.min.js"></script>
And I believe all the files are in the correct place / linked to in the right way.
The jQuery isn't in the above because when I added it to the header there were loads of conflicts as I believe Magento already includes the jQuery library.
Here's an example of the tab so far:
http://bit.ly/1hT1Xa0
Thanks for any help :)
You have to invoke easytabs by adding
$('#tab-container').easytabs();
// try with no conflict if not working
jQuery.noConflict();
jQuery('#tab-container').easytabs();
see more details tab at demo site.

javascript conflict in Joomla

Can anyone help I am getting what seems to be conflicting Javascript in a Joomla site I am making. When the following scrip is added to the site I cannot add a listing in mosets tree
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
If i take this code out the listing works as it should in Mosets tree but the Slider and other items are effected on the home page
http://mybridespace.co.uk
I have tried no-conflict script but this doesn't seem to work well.
Any ideas would be appreciated.

Arrangement of javascripts in header file affecting functionality

I have a site where I use some jquery functionalities.
On the home page I used Nivo Slider plugin, while on another page I used a Lightbox effect.
In the arrangement of links to the script in my header.php file, I have the lightbox link under Nivo Slider link. Lightbox works but Nivo slider does not work. When I re-arrange, slider works but lightbox does not work.
In this situation LightBox works, but slider does not work
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Is this normal? How can I make both work at the same time.
My Homepage that has the slider is Here
Page that has lightbox is here
Thank you.
With lots of code from lots of places, some things stop working. One can not simply assume that adding little bits of code that individually work will work when integrated together. In this particular case, jQuery and Prototype are fighting.
This can be fixed by loading only one jQuery at the top, and then including this little snippet:
jQuery.noConflict();
Then jQuery no longer takes over the $ variable. (Your code will also need to account for this change by using jQuery rather than $, but all well-written plugins should interoperate decently with this change.)
After that, you should be able to include Prototype and your other plugins. In theory, anyways.
In practice, Prototype hooks some other things. In your particular case, it's hooking Array.​prototype.​reverse in a way that the jQuery plugins don't expect, and somehow, it's causing a stack overflow. I don't really know how to resolve Prototype's hijacking of that function without breaking one or the other, so you might just want to find a lightbox plugin that works with just jQuery.
jQuery is not available when you are trying to call it. You could try moving everything to the bottom of the body. Also worth noting that you are loading jQuery twice.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.min.js"></script>

Jquery code insert into WP HeadWay Page

Hi problem is to insert jquery code into WP Headway Page.
Short intro
I'm using Wordpress Headway theme manager and it consist of 5 posts.
I want to make jQuery Carousel with links to content (carousel works as WP plugin).
Headway has custom code section, tried to insert there.
Can someone elaborate how to insert jQuery script into single Headway Page.
I too thought this was a HeadWay issue, but it is a WordPress issue.
My solution was to add a JS in my "Child" theme folder and link to it
<script type="text/javascript" src="/wp-content/themes/childTheme/js/indexTabs.js"></script>
If you need to use another library like jQuery, just add it above the JS call
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I added both these lines to the bottom of the post (jQuery call before the JS)

Categories

Resources