Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
jquery - viewport
Is there a way to have viewport depended javascript values?
I started using the bxslider plugin with the code below
<script>
$(document).ready(function(){
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 2,
maxSlides: 2,
moveSlides: 2,
slideMargin: 10
});
});
</script>Can anyone suggest a method to change that so as to serve 3 slides if the viewport is 960px and over and 1 slide if the viewport is under 960 px?
Something like
if viewport ≥ 960
<script>
$(document).ready(function(){
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
</script>
else
<script>
$(document).ready(function(){
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
});
});
</script>Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: jquery - viewport
I’m not on my computer now so I can not check it but does anybody know if this would work?
<script>
$(document).ready(function(){
$('.slider').bxSlider({
if ($(window).width() < 960
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 2,
slideMargin: 10
}
else
slideWidth: 340,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
}
});
});
</script>Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#3 2015-05-06 11:46:27
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: jquery - viewport
if(window.innerWidth < 960) { …Offline
Re: jquery - viewport
Hmmm that does not work for me but it might be my syntax
<script>
$(document).ready(function(){
$('.slider').bxSlider({
if(window.innerWidth < 960) {
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 2,
slideMargin: 10
}
else {
slideWidth: 340,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
}
});
});
</script>Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#5 2015-05-06 13:42:52
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: jquery - viewport
<script>
$(function(){
if(window.innerWidth < 960) {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
});
}
else {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 2,
slideMargin: 10
});
}
});
</script>Offline
Re: jquery - viewport
thanks so much, that works – kind off:(
The problem now is that it only works onload and it does not change if I resize the browser window (I would think that it will not work if a tablet is turned by 90 degrees). Would you know how to include the resize functions discussed here. As you can tell javascript is not one of my strengths.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#7 2015-05-06 14:37:12
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: jquery - viewport
<script>
$(function(){
$(window).resize(function() {
if(window.innerWidth < 960) {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
});
}
else {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 2,
slideMargin: 10
});
}
});
});
</script>Last edited by GugUser (2015-05-06 14:39:06)
Offline
Re: jquery - viewport
This is what I have but it does not work.
<script>
$(function(){
$(window).resize(function() {
if(window.innerWidth < 960) {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
});
}
else {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 2,
slideMargin: 10
});
}
});
});
</script>Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#9 2015-05-06 14:51:52
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: jquery - viewport
I suppose the slider script needs to reload to change the options.
Last edited by GugUser (2015-05-06 15:18:42)
Offline
Re: jquery - viewport
Hi GugUser, Colak.
See Window.matchMedia() (IE 10+)
There are polyfill for that.
Offline
Re: jquery - viewport
I guess when you say 1 silde and 3 slides, you mean the number of images in a carousel visible at once. If you just mean a slider or a standing image, I’d simply either show an image and no slider at small sizes, or else halt the slider at small sizes.
To detect a change in window size and act on it I think you need:
$(window).on('resize', function () { … });You may also find you don’t need to reinitialize the slider entirely but can use bxslider’s reload function with your new settings.
Finally Sacripant’s tip (or similar scripts such as formstone media-query) is perhaps better as it will only trigger actions on entering or leaving a media-query area and won’t therefore respond to every miniature change in window size.
TXP Builders – finely-crafted code, design and txp
Offline
Re: jquery - viewport
Unfortunately I am yet to crack the syntax for javascript so I have no idea how to implement it. The slider is active on a lot of pages and it is used to embed videos from vimeo. It can be seen in action on this sample page
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline