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.
Related
I got a WWW website project where mobile version is the same as mobile app but "desktop" version is completely different. Different nav, different cards, views divided in different way..
What is the best approach to do this in PHP/Laravel and HTML/CSS/JS? I'm asking about general approach.
Thank you in advance.
K
This should be done through css using media queries by doing this you can control the cards sizes and views depending on the device size. You can find more information https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The 'trick' I use for that is using a different css stylesheet.
You can set a min and max for your css styles, f.e.:
#media (max-width: 600px) {
//put css here for very small screens
}
#media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
#media (min-width: 1025px) {
//put css here for large screens
}
Note that this only works if your html stays the same over all screens and the layout is only defined by different css. But in certain situations this is a possible approach.
But differences are huge and in my opinion using only CSS is not enought. Changing size of elements and position in grid is obvious and exist in all projects. This is some kind of edge case.
For example on desktop I have user profiles in one view with 2 sections but on mobile I have two dedicated subpages.
In desktop I have normal menu in nav bar but on mobile each view have on top and bottom contextual buttons.
In desktop some things are in modal but in mobile in separated subpage or as a appearing text label (simple status).
...and so on
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.
I am new to HTML and CSS development. I have created a html which looks fine on PC web browser.
However, when I use my Android cell phone browser to view it, since the cell phone screen is too small, there is a lot of sliding needs to be done to locate the area I want to bring into focus.
My webpage only has an index table in the center, while left and right of the body are all blank. I was thinking if there is any way to detect the browser to see if it is from a mobile device, then resize the body of the page?
Any advice is welcomed. Thanks in advance.
It is either:
you should take a look and learn at some responsive website code like this one.
Try to add this code after your opening head tag <meta content='width=device-width, initial-scale=1' name='viewport'/> if you don't want horizontal scrollbar on smaller screens.
The most popular method today is to use a CSS media query. Any code inside a media query will only apply to the parameters specified. This usually applies to height and width of the browser but it can also work for printed stylesheets, display resolution, and a few other things.
Heres an example that targets browser widths between 320px and 480px, common sizes for smartphones.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background: #999;
width: 100%;
}
}
You can find more examples here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
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.
Our website has a menu of 200px on the left side that is quite useful, but takes too much space on smaller devices like the iPad. So it would be nice to automatically scroll the website 200px horizontally to the right on the iPad.
I tried similar solutions using #media (max-width: ????px) { .. } CSS and hiding/showing the menu and letting it display using a button, but this isn't as elegant. Maybe there is a much simpler solution in jQuery?
To be more clear: I want the menu to be accessible all the time, so if I want to use it, I can simply scroll to the left, but in any other case it doesn't fill my screen.
Thanks a lot for help,
Josh
Moral of the story is you can't move a webpage 200px's over using CSS. You can use a javascript media query solution and do it. But that would be massively pointless since really you are just trying to hide the menu and there would be a period where the menu is shown then the page shifts which would be terrible.
So use CSS media queries and hide the menu.
The following will hide the #menu div if the device width is between 768 and 1024px (iPad size, according to my source)
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#menu {
display: none;
}
}
I found the following jQuery code which seems to work:
$(document).ready(function() {
window.scrollTo(228,0);
});