Hide a tag at certain screen resolution

Question

I want to hide following code at 1024 X 768 or lower screen resolutions:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ankitnagpal"></script>
<!-- AddThis Button END -->

How do I do it? Please share some code or references. The users with low resolutions usually use Win XP. So please see if the solution is compatible with IE version of Win XP.

Which technology can do it? Javascript, CSS or jQuery?

Answer 1

Actually media queries does not work in internet explorer less than 9. If you want to manipulate only this element i recommend to use jQuery way

if ( $(window).width() <= 1024 && $(window).height() <= 768 )
  $('.addthis_toolbox').hide();

Actually it does not do something special. Of course, you can use

$(window).on('resize', function(){ ... });

If you want to do something else magic with your code, but what i understood, you do not need. If you have more elements to modify at certain resolution, i recommend to use css media queries and for compatibility with "awesome" IE you maybe will use respond.js

Answer 2

try this

  $(window).width() for width AND
  $(window).height() for height 

 var your_width  = 1024;
 if($(window).width() > your_width)
  {
        //don't show
  }else{
       //show
  }

Answer 3

you have to use

screen.height;
screen.width;

Based on that values you can calculate your margin to whatever suits you. $(window).width() & $(window).height() gives the width and height of brrowser window not the resolution

Example here

Answer 4

Use media queries!

Wrap your code in a container:

<div id="container">
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    </div>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ankitnagpal"></script>
    <!-- AddThis Button END -->
</div>

Css:

@media screen and (max-height: 768px) and (max-width: 1024px) {
   .container { display: none }
}