响应JavaScript - 加载/隐藏与浏览器宽度相关的特定功能？ [英] Responsive JavaScript – load/hide specific function related to browser width?

问题描述

首先，我没有进入JavaScript / JQuery！ ...但我会尽力指出我想要做什么。

我在我的网页上使用了精彩的bx-slider，并通过媒体查询让我的网站响应目前这两种方法都很有效。 ...但是有一些来自bx-slider-script的特性，我不想在特定的浏览器宽度上激活它。这是我想要的：

浏览器宽度低于500px =加载此函数：

  $（'＃slider4'）。bxSlider（{
 minSlides：2，
 maxSlides：2，
 slideWidth：230，
 slideMargin：10，
 nextSelector：'#next'，
 prevSelector：'#prev'，
 infiniteLoop：false，
 hideControlOnEnd：true，
 pager：false，
 useCSS：假，
缓动：'easeInOutExpo'，
速度：1000 
}）; 
  

浏览器宽度高于500px =隐藏上述函数并加载此函数：

  $（'＃slider4'）。bxSlider（{
 minSlides：4，
 maxSlides：4，
 slideWidth：230，
 slideMargin：20，
 nextSelector：'#next'，
 prevSelector：'#prev'，
 infiniteLoop：false，
 hideControlOnEnd：true， 
 pager：false，
 useCSS：false，
 easing：'easeInOutExpo'，
 speed：1000 
}）; 
  

...甚至可以在JavaScript中使用吗？我尝试了一些使用突破点的脚本，但它认为我的JS知识很弱，无法按照我的需要进行工作。

如果有人在这里可以告诉我如何轻松做到这一点，那将是非常好的选择！

解决方案

  If（$（document）.width（）<500）{
 ... 
} else {
 ... 
} 
  

http://api.jquery.com/width/

您可能还想将onchange事件

  $（window）.resize（function（）{
 resizefunction（）; 
 }）; 
  

http://api.jquery.com/resize/

first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do.

i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want:

browser-width LOWER than 500px = load this function:

$('#slider4').bxSlider({
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 230,
    slideMargin: 10,
    nextSelector: '#next',
    prevSelector: '#prev',
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false,
    useCSS: false,
    easing: 'easeInOutExpo',
    speed: 1000
});

browser-width HIGHER than 500px = hide the function above and load this one:

$('#slider4').bxSlider({
    minSlides: 4,
    maxSlides: 4,
    slideWidth: 230,
    slideMargin: 20,
    nextSelector: '#next',
    prevSelector: '#prev',
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false,
    useCSS: false,
    easing: 'easeInOutExpo',
    speed: 1000
});

…is that even possible in JavaScript? I tried some scripts which are using breaking points but it think my JS-knowledge is to weak to get this to work as i want.

It would be great if there's someone out here which can show me how to do this easily!

解决方案

If($(document).width() < 500){
...
}else{
...
}

http://api.jquery.com/width/

You may also want to put in an onchange event

$( window ).resize(function() {
 resizefunction();
});

http://api.jquery.com/resize/

这篇关于响应JavaScript - 加载/隐藏与浏览器宽度相关的特定功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！