I have written this html script to display wikipedia inside iframe but i want to change the background color of it, below is the code snippet which i tried. but its not working.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
</style>
</head>
<body>
<iframe style="background-color:#fc3 !important;" src="https://www.wikipedia.org/" width="100%" height="450px" >
</iframe>
</body>
</html>
You cannot modify the contents of an iframe before loading (using CSS), because it is displaying content from another page. After it loads, you may modify it with javascript.
In my web page, I have two boxes that take up roughly half the width of the screen. The left box is a textarea for writing HTML, the right is a div where the HTML is rendered into as if it were a separate web page. The issue I'm having is that, if someone writes HTML in the textarea and they write CSS for the body element (like background-color), rendering it into the div affects the background of the entire website and not the div, which I would like. I've looked around and have gained an understanding of why the browser behaves this way, but I'm wondering if there's a way to work around it.
Can I, before rendering the textarea's HMTL into the div, search through the textarea and replace any instance of <body> with <div> and </body> with </div>? This way it would only affect the div and not the entire website.
My function that renders HTML is this:
// click 'showmeImg' to render the contents of 'editor' into the 'outputContainer'
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(editor.getValue()));
});
});
For instance, if someone types this into the textarea:
<html>
<head>
</head>
<body style="background-color: blue;">
--Other HTML code--
</body>
</html>
Clicking showmeImg changes the background of the entire web page, and not 'outputContainer'. So ideally, I'd like to have a function that changes the above code to:
<html>
<head>
</head>
<div style="background-color: blue;">
--Other HTML code--
</div>
</html>
before my function renders it into the div.
When I insert this code into my file it seems to block my CSS from showing. I made a script to try and print text once the page has loaded which I am then going to use later to make a loaded bar. This is my code. All that happens is I get the text "Test" printed on my page.
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
<script>
function myFunction() {
document.getElementById('index').innerHTML = "test";
}
</script>
</head>
<!-- Page Body -->
<body id="index" onload="myFunction()">
<div class="header">
<div id="headerbar"></div>
<ul id="">
</div>
</body>
</html>
When you set the innerHTML of the index element, it completely replaces everything in the body. So you no longer have the DIV with the header class, and you no longer have the DIV with the headerbar ID. There's nothing for your CSS to refer to. It's as if you had written:
<body id="index">test</body>
Well for one we have no way of knowing what your CSS does, but an issue I see is that when you are using innerHTML it overwrites existing HTML. As in everything inside the body tag is overwritten to just test text.
Caveat: My presumption is that you don't have styles on the body either.
What exactly is your CSS supposed to style when you set the innerHTML of your body element to "test" ? You're removing all other contained elements by doing this.
I guess what you wanted to do is add a text node like this:
document.body.appendChild(document.createTextNode("test"));
We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document.
The following markup demonstrates the problem while taking simplemodal out of the equation. I only mention simplemodal in this post for context as to why the iframe is removed and re-added.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
I think that it is not possible if you use remove().
But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other.
Have you tried detach()?. In the jQuery documentation says:
To remove the elements without removing data and events, use .detach() instead.
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes.
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute;. Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width).
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload.
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with #Ryuu's answer, don't bother with iframes at all is the best option.
Is there a tag in HTML that will only display its content if JavaScript is enabled? I know <noscript> works the opposite way around, displaying its HTML content when JavaScript is turned off. But I would like to only display a form on a site if JavaScript is available, telling them why they can't use the form if they don't have it.
The only way I know how to do this is with the document.write(); method in a script tag, and it seems a bit messy for large amounts of HTML.
Easiest way I can think of:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
No document.write, no scripts, pure CSS.
You could have an invisible div that gets shown via JavaScript when the page loads.
I don't really agree with all the answers here about embedding the HTML beforehand and hiding it with CSS until it is again shown with JS. Even w/o JavaScript enabled, that node still exists in the DOM. True, most browsers (even accessibility browsers) will ignore it, but it still exists and there may be odd times when that comes back to bite you.
My preferred method would be to use jQuery to generate the content. If it will be a lot of content, then you can save it as an HTML fragment (just the HTML you will want to show and none of the html, body, head, etc. tags) then use jQuery's ajax functions to load it into the full page.
test.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html>
_test.html
<p>This is from an HTML fragment document</p>
result
<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>
First of all, always separate content, markup and behaviour!
Now, if you're using the jQuery library (you really should, it makes JavaScript a lot easier), the following code should do:
$(document).ready(function() {
$("body").addClass("js");
});
This will give you an additional class on the body when JS is enabled.
Now, in CSS, you can hide the area when the JS class is not available, and show the area when JS is available.
Alternatively, you can add no-js as the the default class to your body tag, and use this code:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Remember that it is still displayed if CSS is disabled.
I have a simple and flexible solution, somewhat similar to Will's (but with the added benefit of being valid html):
Give the body element a class of "jsOff". Remove (or replace) this with JavaScript. Have CSS to hide any elements with a class of "jsOnly" with a parent element with a class of "jsOff".
This means that if JavaScript is enabled, the "jsOff" class will be removed from the body. This will mean that elements with a class of "jsOnly" will not have a parent with a class of "jsOff" and so will not match the CSS selector that hides them, thus they will be shown.
If JavaScript is disabled, the "jsOff" class will not be removed from the body. Elements with "jsOnly" will have a parent with "jsOff" and so will match the CSS selector that hides them, thus they will be hidden.
Here's the code:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
It's valid html. It is simple. It's flexible.
Just add the "jsOnly" class to any element that you want to only display when JS is enabled.
Please note that the JavaScript that removes the "jsOff" class should be executed as early as possible inside the body tag. It cannot be executed earlier, as the body tag will not be there yet. It should not be executed later as it will mean that elements with the "jsOnly" class may not be visible right away (as they will match the CSS selector that hides them until the "jsOff" class is removed from the body element).
This could also provide a mechanism for js-only styling (e.g. .jsOn .someClass{}) and no-js-only styling (e.g. .jsOff .someOtherClass{}). You could use it to provide an alternative to <noscript>:
.jsOn .noJsOnly{
display:none;
}
In the decade since this question was asked, the HIDDEN attribute was added to HTML. It allows one to directly hide elements without using CSS. As with CSS-based solutions, the element must be un-hidden by script:
<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>
You could also use Javascript to load content from another source file and output that. That may be a bit more black box-is than you're looking for though.
Here's an example for the hidden div way:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>
(You'd probably have to tweak it for poor IE, but you get the idea.)
My solution
.css:
.js {
display: none;
}
.js:
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});
.html:
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
Alex's article springs to mind here, however it's only applicable if you're using ASP.NET - it could be emulated in JavaScript however but again you'd have to use document.write();
You could set the visibility of a paragraph|div to 'hidden'.
Then in the 'onload' function, you could set the visibility to 'visible'.
Something like:
<body onload="javascript:document.getElementById(rec).style.visibility=visible">
<p style="visibility: visible" id="rec">This text to be hidden unless javascript available.</p>
There isn't a tag for that. You would need to use javascript to show the text.
Some people already suggested using JS to dynamically set CSS visible. You could also dynamically generate the text with document.getElementById(id).innerHTML = "My Content" or dynamically creating the nodes, but the CSS hack is probably the most straightforward to read.