Develop Reference

Trying to insert jquery-mousewheel pluginin in to jquery cycle2

I'm trying to integrate jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the plugin - jquery cycle2 plugin.
Everything was fine until I discovered that mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.
On GitHub I found a plugin (https://github.com/amondit/jquery.scrollsteps.js) designed specifically for this plugin to handle with this problem.
I used the file jquery.scrollsteps-full-min.js.
That's how I call the plugin:
$(function() {
var $slider = $('.slider_overlay');
// slider initialize
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list',
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
// initialize scrollsteps plugin
$slider.scrollsteps({
up: $slider.cycle('prev'),
down: $slider.cycle('next')
});
});
And, when I start to scroll the page up and down, I get the following error message from firebug console:
"TypeError: i.down is not a function" or "TypeError: i.up is not a function"
Perhaps someone has any ideas or thoughts why this error may occur?
If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:
$slider.mousewheel(function(e) {
if (e.deltaY > 0) {
$slider.cycle('prev');
} else {
$slider.cycle('next');
}
});
but as I mentioned it triggers a lot of scrolling events.
Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.

Аnswer )
$(function() {
var $slider = $('.slider_overlay');
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list'
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
function prev() {
$slider.cycle('prev')
}
function next() {
$slider.cycle('next')
}
$slider.scrollsteps({
up: prev,
down: next
});
});

Jquery LightSlider does not resume playback after thumbnail is clicked

I realised that lightSlider does not have a resume playback function and will stop playing once any slide is clicked. Is there any way we can add in this functionality?
$(document).ready(function() {
var slider = $('#demo').lightSlider({
item:1,
slideMargin:0,
pause:8000,
enableTouch:true,
auto:true,
loop:true,
controls:false,
pauseOnHover: true,
});
$('#demo').parent().on('mouseenter',function(){
slider.pause();
});
$('#demo').parent().on('mouseleave',function(){
slider.play();
});
});
I tried adding a resume play functionality with the mouseleave function but it does not work on mobile. Will appreciate if any one of you gurus has any suggestion. Thanks in advance.

i Found the solution.
01.use this lightSlider.js file link : http://raw.githack.com/sachinchoolur/lightslider/1.1.2/src/js/lightslider.js
02.script on the page:
$(window).load(function(){
$('#lightSlider').lightSlider({
item: 4,
auto:true,
slideMargin: 2,
loop :true,
pause: 4000,
speed: 1000,
onAfterSlide: function () {
$('#lightSlider iframe').remove();
$('#lightSlider li').removeClass('hasIframe');
}
});
});
found from this

How to add <a href links into tooltip and be able to mouseover and click on it? for jQuery UI 1.10

I am using jQuery UI 1.10 Tooltip. Below is my call to tooltip. I cannot find on the documentation on how to do this. I want to add a href links into the tooltip and let user be able to mouseover and click on it. Right now as soon as my mouse hover away from the tip trigger, the tooltip disappear.
$(function () {
$(document).tooltip({
track: false,
show: {
effect: "slideDown",
delay: 20
},
hide: {
effect: "explode",
delay: 5
}
});
})
Documentation:
http://api.jqueryui.com/tooltip/#option-position
Thanks,
Will

jQuery UI tooltips don't support this out the box however You can add the following code which delays the hide function allowing you to move the mouse over the tooltip:
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeIn(250);
},
function () {
$(this).fadeOut("250", function () {
$(this).remove();
})
}
);
}
This won't work with the custom explode animation you defined for hiding the tooltip though so I've had to remove that and it will just fade out:
/*hide: {
effect: "explode",
delay: 5
},*/
You will then need to add the following code to allow the tooltip to display HTML but please be aware that you are potentially opening your site up to an XSS Vulnerability by doing this:
content: function () {
return $(this).prop('title');
},
See here for a fiddle

bxSlider not working automatically

I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?

You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!

This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.

This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});

Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)

Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!

This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});

I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});

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