How do I unset CSS values? - javascript

I have written a Firefox extension which alters the look and feel of Facebook. For this I used JS code to inject CSS styles to override FB defined values. But for some url patterns I don't want to force my styles. The issue here is the FB doesn't seem to load the full page but parts of page (but somehow the url in address changes).
This means when the new page loads my old styles will still remain applied and I want to restore them to their original values. How should I do that?

You should inject all your custom CSS styles into one <style> element, and then remove this <style> element (using JavaScript) when a new page is loaded on which you don't want your custom CSS.
Here's an example using jQuery: http://jsfiddle.net/thirtydot/BAPZF/

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).

Dealing with non js users - set elements to display:none / opacity :0 before page is rendered

I have done a bit of a web development faux pas by not starting with a functioning page and then building js functionality on top. The site I am redeveloping is an old site which has lots of pretty jquery animations.
I have gone to great trouble to ensure all page loads can be handled with or without ajax but I have just realised this is entirely pointless since the initial page load produces several elements which load with properties of display:none; or opacity:0; and are animated to be visible on doc ready
I would very much like to rectify this but there are several reasons I did it in the first place:
1: to hide a flash of unstyled menu before a jquery plugin kicks in. (I will replace this with a non js menu and animate into the jquery menu to solve this)
2: The other reason is that I like the initial animation on page load and would ideally like to keep it. But this presents a problem since I would like to have the bulk of the page invisible for js users and visible for non js users on load but how can I ensure that my elements css properties are changed BEFORE the page is rendered - I have tried doing this with jquery but by the time the jquery library has loaded (without caching) my page has already rendered so the content is flashed up before being hidden and animated back in?
This block will be visible only for users with JS turned off.
<noscript>html code here</noscript>
You can add some styles like this:
<noscript>
<style>
#content{
background: red;
}
</style>
</noscript>
You can add the following in your <head>:
<script>document.documentElement.className+='js'</script>
Then you can style javascript-enabled browsers differently using the js class on the html element, f.ex:
html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */
The class is added already in the head, so there is no flicker in the rest of the DOM.
You can also use the noscript tag, but personally I think this is cleaner because you can administrate the styles in a single stylesheet.

How to keep page's CSS from effecting an iframe that loads an html document?

I have an iframe that when loaded changes a bit. Is there some sort of reset or something i need to apply? How do i keep the iframe's content looking the same regardless of which page it loads in?
You can't load the iFrame in a vacuum; once it's brought into a context where stylesheets are applied, it'll follow right along with everything else on the page. Fortunately, however, it's just a matter of building your stylesheets accordingly.
One approach would be to dedicate an ID to only that iFrame's container, such as #myiframe, and then be thorough and specific with all the styles you'd like applied. Design your stylesheets to avoid conflicts with this element, and use the !important declaration if you get into a pinch and need the sub-property to override inherited styles. It boils down to careful design more than anything else, and a healthy appreciation for how cascading style sheets work.
Prefix your styles with :not(iframe)
So your CSS definitions will look like the following:
:not(iframe) body div { margin:0 auto; } /* only applies styles to div's */
/* inside body and not inside an */
/* iframe */
I think if you have a subdomain and you put that in the iframe it will stop the css.
//from my.com
<iframe src="subdomain.my.com"></iframe>

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>

Prepend .css file - Firefox vs IE

I found out IE has different behavior vs Firefox when I use this
$('head').prepend('');
That basically just to add the theme-2.css on top within HEAD tag (for theme purpose). I do that because I don't want it to load yet because I use the csspreload http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
In Firefox, the .css file on top will be taken over in priority by files below. This works fine!
In IE, the NEW .css file being added later into HEAD will take effect. This doesn't matter it is on top or bottom.
How to fix this behavior for IE?
Is there a different image loader that I can input .css files into parameters and it loads from there? The current one must see .css file in link within html.
Thanks
I'm not entirely clear on what you're trying to accomplish here - are you attempting to add a stylesheet to the page dynamically without having it affect the page, in order to preload its images?
If so, this snippet might do want you want:
$('link[rel="stylesheet"][href="theme-2.css"]').attr('disabled', 'disabled');
That will disable the stylesheet, but it will remain loaded. If you want to turn it back on in the future you can do this:
$('link[rel="stylesheet"][href="theme-2.css"]').removeAttr('disabled');
Edit:
What you really want, I suppose, is the functionality from the disabled attribute. You can actually set this when you prepend that stylesheet, and it won't be applied to the page. The snippets above just demonstrate how to do this dynamically.
First of all, there probably isn't a method of successfully doing what you want in Internet Explorer. Unless, in IE, you add the existing stylesheets again after you load the stylesheet in question.
Second, why not just modify the existing plugin?
Call it with:
$.preloadCssImages({extra: [{href: "/css/styles.css"}]});
Or if you have multiple extra CSS files:
$.preloadCssImages({extra: [{href: "/css/styles.css"}, {href: "/css/styles2.css"}]});
Etc.
Then, after the "parseCSS(document.styleSheets)" line at the bottom of the file, insert:
if (settings.extra)
{
parseCSS(settings.extra);
}
Easy peasy.

Categories

Resources