I'm using CSS Media Queries for making my website responsive:
#media (min-width:1200px) {
// DESKTOP STYLING
}
#media (max-width:1200px) {
// MOBILE STYLING
}
I use https://github.com/paulirish/matchMedia.js to check for Media Query
if(min-width:1200px) {
// DESKTOP JAVASCRIPT
} else {
// MOBILE JAVASCRIPT
}
So initially everything works fine, when my screen is < 1200px it shows mobile version if its higher it shows desktop version (javascript works as well).
Problem now is when i start resizing the window for example:
1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE)
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE)
LOADS MOBILE JAVASCRIPT (SITE BREAKS)
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE)
LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)
So i was wondering any ideas how to 'unload' javascript or maybe a elegant way to have two different javascript files loaded depending which media query is used ?
First you could have one JavaScript (join the 2 together ) and have a controller which will verify if your window size is greater or not than 1200.
Or you could try to wrap the JavaScipt files into two objects, and create a third which will handle as a controller. Via Ajax you could load and unload the files ( nothing breaks because you have the controller still there ) and switch between them. This is a problem though because you will have to remove all the listeners when you make the switch and you will have to load another file which will take a small amount of time.
Hope this helps. Nice question by the way.
I would recommend a library like Enquire.js, you could always code the triggers yourself, but if you have a "desktop slideshow" and a "mobile slideshow," you'll need to make sure you destroy the the inactive one on resize and Enquire has a nice API for that includes an unmatch trigger.
I'm dealing with the same slideshow plugin for my "desktop slideshow" and a "mobile slideshow," but would like different settings (e.g.- using a bottom aligned pager versus a next/prev navigation) which is easy to set on page load, but what if the device changes media queries breakpoints on orientation change, etc.
Related
Click here to view my example.
I am attempting to use this code in my simple website to responsively resize the HTML of the page, even as you resize your window.
Is this not possible or am I just making a simple error? The website was designed for 1360x768 (my resolution), however this code makes it look extremely wonky, and no scroll-bar is shown (unsure why).
The code to resize/scale:
function scalePage(){
document.getElementsByTagName("*").each(function(){
var width = ($(this).width() ) / 1360;
var height = ($(this).height()) / 768;
$(this).css("transform", "scale("+width+","+height+")");
$(this).css("-moz-transform", "scale("+width+","+height+")");
$(this).css("-webkit-transform", "scale("+width+","+height+")");
$(this).css("-o-transform", "scale("+width+","+height+")");
});
}
$(document).ready(function() {
scalePage();
});
$(window).resize(function() {
scalePage();
});
Resizing your page using JS is a bad idea from the get go.
Here's why:
What if your user has JS disabled?
What if your user has an older browser that can't render the JS quick enough?
Each time you resize your browser the content must be re-rendered.
Javascript should be used to add features to the site, not create them.
Secondly,
This approach is not 'responsive'. To achieve a responsive layout on your site you should use CSS to control it, As it is much faster than Javascipt/ jQuery.
A good starting point for creating responsive web pages would be this article: 2014 Guide to Responsive Web Design. Any seasoned front-end web developer will tell you that the key to a good responsive website is to develop mobile first. This will ensure that your site will 'scale' nicely.
Thirdly,
I am going to re-iterate my point about javascript being used to add functionality, More and more do i see sites failing when i have javascript disabled or i browse on an older laptop with IE8 installed. (Although there are arguments against supporting IE8 nowadays.)
I have a wordpress site with a responsive theme that looks good on mobile devices. However, I have an advanced searchform which doesn't work well on mobile devices so I have built a custom form with jquery mobile that both works and looks good. This form is then presented if a mobile device is detected.
But alas! JQM makes lots of problem on the main content. There are severe styling issues, but even worse, links are made into ajax calls so pages don't load properly.
I have found lots of info on how to exclude certain elements eg. with data-role="none" or data-enhance="false" (like here but this being Wordpress, it is really not feasible to change all those elements.
Instead, I would like to only apply JQM enhancement to the single block containing the search form.
How can I do that?
Edit: I can turn off auto-initializing with autoInitializePage: false but then how do I turn on JQM enhancements for the selected block?
so it only concerns the styling of the form on mobile devices?
Maybe it is enough to add some CSS in a media query?
e.g:
#media all and (max-width: 768px)
{
/*css for the form here */
}
Hello I'm creating a simple mobile app using Appgyver - steroids.
I'm new with this framework I'm trying to find a way to hide the loading screen between different pages in both Android and iOS. I have read their documentation but I can't make it work.
Based on this: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.layers_layers.push.md.html#steroids.layers.push
I 've set keepLoading: false on a view push which didnt work
also after the view push I called:
steroids.view.removeLoading();
as mentioned here: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.view_view.removeLoading.md.html#steroids.view.removeLoading
Nothing removed the black loading transition screen between pages.
Could someone please tell me what I'm doing wrong?
It could be documented better, but if you remove/rename the www/loading.html (for iOS) and www/loading.png (for Android) files in your project, then steroids.layers.push() will not show the loading screen (also means that the push animation will not start until after the WebView has loaded, which can take some time and lead to unresponsive feeling).
I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?
Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.
I have a nice running HTML5 Website with some JavaScript. This Page is called in a UIWebView.
The Page runs some JavaScript to check, weather the iPad is in Portrait or in Landscape Mode.
And here is the Problem. It doesn't matter, if the iPad is in Landscape or in Portrait-Mode, the Function call:
orientationObserver.getOrientation()
always returns "portrait".
Is this a known Problem, or am i doing something wrong? I set the View containing the UIWebView to landscape mode with:
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation==UIInterfaceOrientationLandscapeLeft);
}
i do an:
alert(orientationObserver.getOrientation()
in the JS and it returns always "Portrait", the device (and so the App) runs in landscape.
You can specify CSS styles based on viewport orientation: Target the browser with body[orient="landscape"] or body[orient="portrait"]
However Apple's approach to this issue is to allow the developer to change the CSS based on the orientation change but not to prevent re-orientation completely. I found a similar question here.