I am trying to use a third-party jQuery Carousel plugin in a project at work (don't know which plugin it is though). The problem is that when I use multiple instances of the same plugin on the same page only one of the instances updates. I think this issue is with how my instances are setup. I have constructed a jsFiddle at here.
The carousel is attached by the .carousel class and all instances are initiated by the method shown below:
// Enable carousel
$.each($('.carousel'), function (i) {
$(this).carousel(this.id);
});
Unlike in my local code, in the JsFiddle only one of the carousels works. Any help would be very much appreciated.
Firstly there is an error when your js runs. If you look in your browser dev tools of choice you should see
TypeError: properties.slider.swipe is not a function
Once commented out the js will run correctly but if you click any of the next and previous buttons only the bottom slider will run. This is because they use the same instance of the var properties.
I would suggest looking at creating a jQuery widget with your existing code, it is fairly straight forward to do. By doing this you can have several instances of the same widget running on a page together.
Coding your first jQuery ui plugin
Rather than fix the entire plug-in, it's much easier to tell you that after the plug-in is initialized, the plug-in code breaks when it attempts to add touch events.
// Add touch events
properties.slider.swipe(function (event) {
if (event.swipeDirection == 'left') {
methods.next();
} else if (event.swipeDirection == 'right') {
methods.previous();
}
});
// Throws: Uncaught TypeError: Object [object Object] has no method 'swipe'
Comment out the plug-in code's touch events, and it no longer breaks.
However, because of how the plug-in is created, it can only handle one carousel at a time since it overwrites the last one that was defined.
Try a different, widely-used, and responsive JS slider that supports touch events.
Hi i have created Carousel without using any third party plugin.If you want please refer
Reference Link
Hope its helps you.
Related
How can I debug a third party JavaScript plugin.
I am using a plugin called content timeline and that used JavaScript to display posts.
So, I want to target a heading that shows the timeline month, but for some reason, nothing works on any element.
Tried this:
$("h4.t_line_month").addClass('example');
However, if I add
console.log("the script works");
I see the message in the console.
Unfortunately, there is nothing much I can tell other than the fact that I am not being able to access the plugin elements for some reason.
Are there ways that I use to debug this?
perhaps some rule being set in WordPress or in the plugin itself.
Have no idea how to debug this.
Try using jQyery each() function to itterate all of the h4 tags on your page to see if its even there.
$('.testimonial').each(function(){
console.log($(this).html()); // debug to see which is which
});
Also if the WP plugin you are using is creating an iFrame... this could be the cause of you not being able to directly access the element you need.
Just starting to use fullPage.js and loving it so far.
Anyhow, when implementing continuous effect and you're on the last section, scrolling down it sends you to the first section, but it looks like it loads two times, or like it very fast goes to the second section and then to the first I removed all other scripts and tried again, but same problem.
Also, header disappears when you scroll to first section again, after last section.
Here is the link:
http://sedmica.rs/problem/
Thanks in advance.
It works as expected as you can see here with your same initialisation.
I believe you have some problem related with the use of the class 'slide' for another one of your plugins. That's making fullPage.js throw the an error in the javascript console:
Uncaught TypeError: Cannot read property 'left' of undefined
To solve this, if you are not planning to make use of the fullPage.js sliders and you rather prefer using some other plugin for that, make use of the opton slideSelector to set the value to any other string different from slide.
From fullPage.js docs:
slideSelector: (default .slide) Defines the jQuery selector used for the plugin slides. It might need to be changed sometimes to avoid problem with other plugins using the same selectors as fullpage.js.
I have a toggle dropdown menu button that appears on smaller resolutions/devices, but for some reason it isnt working. When clicked, nothing appears/shows.
Most likely there is something missing (JS function that makes it open maybe). Copying entire code doesn't make too much sense to me, so I am just using some of it:
http://goo.gl/TNixQe
UPDATE
True about responsive design. Now I noticed it (but did you say about it in your question? nope.).
When I tried to resize window firebug had found this error:
This error appears in js_func.js file in 9 row. Are you sure you link libraries correctly? JS can't find uniform() function.
Possibly this error is appearing, because all your instructions are in simple function. Try to add them to onload handler. Possibly browser try to load this instructions before uniform library had been loaded.
I meant this:
$(document).ready(function()
{
// use `uniform()` function on elements
}
OLD ANSWER
It is simple drop-down menu, based on lists. It is working throw hover handlers.
You can't do 'hover' on your mobile device. You can tap on screen only.
If you want users with gadgets use your site, you have to create menu espesially for gadgets.
Small trick, which helped me (because I am lazy :)) is to assign javascript:void(0); to 1 level buttons hrefs. This worked on SGS2 and Xperia Z1, but I am not sure it will work everywhere. With that trick, a man will tap on menu button and drop-down menu will appear.
You have a javascript error on line 9 of js_func.js:
Uncaught TypeError: Object [object Object] has no method 'uniform'
This will be causing any code below it not to be run.
Could it be a missing plugin on the mobile version?
A quick google suggests that the issue is with your jquery verison, they say to downgrade to 1.8.3.
In your case you are using 1.8.2, so try upgrade to 1.8.3.
I am using ajax loading for page navigation and am using delegate for the various click events required for each function etc
The problem I am having is activating a slideshow on the home page due to the way the slider is activated.
The following is what I have and obviously the load does not work as I expected it too...
$('#Content').delegate('#Home','load',function(){
swiper = new Swiper('#swiper', {
mode:'horizontal',
speed:900 ,
loop:true,
});
});
Is there a way I can get around this without implementing an if/switch statement within my navigation coding, as I would rather keep this separate.
i have also tried:
$(document/body).delegate('#Content','change',function(){....
any problems on here I have found are all related to standard problems with delegate like click events not working etc.
Thanks
I just installed firebug and want to see and debug jquery and javascript methods when fired.
Suppose that a jquery function will be called when button is clicked. When the site is huge and the page includes many js files then it is very difficult to point out which function will be called and where it is defined, because people attach button events in a different way. I mean the event is attached sometime based on css. So sometimes I just cannot find out which method is going to be invoked.
So please give me some tips so that I can see those functions invoke and the function body at run time wherever it is defined. Thanks.
You can try using FireQuery. From the site:
jQuery expressions are intelligently presented in Firebug Console and DOM inspector
attached jQuery data are first class citizens
elements in jQuery collections are highlighted on hover
jQuerify: enables you to inject jQuery into any web page
jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)
I've used it a few times and it makes debugging (when using jQuery) much easier.
EDIT
Using the plugin, you can look at the element and see the events bound to it. Your other option is to search your codebase for anything that identifies the element (id or css class perhaps). Then you should also be able to see what gets bound.
Take a look at http://firequery.binaryage.com/ (FireQuery). It's an extension to FireBug that allows you to see jQuery calls. I haven't used it that much, but it might be what you're looking for.