I am using CSS media queries to deliver different views of my website. Basically just depending on the width i show/hide certain elements.
Now I also need to move stuff around depending on this width. That means a DOM element must move to a different place in the DOM tree.
Since it contains forms and other unique stuff, I can not just have it in the DOM tree twice and toggle visibility. I really need to move it around, preferably with jQuery.
I have already found this:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
But is it really the only way?
No. It isn't the only way :)
enquire.js - A lightweight, pure JavaScript library for responding to CSS media queries.
intention.js - Offers a light-weight and clear way to dynamically restructure HTML in a responsive manner
No, not the only way.
You can always use js to make the page responsive.
Another good js plugin is response.js
But the most important thing is the concept of how to make effective media queries.
Now the good tendency is making media query based on your page content rather than some fixed width break points.
Here is some interesting articles on this.
7 Habits of Highly Effective Media Queries
Determining breakpoints for a responsive design
You can use the window.onResize event to detect a change in width and work accordingly with that.
You don't need to move the element to a different place in the DOM tree - you need to move it to a different location on the screen. Proper web development has separation of content and presentation - the location of information in the HTML document can have little to do with where it is found on screen. This is not much space to talk about CSS positioning, but I would check out position: absolute, position: fixed and float.
you can use use vanilla js
if (window.innerWidth < 768)
{
//do something here
}
Related
I have to improve website under web accessibility.
I am adding aria attributes directly in html where possible in Drupal, but there are things that I can not add in html, like carousels and slideshows, so is it okay to add aria attributes to an element after document is loaded.
like
$(document).ready(function(){
$(".item").attr("aria-label", "My Label");
});
Yes it is acceptable to do this if you have no other options.
However be aware that this isn't a 100% fool-proof way of doing things with certain screen readers (it should work correctly in the latest versions of NVDA, VoiceOver and JAWs).
Some older screen readers will build the accessibility tree on document load so it would be prudent (if somewhat of a bad practice but the best workaround I can think of) to do it via vanilla JS as an inline JS block in the footer.
This may not be possible given your current setup, if that is the case then the way you suggested is acceptable and the best you will be able to achieve in a reasonable timescale.
If you really want to fix it (and you should!) - have you thought about replacing the offending plugins / libraries (or extending / editing the libraries / plugins) to add the required elements when the HTML is generated. That is how I would handle this.
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.
Are there some problems that prevent people from creating it? Is it too complicated?
Maybe there is just no need for that?
Was it created it already and I just can't find it?
I imagine it to be a js based library and work this way:
It checks if the browser supports flexbox natively;
If it doesn't, it parses CSS and checks if an element has flexbox related rules;
If it does, it tries to emulate these rules via javascript by calculating all positions and sizes of the children elements and position them using position: absolute;.
Basically, the same thing that Masonry and similar libraries do, but with flexbox rules. Would that be possible to do?
Edit: this question doesn't explain why it can't be done.
There is actually a library that does exactly what I wanted: https://github.com/jonathantneal/flexibility
It's in the very early phase of development, but hopefully it will be viable soon.
"emulate these rules via javascript" is the "most impossible" part.
flex box is purely position:static thing, you cannot move it on
position:absolute layer (there are too many things behind this);
flex box calculations are made on so called rendering tree that is not available to JS;
In order JS to be used for static layout purposes browsers should have a mechanism to hook up users code to rendering tree formation and layout:
div { layout: myFlexManager url(my-layouts.js); }
But as soon as browsers will have such a facility the flexbox will be thrown away as this is the worst and ugliest CSS spec ever produced - community will come up with something better - simpler and more practical.
I am trying to accomplish a positioning scheme that is hard with CSS alone. I could do it easily with JavaScript, using something like:
function onWindowResize(new_width,new_height){
$('#element')
.css({ left: some_function(new_width),
top: another_function(new_height) });
};
Is it OK to use that approach? What would be possible drawbacks?
Sure, it's perfectly fine to do it with javascript if you want. Some resize operations require more complicated logic than can be expressed in pure CSS.
In many cases, it can be done with pure CSS too. If you show us what you were really trying to accomplish, you might get some CSS-only suggestions.
Potential drawbacks:
Your page requires javascript in order to function properly (not much of an issue these days in my opinion).
The layout may not track quite as smoothly during resizing of the window compared to a CSS only solution.
Two drawbacks:
Won't work if user has JS disabled
Ties your layout to your JS, preferable to keep it in CSS
I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.
Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.
I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!
You could use CSS for positioning and styling of elements. That's what it was designed for.
It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.
Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.
It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.
It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.
If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS
There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.