News:

Skill.jobs Forum is an open platform (a board of discussions) where all sorts of knowledge-based news, topics, articles on Career, Job Industry, employment and Entrepreneurship skills enhancement related issues for all groups of individual/people such as learners, students, jobseekers, employers, recruiters, self-employed professionals and for business-forum/professional-associations.  It intents of empowering people with SKILLS for creating opportunities, which ultimately pursue the motto of Skill.jobs 'Be Skilled, Get Hired'

Acceptable and Appropriate topics would be posted by the Moderator of Skill.jobs Forum.

Main Menu

Modern Web Engineerinng

Started by munem15-4873, September 27, 2018, 12:36:03 AM

Previous topic - Next topic

munem15-4873

JavaScript

Another method that can be used is JavaScript, especially as a back-up to
devices that don't support all of the CSS3 media query options. Fortunately,
there is already a pre-made JavaScript library that makes older browsers (IE
5+, Firefox 1+, Safari 2) support CSS3 media queries. If you're already using
these queries, just grab a copy of the library, and include it in the mark-up:
css3-mediaqueries.js.

In addition, below is a sample jQuery snippet that detects browser width
and changes the style sheet accordingly — if one prefers a more hands-on
approach:

1 <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.4/jquery.min.js "></script>
2
3 <script type="text/javascript">
4 $(document).ready(function(){
5 $(window).bind("resize", resizeWindow);
6 function resizeWindow(e){
7 var newWindowWidth = $(window).width();
8
9 // If width is below 600px, switch to the mobile
stylesheet
10 if(newWindowWidth < 600){ $("link
[rel=stylesheet]").attr({href :
"mobile.css"}); } // Else if width is
above 600px, switch to the large stylesheet else if
(newWindowWidth > 600){
11 $("link[rel=stylesheet]").attr({href : "style.css"});
12 }
13 }

14 });
15 </script>

There are many solutions for pairing up JavaScript with CSS media queries.
Remember that media queries are not an absolute answer, but rather are
fantastic options for responsive Web design when it comes to pure CSSbased
solutions. With the addition of JavaScript, we can accommodate far
more variations. For detailed information on using JavaScript to mimic or
work with media queries, look at "Combining Media Queries and
JavaScript."

Source: Smashing eBook􁴹Modern Web Design and Development