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;
});
```
Related
I'm using Swiper slider plugin (https://swiperjs.com). And I need to add opacity 0.5 to slides on the edges of visible viewport. https://i.stack.imgur.com/A6nr5.png
I find out that I can select the right slide with this selector, and change it with media queries when quantity of visible slides change:
.swiper-slide-active + * + * + * {
opacity: 0.5;
}
But this trick will not work for the slide from the left side. I guess there is no only CSS solution and I have to use JS to detect visible slides?
const specialSlider = new Swiper('.special-slider', {
loop: true,
speed: 1000,
slidesPerView: 'auto',
spaceBetween: 30,
centeredSlides: true,
navigation: {
nextEl: '.special-slider__next',
prevEl: '.special-slider__prev',
},
watchOverflow: true,
grabCursor: true,
});
It is pretty easy, swiper does the heavy lifting for you. Just add this in your swiper settings:
// Deprecated
// watchSlidesVisibility: true
// 7.0.0 +
watchSlidesProgress: true
Now you can use the class swiper-slide-visible to style your visible slides.
For example:
.swiper-slide {
opacity: .25;
}
.swiper-slide-visible {
opacity: 1;
}
Keep in mind, it is easy to change the namespace for each class:
slideClass: 'myslider__slide',
slideVisibleClass: 'myslider__slide--visible'
Update
Example on Codepen
Update 2
Example (only 1 edge) on Codepen
Here is a solution that I find out:
const specialSlider = new Swiper('.special-slider', {
loop: true,
speed: 1000,
slidesPerView: 'auto',
spaceBetween: 0,
centeredSlides: true,
navigation: {
nextEl: '.special-slider__next',
prevEl: '.special-slider__prev',
},
watchOverflow: true,
grabCursor: true,
on: {
init: makeSlidesTransparent,
slideChangeTransitionStart: makeSlidesTransparent,
}
});
function makeSlidesTransparent() {
//Hide old slides
const oldSlides = d.getAll('.special-slider__item.js-visible');
for (let i = 0; i < oldSlides.length; i++) {
oldSlides[i].classList.remove('js-visible')
}
const width = window.innerWidth;
if (width >= 0 && width < 960) {
//Make visible new slides
const activeSlide = d.get('.special-slider__item.swiper-slide-active');
activeSlide.classList.add('js-visible');
}
if (width >= 960 && width < 1700) {
//Make visible new slides
const activeSlide = d.get('.special-slider__item.swiper-slide-active');
const prev1 = activeSlide.previousElementSibling;
const next1 = activeSlide.nextElementSibling;
prev1.classList.add('js-visible');
activeSlide.classList.add('js-visible');
next1.classList.add('js-visible');
}
if (width >= 1700) {
//Make visible new slides
const activeSlide = d.get('.special-slider__item.swiper-slide-active');
const prev1 = activeSlide.previousElementSibling;
const prev2 = prev1.previousElementSibling;
const next1 = activeSlide.nextElementSibling;
const next2 = next1.nextElementSibling;
prev1.classList.add('js-visible');
prev2.classList.add('js-visible');
activeSlide.classList.add('js-visible');
next1.classList.add('js-visible');
next2.classList.add('js-visible');
}
}
And styles:
.special-slider {
&__item {
padding-left: 15px;
padding-right: 15px;
width: 330px;
box-sizing: border-box;
height: auto;
opacity: 0.5;
transition: all $transition-style-slow;
&.js-visible{
opacity: 1;
}
.product-item {
background-color: rgba(218, 215, 205, 0.2);
}
}
}
I've been trying to resolve my problem by reading other topics linked to gsap / on.resize issues but i didnt found any proper answer.
When I open the menu, the logo is working correctly and set it's position to center of the screen { y:0 } . However, once the menu is closed i cant manage to force the logo back to it's original position { y:-logoPosition +20 }. The values are not updating on "menuclosing state".
I must be messing with var updates but i'm clueless to make this work.
Hope someone can help me !
Thanks in advance :)
Jsfiddle
// Scope
var menuFrame = $('#menu-frame');
var menuH = window.innerHeight;
var navH = $("nav").height();
var logoH = $("#logo").height();
var logoPosition = (menuH -navH)/2;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logoDiv = $('#logo-divider');
var navList = $('ul#menu-nav li');
// New Gsap timeline
var menuAnim = new TimelineMax({ paused: true, reversed: true });
// Animation when toggle clicked
menuAnim.fromTo([menuFrame], 0.6, {backgroundColor : 'rgba(0, 0, 0, 0.01)'}, {backgroundColor : 'rgba(250, 250, 250, 1)', ease: Power2.easeInOut},0.1);
menuAnim.from([logo], 0.6, { y:-logoPosition +20, ease: Power2.easeInOut });
menuAnim.fromTo([logoDiv], 0.6, { width: 0}, { width: '20%', ease: Power2.easeInOut });
menuAnim.staggerFromTo(navList, 1.2, {scale:0.5, opacity:0, delay:0.5}, { scale:1, opacity:1, ease:Elastic.easeOut, force3D:true}, 0.2);
// Reverse anmiation on click
toggleMenu.on('click', function() {
$(this).toggleClass('active');
menuAnim.reversed() ? menuAnim.play() : menuAnim.reverse();
});
// If toggle is active logo position is middle off the frame
$(window).resize(function(){
if ($(toggleMenu).hasClass('active')) {
menuH = window.innerHeight;
navH = $("nav").height();
logoH = $("#logo").height();
logoPosition = (menuH -navH)/2;
var menuAnim = new TimelineMax({ paused: true, reversed: true });
menuAnim.from([logo], 0.6, { y:0 }, { ease: Power2.easeInOut });
menuAnim.pause()
}
// If toggle is not active logo position = top of the frame
else {
menuH = window.innerHeight;
navH = $("nav").height();
logoH = $("#logo").height();
logoPosition = (menuH -navH)/2;
var menuAnim = new TimelineMax({ paused: true, reversed: true });
menuAnim.from([logo], 0.6, { y:-logoPosition +20 }, { ease: Power2.easeInOut });
menuAnim.pause()
}
});
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 working on a div scroller and found this javascript. I would like to convert it so I can use percentage.
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 400, /*This changes the height of the DIV Scroller*/
"scrollCollapse": true,
"jQueryUI": true
} );
} );
</script>
"Scrolly": 400, would like to turn it into %
try something for calculate percentage
var sc = $(window).scrollTop(),
dh = $(document).height(),
ch = $(window).height();
scrollPercent = (sc / (dh-ch)) * 100;
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