Develop Reference

Disable jQuery Plugin on Mobile only?

I have a jQuery plugin attached to an element, and I want to stop that plugin from working only on Mobile. I also have another plugin attached, a light box, but I want to stay regardless if someone is on mobile or desktop.
This is the plugin I want to stop on Mobile: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
Here is the code:
// Adding in the plugin
$(function() {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
// code for swipy stuff here ....
// ...
// ...
}
});
// Trying to remove the plugin
window.onresize = function(event) {
var deviceWidth = $(window).width();
if(deviceWidth <= 768) {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
event.preventDefault();
event.stopPropagation();
},
threshold: 0,
fingers:'all'
});
}
};
Let me know if you got any ideas. I've also tried detaching the playlist and reattaching it to the DOM and that didn't work either.
Thanks!

You can verify if the user agent is not a mobile device and init your plugin.
Demo:
function isMobile () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
return true;
}
if(!isMobile()) {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
event.preventDefault();
event.stopPropagation();
},
threshold: 0,
fingers:'all'
});
}

How make this slider with mouse over action?

I created this slider and I want to mouse over action on numbers jquery but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.
thanks
jsfiddle version: http://jsfiddle.net/BijanZand/cmqkc59b/
Here is the current code:
function tabsrotate() {
$("#slider_a, #slider_b").tabs({
show: function (event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top);
}
$(ui.panel).hide().fadeIn(1500);
if (lastOpenedPanel) {
lastOpenedPanel.toggleClass("ui-tabs-hide").css("position", "absolute").css("top", "0").fadeOut(1500, function () {
$(this).css("position", "");
});
}
$(this).data("lastOpenedPanel", $(ui.panel));
}
}).tabs('rotate', 7777, true);
}
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
});

You can attach a mouseover event to your anchor using jQuery and inside this event trigger the anchor click:
Your $(document).ready will look like this:
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
$('.tabnavigation li a').mouseover(function(){
$(this).click();
});
});

Unslider on Image Hover

I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});

Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});

fadein() not working after fadeout()

$("#slider").live("hover", function(e) {
if (e.type == 'mouseenter') {
$("#slider").delay(100).fadeIn();
}
else {
$("#slider").delay(1200).stop(true, true).fadeOut();
}
});
I used a slider in jQueryUI. What I would like to achieve is when the user hovers their mouse over the slider, it shows, and when the mouse is not hovered over it, it fades out. However, my case is after the first time of the fade out, the slider do not fade back in no matter where I put my mouse on that location of slider. How can I fix this problem? Thanks

Using ahren's suggestions try this
$("#slider").hover( function( ) {
$("#slider").fadeTo( 1000, 1 );
},
function( ) {
$("#slider").fadeTo( 1000, 0 );
});
Fiddle here

This is another solution with mouseover and mouseout handlers with .animate() method:
$("#slider").mouseover(function() {
$("#slider").stop().animate({"opacity":0},500);
}).mouseout(function() {
$("#slider").stop().animate({"opacity":1},500);
});

jQuery Tools tabs auto rotate (done) and pause on hover (done) resume on mouseout NEED HELP!

I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});

Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj