conditionally load js file with screen width - javascript

I have the below java-script which loads the screen as per the resolution and js file.
But I have to refresh the browser to reload the js file as per resolution otherwise it keeps the last resolution js file.
Please help me to understand how to load both at once.
window.requestAnimFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
var width = screen.width,
height = screen.height,
checkScreenSize = function () {
if (screen.width !== width || screen.height !== height) {
width = screen.width;
height = screen.height;
$(window).trigger('resolutionchange');
}
};
(function loop(){
requestAnimFrame(loop);
checkScreenSize();
})();
function includeJS(incFile) {
document.write('<script type="text/javascript" src="'+ incFile+ '"></scr' + 'ipt>');
}
if (window.matchMedia("only screen and (min-width: 1240px) and (max-width: 1280px)").matches) {
includeJS('changer/js/changer-1280.js');
} else if (window.matchMedia("only screen and (min-width: 1390px) and (max-width: 1440px)").matches) {
includeJS('changer/js/changer-1440.js');
} else if (window.matchMedia("only screen and (min-width: 1441px) and (max-width: 1441px)").matches) {
includeJS('changer/js/changer-1441.js');
}

Sounds like you want to watch the window resize event maybe? Something like this:
$(window).on('resize', function() {
if (window.matchMedia("only screen and (min-width: 1240px) and (max-width: 1280px)").matches) {
$.getScript('changer/js/changer-1280.js');
} else if (window.matchMedia("only screen and (min-width: 1390px) and (max-width: 1440px)").matches) {
$.getScript('changer/js/changer-1440.js');
} else if (window.matchMedia("only screen and (min-width: 1441px) and (max-width: 1441px)").matches) {
$.getScript('changer/js/changer-1441.js');
}
});
Since you're using jQuery anyway, you can use its $.getScript instead of injecting the script element manually.
I see there's some code there that seems to watch the window height and width to implement a custom window resize event. That's not really necessary though. I think you would especially not want to do that during a RAF loop like that since it's probably triggering a layout during every single frame.
Running those matchMedia checks every time the window's resize event fires will bog down resizing performance too, so you should debounce and only handle the event after there's a pause in resizing. Something like this:
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
// Wait half a second before reacting to the resize event,
// in case the user is still actively resizing the window.
resizeTimer = setTimeout(handleWindowResize, 500);
});
function handleWindowResize() {
if (window.matchMedia("only screen and (min-width: 1240px) and (max-width: 1280px)").matches) {
$.getScript('changer/js/changer-1280.js');
} else if (window.matchMedia("only screen and (min-width: 1390px) and (max-width: 1440px)").matches) {
$.getScript('changer/js/changer-1440.js');
} else if (window.matchMedia("only screen and (min-width: 1441px) and (max-width: 1441px)").matches) {
$.getScript('changer/js/changer-1441.js');
}
}

Related

Is it possible to resize browser window size using javascript? [duplicate]

This question already has answers here:
Can I resize the browser window?
(4 answers)
Closed 6 years ago.
I want to resize my browser window using Javascript to test my responsive webpage design functionality.
But I didn't find any option for the same.
What I found is, we can modify window size for newly pop up window as shown below:
<body>
<p>Open a new window, and resize the width and height to 500px:</p>
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeTo(250, 250);
myWindow.focus();
}
</script>
</body>
I have defined some responsive behaviour using following css code:
#media screen and (max-width: 500px){
//style changes
}
Can we resize browser window where our page is launched? Or it is not possible?
To resize the window, you can simply do this:
window.resizeTo(width, height);
You likely can use resizeBy/resizeTo but why don't you want to use Chrome built-in tester?
You can open developer console cmd/ctrl + alt + I and click on Device Toolbar or cmd/ctrl + shift + M and adjust screen size using predefined templates or create your own
Update
For automation test there are a several ways to adjust it. Which runtime is running your Jasmine tests? For PhantomJS you can use
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = {
width: 480,
height: 800
};
More info here
There are 2 options to implement responsive layout structure :
by using javascript..
function ResponsiveLayout() {
if (screen.width <= 1440) {
$('#content').addClass("pipeline1");
}
else if (screen.width > 1440 && screen.width <= 1600) {
$('#content').addClass("pipeline2");
}
else if (screen.width > 1600) {
$('#content').addClass("pipeline3");
}
};ResponsiveLayout()
By using css3 media query :
#media (min-width: 1200px){css attrabutes}
#media (max-width: 1199px) and (min-width: 981px){css attrabutes}
#media (max-width: 980px) and (min-width: 641px){css attrabutes}
#media (max-width: 640px) and (min-width: 481px){css attrabutes}
#media (max-width: 480px) and (min-width: 321px){css attrabutes}
#media (max-width: 320px){css attrabutes}
Professionally Media query would be better option but can we use javascript where limited access of css file or inline css -:)

zslider javascript should work only in screen resolution below 768px

i want to use zslider javascript in my website, but can any one tell me how to make it work only in screen resolution below 768px
Here is the zslider script link:
http://www.cssscript.com/demo/mobile-friendly-content-carousel-slider-with-pure-javascript-zslider/
Use media queries to show slider content below 768px:
#media (min-width: 768px) {
.z-slide-wrap {
display: none;
}
}
Than use JavaScript to initialize slider only if width is below 768px:
if (window.innerWidth <= 768) {
var slider1 = new Slider('#demo', '.z-slide-item', {
// OPTIONS HERE
});
}

Menu Still Show When Change #media query

I have 2 sidebar (side-bar and side-bar-mobile). First sidebar i want to see it when screen in width > 768px, so i do that.
#media only screen and (min-width: 768px){
.side-bar{
display: block;
}
.side-bar-mobile{
display: none;
}
}
And when screen in width < 768px, side-bar is hide and side-bar-mobile is show toggle when i click a button.
CSS
#media only screen and (max-width: 768px){
.side-bar{
display: none;
}
.side-bar-mobile{
display: none;
}
}
JS
$('#toggle-menu').on('click', function(e){
$('.side-bar-mobile').slideToggle();
e.preventDefault();
})
Side-bar-mobile is slide good. But when i resize my window to normal size (width > 768px), the side-bar-mobile is still show. What can i do now? I think problem in slidetoggle functions, it make side-bar-mobile is show when i resize window. But i can't solve this problem. Help me! Thank you.
When screen width > 768 the side-bar-mobile must be hidden no matter what.
So in order to do that you need to register window resize listener like this:
window.onresize = function(){
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.getElementsByTagName('body')[0].clientWidth;
if(w > 768 ){
$('.side-bar-mobile').css({display:"none"});
}
}
also put window resize condition.
try this one
$(function(){
var nb = $('#toggle-menu');
var n = $('.side-bar');
$(window).on('resize', function(){
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() >768) {
$('.side-bar').show().addClass('keep-nav-closed');
}
});

Responsive design + jQuery fine except Firefox

I'm using some pretty basic jQuery to force things into position when they are moved around:
function ipad() {
var width = jQuery(window).width();
if (width < 1200 && width >= 768){ //if tablet
jQuery('.mobbut').css('width', '33.333%');
jQuery('#re2').css('max-width', '');
} else {
jQuery('.mobbut').css('width', '100%');
jQuery('#re2').css('max-width', '400px');
}
if (width < 768){ //if mobile phone
jQuery('._btnselect').hide();
} else {
jQuery('._btnselect').show();
}
}
jQuery(document).ready(function() {
ipad();//run when page first loads
});
jQuery(window).resize(function() {
ipad();//run on every window resize
});
jQuery(window).load(function() {
ipad();//run when page is fully loaded
});
So far my website is perfect on Chrome, Safari, iPad, iPhone, but for some reason it looks a mess when you resize your Firefox window to smaller than 1200px wide. Try for yourself here's the webpage. Is it something to do with the jQuery or more the layout of the page? I inherited this homepage from another designer and it was previously built on tables so this may be giving FF problems.
I tried using media queries and they didn't work, I had to turn to jQuery to get the results.
If they didn't work, it's probably because the syntax was incorrect. Try it like this, which is pretty much exactly what your jQuery is doing, but much simpler:
#re2 {
max-width: 400px;
}
.mobbut {
width: 100%;
}
#media only screen and (max-width: 767px) {
._btnselect {
display: none;
}
}
#media only screen and (min-width: 768px) and (max-width: 1199px) {
#re2 {
max-width: none;
}
.mobbut {
width: 33.333%;
}
}
--EDIT--
Since it looks like you're trying to target the iPad. Try these media queries, from this post:
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
These will likely work even more reliably than your jQuery adjustments since they are based on the device-width rather than the page width.
I ran your site with firebug (I do recommend using it) enabled and the error is in the following function
** function futsal(){
var wid = jQuery(window).width();
if (wid <= 1024 && width >= 768){ //if tablet **
just there you declare the var wid and then test against width
I agree with all of the comments above though, use media queries. It's far easier.

Detecting a screen's width with Javascript

if(screen.availWidth > 850){
//Do this
} else {
//Do this
}
This is what I have right now. My issue right now is if someone was to zoom in to the page, I want the width to change as it will affect how the page is displayed.
Shouldn't you be more worried about someone resizing their browser window? Not everyone keeps their browsers maximized.
To do this:
if( (window.innerWidth || document.documentElement.clientWidth) > 850) {
// do something
}
else {
// do other thing
}
I'm fairly sure this takes the zoom into account, but I've never tested that.
Bind an event handler to the window.onresize event:
window.onresize = function(event) {
if (screen.availWidth > 850) { ... }
};
If you use jQuery:
$(window).resize(function(){
if ($(window).width() > 850) { ... }
});
Besides, if you want to create a responsive design, consider using CSS media queries. This automatically adapts the page if the user zooms or resizes the browser window and also works if the user has JavaScript deactivated.
/* CSS */
#media (min-width: 850px) {
/* style */
}

Categories