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!
Related
I just tried to implement the json tag editor to create a tag editor.
I want to implement it in a bigger laravel project. Therefore I included jQuery, as well as the js and css file from the json tag editor. It's all loading fine, which I figured out under the network tab.
Now I have:
an input element:
<input id="keywords" class="form-control" name="keywords"
autofocus></div>
and on top of the page I have:
$().ready(function(){
$('#keywords').jsonTagEditor();
});
But i get an error saying
Uncaught TypeError: $(...).jsonTagEditor is not a function...
As I said, the files are loaded as I can see in the network tab...
Any ideas what the problem could be?
Again to make everything clear, I'm using laravel, so the files are all included in the master-layout file and I'm trying to use it in a document that extends this master template. But shouldn't change anything as I'm already using some other plugins that work fine that way.
Any ideas?
After some discussion in chat, the problem turns out to be the suspected re-import and re-initialization of jQuery. The Laravel framework has it's own import of jQuery that happens via require(), and that was the happening after the plugin in question was imported.
Moving the plugin import to the end of the <body> worked around that, but in addition the plugin (as of this writing) has a bug and must be initialized with an empty object passed in (or probably any other value):
$("#keywords").jsonTagEditor({});
You are missing document and just to be certain that the element is accessible, place your script before the ending '</body>' tag so that it loads your page content first.
$(document).ready(function(){
$('#keywords').jsonTagEditor();
});
You forgot to write document
Instead of this
$().ready(function(){});
Use this
$(document).ready( () => {});
The => means, that you use newest standarts of JS
Or you can just use this alternative jQuery tagEditor
I have managed to add a carousel slider and an image hover onto my site and I was looking to find out how i can ensure that there are no conflicts between them as there are both using jquery files.
The page itself can be viewed here:
http://s116169771.websitehome.co.uk/testsite/carousel/
What I am looking to find out is how i can separate the functions for both of these features as they are both using $ and I just want to ensure that there are no conflicts between the files so would like to ensure this is reflected in the code.
The problem is that I am not sure what changes I need to make to implement this so would appreciate it, if I could get some advice on how to split these up.
Btw the sources for these are the following:
http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/
Owl Carousel
Thanks in advance.
var $k = jQuery.noConflict();
// $k is now an alias to the jQuery function.
$k(document).ready(function() {
$k( "div" ).hide();
});
Check out the following link to avoid the jQuery conflict.
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
I believe the following is not possible without javascript/jquery but still wanted to confirm as I am not good in css/html/jquery.
I would like to apply certain style to an element but only when a particular url is accessed in my website.
I am using asp.net so a single aspx page template can cater to a host of urls so I cannot write the style in the html of the template.
If I write this style in a css file and include it in the template it will get applied to all urls.
I can selectively load this css file through jquery but I do not want to involve jquery into this as much as possible.
I can also use a asp.net literal control and load the css based on the url from code-behind but then addition of new urls would involve a code change. Also it sounds very messy.
Currently I am applying this through javascript/jquery as below on document.ready
if (window.location.href.toLowerCase().indexOf("/some-url/") > 0)
{
$('#some-element-id').attr('style', 'display:none');
}
But this shows the element for a split of a second before disappearing.
A solution involving jquery/javascript but resolving the above issue will also help.
I hope I was able to explain it properly.
Please let me know if any clarification is required.
It is probably showing at first because it is rendered at least a bit before the page is loaded, so it is shown until the jQuery ready() function is called on page load.
I would think the easiest fix would be to hide the element by default, then show it if it is in the URL:
#some-element-id{
display:none;
}
if (window.location.href.toLowerCase().indexOf("/some-url/") < 0)
{
$('#some-element-id').attr('style', 'display:block');
}
if #some-element-id is on a separate page then
add some-class to your element
define that class in a new .css file
only import that new .css file on the page you want the style
applied to
The URL is not part of the DOM so there’s no element to be selected by the CSS.
As you say the only way you can apply the css in a specific URL is using javascript.
The recommendation I can tell you is use addClass instead to use
.attr('style', 'display:none');
Or if you need to add a lot of css you also can include or replace the a full file like:
$('head').append('<link rel="stylesheet" href="youStilefile.css" type="text/css" />');
I hope it's helps!
the best solution is separate your css styles by codes that generated from server (independent from client).
Also you can test below code instead of $('#some-element-id').attr('style', 'display:block');
$('#some-element-id').hide();
and please insure that your jq lib imported successfully.
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
I have a little problem with the "Flowplayer API" module. I activated it in the modules list and in my node template I'm using the "flowplayer_add" function to embed my video/audio.
What is strange is that no css or js for Flowplayer is loaded...
Maybe you have this answer to that.
N.B. I've already tried to remove all the other js files to avoid conflicts but nothing changed.
On the help section they explain the difference between theme('flowplayer') and flowplayer_add():
Calling theme('flowplayer') will not only add the correct JavaScript to the page, but also construct the markup for you.
Using flowplayer_add requires you to already have the markup created.
i.e. in the case of flowplayer_add() you have to set HTML like this:
somewhere on the page, where you want your video to appear.
Hope it helps