CODEWITHSUNDEEP
scriptingphphtmljavascript
user3416962
user3416962

Reputation: 89

How to switch 2 scripts based on browser size?

I'm new here.

I'd like to ask if you can switch 2 scripts using a script? Currently, I have 2 different sizes of banners which are being called using invocation codes.

Invocation code for 728x90

<ins data-revive-zoneid="12" data-revive-target="_blank" data-revive-blockcampaign="1" data-revive-id="713df90a5694f87d7cd7c1884e8e2f44"></ins>
<script async src="//www.site.com/baby/delivery/asyncjs.php">

Invocation code for 300x50

<ins data-revive-zoneid="6" data-revive-id="713df90a5694f87d7cd7c1884e8e2f44"></ins>
<script async src="//www.site.com/baby/delivery/asyncjs.php"></script>

What I have so far is this, but haven't tried it yet.

if (Webbrowser)
{

728x90 Invocation code

}

if(Mobile Browser)
{

300x50 Invocation code

}

Basically, I just want to switch 2 invocation codes depending on the size of the browser. Is this possible?

Upvotes: 0

Views: 188

Answers (1)

amisax
amisax

Reputation: 126

Keep both implementations in separate divs. In the css, hide or show the divs based on the size of the screen.

HTML

 <div class="largebanner"> <!-- code for banner large --></div>
 <div class="smallbanner"> <!-- code for banner small --></div>

CSS

@media (min-width: 768px) {
   .largebanner {
        display : block;
    }
   .smallbanner {
        display : none;
    }
}

@media (max-width: 767px) {
   .largebanner {
        display : none;
    }
   .smallbanner {
        display : block;
    }
}

Upvotes: 1

Related Questions