Updating the HTML on real time using jQuery

Related searches

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>

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>

update in realtime using - jQuery, If you are really needing this to be realtime I would suggest looking at signalr. It might be a lot to bite off this early in your learning stage but I am currently� jQuery Forum Move this topic Forum : Getting Started Using jQuery Using jQuery Plugins Using jQuery UI Developing jQuery Core Developing jQuery Plugins Developing jQuery UI QUnit and Testing About the jQuery Forum jQuery Conferences jQuery Mobile Developing jQuery Mobile

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]">');
    }
}

RealTime Update, People will post update and it will update the list immediately, users can also "like " the posts and comment on it and these will all update realtime. i have the like, Now it appends Hello, World every 1000ms. <html>. <head>. At this time, in the JS function, I would like to use ajax to get values from a database that correspond to some other value chosen by the user. For a simple example: there are 3 sizes of t-shirts, with different prices based on each size (stored in database).

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>

Updating a .NET Page in Real-Time Using jQuery and AJAX, NET Page in Real-Time Using jQuery and AJAX. Author. Jeremy Wiggins You can replace this with a standard HTML element. DoWork() is a� Read how to dynamically update the jQuery Progress Bar UI using AJAX, to create a live progress bar. An Example of a jQuery Progress Bar Click Me // A progress bar indicates the status of a work in progress. If some process or task takes a long time to compl

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);
    }
}

[AJAX & JQuery] How to update html content when new Data is , [AJAX & JQuery] How to update html content when new Data is any time which makes them the better candidate for “real-time” applications. I would like to know the solution on how to make my PHP webpage/table update itself automatically in real time without having to refresh the page. The page works perfectly fine. For example, If a user submits data this page will update itself automatically displaying the new users data. I have made research and it involves ajax.

5 ways to build real-time apps with JavaScript, Real-time apps are those that react to changes anywhere in a This is when the application requests updates from the server on a Long-polling can be implemented manually with any JavaScript HTTP library, such as jQuery or Axios. Cat Command in Linux CSS Background Image HTML Background� Here I will use Pusher API to create a two way communication between the client and server. The Pusher API uses websockets for the two way communication and its free for starting your development. Here I have created a Twitter/Facebook style real time updating wall script that will display the status updates of the users in real time.

If you need a primer on how to set it up and use it, take a look here. It’s as simple as a line in the head of your html documents to import the library and you are ready to start using the wonderful library of functions. I won’t spend time here explaining what jQuery is shortcutting when it comes to ajax.

Each method updates an element on the page, just like before. This is the element that gets injected into the DOM by our jQuery function on DoWork.aspx. You’re doing the exact same work as before, but now you can update the page in real time. I’ve included a sample application that demonstrates everything I’ve talked about.

Comments
  • @Ibrahim You can achieve by CSS Media Query only like @media(max-width: 575px){ desktop logo display none and mobile logo display block }.
  • Off-topic, it looks like by your use of navbar-brand that you're likely using Bootstrap. Bootstrap has internal support to do what your'e describing without you needing to do anything with jquery. See: getbootstrap.com/docs/4.0/utilities/display
  • if ($(window).resize() < 575.98) {... doesn't seem to work. I need the change the html on screen smaller than 575px
  • resize is an event. You don't use it in an if condition. Read the link in the answer.