I am building an application where there would be 3 preview buttons (Desktop, Mobile, Tablet). Users will be able to create their own design (such as card view/accordions) which would inherit bootstrap classes for responsiveness. Once they click on the preview buttons for eg Mobile/Desktop/Tablet, their created components would behave as per the viewport.
The necessary CSS is in place. The scenario can be achieved if we are using an iframe to load the component. When we are using the iframe that time the viewport behaves as a separate element, helping the CSS to render as it's getting the desired width for the breakpoint. But without the iframe it's not able to bring the outer shell, hence the CSS is waiting for the entire browser to resize, and then only it can show the changes.
But I would want to remove the iframe dependency from the project. The project is being built using angular js 11.
For better understanding, it's the same thing that we experience when we do inspect elements and switch on the mobile emulator in chrome.
Any kind of help or another solution way around is highly appreciated.
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.
Cordova 3.3.0, jquery, html, javascript, css
I am creating a mobile application using cordova 3.3.0.
On the second page I need to render a new page (html or url) in the middle of screen with respective to device width.
I need header & footer in fixed position at top & bottom respectively.
Middle part there should be one div or frame in that html or url page should render.
I have tried using iFrame, Cordova's InAppBrowser API both are not working. iframe is not scrollable & its contents are not squeezed. InAPpBrowser opens a new html covering total screen.
Please suggest me any working solution.
Thanks in advance
Use jQueryMobile. http://jquerymobile.com/
It renders pages and has ready-to-work transitions from one page to others. The page definition offers the possibility to have fixed headers and footers. jQueryMobile also offers a wide variety of controls and events suitable for mobile phones.
Be aware that depending on the user group of your software, despite of jQueryMobile you may still encounter the fact that many phones don't behave as expected, especially older phones.
Android phones used to be terrible in rendering transitions, so people came to shut them off or to replace them by simpler ones. Some very old phones had problems because the fixed footer at the bottom appeared suddenly in the middle of the screen or was not put down again after the keyboard disappeared. There will always be such details.
Yet still, jQuerymobile is probably your best option because of the work that has already done for you. Good luck :-)
I am just starting with both media queries and viewport statements. Is this what is used to create websites like the following ?
http://html5up.net/escape-velocity/
http://www.sitediscount.ru/parallaxer3bs/index.htm
What I am trying to achieve is a full page / viewport on all screen sizes. Then on scroll to the next section below is also filled with the viewing area. This is a new popular type web desin and I am trying to figure out how to replicate it. Either html5 or bootstrap solutions would be great. Thanks in advance.
Short answer: Yes, media-queries is the main way to go in order to create fluid layouts.
If you're just starting out, I would recommend you to learn writing these from scratch in order to get an understanding. There is a good article available at http://css-tricks.com/css-media-queries/
However, if you do not wish to code the media-queries yourself; that kind of pages with a fluid responsive layout can easily be made with bootstrap.
To download bootstrap, go to http://getbootstrap.com and start working from there.
I am looking for a simple way to use transitions you typically see in the native iPhone apps or Android native apps (such as the slider effect, ie. the whole page sliding to the left or the right).
I know those transistions between web pages on my web application are doable with the use of frameworks such as jQuery Mobile, Wink, iUi etc.
Also my application requires a fixed footer and a fixed header with scrollable content. I tried with jQuery Mobile but though the scrolling effect of the content is good, the rendering of the fixed header and footers are not that good.
So I use iScroll 4 instead but I cant use jQuery mobile to do only transistions as the jQuery mobile plays with the DOM etc. which causes some problems within the placement of the divs
Im giving a try with iUI but then again though it seems less 'wide' than jQ mobile, it still is a whole framework for web apps. But Im currently only looking for transitions..
Is there a way to achieve those "full web page" transisitons whitout the use of a javascript framework?
Also those framework such as iUI put all the pages inside one only( jQuery Mobile does not which is great ) separating them inside several divs.. this might be problematic with iScroll i guess?
The finest would be to be able to do those transitions between separate html pages, but I don't know if it's even possible ( I mean whitout the use of AJAX world techniques)
I only target modern devices using webkit (Android, iDevices..)
Thanks a lot for your help
You can have a look at http://maker.github.com/ratchet. It mimics the iPhone behavior quite closely, including all transitions.
forget iScroll for mobile applications. It works well but not for all webkit devices and you will have issues with a good chunk of Android devices. If you want something like a native app you need to go for a container model. A container model is basically having a header and a footer and a dynamic container in the middle. This is used by mobile sites like Twitter and Flikr. The dynamic container you can load either with an iframe or ajax (but personally I would stay away from iframes and mobile anything). Also before using any frameworks out there consider the benefits vs cost (size, future dependency and scalability, overhead parsing the JS... etc) because mobile is not desktop development and many developers seem to forget that fact. I currently work for a major social networking site and we have our own framework with is not a byte more then what we need. We used JQuery in the past but it turned out to be too much bloatwhere for the webkit devices we serve (size + parse time + dependency.. etc) and we ended up killing it.