Conceal a tag only visible at specific screen sizes

Question

Conceal a tag only visible at specific screen sizes

Is there a way to hide the following code when the screen resolution is 1024 X 768 or lower?

<!-- 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 -->

If you have a solution, please provide some code snippets or references. It's important for compatibility with users on Win XP, especially those using IE.

Which technology would be best suited for this task? JavaScript, CSS, or jQuery?

javascript jquery ajax css

Answer 1

Answer №1

When working with Internet Explorer versions prior to 9, media queries will not function as expected. In this case, it is advisable to utilize jQuery for targeted element manipulation.

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

While the above code snippet may not seem groundbreaking, incorporating

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

allows for further customization if needed. To apply modifications at specific resolutions for multiple elements, consider CSS media queries and perhaps include a compatibility tool like respond.js for IE support.

Answer 2

When working with Internet Explorer versions prior to 9, media queries will not function as expected. In this case, it is advisable to utilize jQuery for targeted element manipulation.

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

While the above code snippet may not seem groundbreaking, incorporating

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

allows for further customization if needed. To apply modifications at specific resolutions for multiple elements, consider CSS media queries and perhaps include a compatibility tool like respond.js for IE support.

Answer 3

Answer №2

give this a shot

  To check the window width, use:
  $(window).width() for width AND
  $(window).height() for height 

 var customWidth = 1200;
 if($(window).width() > customWidth)
  {
        //Don't display content
  }else{
       //Display content
  }

Answer 4

give this a shot

  To check the window width, use:
  $(window).width() for width AND
  $(window).height() for height 

 var customWidth = 1200;
 if($(window).width() > customWidth)
  {
        //Don't display content
  }else{
       //Display content
  }

Answer 5

Answer №3

To determine the appropriate margin, you must utilize the following:

screen.height;
screen.width;

Once you have these values, you can calculate your margin accordingly. Keep in mind that

$(window).width() & $(window).height()

will provide the browser window's width and height, not the resolution.

For an example, visit here.

Answer 6

To determine the appropriate margin, you must utilize the following:

screen.height;
screen.width;

Once you have these values, you can calculate your margin accordingly. Keep in mind that

$(window).width() & $(window).height()

will provide the browser window's width and height, not the resolution.

For an example, visit here.

Answer 7

Answer №4

Utilize media queries for responsive design!

Ensure your code is wrapped in a designated 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 }
}

Answer 8

Utilize media queries for responsive design!

Ensure your code is wrapped in a designated 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 }
}

Conceal a tag only visible at specific screen sizes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to execute Protractor using Node.js command line

Issue with parsing JSON occurs when utilizing jQuery in IE7 due to a "parseerror" being thrown

Refreshing the database with new information from an HTML table

center text vertically in HTML list

The key to creating efficient routers in Express: Don't Repeat Yourself!

Displaying grid in object in threejs: a tutorial

How can this be written in a shorter amount of CSS code?

Adding a programmatic option with additional data

When calling canvas.getContext('2D'), the function returns a null value

Is there a way to validate form elements in HTML prior to submitting the form?

Using default JavaScriptSerializer to bind DateTime to knockout view model

retrieve information in the form of an array by making an AJAX request with the

Enhance Your Internet Explorer Experience with AngularJS Blob URL Integration

The display message in Javascript after replacing a specific string with a variable

Dealing with database errors while making AJAX requests in CodeIgniter

Displaying information post-inquiry - Google Visualizations

Ensure that you decode the URL before making any changes to the location in a

Is there a way to align both a list icon and its contents in the center?

The submit() function is completely unresponsive

Looking for a way to create a regular expression that can parse an email response containing the newline character?