JavaScript appearing on the page with "inline-block" css inherited - javascript

We're using display: inline-block; to control elements that might live within the div of class "test". The javascript is now appearing on the page. I did not know "script" tags could ever render to the page. Has anyone found a way to work this example code to not hit elements such as "style" and "script"?
We're willing to use display:none; on our script and style tags but that's a kludge.
<html>
<head>
<style type="text/css">
.test * {
display: inline-block;
}
</style>
</head>
<body>
<div class="test">
<p>Text here</p>
<script type="text/javascript">
function TestFunction() {
var test = 1;
};
</script>
</div>
</body>
</html>
The output is:
Text here function TestFunction() { var test = 1; };

The easiest way would be to change the .test * {} selector.
An alternate would be to bulldoze the style with something like:
script,style{
display:none !important;
}
Here is a fiddle

Just like you commented before,
"We're willing to use display:none; on our script and style tags but that's a kludge."
You're setting the tag to spill its guts with that
.test * {display: inline-block}
A couple of things you could do.
Take out the tag from within that div
Don't use the * selector in CSS
Add another rule within css .test script {display: none;}

You can overwrite it with display: none; or you can use the :not() selector like so:
.test *:not(script) {
display: inline-block;
}
Or, probably the best option would be to place your script tags just inside your </body> tag or in the head where they should go.

Related

Hide an element in a class - where do I add the code to hide the element?

I've discovered this post which is almost exactly what I want to accomplish on my Owncloud server - Hide the second element within a class
from the suggested answers (there are many), the last comment said the following was needed:
.fileactions > a:nth-child(2) {
display: none;
}
My question is...where do I put this bit of code? I can't tell from the answer where to put this? I have a .js file in Owncloud called fileactionsSpec.js. It's the only place where I've found code with the words action-download in them. Do I add this code:
.fileactions > a:nth-child(2) {
display: none;
}
To the end of that .js file?
Thanks.
You are not supposed to put this in a JS file. You need to add this in a CSS file, say: style.css and the style.css file should be referenced as:
<link rel="stylesheet" href="style.css" />
The above code has to be added to the <head> section of the HTML page.
If you need a JS only approach, you need to add it like this:
var css = '.fileactions > a:nth-child(2) {display: none;}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
And your CSS says that, like said by Jaaaaaaay:
<div class="fileactions">
<a>This is visible</a>
<a>This is invisible</a> <!--it will hide this one-->
</div>
Hope this helps. Please read the introduction to HTML and CSS.
Put it in your css file, since
.fileactions > a:nth-child(2) {
display: none;
}
means
<div class="fileactions">
<a>This is visible</a>
<a>This is invisible</a> <!--it will hide this one-->
</div>
This code is CSS, not javascript. You should add it to your .css file, or in a tag in your page itself.

Can't get jQuery addClass("active") to work

This is a bit of a simplification of my code, but I think the example works. Basically, what I want to do is to use jQuery to automatically highlight a selected div-element.
At the moment, the div-element only seems "active" once I hold down on the element (the background becomes orange).
<html>
<head>
<title>Samuels HTML-inlämning!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$('.test').click(function(){
$('.test').removeClass("active");
$(this).addClass("active");
});
</script>
<style type="text/css">
div.test{
background: grey;
}
div.test:hover{
background: yellow;
}
div.test.active{
background: orange;
}
</style>
</head>
<body>
<div class="test">
Stuff
</div>
<div class="test">
Other stuff
</div>
<div class="test">
More Stuff
</div>
</body>
</html>
Does anyone know why this doesn't work? The complete example works basically the same, but I an ID to select the class to be un-highlighted rather than (.test) all classes. But that code produces the same result.
UPDATE:
Tried making this change in CSS:
div.test.active{
background: orange;
}
Now it doesn't highligt at all however. Did I miss something?
Thats because you are setting the property in your CSS as a pseudo-class, Try this:
div.test.active{
background: orange;
}
You're mixing classes and state selectors. :active is a state (that means you're currently mouse-down on it) while .active is any random class (it could be .xyz). Here's more information on states: http://css-tricks.com/almanac/selectors/a/active/

Add a class name to element immediately this element is loaded

I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...

Javascript gracefully degrade a whole div

So on the page I have a div that's part of the layout.
The div contains JS stuff, so although it's part of the layout, there's no point in showing it if there's no Javascript.
Now I would normally put this in <head>:
<style> div#target{ display:none } <style>
<script> $(document).ready(function(){ $('div#target').show(); }); </script>
But my boss wants that div during page load.
So I have to resort to something ugly in <body>:
<style> div#target{ display:none } <style>
<div id="target">stuff in div</div>
<script> $('div#target').show(); </script>
Which is invalid xHTML, has some IE drawbacks I heard, and most of all it just sucks.
What else can I do?
Leave the <style> element in the head.
There is nothing invalid about having a <script> as a sibling element to a <div>
You could be more efficient with:
div#target{ display: none }
body.js div#target{ display: block }
and
<body>
<script> document.body.className += " js"; </script>
That said, if an element is only relevant if JS is available, then it usually makes sense to add it using JavaScript instead of trying to hide it if JS isn't available.

How to change font color inside an existing script?

I get a script from a website to put it into my website, but the font color is not what I want.
The script is:
<script language="javascript" src="http://www.parstools.net/calendar/?type=2"></script>
and now I want to change the font color of it. What should I do?
I would really appreciate your help, thanks.
Examining the source of that script, it is simply writing an anchor link with document.write():
document.write("<a href='http://www.ParsTools.com/'>1389/1/31</a>");
You may want to include that script inside a <div>, and then style the anchor links within that <div> using CSS:
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
Then you should also add the following CSS class definition:
div#calendar a {
color: red;
}
The following is a full example:
<!DOCTYPE html>
<html>
<head>
<title>Simple Demo</title>
<style type="text/css">
div#calendar a {
color: red;
}
</style>
</head>
<body>
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
</body>
</html>
I assume you want to change the font colour of the HTML code produced by the script? If so, just use normal CSS in your external stylesheet and it will apply to the added content.
For example, if you want to make the text inside the element myElement a nice blue colour:
#myElement {
font-color: #0099FF;
}
If the script is not your own, then you will want to analyse the code produced by it to work out which elements you need to style in order to change the colour of the text. Many external scripts that you embed in your website contain inline CSS rules, meaning that you will have to override many elements in your external CSS stylesheet to change simple things like text colour. You may also have to add !important to the end of your CSS rule in order to override the inline styling:
#myElement {
font-color: #0099FF !important;
}

Categories