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/
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();
});
I'm combining some jQuery: Flexslider and Masonry.
Flexslider is triggered by global.js:
$(window).load(function() {
// Banner FlexSlider
$('#side-slider').flexslider({
animation: 'slide',
slideshow: true,
smoothHeight: false,
controlNav: false,
directionNav: false,
slideshowSpeed: 5000,
controlsContainer: ".flexslider-container",
});
}); // End on window load
The masonry is trigger in nwmasonry_init.js:
jQuery(document).on('ready', function() {
var $ = jQuery;
//Masonry
var container = document.querySelector('.overzicht');
var msnry = new Masonry(container, {
itemSelector: '.bedrijven',
gutter: '.gutter-sizer',
transitionDuration: 0,
});
});
On initial pageload, like can be seen here http://nieuws.ditisonzewijk.nl/category/brandevoort/ the slider on the top in the middle overlaps with another content block.
As soon as you resize the window, the slider resizes it's width and therefore the height of the slider is corrected.
Anybody have an idea on how to get the heigth of the slider right on the initial load?
You need to use imagesloaded.js. Overlapping is caused by masonry firing before all the images are loaded. Load the imagesloaded script and try this code:
jQuery(document).on('ready', function() {
var $ = jQuery;
//Masonry
var container = document.querySelector('.overzicht');
imagesLoaded(container, function() {
var msnry = new Masonry(container, {
itemSelector: '.bedrijven',
gutter: '.gutter-sizer',
transitionDuration: 0,
});
});
});
I've found a fix for this, even though it isn't pretty. I've put a delay on the masonry init.
function loadMasonry() {
***fire masonry***
}
setTimeout(loadMasonry, 500);
Now it's working correctly. Anybody an idea on how to fix this properly?
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'm using fancyBox v2.1.4. In Chrome it's allowing scrolling of the main page when the fancyBox is open.
I'm utilizing the locked: true but that doesn't seem to solve the issue. I have also considered using e.preventDefault to disable certain scrolling abilities as another option:
$(document).ready(function() {
$('.fancybox').fancybox({
'closeClick': false,
'scrolling': 'no',
helpers: {
overlay: {
closeClick: false,
locked: true
}
},
beforeShow: function() {
// considering some type of functionality here to prevent default
// of mousewheel
},
afterClose: function() {
// restore default action of mousewheel, although my initial attempts
// at this did not work
}
});
});
this code worked for me:
<script type="text/javascript">
$(document).ready(function() {
$(".lightbox").fancybox({
scrolling: "no",
openEffect: "elastic",
padding: 0,
closeEffect: "elastic",
afterShow: function(){
document.ontouchstart = function(e){
//prevent scrolling
e.preventDefault();
}
},
afterClose: function(){
document.ontouchstart = function(e){
//default scroll behaviour
}
},
helpers: {
overlay: {
locked: true
}
}
});
});
</script>
I've got a possible solution to your (and also my) problem. Before this, I was able to scroll the page behind the fancyBox on Android devices in the default browser. With this little 'hack' the user can't scroll the background page anymore, but it's a little bit glitchy though because of the speed the browser catches 'scroll' events.
UPDATE: On computer browsers this fix works like a charm. It's only the Android browser that glitches.
jQuery(document).ready(function($) {
var scrolltop, htmlOrBody;
var antiscrollevent = function(e) {
e.preventDefault();
$(htmlOrBody).scrollTop(scrolltop);
};
// links met een popover
$("a.popup").fancybox({
type: 'ajax',
beforeShow: function() {
// considering some type of functionality here to prevent default of
// mousewheel
htmlOrBody = $('body').scrollTop() != 0 ? 'body' : 'html';
scrolltop = $(htmlOrBody).scrollTop();
$(window).on('scroll', antiscrollevent);
},
afterClose: function() {
// restore default action of mousewheel, although my initial attempts
// at this did not work
$(window).off('scroll', antiscrollevent);
}
});
});
Worked for me perfectly:
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
This code works fine for me in Chrome (Windows Version 29.0.1547.57 m)
$(document).ready(function () {
$('.fancybox').fancybox({
closeClick: false,
scrolling: 'no',
helpers: {
overlay: {
closeClick: false //,
// locked: true // default behavior
}
}
});
});
See JSFIDDLE (in Chrome)
Many of the things I tried ended up disabling all interaction on mobile, making the FancyBox impossible to close.
I ended up overriding jQuery's scroll event on afterShow. This preserved interaction with FancyBox content while disabling scrolling of the body. Tested on Android Browser and Mobile Safari:
afterShow: function(){
$(document).on('scroll','body',function(e){
e.preventDefault();
});
}
Reset this on afterClose by repeating the scroll function without e.preventDefault();
You can use the scrollOutside setting:
.fancybox({
scrolling: "no",
scrollOutside: "false"
});
the scrolling setting prevents the vertical scrollbar to show.
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.