Lof JSliderNews jQuery - how to pause on hover? - javascript

jQuery(function($) {
var buttons = {
previous: jQuery('#lofslidecontent45 .lof-previous'),
next: jQuery('#lofslidecontent45 .lof-next')
};
window.setTimeout(function(){
$obj = jQuery('#lofslidecontent45').lofJSidernews({
interval: 4000,
direction: 'opacitys',
easing: 'easeInOutExpo',
duration: 1200,
auto: true,
maxItemDisplay: 3,
navPosition: 'horizontal', // horizontal
navigatorHeight: 40,
navigatorWidth: 70,
mainWidth: 1000,
buttons: buttons,
isPreloaded:false
});
},500);
});
How to configure pause on hover?
is there any reference for this slider?
or is there any option like hover: stop?

there is no such config like hover: "stop".
But if you look in the actual .js file, you will find
$( obj ).hover(function(){
self.stop();
$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){
if( self.settings.auto ){
$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );
That means, hover stop functionality is default there.

Related

How to disable code execution until tween complete?

Hi guys i am using Phaser 3.5 and wanted to stop this click function from executing if the tween is still ongoing?
game.input.on("pointerdown", function(pointer) {
game.tweens.add({
targets: playerHands,
angle: 20,
duration: 1000,
yoyo: true
});
});
Thank you
A flag variable would be something like:
game.canTweenFlag = true;
game.input.on("pointerdown", function(pointer) {
if(game.canTweenFlag) {
game.canTweenFlag = false;
game.tweens.add({
targets: playerHands,
angle: 20,
duration: 1000,
yoyo: true,
onComplete: function () { game.canTweenFlag = true; }
});
}
});

side slide menu not creating push effect in ipad and phone

I am using the following side slide menu for my project :-
http://www.mywork.com.au/blog/demos/facebook-sidebar-menu/
I've changed the left slide-in to right slide-in. It works very well for me on the desktop but in ipad and phone the page wrapper has a lagging-behind/scrolling effect. It seems like that the page wrapper scrolls from right to the left under the side menu container after the menu has appeared.
I've tried using "fast", "slow" and other properties of animate but don't seem to figure out what exactly needs to be done.
$(".m-menu").toggle(function() {
$('#mobile-menu-bg').animate(
{ right: '0', speed: '1500' },
1500
//{ duration: 500, queue: false },
);
$('#page-wrapper').animate(
{ 'margin-left': '-80%', speed: '1000' },
1000
//{ duration: 500, queue: false }
);
}, function() {
$('#mobile-menu-bg').animate(
{ right: '-80%' }
//{ duration: 500, queue: false }
);
$('#page-wrapper').animate(
{ 'margin-left': '0' }
//{ duration: 500, queue: false }
);
}
);
Please help

jQuery CarouFredSel plugin triggering a configuration

i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).
And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I need immediately when mouse over, out at next,prev button and set those configuration. I can't find issue.
My code:
$(".sponsors-slider-slide").carouFredSel({
scroll: {
items: 1,
duration: 2000,
queue: true,
timeoutDuration: 0,
easing: "linear",
pauseOnHover: "immediate-resume",
fx: "scroll"
},
responsive: false,
circular: true,
infinite: false,
swipe: {
onTouch: true,
onMouse: true
},
width: "variable",
height: "variable",
items: {
visible: 4,
minimum: 0,
width: "variable",
height: "variable"
},
align: false,
debug: false
});
and example of next button:
$("#sponsors-slider-next").on("mouseover mouseout", function(e){
if(e.type == "mouseover")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 1000, true]);
}
if(e.type == "mouseout")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 2500, true]);
}
return false;
});
The question is, how to set scroll.duration when mouseover immediately on next button, not when carousel is finish slide ?
Thanks in advice.
It has to finish the transition before it can change configurations. To finish the transition immediately, trigger the finish event.
$(".sponsors-slider-slide").trigger('finish');
Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.
BTW, it would be more efficient to chain multiple methods rather than repeat selectors:
$(".sponsors-slider-slide")
.trigger("finish")
.trigger("configuration", {
direction: "left",
scroll: {
duration: 1000
},
reInit: true //not sure that you need this
});

Pause event in carouFredsel

I'm having trouble with a carousel.
I want to add a pause or a stop event to a carousel.
I already have built a slider, on the left side you have a navigation page for the sliders.
The slider starts automatically, I want it to stop if I choose a slide manually
Here's my code:
Thanks for any hints.
jQuery(this).parent().find('.navigation>ul>li').eq(0).addClass('active').end().each(function(){
jQuery(this).on('click', function(){
jQuery(this).parents('.csc-slider').find('.pager>a').eq(jQuery(this).index()).trigger('click');
return false;
});
});
var swidth = jQuery(this).width();
jQuery(this).find('img')
.width(swidth +'px !important')
.eq(0)
.imagesLoaded()
.done(function($images){
jQuery($images).parents('.slideshow')
.find('.item')
.css({display:'block', float:'left'})
.end()
.carouFredSel({
width: "100%",
height: "variable",
items: {
visible: 1,
height: "auto"
},
scroll: {
fx : "crossfade",
duration : 5000,
onAfter:function(data) {
var p = jQuery(this).parents('.csc-slider');
var i = p.find('.pager>a.selected').index();
p.find('li.active').removeClass('active');
p.find('.navigation>ul>li').eq(i).addClass('active');
}},
auto: {
pauseOnHover: "resume",
pauseOnEvent: true,
timeoutDuration: 5000,
},
prev: {
button: jQuery($images).parents('.csc-slider').find('.prev'),
},
next: {
button: jQuery($images).parents('.csc-slider').find('.next'),
},
pagination: jQuery($images).parents('.csc-slider').find('.pager'),
});
You can add a click event to navigation buttons to stop the auto scrolling:
$(".slider-pages .prev, .slider-pages .next, .slider-nav a").click(function(){
carouFredselObject.trigger("configuration", {auto: false});
});

Merging two "(document).ready(function()"s

I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?
You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.

Categories