Hide JavaScript at a smaller screen

2018-06-18 21:55:07

I am setting up my website to be responsive, and I want to know how to hide my livechat JavaScript when the screen size is smaller than 700px.

My current livechat JavaScript is





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);}

Can someone please show me how. Thanks

This can actually be solved pretty easily with CSS media queries, however I need to know how the LiveChat is added to the HTML in order to give you a good answer.

What you want to do is take the class or ID of the div that holds the chat window and add the following to your CSS file:

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

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

If LiveChat requires you to add an iframe to your site, just wrap the iframe in div tags with a unique ID or class and use the above in your CSS.

EDIT:

After seeing your site, I think I have a solution that will work fine:

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

The '!important' is needed to overwrite the style the javascript puts on the elements directly, but doing this in the inspector seemed to work fine without removing anything else on the page.

Hope this helps!

check this out it will help you. Its easy with JFiddle

This particular code changes color on size change so you can simply restructure it for your purpose. Test what you want to achieve right there in the code editor and see your result.

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');
});

I'm also not sure how you have added your chat into you page but if you have it in a div-tag you could hide that div on smaller screens.

You could do it with a script like in this jsFiddle but I think it's better to use CSS media queries as Oceanity answered.

In the fiddle you can easily test it by changing the size of the output section with the handle at the center.

(The size is set to 400px in the demo for easier testing in jsFiddle.)

For checking the size I have used a script from this SO question. I'm doing the size checking in onload - and onresize event.

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>

链接地址: http://www.djcxy.com/p/53290.html

上一篇: 如何显示少于（GNU）的行号？

下一篇: 在较小的屏幕上隐藏JavaScript