I have the following code, and it is doing what I want but I can't get any styling on it, and I was wondering how to do that? I've tried pointing CSS to the body but it still does nothing. My goal is to control the font size, the positioning, and the font colour. Please ignore the CSS call
<!DOCTYPE html>
<html>
<head>
<title> SUCCESS</title>
<link type="text/css" rel="stylesheet" href="SUCCESS.css" media="screen">
</head>
<body>
<script>
document.querySelector("body").addEventListener("keypress", function printer()
{
document.write('SUCCESS');
})
</script>
</body>
</html>
document.write will accept HTML tags. Try something like this
document.write("<p style=''>Success</p>");
But I suggest you the better way is create an HTML element already with styles and change it according using getElementById or something
So easy, use this javascript, look:
function CustomWrite(a,b) {
b = '"'+b+'"';
a = '<span style='+b+'>'+a+'</span>'
return document.write(a);
}
how to use, look:
CustomWrite('SUCESS','you css code here');
Related
<html>
<body style="background-color: returnBlue()">
<em>Boy, I sure do wish I existed on something that was blue.</em>
</body>
</html>
The style doesn't make the body blue
function returnBlue()
{
return 'blue';
}
How can I make the returnBlue() function run and return to an attribute? Thanks!
In short, you can't. The style attribute is parsed as CSS and what you're trying to execute is a JavaScript function. There's no way to call JS from CSS.
What you can do, is get a reference to the element in your script and change it manually.
var body = document.body;
body.style.backgroundColor = returnBlue();
However, rather than trying to style your nodes manually with JavaScript you're probably better defining your styles in CSS classes.
/* style.css */
.blue-bg {
background-color: blue;
}
Then use the class on your <body> tag.
<!-- index.html -->
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body class="blue-bg"></body>
If you really want to derive your styles programmatically, then you're best off taking a look at a language like SCSS which supports functions.
You can't do this in CSS, you can only do it with JS.
document.body.style.backgroundColor = returnBlue();
Also, why use returnBlue(); when you are trying to set it to blue? If you want to change the background color using JS just do
document.body.style.backgroundColor = color;
UPDATE:
If you wanted to, you could use JQuery's .css() method and do $("body").css("background-color: blue;")
I found JavaScript I like to use but I need It to be written in the html page and not as a separate file ... Here is a JS fiddle
Here is how I tried to write it:
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script>
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
</script>
</body>
I know that I can wrap the numbers with <span> tag but
in my actual page I have numbers dozens of times during the text and this is way I rather use the script...
What do I need to change in the script to make it work?
Two things, use <script type='text/javascript'></script>. And add a reference to jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
and put your scripts inside $(document).ready().
I think you really should take a look at this
Update
As you're using jquery you will need to add the scripts to your page, and all your jquery code must be inside $(document).ready(function(){ }), it will look like this.
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
})
</script>
</body>
Is it possible to create your own text contents (text between the HTML tags) of my custom HTML tags?
I used this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("eg").replaceWith("<h2>Put the text content of eg here</h2>");
});
</script>
</head>
<body>
<eg>My text</eg>
</body>
</html>
Between the <h2> tags (don’t think I should only use <h2> tags without JS) in my JavaScript code, any text can be placed that I like to have.
Example: <eg>I can type any text here but it’ll be still in h2 tag settings</eg>.
What should I write between <eg></eg> in JS to have any <h2> text content that will be written in my HTML code?
If you want to replace the <eg>Test</eg> with <h2>Test</h2> then you can just do this: $("eg").replaceWith("<h2>" + $("eg").html() + "</h2>");.
Here is an example: http://plnkr.co/edit/urd69pJSXQngGIsYYSjq
If I'm understanding correctly, you just want to append an element to the DOM, so you can just use the html method as follows:
$("eg").html("<h2>Any text can be placed here</h2>");
Have a look at the docs if you need more info.
Note: You closed but didn't open your body tag.
Replace:
</body>
With something like:
<body> <eg> Your custom content is between body tags now </eg> </body>
And you also have two HTML tags, remove the second
<html>
No. It wouldn't be HTML anymore.
However, if you wrote xHTML (which is a form of XML), then you could extend the DOM with your own elements. But that would be XML, not HTML.
And if you tried adding custom elements to a page, browsers wouldn't know what to do with them. Even if some browsers might display them, it's a very bad idea. Use a class name instead.
Creating and using custom tags is a bad idea. It should be avoided.
You are probably looking for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#my_h2").html("<h2>Any text can be placed here</h2>");
});
</script>
</head>
<h2 id="my_h2"></h2>
</body>
</html>
For more, read-up on CSS selectors. (They are the same as jQuery selectors.)
Hope this helps.
I have a html + css + javascript application.
I want to be able to enable theming.
All my css are replicated in two folders: /theme1/... and /theme2/...
So my html looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme1/file1.css"/>
<link rel="stylesheet" href="theme1/file2.css"/>
....
....
</head>
<body>
.....
</body>
</html>
I want to be able to change using javascript the home folder of the css (theme1 to theme2).
Any ideas?
Here is what you will need to solve the problem:
Get the relevant tags. In this case, any link tag with rel="stylesheet" will probably do, but you can even go so far as to specify "starting with theme1" if you want. This can all be done with document.querySelectorAll("link[rel=stylesheet][href^=theme1]")
Loop through them. A simple for loop will do nicely.
getAttribute("href") gets the string you need.
replace() will allow you to replace the part of the string you want.
setAttribute("href",newattr) will put the attribute back into the tag.
<link id="foo" rel="stylesheet" href="theme1/file1.css"/>
When you want to change the theme:
document.getElementById('foo').href = 'theme1/file2.css';
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.