I want:
autoplay: false when is width>900 in window size and ,
autoplay: true when is width<900 & width>701 in window size and ,
autoplay: false when is width<701 in window size
with jQuery flowslideshow and when the window is resized run this code
but notworking.
$(window).resize(function () {
var width = $(window).width();
if (width > 900) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
}
else if (width < 900 & width > 701) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: true**, clickable: false });
});
}
else (width < 701)
{
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
} });
The onResize event of the window does not always fire on page load, so the slideshow wouldn't autoplay in that case. It does appear to fire on page load in ie9.
Also, this code would recreate the slideshow every time the page is resized - which is probably not what you want either.
You might be better binding the slideshow on page load, and then binding an event to resize that pauses / resumes the slide behaviour. Like this:
jQuery(function($) {
// detect window size and init slideshow here
$(window).on('resize', function () {
// detect window size and pause or resume the slideshow
});
});
Without seeing the docs for the slideshow you're using I can't point you in the direction of exactly how to modify the slideshow after it's initialised, but it should be possible if you follow the principle above.
(On a side note, to check the resize event is being triggered correctly, you could console.log($(window).width()))
If you need more help, consider posting a Fiddle with the full example in it, and link to the docs for the slideshow plugin you're using.
Related
I have a slick slider for my images:
// Slick slider - Responsive
$(window).on('resize', function() {
if ($(this).width() > 1600) {
$('.images').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 20, // Set at least half of all slides
centerMode: true,
initialSlide: 0, // Fix for centerMode with 1
variableWidth: true,
arrows: true,
draggable: true,
swipeToSlide: true,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000
});
}
else {
$('.images').unbind(slick());
};
});
$(document).ready(function() {
$(window).resize();
});
If I refresh the page with a viewport less than 1600px (big size only for demo purposes), the slider not become active, works great. However if I change my browser's width bigger than 1600px and change it back to less than 1600px, the slider's code stays. I used slick slider's built-in responsive flags and unslick feature, but the problem was the same just like here: not completely clearing up it's code.
How can I completely remove it's code without refresh, only with viewport size change?
Edit:
Strange, but looks like this unbinding completely:
else {
$('.images').slick('unslick');
};
However the documentation suggested way is not, just partly:
responsive: [
{
breakpoint: 1600,
settings: 'unslick'
}
Edit:
Although the documentation suggested way removing it too, but not re-binding when the browser's the viewport size reaching where it should be active.
EDIT2:
THiCE's solution modified that only use timer for resize event. This way I won't get any console error on load because of .slick('unslick'); hack:
$(document).ready(function() {
$(window).on('load', function() {
handleSlick();
console.log('handleSlick() fired on load...');
});
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
console.log('handleSlick() fired on resize...');
}, 100);
//console.log('jquery on window resize');
});
//handleSlick();
});
Sometimes using a setTimeout does the trick: the resize event is fired lots of times during resizing.
If you use a timer inside the resize callback that resets and starts everytime the resize event fires, you prevent those 'double' fires.
An example, for your case:
// Slick slider - Responsive
function bindSlick() {
$('.images').slick({
dots: false,
infinite: true,
// etc...
});
}
function unbindSlick() {
$('.images').slick('unslick');
}
function handleSlick() {
if ($(window).width() > 1600) {
bindSlick();
} else {
unbindSlick();
}
}
$(document).ready(function() {
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
}, 100);
});
handleSlick();
});
Hi i use magnific pop up for an image gallery and i want to hide a div when the image zoom in and show it again when the image zoom out. This is my code :
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
},
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out',
// CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
opener: function(openerElement) {
// openerElement is the element on which popup was initialized, in this case its <a> tag
// you don't need to add "opener" option if this code matches your needs, it's defailt one.
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
Where should i put the the hide() and show() functions so they will be triggered same time with the magnific popup.
Don't use css for that, jQuery has built in functions for showing and hiding elements.
open: function(){
$(".main").hide();
},
close: function(){
$(".hidden-div").show();
}
Use this $( ".main" ).hide(); in your open function.
I want to use flexslider with mousewheel here is the my example
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false
});
http://jsfiddle.net/VC4L3/
it's working but too fast. I'm using magic mouse by the way I'm trying touchpad too when I scroll down it's moving 2,3 sliders. I need each scrol down move 1 slide. How can I do that?
I couldn't find a simple solution for this so i have changed the source code of the flexslider, to disable scroll once the animation is started, here is what i did:
change bind for mousewheel to be like this.
slider.bind('mousewheel', function (event, delta, deltaX, deltaY) {
if (!slider.startedMouseWheel) {
slider.startedMouseWheel = true;
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
});
find call of the vars after function
and insert this code before it:
slider.startedMouseWheel = false;
to have
slider.startedMouseWheel = false;
slider.vars.after(slider); //This is call of the vars after function
this way you will disable triggering new events on mouse scroll until animation is finnished.
Try adding animationSpeed into the flexslider.
Demo: http://jsfiddle.net/lotusgodkk/VC4L3/1/
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false,
animationSpeed: 4000,
});
For my site, I inizialized pageScroller by a function that changes scrollOffset depending on the window width.
jQuery(function offset_value(){
if ($(window).width() < 960) {
$(document).ready(function(){
// initiate page scroller plugin
$('body').pageScroller({
navigation: '#nav',
scrollOffset: -40
});
});
} else {
$(document).ready(function(){
// initiate page scroller plugin
$('body').pageScroller({
navigation: '#nav',
scrollOffset: -195
});
});
}
});
However, I need also to reload this function at window resize. For example, if the user rotate the smartphone, the window width changes. So, I added this code:
$(window).resize(function() {
offset_value()
}).resize();
The problem is that the scrollOffset value does not change at window resize, as if the offset_value function was not called.
A (not so elegant) solution is to refresh the entaire page at window resize:
$(window).resize(function() {
location.reload();
return;
});
but I don't like one has to wait for the site to reload at the rotation of the device.
Where is the problem? Any suggestion?
Thanks.
One problem here is that your function declaration makes it inaccessible from outside:
jQuery(function offset_value() { ... });
This declares an anonymous function which can only be referenced by offset_value from the function's own body.
To fix this, you must declare the function outside:
function offset_value()
{
...
}
jQuery(offset_value); // run on document ready
You can also remove the $(document).read() because that's already done when you use jQuery(fn).
Update
To reinitialise the plugin you need to reset the global pageScroller:
pageScroller = {};
$('body').pageScroller({ ... });
You do not need document ready handler which is there inside the function:
jQuery(function offset_value(){
if ($(window).width() < 960) {
// initiate page scroller plugin
$('body').pageScroller({
navigation: '#nav',
scrollOffset: -40
});
} else {
// initiate page scroller plugin
$('body').pageScroller({
navigation: '#nav',
scrollOffset: -195
});}
});
You should not use document-ready handler in your function. Also I would recommend you to create a function and pass it to document-ready handler and window-resize handler
Use
//Create a function
function offset_value() {
if($(window).width() < 960) {
// initiate page scroller plugin
$('body').pageScroller({
navigation: '#nav',
scrollOffset: -40
});
} else {
// initiate page scroller plugin
$('body').pageScroller({
navigation: '#nav',
scrollOffset: -195
});
}
};
//Pass function reference to document-ready handler and window resize
$(document).ready(offset_value);
$(window).resize(offset_value).resize();
I want to resize bjqs slider when the window resizes..
this is what i've got so far:
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function(){
$('.pagebg').bjqs({
height : 347,
width : $(window).width(),
showcontrols : false,
showmarkers : false,
});
});
});
</script>
I've tried to resize it using $(window).resize, but there are multiple instances running
does anyone know how I can resize it and keep only 1 instance running?
Without using window resize event you can define you slider with a width option of 100% like:
$(function () {
$('#dialog').bjqs({
'showmarkers': false,
'responsive': true,
'width': '100 %',
'automatic': true
});
});
So it will be automatically responsive without handle its resize.
Demo: http://jsfiddle.net/IrvinDominin/MADrg/