DOM Node Inserted on Body Element - javascript

I'm looking for a way to add some inline css to the body tag and another div in the page as the page loads to override some styles listed in the stylesheet which cannot be changed. The script itself forces the page to centre align but any onload event waits until the page has finished loading (with a left alignment) before centring it. I need the script to add this css as the page loads so the front end view is seemless.
I came across the DOMNodeInstered event but open to any ideas. I'm deploying the script through a tag manager so can only fire the script either in the head or in the body.
Really appreciate any help anyone can give.

If you dont want your style to be overriden, make sure you're setting the style as close to the element as possible, which is inline. Also make sure to add !important to it.
For example:
document.querySelector("body").style.backgroundColor = "red";

Related

Get iframe element of current CKEDITOR instance

CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?
If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow
I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).

CSS & Javascript, Need Hide Auto-Generated HTML By Default

I am writing a free online e-book which needs a few minor formatting tweaks:
http://rperl.org/learning_rperl.html
The "Full Table Of Contents" at the very top of the page starts out by being visible for a few seconds, then finally collapses itself to be hidden. What we need is for it to start as hidden, and not be visible at all for the several seconds while the page loads. You can see that I have already tried to solve this issue by setting "var index_hidden=1;" at the following link, otherwise the table of contents would never hide itself at all:
https://github.com/wbraswell/rperl/blob/gh-pages/javascripts/metacpan_rperl.js#L832-L833
It probably shouldn't matter, but I'm using some custom Perl scripts to generate this file from Perl POD source, I can give more info if needed.
Although the described behavior does not appear for me (OSX + Firefox). Here's what you might do:
Hide the element by default using CSS. Add this to your head element (extend with stronger hiding CSS when needed).
<style>.wait-for-js { display: none; }</style>
And hide your element by adding the class
<div id="index-container" class="hide-index wait-for-js">
Last but not least, to make this trick functional. Remove the class as soon as JS is loaded, which would also mean that other logic has been loaded and you're save to show the table of contents. Be sure to load this JavaScript last thing you'll do.
<script>
document.getElementById('index-container').className = 'hide-index';
</script>
Or if you're using jQuery
<script>$('.wait-for-js').removeClass('wait-for-js');</script>
Welcome to SO!

Detect when css is applied

I am building an AJAX-based website where all of website content is being loaded through AJAX.
Some pages have CSS that's being loaded along with content (code follows). Once the HTML and CSS is loaded I run a few scripts to change some image positions, alter width, and so on.
The problem is that sometimes my javascript gets executed before CSS rules get applied. For example: if my div width should be 200px according to the css, sometimes javascript reads it as 1000px, so I get wrong calculations.
My research has not yielded a cross-browser solution to detect not only loaded images but loaded CSS and everything else.
I use jQuery's AJAX function to get the desired HTML (this part is working fine). After I get the HTML I apply it with jQuery's html function.
Once that's done I use this code to load required css:
css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.media = "all";
css.href = url;
document.getElementsByTagName("head")[0].appendChild(css);
I could use a timeout function, but it would just be blind guessing, and I want to make sure my script runs when it needs to run. Any sugguestions?
EDIT I have included this image to make explanation clearer
Never tried before, but what about Stylesheet load events? In case IE won't fired the onload event, and you need to support it, onreadystatechange should works.
I'm glad to see I'm not the only one who has this problem.
I have some JavaScript which needs to be run AFTER the CSS styles are applied to the DOM.
I think what ZER0 suggested is a good solution, but I could not use the OnLoad event on my CSS <link> tag because I load a single concatenated/minified JS file at the end of the document, while my concatenated/minified CSS is at the top of the document.
My solution:
Put the essential CSS styles that the JavaScript depends on directly on the DOM using <style> tags.
This way, the styles get applied immediately when the DOM gets loaded. By the time JS is running, the DOM has the essential styles applied.
I think that you are over-complicating the problem. If you set all of your CSS up to only react to a certain parent class--eg: if you dynamically load the about page--all the CSS should look like .about .example {} .about h2 {} etc. The same would go for the contact page .contact img {}
Now, unless your CSS file is absolutely massive, if you include the one file at the top, you can pretty much guarantee that the CSS will be applied.

Font-face flickering when new css files are dynamically loaded

I am using the Google Webfont Loader to get my webfonts loaded with a callback and it is working fine.
Although, when a couple of components: Google +1 button, Twitter Search Widget and the Add This button is loaded, they add a new stylesheet to the DOM and makes the browser render the site again. This is causing the font-face to disappear and then show for each new stylesheet added to the dom.
I could hide the font entirely until the components are loaded but they tend to be pretty slow so that would leave me with a pretty bad user experience. About 1 sec of a headline-less site.
Andy tips on how to force font-face to not redraw or how to block dynamically loaded CSS from within Google, Twitter and FBs embed scripts?
Update: Demo here http://kristoferforsell.com/dev/fontexample/
This is currently an inherent issue with browsers and the #font-face property. The blink occurs when the font is loaded and the page updates to reflect the font. If you wish to remove the "blink" entirely, the only sure fire way is to include the font as a data URI in the style sheet. Of course, using the standard "safe" fonts will also remove the blink.
Data URIs allow you to actually embed the code for the font in the stylesheet so there's no blink when the page refreshes to show the desired font. Using data URIs, will obviously increase the file size (kb) of any style sheet.
An online converter to get base64 code can be found here
Usage for #font-face would be like so.....
#font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
Not sure if it would fix your issue but you could use css to set the visibility of the elements to hidden until the font is loaded. Google's API provides wf-loading and wf-active classes which are added to the body to address this issue.
I always set up a separate stylesheet just for the #font-face rule, and within that put in the following rules, where replace is the class of the element that's being replaced, for you that would just be the p tag.
.wf-loading .replace { visibility: hidden;}
Yours would be
.wf-loading p { visibility: hidden;}
Then as soon as the webfont is loaded, JS puts the wf-active class on the body, and your text shows up. Let me know how that goes and if you have any issues then just drop me a line. It might also be worth doing some searching for "flash of unstyled content" or "flash of unstyled text" as this is a well known and well documented bug.
I can suggest a simple and dirty trick I have used myself to solve issues like this. If you implement this, from the user's side the effect will be that the entire page will load at once (with the correct Web Fonts), but after a delay. Once loaded, nothing will flicker or change.
Wrap your entire page contents in a div and set its visibility to hidden. Then use js to turn on the visibility once the whole page (stylesheets and all) is loaded.
Here's the code:
<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>
The onload ensures that the visibility is switched on only after the entire body has loaded. Although I haven't used Web Fonts, I use this trick to fade in the entire contents of this website with no changing or updating afterwards. But yes, there will be a delay before the entire page comes into view.
EDIT: I added Google Web Fonts to the site I linked. Still works fine. No font-face flickering.
This is a shot in the dark, as I've not tested it:
Could you create another html page with only those social networking buttons, and then load that into an iframe? Then only set the src to the iframe once the document is fully loaded, so it doesn't hold anything up.
In html:
<iframe id="socialMedia"></iframe>
In script:
$(document).ready(function() {
$('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});
Where mysocialmediastrip.html contains all the social media buttons. Setting the src will cause that iframe to reload and pull in that content, but IIRC, the rest of the page will be left alone -- all of the button rendering will have been done in mysocialmediastrip.html, not in your main page.
I totally understand what you are saying about the delay process, waiting while window loads before you actually show your goods. Abhranil provided a good solution but you can take his solution further. You can use jQuery's ajax to load your specific page content that's using the special font type. Why? because ajax comes with a special function called beforeSend(). Within the beforeSend function(), you can load a very cool gift animation that will display on your screen, before your main content is ready to viewed.
Use that moment to show some creativity towards your audience, before the main event!
The best and most simple answer is adding font-display: block when specifying a font face
#font-face {
font-display: block; /* Fix flickering */
}
You should also preload the font in the html file
<head>
<link rel="preload" as="font" href="/path_to_your_font.ttf">
<-- repeat for all typeface -->
</head>

Running JavaScript function before page load (setting background of appropriate size)

I've got an image background which content I want to be always visible, no matter what is the user's resolution. Therefore, I want to be able to determine what is the resolution and set appropriate background image file before page loads, on the very beginning. Is it possible somehow?
The earliest point at which you can run a Javascript function with access to the DOM (without waiting for page load) is by placing a <script> tag right after the opening <body> tag.
Scripts inside the <head> will run before this occurs, but there won't be access to the elements on the page.
Try this code
<body>
<script type="text/javascript">
alert("Some elements shouldn't even be visible when this shows");
</script>
... rest of the page
</body>
See this example with some Gangsta Lipsum text.
Check this article on getting screen resolution in Javascript: http://andylangton.co.uk/articles/javascript/browser-screen-resolution/
Script tags execute inline if you don't do anything special to defer them (and deferring script execution is not supported on all browsers). This means a script tag nested just inside the body tag will be executed before the rest of the body loads. You could have your script detect the screen resolution and set the background image for the body right there.
Using a JavaScript framework like MooTools you can utilize the DomReady event instead of onLoad (which waits for all image elements to load) you can fire an event when the page has loaded.
Alternatively with CSS you can position absolute top left and width:100% to win the day. :O
I realize you're specifically asking about JavaScript, but there's a pretty decent technique for doing this with CSS (and optionally a little JavaScript) described at the CSS Tricks site.

Categories

Resources