I am using bx slider but the problem is that when i resize the window, the images in slider should change according to window size..
I have tried the below code and it works but every time I have to reload the page, can anybody help me please. And thanks in advance.
<script type="text/javascript">
if ($(window).width() < 480 ) {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 2,
maxSlides: 2,
startSlide: 0,
slideMargin: 10
});
});
}
else if ($(window).width() > 480 ) {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 4,
maxSlides: 4,
startSlide: 0,
slideMargin: 10
});
});
}
else {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 4,
maxSlides: 4,
startSlide: 0,
slideMargin: 10
});
});
}
</script>
First make put your slider into a var (better for later "reloadSlider"), then make your life easier by creating var-s for your settings (since you will need them at least twice).
Finally you need a $( window ).resize function.
See if it works (I didn't test it but should work since I have just completed mine - kind of more complicated to show it).
Try this (by the way, I see that 'medium' and 'big' sizes have same settings...):
<script type="text/javascript">
var slider;
var defsOne = { slideWidth: 280, minSlides: 2, maxSlides: 2, startSlide: 0, slideMargin: 10 }
var defsTwo = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
var defsThree = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
var myDefs = {};
$(document).ready(function(){
if ($(window).width() < 480 ) {
myDefs = defsOne;
}
else if ($(window).width() > 480 ) {
myDefs = defsTwo;
}
else {
myDefs = defsThree;
}
slider = $('#slider1').bxSlider(myDefs);
});
$( window ).resize(function() {
var ww = $(window).width();
if ($(window).width() < 480 ) {
myDefs = defsOne;
}
else if ($(window).width() > 480 ) {
myDefs = defsTwo;
}
else {
myDefs = defsThree;
}
slider.reloadSlider( myDefs );
});
</script>
Actually I would not slider.reloadSlider() at every resize (at every window pixel change), put somewhere a flag to check if size really changed from previously used one and only then do the reload:
if ( sizeReallyChanged ) {
slider.reloadSlider( myDefs );
}
If you don't you are going to reload it tons of times ...
Of some extra-help could be setting an object for "global settings" - since yours are all almost the same an then :
var defsGlobal = { slideWidth: 280, startSlide: 0, slideMargin: 10 }
var defsOne = { minSlides: 2, maxSlides: 2 }
var defsTwo = { minSlides: 4, maxSlides: 4 }
and finally "connect" all of them (of in the right place i.e. 'if'):
...
wholeDefs = $.extend( {} , defsOne, defsGlobal);
...
slider = $('#slider1').bxSlider(wholeDefs);
...
Hope this could help,
Bye nIc
Related
I have some Jquery
I need do call the var called ServicesAnimation when I scroll to main div or section that have div called for example regtangle-blue.
how can do that ?
jQuery(document).ready(function() {
var ServicesAnimation = anime.timeline().add({
targets: ['.box-info', '.regtangle-blue .h2', '.regtangle-blue .h3', '.regtangle-blue .h4', '.services .serv-box', '.how-it-works .h2', '.how-it-works .h3', '.how-it-works .col-md-4'],
translateY: [60, 0],
translateZ: 0,
opacity: [0, 1],
duration: 1600,
delay: anime.stagger(100)
});
});
I have this code (some of which might not make a ton of sense...), but here's what I'm trying to accomplish.
1) Use the window.matchMedia key to determine the width of the screen
2) create a function based on the media query that prints out a value to the variable gridSize
3) Pass that getGridSize function into a list of options for a slider.
The code I have is
var mq = window.matchMedia( "(min-width: 500px)" );
var gridSize = getGridSize();
function getGridSize() {
if (mq.matches) {
// window width is at least 500px
gridSize = 4;
} else {
// window width is less than 500px
gridSize = 1;
}
};
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
$('.flexslider').flexslider({
animation: "slide",
animationSpeed: 400,
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(),
maxItems: getGridSize(),
prevText: "",
nextText: ""
});
I amalgamated 2 pieces of code, trying to sort out the bits that I need from each, so it feels a bit frankenstein-like, and is probably why it's not working.
If you set 'flexslider.vars' you need to declare it somewhere.
You are missing a 'resize' listener on the window
```
var flexslider = {vars: {}};
var mq = window.matchMedia( "(min-width: 500px)" );
function getGridSize() {
return mq.matches ? 4 : 1;
};
$('.flexslider').flexslider({
animation: "slide",
animationSpeed: 400,
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(),
maxItems: getGridSize(),
prevText: "",
nextText: ""
});
$(window).on('resize', function() {
var gridSize = getGridSize();
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
```
I am using bxslider.js to make a slider on my page. Since my site is responsive, the code I have allows different parameters for the slider depending on the size of the window. For example, when the window is over 768px the slider shows 2 slides. When it is under 768 it shows 1 slide and when it's under 480, the slider function stops completely. All this works fine. However it only works on load. I want it to work on resize too. I've played around the the window.resize function, but I don't have enough of a programing background to really know what I am doing or what the best way to do this is. Can anyone tell me how to get this to work both on load and on resize?
var sliderWidth = $('#testimonialSlider').width();
if ($(window).width() > 768) {
doubleslider = $('#testimonialSlider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
} else if ($(window).width() < 480) {
singleslider.destroySlider();
} else{
singleslider = $('#testimonialSlider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
}
You need to include your code not just on window.load function but also on window.resize() function.
Here check this solution
I have tried to eliminate repetitive window.resize call by using setTimeout function.
Also even after you destroySlider, the variable containing the slider object is not set to null. Hence added code to check the slider object availability too. You can use the code as is or fine tune it further to suit your requirements.
var sliderWidth,slider,id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(sliderResize, 1000); //settimeout to invoke resize just once
});
$(window).load(function() {
sliderResize(); //Same function invoked during window.load and resize
});
function sliderResize(){
sliderWidth = $('.bxslider').width();
if ($(window).width() > 768) {
/* check if slider object is set, else multiple sliders are created*/
if(slider == null || slider == undefined){
slider = $('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
}
else{ //else just reload the existing slider with new parameters
slider.reloadSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
}
} else if ($(window).width() < 480) {
/* destroy the slider only if already created*/
if(slider != null || slider != undefined){
slider.destroySlider();
}
} else{
/* check if slider object is set, else multiple sliders are created*/
if(slider == null || slider == undefined){
slider = $('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
} else{
slider.reloadSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
}
}
}
function slider(){
var sliderWidth = $('#testimonialSlider').width();
if ($(window).width() > 768) {
doubleslider = $('#testimonialSlider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
} else if ($(window).width() < 480) {
singleslider.destroySlider();
} else{
singleslider = $('#testimonialSlider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
};
};
$(window).load(function() {
slider();
});
$(document).resize(function() {
slider();
});
I am using BXslider carousel and want to display specific number of static slides in carousel as per screen width.
I tried to use jQuery resize(), but it is not working properly. You can see working demo here: pepnest.com/hbs
Here, when you resize browser, it cuts down height of slides.
This is my code in JS file:
$(document).ready(function(){
var width = $(window).width();
if (width < 368) {
$('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: 200,
slideMargin: 20,
captions: true
});
} else if (width < 700) {
$('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: 280,
slideMargin: 20,
captions: true
});
} else if (width < 980) {
$('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 280,
slideMargin: 20,
captions: true
});
} else if (width < 1200) {
$('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 3,
slideWidth: 280,
slideMargin: 20,
captions: true
});
} else {
$('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 280,
slideMargin: 20,
captions: true
});
}
$(window).resize(function(){
var width = $(window).width();
if (width < 368) {
$('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: 200,
slideMargin: 20,
captions: true
});
} else if (width < 700) {
$('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: 280,
slideMargin: 20,
captions: true
});
} else if (width < 980) {
$('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 280,
slideMargin: 20,
captions: true
});
} else if (width < 1200) {
$('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 3,
slideWidth: 280,
slideMargin: 20,
captions: true
});
} else {
$('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 280,
slideMargin: 20,
captions: true
});
}
});
});
Can anyone help me where I am going wrong?
I'm sorry to say that this is not the way. Imagine your browser initializing a new slider at every pixel of movement you make re-sizing it.
You have to destroy the bxSlider before initializing a new one!
slider.destroySlider();
http://bxslider.com/options
Besides that, you really do not have to fire the event at every re size action. Please check first if a 'redraw' is necessary (e.g. re sizing from 1020 to 1080 px doesn't need it)
For example using jQuery:
http://jsfiddle.net/r91ec9n6/3/
var resolutionLimits = [0, 368, 700, 980, 1200];
var currentResolutionLimit = null;
var resizeHandler = function()
{
var foundResolution = 0;
var windowSize = $(window.document).width();
for(var i = 0; i < resolutionLimits.length; i++)
foundResolution = windowSize > resolutionLimits[i] ? i : foundResolution;
if(foundResolution !== currentResolutionLimit){
currentResolutionLimit = foundResolution
var currentResolution = resolutionLimits[currentResolutionLimit];
// This is only called when the resolution is changed beyond a limit AND at document load
$(window.document.body).empty().append('Resolution changed, currently > ' + currentResolution);
}
}
$(window).resize(resizeHandler).resize();
I am designing a One page scrolling webpage. In the webpage I am using easy pie chart in my skill page. Now I want to load the easy pie chart animation when I reached the skill page.
I used the waypoint js but it not working. It load the animation when i am in the skill page but when i am in top and refresh the page & than go to the skill page, its not working.
my code are given bellow
custom.js:
jQuery('.skill').waypoint(function() {
$('.chart1').easyPieChart({
animate: 4000,
barColor: '#000',
trackColor: '#ddd',
scaleColor: '#e1e1e3',
lineWidth: 15,
size: 152,
});
}, {
triggerOnce: true,
offset: 'bottom-in-view'
});
Now how can i solve the problem ?
You can try this code:
$(window).scroll( function(){
/* Check the location of each desired element */
$('.skill').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it in */
if( bottom_of_window > bottom_of_object ){
$('.skill').easyPieChart({
size: 140,
lineWidth: 6,
lineCap: "square",
barColor: "#22a7f0",
trackColor: "#ffffff",
scaleColor: !1,
easing: 'easeOutBounce',
animate: 5000,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
}
});
});