jQuery slideToggle doesn't work on joomla, but works on jsbin
Question
So I have a website and I want to use the jQuery slideToggle to move the blocks. The problem is that it doesn't work on my Joomla website. However, when I copy the code to jsbin.com, it works. Here's the link http://jsbin.com/EcObOwex/1/edit Here's the actual JS I'm using:
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
I don't know what additional information I can provide. The JS code is in splash.js, link to it works properly (checked it, there's some other script that works from the file)
Edit: I was informed that it was an JS error that I was getting. Here's the error Uncaught TypeError: Object [object Object] has no method 'tooltip' And here's the code. Could anyone help me determine what is it?
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"container": false});
});
I didn't add it manually, it's part of the <jdoc:include type="head" /> . Could anyone help me determine how to shake this code off?
EDIT 2: Some more information: Here's my full <head> code. http://jsbin.com/aFOZEWI/2/edit AND YOU CAN ALSO FIND THE FULL SPLASH.JS in the JavaScript part of the Bin. PS The other part of the splash.js works, my overflow element changes just as it's intended.
2 answers
solution1
2 2014-01-20 16:01:36
It might be possible that you have multiple jQuery libraries being imported which may cause conflicts. In addition to that, let's import the scripts and add you code using Joomla coding standards.
<?php
JHtml::_('jquery.framework'); //This calls jQuery in noConflict mode
$doc = JFactory::getDocument();
$doc->addScript(JUri::root() . 'templates/vabankbroker/src/splash.js');
$doc->addScriptDeclaration("
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
");
?>
As for the Tooltip error, open the index.php of your template and if the following doesn't exist, I would recommend you add it:
JHtml::_('bootstrap.framework');
Hope this helps
solution2
0 2014-01-20 16:28:30
I found my answer through this post:
My script works in jsfiddle but not site. Cannot call method hover of null? Thank you for all kinds of notices, I'll make all those fixes, but for this exact problem, I had to include the script in the end of the <body> tag, and it started working.
Cheers :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.