Can we have external NoScript file? - javascript

Can we have external NoScript file?
If javascript is not avaialbe i want to hide + and - from According page.
How to do this if i can't edit html <head> i only can add any external css and js file

The easy way is to add the +/- from Javascript, rather than sticking them directly in the HTML. That way they won't show up if scripts are disabled.

If there is a suitable class, you can hide the elements by default, then show them if JavaScript is enabled.
e.g.:
In CSS:
.plusminus { display: none }
<span class="plusminus">+</span>
Then, have a JavaScript file that overrides that CSS.

Related

How to add CSS to iframe content only using the head of HTML page

I hope someone can help me with this because I don't know any solution for this... I have a Blog with Google's Blogger plattform, so I only can write my CSS styles inline - no extra files.
My question: Blogger is using an iframe for the comment section and I want to optimize it for mobile devices. Is there ANY way to add some CSS to the iframe content only using the head of the HTML / XML page? Maybe with some Javascript?
Why don't you use <style>?
<style> /* put your code here */ </style>
You will need to put your css code in the page the iframe shows.
Due to security you cant interact with a page inside an iframe by javascript, so you have to have all the code in there. If you cant write code in it than I domt think it is possible, but if you can at least add a script in you can possibly add the element containing the stylesheet.

API embeded code is sending <style>, how do I ignore?

I am using embeded JS code for a service I need included in my website. It is embedding its own <style> CSS along with the HTML elements. It is a new service and there is no support for sending anything else. How can I ignore the <style> so I can use my own CSS to integrate into the theme? I don't want to resort to using !important flags.
As long as you use same classes for your CSS and you include it after the JS code loads it (assuming it loads it synchronously) your classes will override the default settings.
The way the CSS is rendered - if there is a conflict between declaration the instructions passed "later" prevail.
<html>
<head>
YOUR JS HERE
YOUR CSS to override your JS imported rules
</head>
<html>
You need to make sure you understand how CSS assesses the "weight" of the instructions though (important, inline style, id, class, html tag)
https://css-tricks.com/specifics-on-css-specificity/ - here is a decent explanation how it works.
I ended up adding !important to my CSS file since the JS file is loaded asynchronously and it would be more work to keep checking until it is loaded to remove the <style>.

Making a Modal Window in CMS no css external page. Can't use Pseudo-class. Can't use <style> tag

I am using a CMS page in Magento 1.7. The wysiwyg editor strips style tags but not tags. I do not have access to the wysiwyg .js to add the style tag. I also don't have access to adding an external css page or javascript page.
I want to make a modal window using HTML and Javascript. I can use a style attribute <div style="..."> but when I do this, I cannot use a pseudo-class like :target.
Basically what I would like to do is find a work around so I don't use this:
<style>.modalDialog:target {
opacity:1;
pointer-events: auto;</style>
Is there anything that I can do other than CSS style tag to get this to work?
I would like to have text linked to a modal window that opens up to an image. Do you know of another way of doing this without pseudo classes?

JavaScript CSS Selector

I was reading up on some JavaScript to try and create my own slider and I came across something that confused me a little. There was a CSS rule that was as follows:
html.js #slideshow .slides img
{
position: absolute;
}
The explanation said that the rule would only be applied if JavaScript was available. Now I'm a bit confused... Would this rule be applied if JavaScript is available in the browser? Or if the file "html.js" had been included in the html page, or if any JavaScript files were included?
Thanks in advance.
It's a technique where you use javascript to add class 'js' to the html tag. No javascript, no js class. Makes it very easy for your CSS to know if JS is enabled.
Probably in your page you have a script on the head that adds a js class to the root element
this will ensure that the CSS rule will be applied only if javascript is available on the client. Of course if javascript is not available the class won't be inserted by the script.
It's a modern approach used especially to prevent the flash of unstyled content (FOUC)
The page you saw is probably using Modernizr. It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser and works by adding a class "no-js" to the HTML element and when the page loads Modernizr replace it with set of rules that you're testing.
Check Modernizr website for more details if you want to test specific feature in a browser.
Of ir you don't want to use Modernizr you can do it with JavaScript by placing this directly within your <title> tag :
<script>
document.documentElement.className = document.documentElement.className.replace(/(\s|^)no-js(\s|$)/, '$1' + 'js' + '$2');
</script>

Use some CSS only if user has JavaScript enabled

In order for my webpage to degrade gracefully, I have some CSS that should only be loaded if its corresponding JavaScript will function.
What is the simplest way to load local CSS if and only if the browser has JavaScript enabled?
Also it's quite a big block of CSS, so I'd rather not have to write a JavaScript line to add each attribute. (Oh, and if necessary I can use jQuery).
Set a class on the body tag of "noJS". Then use Javascript to remove that class.
For the CSS rules that you want to be used when no JS is present, just use .noJS .myRules {}
In the <head> you can include it with document.write(). I've never tried this, but it should work in theory. No script execution means no stylesheet loaded.
<head>
<script type='text/javascript>
document.write("<link rel='stylesheet' href='your.css' media='whatever />");
</script>
</head>
You have a few options.
The one I like is to add the following code to the body tag.
<body id="no-js"><script>document.body.id="js"</script>
Then I can target #no-js and #js from my master CSS.
An additional option is to load an extra stylesheet with JavaScript, but that will slow down you initial load, which I try to avoid.
Check out the body conditionals for html5 boilerplate to see how to employ modernizr.
Also good example here: http://webdesignernotebook.com/css/how-to-use-modernizr/
Then write your css selectors for .no-js .addl-selector {}
I simply do this:
document.documentElement.className = "js"
This adds class js to <html> tag, then you can target your elements by css using:
.js #someid{}

Categories

Resources