I have been looking at http://www.nytimes.com/chrome and wondering how I can achieve a similar functionality to theirs. More specifically, notice that when you re-size your browser window, the amount of stories and their dimensions change dynamically.
In my case, I have a fluid-width <div> with an unordered list inside and I would like to dynamically adjust number of elements being displayed (<li>) based on the browser window dimensions.
Is there a Javascript library that can help me achieve this?
I use these three articles as references for this type of thing:
Responsive Web Design
Fluid Images
Fluid Grids
The two main techniques for really fluid websites are:
Different themes depending on the size of the browser (this can be implemented with CSS meda queries, JavaScript, etc.)
Each of those themes are defined with percentages/ems, not pixels. (This goes for everything in the theme: text, boxes, images, everything.)
Ethan Marcotte, the guy who wrote all those articles, has an example site employing these ideas.
It's called responsive design. There also css frameworks that supports this type of design like Less Framework 3 or Flaw{LESS} CSS Framework.
You also might want to check out this plugin: Smart Columns. I have used it and it is excellent for this type of layout.
Related
Should I change HTML layouts with JS or CSS?
I see a lot of use of CSS display hiding or showing elements dependent on media queries. Maybe hidden duplicate HTML that appears in a different location on mobile. A hidden mobile menu. Etc etc
But with JS i can have one layout that "morphs" dependent of screen width. No hidden duplicate markup, just moving HTML around.
Is this not a good idea?
Programatic changes on the layout will depend on the robustness and performance of your JS code.
CSS changes depends of the browser's and it's more efficient for sure.
About the enviroment's measure you can act upon them with css media-querys.
You should not forget, that some browsers/users disable JavaScript for security-reasons.
You should use CSS where it is possible. So your Website can be viewed in all Browsers.
If you have to change some styling dynamically, and there are no CSS-alternatives, javascrpit might be the right choice.
It really depends on what you want to do, if it's basic animations, then css is here for you, if it's more advanced animations, then you should use JS, as other users said, keep in mind that some users disable JavaScript for security reasons, but i think they don't exeed 5% of the users , here's some links to help you find out what's best for your use of css or JS :
Myth Busting: CSS Animations vs. JavaScript
CSS Versus JavaScript Animations
For media queries, here's an answer that respond to your question. With the media queries, you won't have to hide anything, you will use a different CSS code for the same part of the HTML, but with different CSS attributes only for mobile/responsive use
For the SEO, here's and experiment that shows that googleBots crawl the Js without problem.
Edit : if you're able to use some server side language(php, asp...), use CSS for the design part, and the server side language for the other things, and only Javascript when you find it usefull. if you can do something with the CSS instead of JS, then do it with the CSS.
i'm trying to redirect my mobile users and all of small devices users to my mobile version of web site.
but i don't like change my URL.
like below example ,
desktop version : domain.com ( with desktop version of site )
mobile version : domain.com ( with mobile version of site )
Redirect means to Change the window location.
since you dont want to have a seperate mobile site,
The Only feasible solution is to use a good responsive ui framework like bootstrap. but in your tags you mentioned wordpress and i feel most of the wp themes are in fact responsive.
Anyways, use bootstrap if you would like to design a responsive site.or another alternative would be to write all css using media queries.
Hope that helps.
You need to replace the theme of the site for this "on the fly".
You can do it with code but it's too long, use this plugin instead device theme switcher
URls for both should be same and they are same in their case as well. Well done !
Now, for automatically rendering the specific layout, take help of media queries.
Refer
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
They define the specific width range and pick up those specific styles only.
So you have a lot of work to do.
This is a optimal way to work and this is termed as responsive design.
You can find n no of tutorials for same. But to experiment just work with one or two media queries.
Also, read about meta tags which enables to pick those media queries written in stylesheet https://css-tricks.com/snippets/html/responsive-meta-tag/
Good luck !
When customizing a page on WordPress, at the bottom left corner, you can see how your website will look like in phones or tablets.
Also, some page builders like Elementor, allow you to control what sections to appear on what screens.
A better way to state your question question would be, how to make a page responsive?
When reading about Grid Systems, you'll be amazed at how a simple change to the orientation of your divs, can make a huge user experience difference.
When using a framework that uses Grid Systems, Bootstrap being one of the popular ones, you can imagine any screen divided into 12 columns (grids). Then you can specify how many parts a div takes on each screen size by adding classes. For example, <div class = "col-sm-6 col-lg-3" </div> will cover have the screen (horizontally) in small screens (6 being half of 12) and a quarter of large screens.
The reason behind this peocess is to eleminate right and left scrolling which makes it easier to navigate.
Hope this gives you a little overview of what you need to be looking for to make mobile-friendly websites. Good luck!
thanks all of you for commenting my question.
Now that i write my answer to my self , i found my question's answer.
Responsive design not it's answer. You have to show a mobile version of site, not responsive version of site. so using #media()
not useful.
For this issues , You have to detect user's device in your back-end. for example in PHP you can use mobile-detect.
And you can detect your device and show it's template for that device.
Also, mobile detect have a js version. click here
I hope you find your answer here.
Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery.
this seems to be the answer. I am currently searching for an angular.js directive
There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
The images have a fixed/max width
The images have a fixed/max height
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit:
After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.
I am implementing an AngularJS application that has a three-panel main view. The layout is a bit like a mail system, with a navigation bar on the left. The right pane is split in two; when you select something from the navigation bar, it populates the top-right pane, and when you select something there, it populates the bottom-right pane. The panes need to be resizeable and scrollable.
I can see three basic ways to implement this:
Use frames for panes
Use div elements for panes, with JavaScript controls for resizing and scrolling
A hybrid (perhaps divs with JavaScript resizing, but containing iframes with native scrolling)
There is very little info online on using AngularJS with frames, which leads me to think that (1) is not recommended. I'm just a bit worried with (2) that JavaScript resizing and scrolling will be inferior to native controls. In some cases the content may be large. And (3) seems to combine the worst of each approach.
So I'm looking for advice on which approach is likely to work best.
angular ui-router is good option for solving posted issue.
https://github.com/angular-ui/ui-router
for css - there are a lot of different framework, most famous is bootstrap.
or you can craft css by your own hands.
http://getbootstrap.com/
In my opinion its not recommended using frames because breaks generic functions of the browser like sharing urls, navigation between frames, default frameset, etc.
The best solution is using ui router plugin https://github.com/angular-ui/ui-router with nested views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. You should check the example at documentation
For Scrollable div you should use css property and for resize it probably would be nice to define a directive
I hope it helps
I am interested in using this system but I would like to know if anyone has found any good alternatives. In particular I am looking for some layout system that will allow me to build an HTML5 layout that works good in a browser, on an ipad and on a phone.
Does anyone have any suggestions on other layout methods I should consider?
Grids are tricky when building responsive sites that cater for multiple layout sizes/devices because grid systems (certainly 960.gs) usually rely on fixed-width containers.
However, depending on how you approach your responsive build, you can still use a grid system for your desktop view. E.g. I usually approach responsiveness from the same perspective as the 320&up multiple linked stylesheets. This makes it easy to just load a particular grid system (usually 960.gs) only in the desktop view. This way, your mark-up can have the classes required by the grid system, e.g. grid_12, without the fixed widths screwing up the mobile view.
That said, there are some responsive grid systems that are proving popular and are easy to work with, such as the 1140 fluid grid. You could also try the fluid 960 grid
There are also projects that even use the 960.gs grid as a base, while still catering for smaller sizes, such as skeleton
I'd recommend you take a look at 320&up because it is a great resource for responsive builds. The theory of building for mobile first and progressively loading more stuff for larger views is definitely the way to go...
I have used 960 GS for a lot of projects but was looking for something like what you are after. I gave twitter bootstrap a go and have been happy with the frame work. It is easy to build on and to customise.
Use Bootstrap, works with percentages rather than fixed units for a truly responsive interface.