Скрыть JavaScript на меньшем экране

Question

Я настраиваю свой сайт, чтобы быть отзывчивым, и я хочу знать, как скрыть свой livechat JavaScript, когда размер экрана меньше 700 пикселей.

Мой текущий LiveChat JavaScript является

 




function wsa_include_js(){ 

var wsa_host = (("https:" == document.location.protocol) ? "https://" : "http://"); 

var js = document.createElement("script"); 

js.setAttribute("language", "javascript"); 

js.setAttribute("type", "text/javascript"); 

js.setAttribute("src",wsa_host + "tracking-v3.websitealive.com/3.0/?objectref=wsa3&groupid=12581&websiteid=0"); 

document.getElementsByTagName("head").item(0).appendChild(js); 

} 

if (window.attachEvent) {window.attachEvent("onload", wsa_include_js);} 

else if (window.addEventListener) {window.addEventListener("load", wsa_include_js, false);} 

else {document.addEventListener("load", wsa_include_js, false);} 

Может кто-то пожалуйста, покажите мне, как. Спасибо

Answer 1

проверить это, это поможет вам. Its easy with JFiddle

Этот конкретный код меняет цвет при изменении размера, поэтому вы можете просто перестроить его для своей цели. Проверьте, что вы хотите получить там, в редакторе кода, и посмотрите результат.

function red() { 
$('div').css('background','#B60C0C') 
.text('Screen Size RED'); 
} 

function orange() { 
$('div').css('background','#EBAE10') 
.text('Screen Size ORANGE'); 
} 

function green() { 
$('div').css('background','#83ba2b') 
.text('Screen Size GREEN'); 
} 

var bounds = [ 
{min:0,max:500,func:red}, 
{min:501,max:850,func:orange}, 
{min:851,func:green} 
]; 

var resizeFn = function(){ 
var lastBoundry; // cache the last boundry used 
return function(){ 
    var width = window.innerWidth; 
    var boundry, min, max; 
    for(var i=0; i<bounds.length; i++){ 
     boundry = bounds[i]; 
     min = boundry.min || Number.MIN_VALUE; 
     max = boundry.max || Number.MAX_VALUE; 
     if(width > min && width < max 
      && lastBoundry !== boundry){ 
      lastBoundry = boundry; 
      return boundry.func.call(boundry);    
     } 
    } 
} 
}; 
$(window).resize(resizeFn()); 
$(document).ready(function(){ 
$(window).trigger('resize'); 
}); 

Answer 2

Это на самом деле можно решить довольно легко с запросами CSS СМИ, однако мне нужно знать, как LiveChat добавляется в HTML, чтобы дать вам хороший ответ.

То, что вы хотите сделать, это взять класс или идентификатор DIV, который содержит окно чата и добавить следующие строки в ваш файл CSS:

@media screen and (max-width: 700px) { 
    #LiveChatContainerID { display: none; } 
} 

или

@media screen and (max-width: 700px) { 
    .LiveChatContainerClass { display: none; } 
} 

Если LiveChat требует вы должны добавить iframe на свой сайт, просто оберните iframe в тегах div уникальным идентификатором или классом и используйте приведенное выше в своем CSS.

EDIT:

После просмотра вашего сайта, я думаю, что у меня есть решение, которое будет работать нормально: «важно!»

@media screen and (max-width: 700px) { 
    .wsa_window, .wsa_window_close { display: none !important; } 
} 

необходимо перезаписать стиль Javascript ставит на элементы непосредственно, но делать это в инспекторе, казалось, работало нормально, не удаляя ничего на странице.

Надеюсь, это поможет!

Answer 3

Я также не уверен, как вы добавили свой чат в свою страницу, но если у вас есть это в div-теге, вы можете скрыть этот div на меньших экранах.

Вы могли бы сделать это со сценарием, как в этом jsFiddle, но я думаю, что лучше использовать запросы к мультимедиа CSS, как ответила Oceanity.

В скрипке вы можете легко протестировать его, изменив размер выходной секции с помощью ручки в центре.

(размер устанавливается в 400px в демо-версию для облегчения тестирования в jsFiddle.)

Для проверки размера, который я использовал скрипт из этого SO question. Я делаю проверку размера в onload - и onresize события.

function getViewPortSize() 
 
{ // source code form here https://stackoverflow.com/questions/10653019/how-to-find-the-screen-width-and-apply-it-to-a-particular-css 
 
    var viewportwidth; 
 
    var viewportheight; 
 

 
    // Standard browsers 
 
    if (typeof window.innerWidth != 'undefined') 
 
    { 
 
     viewportwidth = window.innerWidth, 
 
     viewportheight = window.innerHeight 
 
    } 
 

 
    // IE6 
 
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
 
    { 
 
     viewportwidth = document.documentElement.clientWidth, 
 
     viewportheight = document.documentElement.clientHeight 
 
    } 
 

 
    //Older IE 
 
    else 
 
    { 
 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
 
    } 
 

 
    return { width: viewportwidth, height: viewportheight}; 
 
} 
 

 
var hideChat = function(evt) { 
 
    console.log(getViewPortSize().width); 
 
    if (getViewPortSize().width < 400) { 
 
     //console.log('hide div now'); 
 
     document.getElementById('chatArea').style = 'display: none'; 
 
    } 
 
    else { 
 
     document.getElementById('chatArea').style = 'display: block'; 
 
    } 
 
}; 
 

 
window.onresize = function(evt) { 
 
    console.log(evt); 
 
    hideChat(evt); 
 
}; 
 

 
window.onload = function(evt) { 
 
    console.log(evt); 
 
    hideChat(evt); 
 
};

<div id="chatArea"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
 
</div>