add pause on hover in jquery - javascript

i cant seem to add a pause on mouse hover to this slide show code , any help will be greatly appreciated
<script type="text/javascript">
$(function() {
var jmpressOpts = {
animation : { transitionDuration : '1.8s' }
};
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
dots : false,
arrows : false,
interval : 8000
}));
});
</script>

I don't know how jmslideshow works but try setting the interval to a variable of your choice and then change that variable to a really large number on .mouseover and back to 8000 on .mouseout
or maybe you can do the same thing with autoplay, set it to false on .mouseover, true on .mouseout

Please check my answer here: https://stackoverflow.com/a/19830616/2519089
You will need to modify the jquery.jmslideshow.js file and include the following lines within the _loadEvents method:
//custom hover handler
this.$jmsWrapper.on( 'mouseenter', function( e ) {
_self._stopSlideshow();
});
this.$jmsWrapper.on( 'mouseleave', function( e ) {
_self.options.autoplay = true;
_self._startSlideshow();
});
Hope this helps!

Related

Writing and compiling a simple jQuery plugin

I am trying to compile a basic jQuery plugin which shows a div upon provided options when invoking:
select if a checkbox should be checked after X milliseconds or after X px on scroll,
if one of those two options are selected, set a delay value or scroll distance in px
otherwise do nothing
Example of desired options invoke:
$(document).ready( function() {
$('#testInput').testing({
myMethod : delay,
myValue : 2000
});
});
My current progress here: JSFiddle (it's not much as currently I'm still at a beginning of the learning curve)
After some fiddling i managed to get this working (kinda). Plugin seems to be working fine. Except there is some bug with the scroll function which i have to sort it out additionaly - it loops and changes checkbox states indefinitely instead just once.
Here is a working fiddle
And modified code:
(function($) {
$.fn.testing = function( options ) {
// Settings
var settings = $.extend({
delay : null,
delayTime : null,
scrolling : null,
scrollDist : null
}, options);
return this.each( function() {
var self = this;
// Timeout
setTimeout(function (){
$(self).prop('checked', settings.delay);
}, settings.delayTime);
// Scroll
if ($(window).scrollTop() > settings.scrollDist) {
$(this).prop('checked', settings.scrolling);
};
});
}
}(jQuery));
// Plugin invoke
$(window).on("load resize scroll",function(){
$('#testInput').testing({
delay : false,
delayTime : null,
scrolling : true,
scrollDist : 20,
});
});

How to start/stop ResponsiveSlides.js?

I am testing some new stuff on responsive sliders, and I got stranded on something while using this plugin: http://responsiveslides.com/
Can anyone help me on how to create a start/stop function for the slider? I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.
The only option available in the slider yet is to start/stop on hover. I need it to start/stop when I click a custom element in the DOM.
you will need to add some code to the plugin.
First, create a variable named forcePause:
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
forcePause = false, // <---- here!
In the restartCycle method you need to check if the paused is forced or not:
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if ( !forcePause ) // new line
// Restart
startCycle();
}
};
After that, you can add something like that in the line 300:
$( '.pause_slider' ).click( function( e ){
e.preventDefault();
forcePause = true;
$( this ).hide()
$( '.play_slider' ).show();
clearInterval(rotate);
});
$( '.play_slider' ).click( function( e ) {
e.preventDefault();
forcePause = false;
$( this ).hide();
$( '.pause_slider' ).show();
restartCycle();
});
You will need two HTML elements with each class to do his work. The forcePause avoid to restart de slider after hovering it.
I know it's not the best solution ever, but it does the trick.
You can see it working here:
http://jsbin.com/eHaHEVuN/1/
Also you will find the code. :) I hope this works for you.
Control start/stop with pause parameter:
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: true, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
There's another simple solution - enable pause on hover, then emulate hover:
JS:
$(".rslides").responsiveSlides({
pause: true
});
$('.carousel-pause .pause').click(function(e){
$(this).hide();
$('.play').show();
$('.rslides').trigger('mouseenter');
});
$('.carousel-pause .play').click(function(e){
$(this).hide();
$('.pause').show();
$('.rslides').trigger('mouseleave');
});
HTML:
<div class="carousel-pause">
<span class="pause">Pause</span>
<span class="play">Play</span>
</div>
Built off of answer from #miduga to get solution tailored to allow external events to pause slide show.
I ended up creating a global variable of window.responsiveSlidesForcePause that is used in the rotate interval to determine if rotate should occur. Ideally, there should be a public method that pauses the individual slideshow, but this is a quick hack that will pause any slideshow on the page. My situation only needed a single slideshow on a page that will have a short lifespan.
http://jsfiddle.net/egeis/wt6ycgL0/
Initialize global variable:
return this.each(function () {
// Index for namespacing
i++;
window.responsiveSlidesForcePause = false; // new global variable
var $this = $(this),
Use global variable:
startCycle = function () {
rotate = setInterval(function () {
if (!window.responsiveSlidesForcePause) { // new if statement
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}
}, waitTime);
};
Which allows the events that pause the slideshow to be outside the actual plugin.
$(document).ready(function() {
$( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
$( ".pause_slider" ).on("click", function (e) {
e.preventDefault();
$(this).hide();
$( '.play_slider' ).show();
window.responsiveSlidesForcePause = true;
});
$( '.play_slider' ).click( function(e) {
e.preventDefault();
$( this ).hide();
$( '.pause_slider' ).show();
window.responsiveSlidesForcePause = false;
});
});

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();
}
);
});

ended event videojs not working

I would like to trigger a simple event when my video is finished. I've placed this directly bellow my video tag.
<script type="text/javascript">
var myPlayer = videojs("session_video");
videojs("session_video").ready(function(){
this.addEvent("ended", function(){
alert('Here I am');
});
});
</script>
However I get: TypeError: this.addEvent is not a function and I can't find why.
You can see it live here: 78.47.121.50 (stackoverflow won't allow to make that a link)
enter code 01-01-01-2012 to bring up the video.
Any insight is much apricaited!
Kind regards,
Jason.
"addEvent" and "removeEvent" were replaced by "on" and "off"
try:
this.on("ended", function(){
For those who still have problems with ended events in some browsers you can resort to this fix:
player.ready(function() {
var myPlayer = this;
playerInstance.on("timeupdate", function(event) { //chrome fix
if (event.currentTarget.currentTime == event.currentTarget.duration) {
console.log('video ended');
}
});
});
The ended event will not fire if end user intentionally seek the video to end keeping video as paused. I was able to get it work as:
<script type="text/javascript">
var player = videojs('my_video', {}, function() {});
player.ready(function(){
var duration_time = Math.floor(this.duration());
this.on('timeupdate', function() {
var current_time = Math.floor(this.currentTime());
if ( current_time > 0 && ( current_time == duration_time ) ){
$('#continue_button').removeAttr("disabled");
}
});
});
</script>
2020 Updated answer:
let player = videojs('video-player-id');
player.on('ended', function() {
this.dispose();
});
I think it's good to call dispose More on why over here
On Stackoverflow i find one part of solution the otherpart find it from Lyn Headley top answer.
<script type="text/javascript">
//rename subtitle button
videojs.addLanguage('de', {
"captions off": "Untertitel aus",
});
videojs(document.querySelector('video') /* or selector string */, {
techOrder: ['html5', 'flash'],
controls: true,
autoplay: false,
preload: 'false',
language: 'de',
flash: {
swf: 'video-js.swf'
}
}, function(){
// Player (this) is initialized and ready.
this.on('ended', function(){
alert('ended');
});
this.on('firstplay', function(){
alert('firstplay');
});
});
</script>
this will alert you on the end of video.
place it under the code of your video
and it should works.

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

Categories

Resources