CODEWITHSUNDEEP
javascriptjqueryhtml
Alex
Alex

Reputation: 133

Updating the HTML on real time using jQuery

On the desktop sizes, my navbar brand includes only one larger image. But on the mobile sizes I want that larger image to be replaced with two smaller images. For that, I have used jQuery and when I check it on the mobile it looks just how I wanted to. But the problem is that as I change my browser's size the image is not being replaced in real time. Is there a way I could achieve this?

$(document).ready(function() {
    if ($(window).width() < 575.98) {
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    }
});
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>

Upvotes: 0

Views: 66

Answers (4)

Mamun
Mamun

Reputation: 68933

To get the code to be executed on resizing the window you should use .resize():

The resize event is sent to the window element when the size of the browser window changes.

$(window).resize(function() {....

Demo:

$(document).ready(function() {
  if ($(window).width() < 575.98) {
    $('.navbar-brand').children().remove();
    $('.navbar-brand').append('<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png"><img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png">');
  }
  $(window).resize(function() {
    if ($(window).width() < 575.98) {
      $('.navbar-brand').children().remove();
      $('.navbar-brand').append('<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png"/><img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"/>');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>

Upvotes: 1

com.on.ist
com.on.ist

Reputation: 197

With this code the navbar will change like you want, on every resize, for example.

$(document).ready(function() {
    navbarBrandContent = $('.navbar-brand').html();
    changeNavbarBrand();
});

$(window).resize(function() {
    changeNavbarBrand();
});

function changeNavbarBrand() {
    if ($(window).width() < 575.98) {
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    } else {
        $('.navbar-brand').html(navbarBrandContent);
    }
}

Upvotes: 0

Sander Teunissen
Sander Teunissen

Reputation: 61

This behavior is because the image is only replaced at document ready, aka when the document has finished loading.

If you want to change the images on window resize you need the resize event handler, as Mamun pointed out.

In that case you probably also want to switch back to the original image when you make the screen larger. I would make a separate function to handle setting the correct images and call it on window resize and on document ready. For example:

$(document).ready(function() {
    setNavImages();)
});

$(window).resize(function(){
    setNavImages()
});

function setNavImages(){
    if ($(window).width() < 575.98) {
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    }else{
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="[your original image here]">');
    }
}

Upvotes: 1

Abdelrahman Gobarah
Abdelrahman Gobarah

Reputation: 1589

Like @Mamun said and call it on document ready

or better use bootstrap hidden-xs visible-md classes

$(document).ready(function() {

  $(window).resize(function() {
    if ($(window).width() < 575.98) {
      $('.navbar-brand').children().remove();
      $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    }
  });

  $(window).resize(); // call it here after define it 
});
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Related Questions