Using JavaScript to change HTML when browser size changes?

Question

I'm making a website and would like one part of my HTML to run when the width of the browser is greater than 768px and another part of my HTML to run only when the width of the browser is less than or equal to 768px. I read an old StackOverflow question about this here, but am not sure how to carry out the JavaScript suggested by CodinCat as I have no experience with it. (More specifically, can I just directly insert the HTML between the curly brackets? What exactly do I put where it says "your media queries"--768px, @media..., etc.?

For example--
HTML when greater than 768px:

<img src="images/1.png" alt=""/>
<p>Some text</p>

HTML when less than/equal to 768px:

<p>Some text</p>
<img src="images/2.png" alt=""/>

Answer 1

<style>

@media (max-width: 768px) {
  .show-large {
    display: none;
  }
}

@media (min-width: 769px) {
  .show-small {
    display: none;
  }
}

</style>


<div class="show-large">
    <img src="images/1.png" alt=""/>
    <p>Some text</p>
</div>

<div class="show-small">
    <p>Some text</p>
    <img src="images/2.png" alt=""/>
</div>

You should check out bootstrap for this also: http://getbootstrap.com/css/#responsive-utilities . Bootstrap has classes that automatically show/hide content depending on screen size. They also have classes that can re-order your content (like the paragraph and the image) based on the screen size.

Answer 2

@Jeff Answers will certainly help, but, if this is going to be a recurring problem in your development and assuming you are going to have similar situations with other window sizes, I suggest you take the time to use something like bootstrap. http://getbootstrap.com/ and become familiar with terms like Media Query and Responsive Design.

Answer 3

This can be done without JavaScript using media queries:

@media all and (min-width: 768px) {
  .hide-wide {
    display: none;
  }
}

@media all and (max-width: 767px) {
  .hide-narrow {
    display: none;
  }
}

<img class="hide-wide" src="https://placehold.it/300x300/95ECD6/000/?text=<%20768px" alt=""/>
    
<p>Some text</p>
    
<img class="hide-narrow" src="https://placehold.it/300x300/DAC6FF/000?text=>=%20768px" alt=""/>

Here’s a JSBin demo as well: http://jsbin.com/dekape/edit?html,css,output

However, you should note that the browser will download both images, even if one is hidden. To prevent that, you could use background images, or better yet, responsive images using srcset or <picture>. Here’s a great primer on those http://blog.cloudfour.com/responsive-images-101-definitions/

Lastly, if you did want to run JavaScript based on the viewport width, my favorite library for helping with this is http://wicky.nillia.ms/enquire.js/

Answer 4

While Jeff's answer will get the job done, you will be doing your users and your servers a disservice by making users download both of the images—display: none simply hides it, it doesn't prevent it from being downloaded.

Also, it is counter-productive to accessibility (screen readers) and SEO to have duplicate content, i.e. the same text twice. If you need it only once, it should only be present once in the markup. Screen readers will read the same text aloud twice, while search engines will understand that you have the text on your page twice.

An ideal workaround for both the duplicate content issue and the wasteful downloading issue while still being able to show 2 different images based on screen size, would be to use background images instead of image elements.

Your HTML would not be duplicated:

<div class="box">
  <p>
    This is my text
  </p>
</div>

And with the following CSS, you would not force your users to load both images:

.box {
  height: 280px;
}

/* big screen */
@media (min-width: 769px) {
  .box {
    background: url('http://fakeimg.pl/350x200/00CED1/FFF/?text=big+screen+img') 0 0 no-repeat dodgerblue;
  }
}

/* small screen */
@media (max-width: 768px) {
  .box {
    background: url('http://fakeimg.pl/350x200/FF3399/FFF/?text=small+screen+img') 0 0 no-repeat magenta;
  }
}

See an example CodePen here.