conditionally display content based on Media Query - javascript

I have a website where in the desktop version a sidebar is shown containing 10 to 20 small images. Until now, on mobile devices this sidebar was simply hidden with a display: none, which is the least performant solution since all the images will be loaded anyway.
I'm now wondering what the best way is to disable the sidebar completely on mobile devices (without using a separate AJAX request).
The best solution I could think of is the following:
Write the HTML code of the sidebar into a JavaScript variable
test the device width by checking a media query with JavaScript (e.g. using Modernizr.mq or so)
if this test yields a non-mobile device, write the content of the variable into the DOM, for example by using innerHTML, jQuery.append, jQuery.prepend or similar
I know that RWD performance can sometimes be a very complicated topic and that the most performant solution is often not obvious. So can anyone think of a better solution than the one presented above?

If you don't want the images to load on mobile, instead of placing the images as <img> tags, you could set divs to the desired width and height and bring the images in as background images. In your css, hide the sidebar by default. Then, at whatever width you deem to be beyond mobile, use media queries to display the sidebar and load the background images in the divs.
#sidebar {
display: none;
}
#sidebar div#sidebar-img-1 {
width: 100px;
height: 100px;
}
/* ... */
#media only screen and (min-width: 480px) {
/* display sidebar */
#sidebar {
display: block;
}
/* set background image for sidebar items */
#sidebar div#sidebar-img-1 {
background-image: url("sidebar1.jpg");
}
/* ... */
}
The drawback is that by placing content in the stylesheets, you're trading performance for semantics.

I was just doing some research on how to do this and ran into this by the filament group:
https://github.com/filamentgroup/Ajax-Include-Pattern/
Seems easy to set up. It works off of what looks like media queries set in data attributes.
So a sidebar you don't want to appear on mobile would look something like this:
<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>
So your sidebar would only come in on a screen that was at least 40ems (~640px) wide. Of course you also need the javascript file and to initiate it, but those look fairly simple as well.

Related

Duplicate HTML or move elements with JS for responsive site

There's site I'm working at and design for tablet/mobile devices require me to move elements (from left sidebar to right, change order, etc.). These elements include simple text and images (pretty small, logos).
My question is, what would be the best way to go about this? So far I have only two ways.
1) Duplicate HTML content and then show/hide with CSS media queries. My concern here is that it's not SEO friendly, and content / images still gets rendered, even if hidden. Could that leave me with a performance problem?
2) Move elements using JS. My concern here is that people with JS disabled will still see the content in old places, and maybe this JS solution could impact performance even more?
Would really appreciate some input on best practices in a situation like this.
Here's what I'm trying to achieve:
The questions are contradicting a bit :)
First of all, it's 2016 in the WEB, if you are speaking about having responsive layout, support of mobiles, tablets, desktops - they will have JavaScript support, so you shouldn't worry. - it is answer on your question number #2. The percentage of people not having JS is extremely low, it's below <1%.
CSS media queries are enough to make good responsiveness. Sometimes you need to add helper methods with JS to manipulate DOM and to make it even more advanced.
You may check how they do responsiveness with classes in Twitter Bootstrap.
Sometimes content will be duplicated in HTML, but as soon as it's not visible simultaneously on the screen because of visibility rules from CSS media queries - it will not do any harm on SEO.
There's the way to over-complicate things a bit, RESS: Responsive Web Design + Server-Side Components, and to serve different HTML layouts depending on the detected User Agent.
You mentioned that you were reluctant to use display: hidden because something about them being rendered. If I'm understanding correctly, then you can use display: none on the right side for example. Then in your media queries, you can set content on the left to display: none and content on the right to display: initial. That should work just fine, if I understood you correctly. Then no space will be allocated for the hidden elements.
For example:
.leftDiv {
display: initial;
}
.rightDiv {
display: none;
}
#media screen only and (max-width: 1000px) {
.leftDiv {
display: none;
}
.rightDiv {
display: initial;
}

How to edit a HTML theme's mobile version?

I have downloaded a free HTML template from web and i'm trying to edit this HTML theme. In my theme i changed background photo, it's good on my computer and my resolution (1366x768) but on mobile and other resolutions it's not working well. Background image is crushing.
please visit that website with your computer and your mobile phone for understanding clearly. Theme link
and please help me to edit mobile version of this website. I couldn't find anything. Here's the list of my javascript files in theme folder. image of files
What you can use is a media query the syntax of which looks like so:
#media <What to respond to> {
//then place the elements, class and id here
}
The media query can take in width by doing #media (max-width:<insert width here>) or #media(min-width:<insert width here>)
Multiple media queries can be used together like so #media (max-width:100px) and (min-width:50px).
Another class of media queries can be used to specify how behave depending on the type of device, they include but not limited to:
tv
screen
handheld
all
They are used by typing #media <name of device>
An Example with some of they things i have mentioned being used
#media screen and (max-width: 100px) and (min-width: 50px) {
//If the device is a screen, is wider/equal to 50px but smaller
//than or equal to 100 then it will do this
img {
width: 75px;
height: 30px;} }
#media screen and (max-width: 400px) and (min-width: 101px) {
//I'm sure what will happen but i will tell you anyway
//If the device is a screen, is wider than/equal to 101px but
//smaller than/equal 400px
img { //Something
}}
My suggestion is to read up on it take a look here
There are many ways to solve your problem. One way is change the background using media queries. This is done by editing your css file. If you have multiple css files, you will need to know which one is setting your background image and place the media queries in there.

Responsive jquery panel to stay open and hide menu on wide screens

The jquery demo page automatically open the side panel on wide screens and shows a logo image instead of the 'open panel' icon. It stays open and does not really act like a panel until the screen gets smaller. See the page here: http://demos.jquerymobile.com/1.4.2/
I have tried to recreate this in CSS by following the instructions here: jquery mobile - forcing panel open on wider screens
but it doesn't work. I have gone through the js and css files of the JQM demo site, but I do not see how this achieved (or what to look for). I have ui-responsive-panel on my page element too, but no go. How does one achieve this responsive effect?
The jQuery demo page achieves that effect via CSS media queries.
They work by including something like this in your CSS:
#media (max-width: 600px) {
.class1 {
display: none;
}
.class2 {
width: 200px;
}
}
Any styles inside #media (max-width: 600px) will only be applied if the browser window is below 600px (as implied by max-width: 600px).
Using media queries, you can simply style your side panel differently when the browser window is below (or above) a certain size.
Edit: You can search the jQuery demo page's CSS for #media for a closer look at their implementation.

Responsive grid not adapting to screen sizes. How do I call the script?

I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).

Better way to auto resize images mantaning aspect ratio?

I am using this code to auto resize images to the window size on a mobile page:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.
But for some reason i dont know when i use that code the text around the image goes behind it.
Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?
If you do this for mobile devices I would recomend server resize to save download size.
Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?
You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:
#content img {
width: 100%;
height: auto;
max-width: 480px;
}
I added this code in my page and it's working:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites.
<meta content="width=device-width, initial-scale=1.0" name="viewport">
helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.
CSS trick for specific style sheet
I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.
use #media to do manual change by the mobile, tablet or desktop size.
by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : Media Queries: How to target desktop, tablet and mobile?

Categories