Please consider this code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div>
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
jQuery("#iView").appendTo("#dlgDiv")
})
</script>
</body>
</html>
In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode.
In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode.
Any ideas how to overcome this problem? The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact...
It's a real show stopper for me, any help would he highly appreciated!
Thank you,
Andrey
Takes to refresh the movement (appendTo) and does not locate either the iframe:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div>
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#iView").appendTo("#dlgDiv");
setTimeout(function(){
var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <-----
iBody.append("<div>my bad html</div>"); // old container
iBody.empty(); // empty body in iframe
iBody.append("Some test text"); //add container
iBody.append("<div>or something right</div>"); //add container
iBody.attr("class", "some-class"); //add class to body
}, 100);
})
</script>
</body>
</html>
Edition: for it is understood
Related
I have to upload ePub files on my webpage using iFrame. Now I want to add the functionality of highlighting user selected text inside that iFrame containing the ePub. I am currently using Rangy Library for text highlighting, and it works for the text outside of the iFrame but not for the text inside it.
Here is the code for highlighting:
<!DOCTYPE html>
<head>
<style>
.highlight {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="../lib/rangy-core.js"></script>
<script type="text/javascript" src="../lib/rangy-classapplier.js"></script>
<script type="text/javascript" src="../lib/rangy-highlighter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-textrange.js"></script>
<script type="text/javascript">
var highlighter;
window.onload = function() {
rangy.init();
highlighter = rangy.createHighlighter();
highlighter.addClassApplier(rangy.createClassApplier("highlight", {
ignoreWhiteSpace: true,
tagNames: []
}));
function highlight() {
highlighter.highlightSelection('highlight');
// var iframe = $("iframe")[0];
var selTxt = rangy.getSelection(myFrame);
console.log('selTxt: '+selTxt);
highlighter.highlightRanges('highlight', selTxt._ranges);
}
document.getElementById('highlight').addEventListener('click', highlight);}
</script>
</head>
<body>
<button id="highlight">Highlight</button>
<div>select to highlight </div>
<div>line to be highlighted</div>
<div>line to be highlighted one </div>
<p>Another <b>paragraph</b></p>
<iframe src="iframe.html" width=500 height=500 name="myFrame"></iframe>
</body>
</html>
This is the iframe code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>This is iframe </h1>
<p>Select content to highlight</p>
<p>Select text to highlight</p>
</body>
</html>
This code works but only highlights the text outside of the iframe,I need it to highlight text inside the iframe.
I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
Cancel
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChild with this one frame.style.display="none"; You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
The approach that works for me is to define the following JavaScript function in the parent page:
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.
I have assigned the 80% height of the viewport to my div as height. In Button click I have displayed the height of the div. This works fine in ie9, ie10. But in ie7, ie8 $("#divContainer").height() is 0. Am I doing anything wrong and how to get the height of the div in IE7, IE8(vml)
<html style="height:100%;">
<body style="height:100%;">
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<button id="button1"></button>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").height());
});
});
</script>
</body>
</html>
Thanks In Advance
For IE you may try pure javascript solution
var height = getElementById("divContainer").clientHeight;
Most importantly include jQuery Library in your Code's head section and use .css("height") instead of .height()
Modified code is as below
<html style="height:100%;">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="height:100%;">
<button id="button1" value="text"></button>
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
});
});
</script>
</body>
</html>
Note I have taken Button above the container.
you can use jquery - Height option
or
use jquery with css option of any properties of tag or id.
like
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
//also set the height too as
$("#divContainer").css("height", "80%");
});
});
How would you make a JQuery popup Note ? This is what I currently have,
Note Code Example
<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css" rel="stylesheet">
#popup {
border: 1px solid black;
width: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".HoverMe").mouseenter(function() {
var left = $(".HoverMe").position().left;
var top = $(".HoverMe").position().top;
$("body").append("<div id=\"popup\"> </div>");
$("#popup").css("left",left);
$("#popup").css("top",top);
$("#popup").append("<p> Hello World </p>");
});
$(".HoverMe").mouseleave(function() {
$("#popup").fadeout("fast");
});
});
</script>
</head>
<body>
<div class="HoverMe">
Hover Me
</div>
</body>
</html>
Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.
Any examples would be useful,
Thank you!
How about using someone else's code for this? I recommend tipsy.
Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:
http://sixrevisions.com/css/css-only-tooltips/
I cannot seem to get this script to work. Can anyone please help? The DIV's width is not defined. It just stretches across the whole page.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script>
document.getElementById('box').style.width="10px";
</script>
</head>
<body>
<div id="box"></div>
Your script is running before the <div> is rendered on the page. Try it like this:
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
document.getElementById('box').style.width="10px";
</script>
</body>
</html>
And don't forget to close your <body> and <html> tags.
To prove that it is, look at this example. I moved the script back to the <head> section and changed the width setting to run when the window is finished loading.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script type="text/javascript">
alert('test');
window.onload = function() {
document.getElementById('box').style.width="10px";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
You'll see the 'test' alert message before the box is rendered.
The element does not exist on the page yet. JavaScript can not access/manipulate an element until it has been loaded in the DOM. You can overcome this by moving you <script> block to above the closing </body>. Or use an window.load event.
An example of the former using your code is here - http://jsfiddle.net/ycWxH/
if you will use jquery it is more easy to do that.
that is if you will only use jquery framework
here is the code
$('#box').height(10);
just a reminder, window.onload is fired when page fully loaded.
refer to http://www.javascriptkit.com/dhtmltutors/domready.shtml
<script>
function doMyStuff() = {};
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", doMyStuff, false );
} else if ( document ) {
document.attachEvent("onreadystatechange",function(){
if ( document.readyState === "complete" ) {doMyStuff();}
});}
</script>