Develop Reference

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>

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>

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

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>

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

jQuery mouseenter & click events

I can' t find a solution for a RWD problem on my website.
I have one breakpoint (575.98px).
If resolution is above that breakpoint, "mouseenter" event is active to show hidden section:
if ($(window).width() > 575.98) {
$(".name").on("mouseenter", () => {
$(".description").fadeIn(250);
but for resolution below a breakpoint I want to off "mouseenter" event and active "onClick" event.
if ($(window).width() <= 575.98) {
$(".name").on("click", () => {
$(".description").show();
Currently, code is not working below decided breakpoint.
Please give me any hints of solution.

you can check out the px event.
$(".name").on("mouseenter", function() {
if ($(window).width() > 575.98){
$(".description").fadeIn(250);
}
});
$(".name").on("click", function() {
if ($(window).width() <= 575.98){
$(".description").show();
}
});

Combine .width() and .resize() into one function

How can combine this JS code? I now have a duplicate code and don't know how to combine the window.width() together with the resize function. The function must execute under 1100px and on resize under 1100px.
if($(window).width() <= 1100){
// do something if window is less than 1100px
$(window).resize(function() {
// I have the same code here now a above! How can I combine it?
});
} // end window.width()

Try to invert your logic:
$(window).on("load resize", function() {
if($(this).width() <= 1100){
// do something
}
});
additionally you can add both load resize events like above.
If you want to trigger it also on DOM ready than:
function myResizeFunction() {
if($(window).width() <= 1100){
// do something
}
}
$(myResizeFunction); // Do on DOM ready
$(window).on("load resize", myResizeFunction); // And also on load and resize

How to deactivate a JS code for specific width?

I have a link that in normal when I click on it, it gives me a alert() (using jquery).
HTML:
<a class="link" href="www.example.com">link</a>
JS:
$(".link").click(function() {
alert('clicked');
return false;
});
CSS:
#media (min-width: 980px)
{
// In this width, when user click on that link,
// I want to open www.eample.com
}
Now my question is this: How do i determine wether the client's width is less than or greater than 980 pixels?

you can use $(window).width()
$(".link").click(function() {
if($(window).width() >= 980){
alert('clicked');
return false;
}
});

I'm unsure of what you want to do but if i understand correctly you want some javascript code to run when the client's width is smaller/bigger than a certain amount of pixels.
If that's the case you'd have to check within the click callback function whether the clients screen was larger/smaller than 980px.
$(".link").click(function () {
if (window.innerWidth > 980) {
alert('clicked');
return false;
}
});

You can not deactivate JavaScript using CSS, you'd have to use JavaScript and check the width with $(window).width()
$(".link").click(function() {
if ($(window).width() >= 980) {
alert('clicked');
return false;
}
});

I think match media is pretty sweet also:
var mq = window.matchMedia('#media (min-width: 980px)');
var link = document.querySelector('.link');
link.href = mq.matches ? "http://www.example.com" : "";
EDIT:
Oh, as #Oscar points out: If you're worried about the combined ~16% market share (oct/2015) of IE8/IE9, go with the jquery method detailed in the chosen answer.

Accordion looping on resize

I have a menu that is hidden in an accordion when viewing on screens less than 600px.
On screens larger than 600px the menu is visible.
jsfiddle- http://jsfiddle.net/ashatron/zbzqoz2f/
it works ok, but when i resize the window to be greater than 600px, then go back to less than 600px then press view sitemap it loops the animation multiple times.
I think its running the function for every resize event, which is queing up the accordion and then looping it. But I'm not sure how best to order the syntax to get it to work.
Any help would be appreciated!
footernavmenufn = function() {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
// console.log('hmmm');
return false;
}).next().hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
$(document).ready(function () {
footernavmenufn();
});
$(window).resize(function(){
footernavmenufn();
//console.log('OMG-WHY-YOU-NO-WORK');
});

The issue is that everytime window is resized and the condition is met, you're binding a new click event handler, so after a while there'll be multiple event handlers causing chaos. Ideally your code should be something like
$(document).ready(function () {
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
console.log('hmmm');
return false;
});
$(window).resize(footernavmenufn);
footernavmenufn(); // or $(window).trigger("resize");
});
footernavmenufn = function () {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
Updated Fiddle

Why do you have this code? Crazy one. Remove it:
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
return false;
}

move the click declaration into the $(document).ready function.
at the moment everytime you resize the page that click function is being added again - so the repeat is once per page resize.
forked jsfiddle with change