I'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.
Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.
HTML:
<a id='emailform' href='#'>Click here!</a>
<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>
JS:
$(document).ready(function () {
$("#emailform").click(
function () {
$("#contform").dialog();
})
});
http://jsfiddle.net/mukL3hq8/2/
Any help will be greatly appreciated.
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.
I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:
<script>
//<![CDATA[
jquery here
//]]>
</script>
I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly.
Maybe it'll solve your problem as well.
Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.
Related
I am trying to put together parallax section scrolling using parallax.js. I cannot seem to get the sections to work correctly. I am following the tutorial they have at http://pixelcog.github.io/parallax.js/ but for some reason my code is not working correctly. Not sure if i'm missing something or if the code it not responding as it should. Can someone shed some light on this issue? my test code is listed at http://gynxprinting.com/test/
Since it's a Jquery plugin you'll also need to load Jquery,
try adding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
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.
P.S. The other part of the splash.js works, my overflow element changes just as it's intended.
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
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 :)
I'm trying to remove an entire div on page load. Currently I'm trying to use:
$(document).ready(function(){
$("#removeme").remove();
});
with the HTML
<div id="removeme">If JS enabled remove this!</div>
I've been searching for hours, using many variations including getElementById. No luck.
Javascript/jQuery aren't languages I use often.
All help is appreciated. Thanks!
Edit: Fixed, page I was adding it to was having some issues (another dev built it). I put the code into an existing JS file instead and it works. Thank you all.
$('#remove').html('');
or
$('#remove').empty();
That will remove that text if JS is enabled.
The code you are showing in your question works, as proven by #barmar :
"http://jsfiddle.net/barmar/epsZe/"
If it doesn't work for you, it is most likely because you have an error in your Javascript before you reach the code displayed here. Also, ensure that you have included Jquery before-hand.
To find where previous errors could have happened, you can look inside your Javascript console. Here is a question where it is described where to find your console on most browsers :
What is console.log and how do I use it?
If you don't want to use the console, you can put alerts in your Javascript code until you find where they stop displaying.
try this
$("#removeme").replaceWith("");
Hi guys having an issue with the reuters news feed. It is preventing my jquery from working. From what I have found googling it seems there is a library conflict or loading issue. The error the console gives is as follws :
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
From googling it seems if you change the $ to jquery things are fine but is there another solution for this? Loading the news feed script after? I don't really want to do a sitewide change.
I have setup a jiddle here: http://jsfiddle.net/Jjj6g/23/
If you remove the div with id=annoying you will see the test div growing and shrinking but not when the reuters feed is put in.
I know this is a bit off the wall but any advice/help would be appreciated.
You can wrap your code within an anonymous function and evaluate it right away. That way you can overwrite a variable only within this function.
Example:
(function($) {
$('.something')...;
}(jquery));
This is very common mistake. Usually it means not conflict but just you forgot to add some library. Please check carefully, if all the used libraries included and what is important too, could be found by browser:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).
I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.
Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.
You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.
If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.
In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.
If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.
I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.