We Keep Coding

what is wrong with my slideshow code in jQuery? [duplicate]

I am using jQuery and put this code in my javascript:
function HideMe(itemID) {
var myDiv = 'item_' + itemID;
$(myDiv).fadeOut("slow");
}
But its giving me this error: fadeOut is not a function.

This will happen if you're using the "slim" version of jQuery. Only the "full" version of jQuery includes animation effects.
Try grabbing the "full" version of jQuery from the jQuery downloads page and including that in your page (or including a full version of jQuery from a CDN from your page).

Do you have another javascript library on that page? It seems you have the hide function, and the $ defined (prototype, for example, also has an hide function).
If that is the case, try:
jQuery("#item_0").fadeOut("slow");

I had this error because I was using a slim version of jQuery. If you download the full version you should be okay.

Even if the selector didn't return any items in the collection the function call would have worked (not generated this error anyway) if jQuery was loaded correctly. Either there is a conflict in the page, or it didn't load at all. You can try
jQuery(myDiv).fadeOut("slow");
or look into why jQuery hasn't been loaded.
P.S.: don't forget the # in the selector if selecting by id.

Also, you probably forgot a # in the selector (unless you've got something like <item_1 /> in the markup).
var myDiv = '#item_' + itemID;
jQuery uses CSS selectors to search for elements, so without the #, you'd get every element with the tag item_x instead of the ID.

It happened to me because of slim version of Jquery library. Full version of Jquery library includes animation.
Jquery CDN available at https://code.jquery.com/

It looks like jquery is not correctly attached to the page.
Check your linking to jQuery.

Try keeping it inside
$(document).ready(function(){
// your code. and don't forget the '#' in front of item.
});
Looks like you're trying to call the function before jQuery / the DOM loads.

You have liDiv instead of myDiv. Try:
function HideMe(itemID) {
var myDiv = 'item_' + itemID;
$(myDiv).fadeOut("slow");
}

On moving a .html template to a wordpress one, I found this popping up regularly.
Two reasons, and the console error can be deceptive:
The error in the console can send you down the wrong path. It MIGHT not be the real issue. First reason for me was the order in which you have set your .js files to load. In html easy, put them in the same order as the theme template. In Wordpress, you need to enqueue them in the right order, but also set a priority if they don't appear in the right order,
Second thing is are the .js files in the header or the footer. Moving them to the footer can solve the issue - it did for me, after a day of trying to debug the issue. Usually doesn't matter, but for a complex page with lots of js libraries, it might!

Wordpress Search & Filter Autosubmit

I'm working with the Wordpress Search & Filter plugin and it's exactly what I needed for filtering though my gallery and shop content! I would like to make my selections submit every time a dropdown is changed, as opposed to having to click the submit button. (See link below).
In researching other posts, I've found that the solution is to implement this into my theme's java script file:
$(".searchandfilter select").change(function() {
$(".searchandfilter").submit();
});
I have put the line into my WooThemes Canvas's 'general.js' file but it seems to make no difference. I still need to click on the submit button to make changes. I've tried placing it in various other js files but I've had no luck. The page in questions is this one:
http://richardrosenman.com/wordpress/portfolio/
Does anyone have any insight as to what I'm doing wrong? I would REALLY appreciate any help as I'm stuck (and somewhat of a novice with Javascript!).
Thanks!

jQuery is loaded with jQuery.noConflict(); therefore you cannot use $ as selector (other libraries may be using it), instead use jQuery as selector:
jQuery(document).ready(function(){
jQuery(".searchandfilter select").change(function() {
jQuery(".searchandfilter").submit();
});
});
I think you can add it to general.js end of file since I see that file is loaded.

fancybox2 doesnt load. noConflict advice needed

I've decided to upgrade to fancybox2.1.5 (had 1.3.4). I cant get it to init.
I have deleted my original question (about what I tested) because I have found out what the problem is.
Turns out the problem is tinymce and fancybox together. If I only use one of those on a page, no problem. If both get init on 1 page, fancybox wont work. I need noConflict, but cant get it the way I want.
I'm bulding this into an excisting CMS. The $.noConflict() solution combined with using all jquery selecters jQuery('#likeThis') is not an option. I want the noConflict code applied wrapper-like arround the tinymce's.
I've moved all tinymce related inits to a seperate js-file.
I tried the noConflict at the beginning, and moving it back again, but no luck there:
jQuery.noConflict(); // also tried adding true here
/*
tinymce's here with jQuery('selector').tinymce()
*/
var $ = jQuery.noConflict(); // also tried without 'var', also tried adding true here
Also tried this:
// Other scripts
<script>jQuery.noConflict();</script>
<script src="/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script src="/beheer/admin/script/tinymces.js"></script>
<script>var $ = jQuery.noConflict();</script>
// Other scripts & code
In short: I want to be able to use $ everywhere, and keep using that, but 'sandbox' the tinymce's, how do I do that?

The solution was updating the Tinymce. I had version 3.4.7 and replaced it with a 3.5.7 version. After that, no problems anymore.

Counting classes from an external page with JQuery

I have a javascript file that needs to count how many classes (.wrapper) there are in a external html page.
So far i have been using this for a count (it was previously all on the same page).
var adCount = $('.wrapper').size();
alert(adCount);
But i can't seem to find anything that would allow me to run this statement on a different page than the code is runing on. I was hoping to add something like this.
var adCount = $('js/sliderExternal.html .wrapper').size();
alert(adCount);
They are in the same directory but I'm keeping the pages seperate as the external page needs to be updated constantly and i don't want it in the middle of a page of code. (This page may be updated by people who don't code at all). Anyway, any help on this would be much appreciated.
If you need any more information ask away!
Thanks.

This should work:
$.get('js/sliderExternal.html', function(data){
$(data).find('.wrapper').size();
})
Also see API Doc for $.get().

You would have to load the page into your html first using document.load() and append() it to your DOM structure. Once you do this you can use JQuery to find the number of classes within it.

Load that external html inside some div having visibility false.something like this:
$('#id_of_div').load(external_url)
and then find the length using:
var numItems = $('.wrapper').length

Jumi plugin doesnt seem to load jQuery and images called with css in joomla 1.5

I have a select list I have styled using html, css& js, it is working independently but once I load it into an article it displays the default html select list. I have tried positioning the customized select.html using Jumi plugin it loads most css but somehow refuses to load images called in the css. Help

First of all, the last time I used Joomla, it uses Mootools. Mootools and jQuery don't get along well because they fight over $ namespace and most people use $ in jQuery code.
to prevent this, you should either
use $.noConflict() to change the jQuery namespace
use jQuery instead of $ in your code
enclose your code in a closure:
(function($){
//use `$` safely in here
}(jQuery))