JS manipulation on CSS and how it result on page rendering - javascript

I know from many sources that applying CSS after the page has loaded can cause "flashing" effect - means the page will re-render the CSS.
For example:
<head></head>
<body>
<link rel="stylesheet"... />
</body>
However, I can't find any source for applying CSS(not inline) with JS after the page is loaded and how it's reflected by the re-rendering it self.
For example:
HTML:
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="divid" class="displaynone"></div>
<script>
function showit(){
document.getElementById("divid").className += " displayblock";}
window.onload = showit;
</script>
</body>
CSS:
.displaynone {display:none;}
.displayblock {display:block;}
Will the second example will be forced to re-render the css after the page is loaded? I want to understand the deeps of how the displayblock is actually apply to the div.

If you apply your <link rel="stylesheet"... /> after your DOM elements in your markup you can end up with "flickering" effects. This is caused because when the browser load the CSS file (a network request is made), the DOM is being already displayed in the ViewPort (which has not yet any style applied).
In the second case where you add <link rel="stylesheet"... /> in your head, the browser download your CSS file before rendering the DOM on the ViewPort. At this point your JavaScript change class attribute to the DOM and you have no flickering (as all CSS has been already loaded).
When you change the DOM with a property which is related to the its visual representation the browser execute a "paint" this means that an area of the ViewPort is partially or fully re-rendered.
An interesting article regarding browser painting and performance and rendering path. Also of interest if you are using Chrome Dev Tools.

Related

Issue when using title attribute on style element

Recently I came across a very weird issue. When you add more than one style element and if you add title attribute on style element with different value assigned in title. Only the first style element css gets applied.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<style title="Id-1">
h1{color:red}
</style>
<style title="Id-2">
h2{color:blue}
</style>
</head>
<body>
<h1>Hello Red Heading!</h1>
<h2>Hello Blue Heading!</h2>
</body>
</html>
Now if you see in above simple HTML code. Following are possibilities of this code working-
When no title attribute is added - It works.
When title attribute is added with same value or no value - It works.
When we assign different value in title attribute as shown in code only the first style element css gets applied i.e. h1 becomes red but no effect on h2.
On solution is to use data- to mark title as custom attribute or data attribute.
I am more interested in knowing what is the reason behind this behavior.
To see it in action I have created a plunkr you can visit here
It's because title on <style> is used to provide different subset of styles. Documentation
So basically going to View > Page Style you will see id-1 and id-2:
From documentation:
Any stylesheet in a document falls into one of the following categories:
Persistent (no rel="alternate", no title=""): always applies to the document.
Preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected. There can only be one preferred stylesheet, so providing stylesheets with different title attributes will cause some of them to be ignored.
Alternate (rel="alternate stylesheet", title="..." must be specified): disabled by default, can be selected.

Chrome 75 - setting iFrame src attribute causes iFrame parent to load the iFrame content

Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.

Getting the height of a <DIV> - returns 'undefined'

I have a problem getting the height of a (the one in the code below, with class="post_div"). And I want to return with a document.write whitin the HTML body - maybe later using it as height for other elements, that I want to be equal. I have tried every possible code for getting the height of such an element, but every time it returns 'undefined'. I have also tried setting height=auto for the DIV. I am almost sure my problem not has to do with the way I get the height, but have no other idea for what else it could be! Therefore I have choosen to bother you with the full structure of my coding. The JavaScript is placed in a separate document containing only the following statement:
var result=document.getElementById('postHeight').offsetHeight;
My HTML document looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" media="all" href="C:\Users\Lasse\Desktop\hg2\hg2.css" />
<script src="C:\Users\Lasse\Desktop\hg2\hg2.js"></script>
</head>
<body>
<script>document.write(result)</script>
<div id="postHeight" class="post_div">
...
</div>
</body>
</html>
Hope you can help! Thanks!
There is no element with the ID postHeight. Perhaps you meant
var result=document.getElementById('content').offsetHeight;
Additionally, this calculation must be done after the element you are calculating has been loaded (so either by putting the <script> after the element, or deferring execution with onload or similar).
Since your script tag occurs before the element exists in the DOM, you can't get the height. You could put an event handler waiting for the document to load before getting the height or move that script to the bottom of the page, but your document.write would still be called before the element existed. You need to rethink your design.
Sample code:
<div id=getme>
some text to give it height.
</div>
<script>
document.write(document.getElementById("getme").clientHeight);
</script>

Is it possible to use Bootstrap without it taking over the entire style?

Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here

Internet Explorer: How to modify CSS at runtime for printing?

Imagine a webpage which enables users to show an hidden element, using javascript to modify css a CSS style at runtime.
After his decision (which includes the modification of the stlyesheet) the user uses the printing functionality of his browser.
It seems that Internet Explorer does not respect the changes made in the stylesheet before during printing if the original css definition is located in an external file.
In other Browsers everything works as expected.
Please have a look at the example below, which changes a style class from its initial definition display:none to display:inline at runtime hence the element will be displayed.
But when printing this page, the element remains hidden in internet explorer (tested with IE 6,7,8).
Do you have a solution or workaround?
Minimalistic example (html file):
<html><head>
<LINK rel="stylesheet" type="text/css" href="minimal.css">
</head><body onload="displayCol();">
<script>
function displayCol()
{
var myrules;
if( document.styleSheets[0].cssRules ) {
myrules = document.styleSheets[0].cssRules;
} else {
if ( document.styleSheets[0].rules ) {
myrules = document.styleSheets[0].rules;
}
}
myrules[0].style.display = "inline";
}
</script>
<div class="col0" id="test">This is hidden by default.</div></body></html>
minimal.css
.col0 {
display:none;
}
UPDATE:
Please note that the decision if the object should be displayed or not is made by the user - it's not known at runtime!
Have you considered using the media=print way of getting the browser to use a stylesheet specifically for printing?
<link rel="stylesheet" href="print.css" media="print" />
If the css changes you are making are always the same, i.e. you can technically store them on a separate css file, then you can use this.
For non-static CSS, in IE (not sure about other browsers/later versions of IE), you could consider using the onbeforeprint event.
See here: http://www.javascriptkit.com/javatutors/ie5print.shtml
Instead of using javascript to change the stylesheet rules, use scripting to apply and remove classes to the elements that need to be displayed. Remember that an element can have more than one class applied to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo</title>
<style type="text/css">
.col0 {display:none;}
div.showCol {display: inline;}
</style>
<script type="text/javascript">
function displayCol() {
document.getElementById("test").className += " showCol";
}
</script>
</head>
<body onload="displayCol();">
<div class="col0" id="test">This is hidden by default.</div>
</body>
</html>
This answer to another question does a great job laying out different ways to do this with scripting: Change an element's class with JavaScript
You could try using a specific style sheet for printing, for example:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT - too slow :)
Javascript is not being evaluated when printing. It will look just like when Javascript is turned off. You need an extra media=print stylesheet and make any necessary changes there.
If that is not an option, you could create a link that will generate a static page that will look like it's supposed to for that particular user.
Based off your example scenario - in your style sheet add:
.col0 {
display: none;
}
body.showColumn .col0 {
display: inline;
}
Then simply toggle the .showColumn class on your body, and the column's visibility will be toggled accordingly.

Categories

Resources