jQuery not functioning properly when included in a separate JavaScript file

Question

jQuery not functioning properly when included in a separate JavaScript file

I'm facing an issue with my jquery code not working properly when I place it in a separate js file instead of embedding it directly into the html. Currently, my setup looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/responsive.js" media="screen and (max-width: 480px)" defer</script>

Within the "responsive.js" file, my code is as follows:

document.getElementById("navbar").style.display = "none" {
  $('#navbar').hide()
}

jquery css responsive-design

Answer 1

Answer №1

In order to find the solution, it is important to refer to the documentation available at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

The media attribute is not supported for the <script> tag as indicated in the provided resource. It is essential to adhere to the standard attributes and not create custom ones.

If your file named 480.js consists only of the mentioned content, it would be advisable to remove it since it contains invalid JavaScript which can lead to errors.

To resolve the issue, JavaScript is not required. The desired result can be achieved using pure CSS. (Refer to this fiddle: https://jsfiddle.net/u19s432z/)

Add the following CSS code:

#navbar {
    display: block;
}

@media screen and (max-width: 480px) { 
    #navbar {
        display: none;
    }
}

Answer 2

In order to find the solution, it is important to refer to the documentation available at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

The media attribute is not supported for the <script> tag as indicated in the provided resource. It is essential to adhere to the standard attributes and not create custom ones.

If your file named 480.js consists only of the mentioned content, it would be advisable to remove it since it contains invalid JavaScript which can lead to errors.

To resolve the issue, JavaScript is not required. The desired result can be achieved using pure CSS. (Refer to this fiddle: https://jsfiddle.net/u19s432z/)

Add the following CSS code:

#navbar {
    display: block;
}

@media screen and (max-width: 480px) { 
    #navbar {
        display: none;
    }
}

jQuery not functioning properly when included in a separate JavaScript file

Answer №1

Similar questions

Mobile browser not resizing window width in fluid layout on WordPress site

Displaying a mouse cursor using an A-frame function

Creating three boxes within a single div using standard HTML and CSS

What is the method for centering text above and below an image in the vertical middle?

Successful AJAX value transfer with no corresponding output

Styling targeted to a particular div

When the state inspection fails due to a missing object property, the function will not work as intended

How can I iterate through the contents of each directory in AJAX without encountering duplicates?

How to customize TextField error color in Material-UI using conditional logic in React

jquery target descendants with specific names

Creating equality in height among input file fields and other elements with Bootstrap 5

Incorporate a comma after the second or third digit to separate currency values in JavaScript

How can you connect a jQuery UI sortable component to an array?

Unable to open modals in Bootstrap using jQuery script: modal not popping up

Troubleshooting: Issue with passing variables from jQuery $.ajax to PHP

Overflowing container due to text in Material UI Accordion heading

AJAX request triggers only on the initial occasion

The Bootstrap CDN is malfunctioning and displaying errors in the console

I am interested in utilizing the image.onload method within the $.when function

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set