IE (tested 7-10) is not applying the base (an absolute URL) to background images within a style tag, resulting in 404. This only happens when the code is injected using innerHTML (a requirement of the larger application this belongs to). It applies the base to all other elements as seen in the example.
Any suggestions?
Edit 2014/01/13 This is fixed if I remove the style tags from the HTML string and manually append them to the header. Would like to know if this is the only answer. Based upon this solution: How to create a <style> tag with Javascript
<!DOCTYPE html>
<html>
<head>
<title>base test</title>
<base href="http://absoluteurl.com/">
</head>
<body>
<div id="container"></div>
</body>
<script>
var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
document.getElementById('container').innerHTML = html;
</script>
</html>
Have you tried the jQuery appendTo method?
Inline style elements have to be removed from the HTML string, added to a style element object, and then appended to the head.
<!DOCTYPE html>
<html>
<head>
<title>base test</title>
<base href="http://absoluteurl.com/">
</head>
<body>
<div id="container"></div>
</body>
<script>
var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
var head = document.getElementsByName('head')[0];
content.html = content.html.replace(/<style(.|\n)*?>(.|\n)*?<\/style>/ig, function(match) {
var css = match.replace(/<\/?style(.|\n)*?>/ig, "");
style = document.createElement('style');
style.type = 'text/css';
if(style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
return "";
});
document.getElementById('container').innerHTML = html;
</script>
</html>
Related
When you write element.style = "..." in JavaScript in adds the style attribute to the element you add the style to. Is there a way to add a style without the style attribute, without any libraries?
If you can come up with a selector that targets the element, another option is to append a stylesheet that contains that selector:
const styleTag = document.head.appendChild(document.createElement('style'));
styleTag.textContent = 'div { color: blue; }';
<div>Some div</div>
It'd be more reliable if you're permitted to change the element in some way, like add a class or other attribute:
const div = document.querySelector('div');
const className = `_${('' + Math.random()).slice(2)}`;
div.classList.add(className);
const styleTag = document.head.appendChild(document.createElement('style'));
styleTag.textContent = `.${className} { color: blue; }`;
<div>Some div</div>
With JS, you can write anything to the DOM, including a <style> tag. So for example:
const el = document.getElementById('changeColor');
el.onclick = function(e) {
const s = document.createElement('style');
s.innerHTML = '.box { background-color: yellow; }';
document.querySelector('body').appendChild(s);
}
.box {
width: 150px;
height: 150px;
background-color: red;
color: white;
padding: 20px;
}
#changeColor {
margin: 10px 0;
}
<body>
<button type="button" id="changeColor">Change It</button>
<div class="box">This is a box</div>
</body>
Add a CSS class inside styles tags
Use the DOMContentLoaded event to add a class to the element when the document is loaded
Get the elment through its tag name
Use setAttribute method in vanillaJS to add the CSS class to your tag elment
In this way it could be more maintainable yoru code, because you change at css level and JS auntomaticly will put the value tanken from css class declared
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
<style>
.styles {
color: red;
}
</style>
</head>
<body>
<p>Hello there</p>
<script>
let paragraph = document.querySelector("p")
document.addEventListener("DOMContentLoaded", () => {
paragraph.setAttribute("class", "styles")
})
</script>
</body>
</html>
I am trying to make another div right under the existing div in the HTML
<html>
<head>
<title>
Media Player
</title>
<script src="script.js"></script>
</head>
<script>
makeOscarPlayer(document.getElementById("my-video"))
</script>
<body>
<div class="my-player">
Hello!
</div>
</body>
</html>
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `
hello
`
}
can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning
You are calling the makeOscarPlayer() function before you are creating it.
You need to wrap the makeOscarPlayer() function declaration in a script tag.
You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer(), but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null, while the function declaration has no parameters.
You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore
Here is a barebones version that I got working for your reference:
<html>
<head>
<title>
Media Player
</title>
</head>
<script>
</script>
<body>
<div id="my-player">
Hello!
</div>
</body>
</html>
<script type="text/javascript">
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `hello`;
// This grabs the element that you want to create a new element by
var existingDiv = document.getElementById("my-player");
// This tells the script where to put the new element
existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
}
// Must be called in the same script block or after the script holding the function declaration is loaded
makeOscarPlayer();
</script>
For more information on how parentNode and insertBefore work, see this Stack Overflow question
You need to append that new element to a specific parent, in your case to my-video.
The function appendChild appends the new element to a parent element.
function makeOscarPlayer(parent) {
var div = document.createElement("div");
div.innerHTML = 'Hello from Ele';
parent.appendChild(div);
}
makeOscarPlayer(document.getElementById("my-video"))
#my-player {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 300px;
background-color: #f1f1f1
}
#my-video div {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 200px;
font-weight: 700;
}
<div id="my-player">
Hello!
<div id="my-video">
</div>
</div>
It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.
we use appendChild to add a node to the page.
In your function you create and add text to a div, but you don't return the node you made(and also you didn't close your line of code with a semi-colon so I added that too) but this should work:
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<div class="my-player">
Hello!
</div>
<script>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
</script>
</body>
</html>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<!-- added my-video div -->
<div id="my-video"></div>
<div class="my-player">
Hello!
</div>
</body>
</html>
This is my javascript for replacing some text:
document.body.innerHTML = document.body.innerHTML.replace(/Sometext/g, 'difference');
Ho do I change color, font-size, font and such?
I need to link my script like this, can't use { otherwise:
<script>$(document).ready($.getScript("url"));</script>
I though something like this would work:
window.onload = function() {
document.body.innerHTML =
document.body.innerHTML.replace(/Deckling/g, result);
}
var str = "The Liberator";
var result = str.fontcolor("Red").italics().fontsize(6);
result.style.fontFamily = "Harrington";
Any help? (first post and very limited Knowledge)
You can wrap you text in a div or span tag, select it in JS applying a class.
The class will contains the style for your text.
Just a quick example in vanilla javaScript (no jquery):
http://jsbin.com/yufiteseme/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
color:red;
font-style: italic;
font-size: 6px;
{
</style>
<script>
function changeColor(){
document.getElementById('text').classList.add('a');
}
</script>
</head>
<body onload="changeColor()">
<div id="text">
Test for example
</div>
</body>
</html>
You can change style of an html element using javascript, put your script below the element.
The following example changes the style of a 'p' element using javascript:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
</script>
</body>
</html>
You can also change style of an html element using jquery.
The following example changes the style of a 'p' element using jquery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#p1').ready(function(){
$('#p1').css({"color": "green"}).css({"fontFamily": "Arial"}).css({"fontSize": "24px"});
});
</script>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
</html>
That will not work:
var result = str.fontcolor("Red").italics().fontsize(6);.
You need to add css to change the surface.Add this to your header:
.textstyle{
font-size:16px;
font-family:Harrington;
}
</style>
And add this to your window.onload:$('body').addClass('textstyle');
I'm trying to apply a stylesheet to the contents of an iframe from the parent - yes, I know there's been several questions asked in the past regarding this same idea, but I'm working within the same domain here and I've tried nearly every solution on this website and none of them have worked. Here's what I got:
<html>
<title>Untitled</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" media="screen">
var cssLink = document.createElement("link")
cssLink.href = "http://domain.extension/style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['#window'].document.body.appendChild(cssLink);
</script>
<style type="text/css" media="screen">
body {
margin: 0px;
padding: 0px;
height: 100%;
}
iframe#window {
padding: 0px;
border: 0;
width: 100%;
height: 100%
}
</style>
</head>
<body>
<iframe name="window" id="window" sandbox="allow-forms allow-scripts" src="http://domain.extension/example"/>
</body>
</html>
On both scripts (the one in the frame and the one in main window) you need to set document.domain to your domain. This needs to be before your $(document).ready() and such..
document.domain = "ra.gs";
var cssLink = $("<link/>",{
href: "http://static.ra.gs/ttnnmnd/HFnmays5q/style.css",
rel: "stylesheet",
type: "text/css"
});
var iframeBody = $(window.document.frames["window"].window.document).contents().find("body");
iframeBody.prepend(cssLink);
From what I know this is not possible due to sandboxing. Why not use AJAX? (Since this is on the same domain.)
To implement this, you could create a <div id="frame"></div> element and use the .load function to load the page into the div like this:
$('#frame').load('/somepage.html');
I'm trying to activate a CSS transition with Javascript through DOM when a div object is clicked. I avoided jQuery and used JS on purpose in order to learn DOM (this is actually my first experiment with it).
I implemented a standard solution: getting the elements' ListNode from the HTML document, then changing the className of the desired object. Yet, it does not seem to work properly
(I'm obviously using Firefox).
Thank you in advance.
Here are the files.
<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>
<body>
<div class = "image" onclick = "foo()"></div>
</body>
</html>
style.css
.transition {
-moz-transition: 2s width;
width: 150px;
height: 100px;
}
.image {
-moz-transition: 2s width;
width: 100px;
height: 100px;
background-color: black;
}
script.js
function foo() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
EDIT: Edited the code in order to make immediately visible the working solution.
You're using getElementsByName, but you don't have an element with a name of image, instead you have an element with a class of image. You probably intended to use document.getElementsByClassName('image'). On a side note, the structure of your html page is incomplete, you need a <head> and <body> section, also your <html> opening tag is in the wrong place.
<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>
<body>
<div class = "image" onclick = "foo()"></div>
</body>
</html>
Try this in your javascript logic:
function foo() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
As Stencil mentioned everything should be inside HTML Tag.Similar kind of width animation could be easily achieved using jQUery
$('.image').animate({width: 250}, 500 );