We're working on a web app that will deployed to mobile devices, iPad, iPhone, Android. Instead of trying to filter out user agents to display different views, I'd much rather just have my CSS change depending on the width of the screen (that's the only important thing here, really)
We've got something put together with jQuery, and I've changed the CSS for one part so that when the width shrinks, it doesn't take up too much vertical space (shown below)
How would I go about implementing something like that on buttons like this:
Ideally I should be able to change the CSS or something similar so the buttons are stacked up all in a row if width is narrow enough to knock even one button off. After that I can work on making the buttons look correct.
The simplest way to change CSS depending on the page width is to use Media Queries, which require no JavaScript.
Here's a great intro to Responsive Web Design from the guy who's considered the originator of the concept:
http://www.alistapart.com/articles/responsive-web-design/
If you want to actually change page content based on page width, you'll need something like RESS. Here's a simple script for that, but it requires cookies and doesn't adjust on screen resize, so unless you absolutely require it, media queries are a much better.
Related
I am aware of the fact that layout and function of a site should be strictly separated. Layout should be done with CSS and functions of the site, like expand mobile menu on click, should be done with JS.
Reference:1. & 2.
What I often see happening for responsive layouts is having column classes for the various media queries, where just the class name is different, however the width values are identical.
This then leads to HTML in the form of
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.
Would it be acceptable to instead of always defining the same width for columns for various media queries to just make a minimal CSS grid, where the column classes widths are defined once and then dynamically pass those per media query with Enquire?
I know this ruins the above given separation from layout (CSS) and function (JS), though it would mean much cleaner HTML, and this per each media query plus much less CSS as well. Enquire also only calls once per media query so the hit on the amount to download would also be much less with a minimal CSS file. Yes, of course, this means the site is JS depended.
That's not bad idea but I think that it is not good idea too. I had thought about something similar few weeks ago. I wanted to make CSS which will be compiled in browser via JS in few loops and then appended to head section. But after deep thinking I decided to not doing that.
I know that you can make fallbacks and some fancy stuff so it works in every browser with or without js, but I have looked at my grid. It takes less than 10KB. It's interesting idea, but it isn't worh so much work as it will take. Keep your HTML organised and you won't run into issue with too many css classes. You have to let someone who use your "framework" do define widths at certain breakpoints. Easiest thing to do is just write a class name.
Consider that when you use for example bootstrap and want to have 12 columns on mobile, you just don't define it and it automatically falls into that width. Many times it just enough to define max 2 breakpoints with css classes.
When I think about enquirejs I think that it can be used for hiding sliders on mobile for example. When you just display: none it still running and changing classes. If you have something similiar what should be removed because mobile is not good environment for running something, you can disable it by using enquire. Another example is mansory grid, which you can start and disable via enquirejs.
Basically you can use it if you have something already js-depended and want to customize it on diffrent screens, or give diffrent behavior, because if you just set something on window load or document load, you have an issue with someone who resizes window. Here you can use it.
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
Right now, every time I try to render a page, I will calculate the $(window).width() first and then add a corresponding class for the root html element, which will final determine the block width of some main responsive elements in the page. But this approach goes with a problem. It will first render the page with a initial default width, and then after the class is added, it will adjust the element width, which will create a non-smooth visual effect.
To overcome this, I then make all the responsive elements display: none in the first place and make them visible after the width calculation is done. But for a user, it takes more time to see the page in this way.
So I was wondering if there is a way to achieve this responsive page in a more efficient and faster way?
If you are using javascript to create a responsive site, there are much easier ways.
For example, there are TONS of free CSS based frameworks you can utilize to make responsive pages that the CSS controls, which doesn't eat up nearly as many resources as a javascript solution. Lots of DOM manipulation with javascript can get pretty hairy pretty quickly.
My suggestion would be to look into some of the following:
Foundation: http://foundation.zurb.com/index.html
Skeleton: http://www.getskeleton.com/
I personally use foundation for my development, as its easy to read/understand and it produces rapid development.
Example: http://www.sinsysonline.com/secondhomehostel
If you are ABSOLUTELY dead set on having Javascript handle your DOM rendering, it's going to be much slower than a CSS responsive site.
If so, try out:
Response JS: http://responsejs.com/
If you would like further clarification for a specific problem, could you please provide your code and I'm more than happy to provide some feedback on that.
CSS media queries allow you to apply CSS based on screen size. The advantages of this over your approach are:
1) The CSS will read the window size immediately
2) The page will automatically adjust if the user resizes the window (or rotates their tablet)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to use css3 media queries which is very useful to create responsive website. You need to write css according to viewport width. Please refer the link from which you will get all the idea about responsive website.
I hope this will help yo to work on the responsive websites.
Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks
The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.
This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).