jQuery plugin conflicting with other basic show/hide functions - javascript

I bought (didn't code myself due to lack of education blah, blah, blah) a jQuery image slider/navigation plug in. it works fine, and I have adjusted the images and CSS fittingly.
Problem is that when the slider is working properly, I cannot use a show/hide onClick event such as $('#someId').toggle();.
Using trial and error I have found that commenting a few lines of js on the html page allows the show/hide functions to work, but then the slider is broken,.
The js that I comment out comes after the slider images(plug-in).
The JS code in questin is:
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx('.slidedeck').slidedeck();
</script>
When comment it out with html, then I can use onclick="$('#someId').toggle();" without a problem. But again, then the slider plugin is very broken and splattered all over the page.
As it is noticeable, and stated, I know nearly nothing.
Can anyone help me understand when this is happening?
Thanks
/Brian

try change:
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx('.slidedeck').slidedeck();
</script>
to:
<script type="text/javascript">
$('.slidedeck').slidedeck();
</script>

http://api.jquery.com/jQuery.noConflict/
you have to use $jx or jQuery
ex: onclick="jQuery('#someId').toggle();"

The dollar sign is an alias for the jQuery method. Because there are other JavaScript libraries that may use the dollar sign as well, jQuery offers the noConflict method which basically renames the jQuery method to the variable that you set it to. (This way, it won't conflict with those other libraries.)
So, after the noConflict is called, all of your jQuery calls will need to replace the dollar sign with that variable. So in your example, just do this:
onclick="$jx('#someid').toggle();"

Related

Why can't I use a <script> tag for jQuery anywhere?

This is an issue of scope I believe. I wish to use jQuery in a Joomla module and include the code within a tags in the php source. This works:
<script> alert("foo"); </script>
but this doesn't:
<script> alert($.jquery); alert(jQuery.jquery); </script>
which should produce at least 1 alert box with the jQuery version, but the alert says "undefined". The webpage <head> section already includes jQuery, and it is used in the html stream before the above <script>. I don't believe the <script> block defines a new, independent script scope / context, but that is how it behaves.
Add .fn.:
alert(jQuery.fn.jquery);
// or
alert($.fn.jquery);
Or try using jQuery as a function:
alert(jQuery().jquery);
// or short:
alert($().jquery);
Michael pointed out another one:
alert(jQuery.prototype.jquery);
// so we can also add
alert($.prototype.jquery);
If you want your code to work:
// add somewhere before:
jQuery.extend(jQuery, {jquery: jQuery.fn.jquery});
// Than this should work just fine:
alert(jQuery.jquery);
alert($.jquery);
Extend JQuery object ($ or jQuery) by .jquery equal to jQuery.fn.jquery.
As you can see we can add any properity to jQuery. Let's do jQuery.version:
$.extend($,{version:$().jquery});
If you want version you need
jQuery.fn.jquery
You can do
jQuery.fn.jquery
You can also do
jQuery.prototype.jquery

jQuery - "$ symbol is undefined"

I was successfully using some plugin for about 6 months on my website and all of a sudden I started getting this message for one of my scripts: "$ is undefined".
This is the problematic line of code: $.widget("ui.ImageColorPicker", uiImageColorPicker);
I'm using this plugin and almost the newest jQuery with noConflict enabled: http://github.com/Skarabaeus/ImageColorPicker I didn't change anything for 6 months (I didn't update jQuery). I'm sure it worked fine just 2 weeks ago and now it's broken all of a sudden.
EDIT: Error is gone. I'm removing example website.
It looks like a variable scope issue.
Try changing the first line to this:
(function($){
and the last line to this:
})(jQuery);
By doing this we are passing in the jQuery object to the anonymous function which surrounds the plugin, but by referencing it as $ the code within the block can be written using 'normal' jQuery, while still maintaining the noConflict mode on the rest of the page.
Please try this
<script type="text/javascript" src="other_lib.js"></script> //In your case try Imagecolorpicker js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
Reference $.noConflict();
It looks like jQuery.Widget is defined on that page. Try that instead of $.widget.
First, make sure you included jQuery UI. try to use jQuery.widget. If that doesn't work, use:
e = jQuery; // you can use anything else than $
Now, you should type e.widget("ui.ImageColorPicker", uiImageColorPicker);
instead of what you have.
Try to use the explicit jQuery object instead of it's $ alias.
For instance:
jQuery.widget("ui.ImageColorPicker", uiImageColorPicker);

print the first link in the document

I would like to print the first link in the page with JavaScript. But when I use the following code, it doesn't work:
<html>
<head><title></title></head>
<body>
<a id="mylink" href="http://google.com">Google</a><br />
<script>
a=$('mylink').href;
document.write(document.links[0]);
</script>
</body>
</html>
Then I commented out the code "a=$('mylink').href", it suddenly worked, why? How come the varable a has any influence on the next statement?
Any answers are appreciated.
There's a few possibilities:
The object $ is not defined and caused a JavaScript error preventing your 2nd statement to execute
The $ object does not know what to do with the string passed in and errors
The returned value from $ does not have a value (ie - it returns undefined) which wont have a property href, causing a JavaScript error
the code is not working because in your example the $ object does not exist and will cause an error. It seems that you were trying to use a JavaScript framework like jQuery ($ object) but you forgot to include it.
Try to add the following script-Tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
If you wanted to use jQuery, you should also access attributes via the .attr("attrname") function. E.g.
var a = $('#mylink').attr('href');
Again if you wanted to use jQuery, you have to alter the selector from "mylink" to "#mylink" to specify that you were searching for the element with the id "mylink".
I am a bit confused as to what you are trying to do, but couldn't you just write the whole link in js? Ex:
<script>
<!--
document.write('Google');
-->
</script>
<noscript>
Google
</noscript>
The comment tag in the script is ignored and is only there so browsers that don't support javacript won't print it in the document. The <noscript> is so browsers that don't support javascript have alternate content.
It doesn't work because a=$('mylink').href fails to execute and stop executing of following code. The code document.write(document.links[0]) is correct. When you call it without previous wrong line, it just works.
I think in the first line you're trying to use jQuery library. If you want to do it, you need to include jQuery library using <script> tag, then use the following code:
document.write($('a:first').attr("href"));
Just remove the jQuery stuff, you don't need it. As you've already discovered, there is a document.links collection so if you want to print the herf value of the first link in the document:
document.write(document.links[0].href)
and you're done.

Multiple jQuery.noConflict() instances

I am working with several jQuery scripts that include a MenuFader (http://css-tricks.com/examples/MenuFader/), twitter feed, and timestamp. Additionally I have a couple Mootools scripts that include the Barackslideshow (http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html). And finally I have a scrolling ticker with tooltips taken from the twitter homepage.
I originally had a conflict with the Jquery MenuFader and Mootools BarackSlideshow, but easily fixed this issue with the jQuery.noconflict(); and replaced all corresponding $ with jQuery.
Unfortunately, after I added the scrolling ticker from Twitter, the Mootools BarackSlideshow and the Jquery MenuFader no longer work.
I tried to implement jQuery.noconflict(); then $.noconflict(); then var j = jQuery.noconflict(); and replacing the $ as I did previously, but I cannot get the scripts to play nicely.
Any help is greatly appreciated...I have been working on this all day. I am pretty new with javascript, but have managed to get through most problems with a little persistence. Please take a look at the script below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="http://a2.twimg.com/a/1274914417/javascripts/fronts.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$( function () {
setTimeout(function() { $(".twtr-widget").append($("<div></div>").attr("class", "twtr-fade")); }, 0);
(function() {
var tabIndex = $("[tabindex]:last").attr("tabIndex");
var setTabIndex = function() {
$(this).attr("tabindex", ++tabIndex);
}
$(".footer-nav a").each(setTabIndex);
$(".language-select a").each(setTabIndex);
})();
$("#signup_submit").scribe({
event_name: "signup_submit_click",
experiment: "ab_signup_button",
bucket: "sign_up"
}, "www_ab_tests");
$('#signin_menu').isSigninMenu();
new FrontPage().init();
});
//]]>
noConflict is simply and only about changing the name the jQuery library is available under.
This is an attempt to play nicer with other frameworks that may also want to use the name $, but that's all it does. It does not solve any other kind of general conflict with other frameworks. For example when one framework clones, changes or removes an element with jQuery's internal ID markers, weird undebuggable errors may ensure. It is still a really bad idea to use more than one framework on a single page, when they're as wide-ranging and intrusive as jQuery. (Especially jQuery 1.3, which was super-promiscuous about what elements it touched.)
Similarly, two high-level plugins that operate on the same elements are very likely to have unwanted behavioural interactions. Say one plugin binds a behaviour to an element, but then the other plugin deletes that element to replace it with a progressive-enhanced version. Or one plugin tries to read the offsetWidth of an element that no longer has a visible width because another plugin has called hide() on its parent.
Scripts and plugins may pretend to be fully encapsulated behaviours that you can throw around without understanding how they work, but they really aren't. If you bind two scripts (that have not been deliberately designed to work together) to the same elements they are likely to interfere or fail. Try to keep elements that will be affected by different plugins apart from each other to reduce this potential.

How do you use javascript/jQuery to rewrite amazon affiliate links?

Basically what I want the script to do, is add my affiliate ID to all Amazon links posted by my users.(Kinda what SO is doing, minus the whole redirect/racking thing)
Here is the code I'm using, and for some reason it's not working.
<script type="text/javascript">
$(document).ready(function() {
$('a[href*='amazon.com']').each(function() { this.href = this.href.replace(/\?.*$/,"") + $.query.load(this.href).set("tag","affID").toString();});
});
</script>
I am not familiar with jQuery, but I think this script may be helpful:
http://petewilliams.info/blog/2009/07/javascript-amazon-associate-link-localiser/
I think it might have something to do with your quotes. Try it like this:
$('a[href*="amazon.com"]').each(function() ... etc
Notice the difference? The point is that if you use single quotes on the outside, you need to use double quotes on this inside. Or vice versa.
Did you add the jquery plugin it requires.
$.query.load(this.href)
this requires the jquery query plugin I suppose.

Categories

Resources