How To Add Media Query In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Anjali
In this article we will show you the solution of how to add media query in jQuery, here we needs to use window object and width(), html(), css() methods for achieve the result.
The window statement used to access browser window, which is appends with width() used to retrieve window’s width size, html() method for appends text on front end and css() used to change the body of page color with two different colors for users verification.
Step By Step Guide On How To Add Media Query In jQuery :-
At html block, we defined h1,h4,p,ul elements for show some texts on webpage.
Then external script file defined with two different window sizes ‘below 1024px and above 1440px’ and respected background colors ‘yellow, skyblue’.
At the same time we printed window size on front page by using window and width() method then using css() background color changed dynamically depends on window size.
<!DOCTYPE html>
<html>
<head>
<title>Media Query In Jquery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="new/mq.js"></script>
<body>
<h1>Example Of Media Query</h1>
<h4 id="res"></h4>
<p>This is paragraph Tag</p>
<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
<li>List Four</li>
<li>List Five</li>
</ul>
<p>End Of Document</p>
</body>
</head>
</html>
Media_Query.js
$(window).resize(function(){
if($($(window).width()<=1024)){
$('#res').html("Current Window Size"+$(window).width());
$('body').css('background','yellow');
}
if($(window).width()> 1440){
$('#res').html("Current Window Size"+$(window).width());
$('body').css('background','skyblue');
}
})
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program. Another external script file ‘Media_Query.js’ imported because there we coded media query for current html page.
- In ‘Media_Query.js’ file, we specified resize() method with window object for generate resize() method when browser window manually resized.
- Within this using if condition we checks browsers window size whether less than ‘1024px’ or greater than ‘1440px’.
- If between 1024px then at html page’s h4 element we appending message of ‘Current Window Size’ with dynamic window value by using ‘html(),$(window).width()’ methods then body of html document’s background color changed to ‘yellow’.
- Otherwise next if condition of above 1440px true means, we appending same message and then body of html document’s background color changed to ‘skyblue’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In html block we defined h1 tag for display heading, h4 for appends dynamic window size, p and ul tags defined for just showcase purpose.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to add media query using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see ‘Example Of Media Query, Current Window Size734, This is paragraph Tag, List One, List Two, List Three, List Four, List Five, End Of Document’ with yellow color background because window size is under if, you resize it to above 1440px then background changed with window size.
I hope this article on how to add media query in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
