Removing an element JS vs CSS for Page speed - javascript

Is there any difference in page speed if you remove elements from displaying with javascript instead of CSS?
If for example I had a lot of content in the sidebar, but wanted to remove it for smaller screens, I would do:
#media screen and (max-width: 1025px) {
.sidebar {
display: none;
}
}
I'm not used to using js, but I found out how to do the same thing with jquery:
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 1025) {
$(".sidebar").remove();
}
Is there any difference in terms of speed between the two?

CSS will always outperform JS, but there are many things you can do in JS that you cannot in CSS.
Note that your JS example will work only once (unless you add an onresize listener) while the CSS example will always respond to changes.
Next, your JS example removes the element from the DOM, while the CSS only hides it by setting the display property to none (but the element is still present in the DOM and can be restored, unlike the JS example).
The equal JS code would be:
$(window).on('resize', handleWidth);
function handleWidth(){
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 1025)
$(".sidebar").hide(); // document.getElementById('sidebar').style.display = 'none';
else
$(".sidebar").show(); // document.getElementById('sidebar').style.display = 'block';
};

CSS is best. All content will be loaded either way. Then you have JS happening after!

In the code you provided, the css is hiding the element and the jquery is being deleted.
In vanilla js to hide an element you do this:
document.getElementById("El").style.display = none
The difference between that and css is so minimal it would never make a difference in speed.

Related

Javascript code hiding a div doesn't work (CSS #media rule doesn't work either)- 'cannot read property style of null'

So, I've got a button that display toggles a div on a click event. It works properly. However, I can't hide the same div using nearly the same code (however, I want to toggle this div after my screen becomes too big, not after clicking), because I get the problem like in the title- 'cannot read property style of null'
The part that doesn't work (hiding a div after screen becomes too big:
if (screen.width > 900) {
document.getElementById('klik').style.display = 'none';
}
And the part that works (button toggles a div using a click event):
function showDiv() {
if (document.getElementById('klik').style.display == 'block'){
document.getElementById('klik').style.display = 'none';
}
else{
document.getElementById('klik').style.display = 'block';
}
}
I wrote this code because I want to do a scalable menu, displaying a div with list items inside after clicking on it. The menu button is visible only when screen-width <= 900px, if screen-width > 900px I've got a normal navigation bar and the button disappears.
Am I forgetting something? I'm new to Javascript. Also one more thing- it also doesn't work using #media rule, however I can change the background-color with #media. I hope it might help. Also thanks in advance.
Note Two Problems:
Ensure that the element you want to change it's display has the id="klik"
The below code will execute only once.
if (screen.width > 900) { document.getElementById('klik').style.display = 'none'; }
But why?
The answer is because you didn't set an event to run it every time when your resize the screen. Also, screen.width will always return the width of the display. What you are looking for is the window.innerWidth
So a possible solution:
window.addEventListener('resize', function(){
document.getElementById("screen").innerHTML = window.innerWidth.toString() + "px";
if(window.innerWidth < 900)
{
//Perform your desired Executions Here
}
});
<div id="screen"></div>
This will run the code every time a window.onresize is triggered. And that's exactly what #media in CSS does. It works on window.onresize behind the scene in javascript sense.
Note: I have added a simple illustration on how to work with screen.resize which you can use as the basis for modifying element properties based on a certain range. All you need to do, is to ensure that you do your styling within that block and it will work.
Hmmm, actually this is exactly what media queries are made for. Did you try
#media (min-width: 900px) {
#klik {
display: none;
}
}
If that doesn't work: Are there any other css styles that may overwrite that particular style? Something like #klik { display: block !important; } ...?

How to ignore javascript on smaller resolutions?

My dev site uses lots of Skrollr animation at 1024px resolutions and up. Under 1024px, I don't want the animation to show, so I hid all of the images and whatnot.
However, the javascript that gets called to make the animation work is still getting called on smaller resolutions and causing some issues.
Is there a way to basically say "If the resolution is less than 1024px, ignore these JS files"?
I tried putting them in a DIV and using my existing CSS media queries to "display: none" the DIV on smaller resolutions, but that doesn't work.
FYI, these are the files being called:
<script type="text/javascript" src="/js/skrollr.min.js"></script>
<script type="text/javascript" src="/js/homepageanimation.js"></script>
On top of the jQuery(function($) { in http://workwave.joomlatest01.mms-dev.com//js/homepageanimation.js put something like
jQuery(function($) {
if(screen.width < 1024) {
return;
}
// skrollr stuff....
}
so all the skrollr functions won't be called on screen sizes with a width below 1024px.
The easiest way is too use jQuery..
$(window).width();
plain Javascript:
var w = window.innerWidth;
var ow = window.outerWidth; //toolbars and status, etc...
if(w > 1024) {
//Skrollr
}
from there an small if to trigger the Skrollr event
I would suggest conditionally loading the script. Basically the script only gets loaded if the screen size is greater than 1024.
if(window.innerWidth >= 1024){
var file = document.createElement('script')
file.setAttribute("type","text/javascript")
file.setAttribute("src", "/js/skrollr.min.js")
}
A nice approach here would be to only call the function that initiates the Skrollr functionality at given screen sizes. A real quick Google suggests that Skrollr has a .init() function that gets things rolling.
Without seeing how the JS is set up it's hard to give any solid advice, but here's an idea:
You have a JS file for the page/site that contains a conditional that checks the width of the window before initializing the plugin after the document is ready.
$(document).ready(function() {
if ($(window).width() > 1023) {
skrollr.init();
}
});
jQuery makes this a lot easier too, so it's worth taking advantage of that.
Another option to consider instead of going via window width (which can sometimes be inconsistent with the CSS widths among different browsers) is to test against a CSS rule and whether it is true, so use one you know would be true at a size above 1024px, and this would eliminate any inconsistency.
Within this condition link the JQuery files as demonstrated in other answers.

Jquery, Remove class when width screen is 1050px

This is the JS code i'm using:
$("document").ready(function($){
var nav = $('#menu2');
$(window).scroll(function () {
if ($(this).scrollTop() > 90) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
But i can't seem to get this into my code.
function checkWidth(init){
/*If browser resized, check width again */
if ($(window).width() < 514) {
$('html').addClass('mobile');
}
else {
if (!init) {
$('html').removeClass('mobile');
}}}$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
And what i want is that when .f-nav is added to #menu2, when the screen is <1050 the classshould be removed.
To change html to #menu2, just replace one with the other. jQuery is pretty simple in this respect
if ($(window).width() < 514) {
$('#menu2').addClass('f-nav');
} else {
$('#menu2').removeClass('f-nav');
}
JSFiddle
There are a few ways to do that:
Javascript only
See it in action: Fiddle
$(window).resize(function() {
if ($(window).width() < 1050) {
$selector.removeClass('my-class');
} else {
$selector.addClass('my-class');
}
}).resize(); // trigger resize event initially
And don't forget: You don't have to place $(window).resize inside $(document).ready.
Mixed Javascript & CSS
See it in action: Fiddle
This technique is explained here: http://www.senaeh.de/media-query-variablen-javascript-auslesen/
Basic principle: set a variable with a CSS pseudo element and get it with javascript.
This workaround is good if you have to use Javascript even if media queries are used, because you don't have to declare the breakpoint twice.
CSS
#media screen and (max-width: 1050px) {
body:after {
content: 'tablet';
display: none;
}
}
Javascript
var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');
Be aware: IE < 9 doesn't support getComputedStyle. You have to use a polyfill like this one.
this is best achieved with a media query
#media screen and (max-width:1050px){
.mobile{
/* will only apply on devices narrower than 1050px */
}
}
EDIT: also possible to use media queries with javascript in modern browsers
if (matchMedia) { // check if browser supports media queries from JavaScript
var mq = window.matchMedia("(max-width: 1050px)");
WidthChange(mq);
// every time width changes, check the media query
mq.addListener(function WidthChange(mq){
if(mq.matches){
//we are in a mobile size browser
$('#menu2').addClass('mobile');
$('#menu2').removeClass('f-nav');
} else{
// desktop browser
$('#menu2').addClass('f-nav');
$('#menu2').removeClass('mobile');
}
});
}
When you load a website on a screen bigger than your breakpoint, the script wont work, because you need to re-calculate the screen size(refresh the page in this case). You need to get the width of the screen on resize. Use resize() method, and inside it place your test condition, and assign the class to your element. Reference to help you: http://api.jquery.com/resize/
If you want to change the class of a div in JS, you can do something like that:
document.getElementById("#YourId").className = "YourNewClass"
It will just change your class attribute :-)
Like that, you can also check which class is used and do what you want to do with that.
Edit thanks to Olaf Dietsche: this must be a duplicated post, here can be your answer: jquery, add/remove class when window width changes

Using JS to find screen height, then apply it to a div class through CSS

I'm working on a single-page scroll-to webdesign, and can't get this code to work.
What I'm trying to do is get the screen height of the user through JavaScript.
Then I want to apply this screen height to my div class, so that I'll always have a container that is the size of the users screen resolution. A liquid design that always fits the screen, so to speak.
Here's a short example of where I want the variable screen height to be:
<script type="text/javascript">
function matchHeight() {
$('.container').css('height',$(window).height);
};
</script>
<div class="container"> I want this container to be the height of the users screen resolution. </div>
.container { width:100%; height: /* javascript value */ }
Help will be highly appreciated! Thanks in advance.
Edit: I've added a Fiddle of my complete document.
What you are asking for is not difficult at all. All it requires is one nice JavaScript function and a few quick minor changes to your HTML code.
First, give your "container" <div> an id by making some quick changes to your HTML;
<div class="container" id="container">
I want this container to be the height of the users screen resolution.
</div>
Next define a JavaScript variable that refers to it:
var container = document.getElementById("container");
Then use this neat function that I use all the time to get the dimensions of the screen using JavaScript:
function resize() {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
container.style.height = viewportheight+"px";
}
Notice that I put container.style.height = viewportheight+"px"; in the function. This means that every time resize(); is called we will update the dimensions of the browser and reapply those dimensions to the container <div>.
We will call the resize(); function in the body every time the page resizes, as well as when the page first loads, using this HTML:
<body onload="resize()" onresize="resize()">
The function will resize the container <div> to the full page height. Let me know if you have problems with this, or have any questions!
You Can not use JS code in css.
You may do what you want like this:
$('.container').height($(window).height());
or
$('.container').height($(document).height());
whether you want window or document height.
You CAN NOT do following stuff
.container { width:100%; height: /* javascript value */ }
However you can set height to some value and later alter it using jQuery's .css() API.
Also make sure that you call your matchHeight() function from within $(documeent).ready().
===========================
You can change your container class to
.container { position:absolute: width:100%; height: 100%; }
===========================
OR you can use css media queries

Running Javascript after CSS is fully loaded

I have some code that depends on the css being loaded.
I load css on the header before I load the javascripts on the footer
I tried the javascript with $(document).ready
$(document).ready(function() {
var bar_position, width;
bar_position = $('body').height() - 38;
width = $('body').width();
console.log(bar_position);
if (width &lt= 480) {
console.log("Entered");
$('#accounts-bar').css("top", bar_position);
}
});
I tried $(window).ready, $(window).load, but all of them fail.
You code is really messed up (unless you are using CoffeeScript.) This is what it should be:
$(function () {
bar_position = $('body').height() - 38; //38 is the size of the bar
width = $('body').width();
console.log(bar_position);
if (width <= 480) { //480 is the mobile width
console.log("Entered");
$('#accounts-bar').css("top", bar_position);
}
});
With CSS being loaded in the header, JS in the footer, and wrapped in a doc-ready, you should be fine as far as the CSS being applied before the JS code is executed. I'm guessing the reason your element has no width is that it is display: none;, or contains only floated elements, or something along those lines. In other words - I think this is a CSS issue, not a JS timing issue. Try going into your Firebug/Chrome console, selecting the element in question, and getting its width.
JavaScript comments are not #, they are //
wrong
bar_position = $('body').height() - 38 #38 is the size of the bar
right
bar_position = $('body').height() - 38 //38 is the size of the bar
And there are a bunch of other errors where that code would not run. Guessing you missed a tag and this is not pure JavaScript since it is indented for block scope and missing braces/closures all over.
The ready event should suffice.
When using scripts that rely on the value of CSS style properties,
it's important to reference external stylesheets or embed style
elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.
Also, your javascript is invalid. If it is supposed to be CoffeeScript, you are missing ->:
$(document).ready ->
bar_position = $('body').height() - 38 #38 is the size of the bar
width = $('body').width()
console.log(bar_position)
if (width <= 480) #480 is the mobile width
console.log("Entered");
$('#accounts-bar').css("top", bar_position)
return
If it's supposed to be JavaScript, you have more issues:
$(document).ready(function(){
bar_position = $('body').height() - 38; //38 is the size of the bar
width = $('body').width();
console.log(bar_position);
if (width <= 480) //480 is the mobile width {
console.log("Entered");
$('#accounts-bar').css("top", bar_position);
}
});
$(window).bind("load", function() {
// code here
});

Categories

Resources