$ with jQuery plugins

[Davidk]

I'm using noconflict when combining jQuery and A5... but what about plugins that other people write.

One I'm trying right now is an MP3 player with functions and code written using $. I can't get it working and I'm wondering if that's the problem. The player works on an HTML page, but not in an a5w page.

If I assign $j to use jQuery, would I have to change the javascript code from the plugin?

Thanks,
David

[mmaisterrena]

Re: $ with jQuery plugins

you should ask the js library developer/community for a workaround

[bea2701]

Re: $ with jQuery plugins

I'm using noconflict when combining jQuery and A5... but what about plugins that other people write.

One I'm trying right now is an MP3 player with functions and code written using $. I can't get it working and I'm wondering if that's the problem. The player works on an HTML page, but not in an a5w page.

If I assign $j to use jQuery, would I have to change the javascript code from the plugin?

Thanks,
David

jQuery uses the dollar sign as a function name, followed by a “query” used to “find things” to “do stuff” to. The problem with this is that other widely used javascript libraries use the dollar sign for their function names as well. One such library is Prototype. Prototype uses the dollar sign as a shortcut to document.getElementById. So, when I need to use both JQuery and Prototype, what do I do? Well, jQuery has provided a handly little method called noConflict() to deal with just such an issue. To remedy an issue where the dollar sign function names conflict, you simply assign Jquery.noConflict() to something such as $j and then use that instead of the dollar sign.




optional you have to change the code your using, but other Jquery script I used do not have a conflict with A5.

[Davidk]

Re: $ with jQuery plugins

Understood... but...

When I download a plug-in such as swagg-player which contains javascript files and those files use $ does that cause a problem.

I've attached one of the swagg-player javascript files. Thanks for looking at this.

I don't care if I have to change them... just want to make sure that I need to... it kinda makes sense.

[bob9145]

Re: $ with jQuery plugins

I am confused on how to go about replacing the $ sign in order to use Jquery on a a5w page that contains a dialog component.

Would the line of code be changed from var $content = $('#content') to
var jQuerycontent = jQuery('#content') ? Does there need to be a space between jQuery and content? Is this correct?

Cufon.now();
var $content = $('#content'),
$contentDD = $('#content>dd');

$(document).ready(function(){
$content.css({marginTop:'164px'});

$("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
clearInput('contact_form');
$contentDD.css({display:'none'})
});

[Davidk]

Re: $ with jQuery plugins

I'm going to take a stab at this...

It depends on what you're doing... and in the sample code you provided you have two things going on. You're declaring variables, or objects, which are nothing special to jQuery... and you're using jQuery to refer to objects.

And this assumes you've got the noConflict stuff in your a5w page...

<script>
	if(typeof jQuery != 'undefined')
	 jQuery.noConflict();
</script>

I think I would write your code as follows... (there's an error on the 2nd line... you have a comma... not a semi-colon... and on the last line as well... no semi-colon)

Cufon.now();
var $content = jQuery('#content');
$contentDD = jQuery('#content>dd');

jQuery(document).ready(function(){

     $content.css({marginTop:'164px'});

     jQuery("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
     clearInput('contact_form');
     $contentDD.css({display:'none'});

});

$content is just a variable... you could call it anything you want. If you want to use $ it's because you'd like to distinguish variables set with jQuery from other variables.
$contentDD is the same.

jQuery('#content') is the jQuery way of getting at an element.

jQuery(document)... is jQuery.

$content.css is just getting at the properties of the $content object you established.

I hope I have this right... but I'm not sure... and I don't think I would do it this way...

What about not assigning $content and $contentDD. Use jQuery to get at the element and css that you want... directly. I haven't tried this... but I believe it should be ok...

jQuery("#content").css("marginTop","164px");

I don't think you need the { braces to set one property... but I believe you need them to set multiple properties... as in...

css({"propertyname":"value","propertyname":"value",...});

Note the difference between the use of the "," for a single property... and the ":" for multiple properties.