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,477
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,477
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,477
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,477
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
Re: jquery - viewport
My mistake: It turns out $(window).on('resize', function() … is the same as $(window).resize(function () … (as described here). Both variants should work.
Something like this should work with formstone mediaquery and the bxslider reload function as described here (btw: this shows an example of the preventDefault() described in the other thread):
<script src="path/to/js/formstone/core.js"></script>
<script src="path/to/js/formstone/mediaquery.js"></script>
<script>
$(function(){
// initialize slider the first time
var slider = $('.slider').bxSlider({
slideWidth: 340,
minSlides: 3,
maxSlides: 3,
moveSlides: 2,
slideMargin: 10
});
// trigger event when a media-query boundary is crossed
$.mediaquery("bind", "mq-key", "(max-width: 960px)", {
// less than 960px – reload slider with 1 slide in view
enter: function() {
slider.reloadSlider({
minSlides: 1,
maxSlides: 1,
moveSlides: 1
});
},
// greater than 960px – reload slider with 3 slides in view
leave: function() {
slider.reloadSlider({
minSlides: 3,
maxSlides: 3,
moveSlides: 2
});
}
});
});
</script>(Note: for IE8 and IE) you may need a matchmedia polyfill as described here)
If you want to work mobile-first, you would do it the other way and start with the 1 slide settings and then change to 3 slides on min-width: 960px.
BTW: I often get a “403: ERR_TOO_MANY_REDIRECTS” when I call up your site. Maybe that’s your maintenance mode, or maybe your IP filtering is refusing my normal t-online Germany IP range.
TXP Builders – finely-crafted code, design and txp
Offline
Re: jquery - viewport
jakob wrote #290534:
My mistake: It turns out
$(window).on('resize', function() …is the same as$(window).resize(function () …(as described here). Both variants should work.Something like this should work with formstone mediaquery and the bxslider reload function as described here (btw: this shows an example of the preventDefault() described in the other thread):
<script src="path/to/js/formstone/core.js"></script>...(Note: for IE8 and IE) you may need a matchmedia polyfill as described here)
Thanks soo much.. I’ll check this now
BTW: I often get a “403: ERR_TOO_MANY_REDIRECTS” when I call up your site. Maybe that’s your maintenance mode, or maybe your IP filtering is refusing my normal t-online Germany IP range.
Hmm that may be arc_redirect. I actually do have a lot of redirects pushing hackers to google. The site has been infested from script kids trying to find vulnerabilities. The main url variations they use, are fckedior, connectors, wp-admin, wp-login, uploadTester, Tester, admin, wp, wp-content, xmlrpc, ckeditor and editor. All together there are about 200 urls.
I tried to use the rules below in the htaccess but they do not work as it just returns a 404. Since your report I disabled the plugin as reaching the site is more important than pushing the hackers out.
RewriteEngine on
RewriteCond %{REQUEST_URI} admin [OR]
RewriteCond %{REQUEST_URI} fckedior [OR]
RewriteCond %{REQUEST_URI} ckeditor [OR]
RewriteCond %{REQUEST_URI} wp-admin [OR]
RewriteCond %{REQUEST_URI} wp-login [OR]
RewriteCond %{REQUEST_URI} uploadTester [OR]
RewriteCond %{REQUEST_URI} Tester [OR]
RewriteCond %{REQUEST_URI} wp [OR]
RewriteCond %{REQUEST_URI} wp-content [OR]
RewriteCond %{REQUEST_URI} xmlrpc [OR]
RewriteCond %{REQUEST_URI} editor [OR]
RewriteCond %{REQUEST_URI} connectors
RewriteRule http://google.com [R]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
colak wrote #290536:
I actually do have a lot of redirects pushing hackers to google.
I’d be hesitant to do this. I can totally see the logic, but if something/someone at Google sees slews of that type of traffic it might trigger something that blocklists you, or something similar. How about redirecting to 127.0.0.1 instead?
Online