I have a forum which is generated by my CMS. I have no control over this code. Within this code I need to insert HTML. I have read other post similar to this one but those all involve using <textarea> on forms. My code is a bit different.
Here is the generated code:
<iframe id="re_contentIframe">
<html>
<body>
</body>
</html>
</iframe>
As a person types it automatically inserts the code into the <body> tag.
IE:
<iframe id="re_contentIframe">
<html>
<body>
<p>As a person types it adds the <p> tags.</p>
</body>
</html>
</iframe>
I have a function that inserts HTML dynamically when a person performs an action such as uploading a file. Currently that function appends the dynamic content before the closing <body> tag. What I want it to do is insert the HTML where the cursor last was within the the iFrame's body tag.
Here is a visual example:
<iframe id="re_contentIframe">
<html>
<body>
<p>Forum content is typed here.</p>
<p>Content.</p>
<p>Content.</p>
<p><!-- Last place the cursor was located is here! --></p>
<p>More forum content.</p>
</body>
</html>
</iframe>
In looking at the above code I want the HTML inserted exactly at the location the cursor was. In this example it was the second to last <p> tag BUT this won't always be the same exact place.
Is it possible to do this and how?
In other words:
[Find Cursor Position] function() {
//My code to insert HTML
});
EDIT
My CMS generates the code for the forum post. When rendered it appears as this:
The part that has my name in it is the area I can edit and type in. The area I can type is generated by my CMS and looks like this:
<iframe id="re_contentIframe">
<html>
<body>
Lynda =>
</body>
</html>
</iframe>
As I type the HTML changes to this:
<iframe id="re_contentIframe">
<html>
<body>
<p>What I type is wrapped in <p> tags by the forum code.</p>
<p>New Paragraph and so on...</p>
Lynda =>
</body>
</html>
</iframe>
What I need to do is at the very last place the cursor was located in the body of this iFrame I need to insert code upon an action that is triggered by a JS function.
Related
I am building a video FAQ page for my website.
My objective is to have an embedded Youtube video at the top of the page with a list of questions underneath it. When a user clicks on a specific question, I'd like the page to refresh and display the video that corresponds with that question shown in the place where I have the youtube embedded at the top of the page.
Has anyone done this before and have any suggestions on how to make this happen?
You can code it in this way
<!DOCTYPE html>
<html>
<body>
<iframe id="youtube" width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
<h2>something</h2>
<p onclick=qus1()>Question 1</p>
<p onclick=qus2()>Question 2</p>
<script>
function qus1(){
document.getElementById('youtube').src="https://www.youtube.com/embed/GibiNy4d4gc?autoplay=1";
}
function qus2(){
document.getElementById('youtube').src ="https://www.youtube.com/embed/o6Jo2hW6gHI?autoplay=1";
}
</script>
</body>
</html>
I am currently working on code where when a user clicks a button it displays a frame from another webpage using the HTML <iframe> tag using JavaScript.
Below is the code that I use to display to the webpage:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("p").text('<iframe src="webpage.html" width="450" height="475" style="overflow:hidden"></iframe>');
</script>
<p></p>
</html>
Result:
<iframe src="webpage.html" width="450" height="475" style="overflow:hidden"></iframe>
Sadly it just simply prints out the text without actually retrieving the frame. Is there any problem with how I am outputting the text or am I completely using the wrong function?
I have tried...
Removing the quotations ('...') around the tag
Resulted In...
The webpage being useless
Use html in the place of text...
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("p").html('<iframe src="webpage.html" width="450" height="475" style="overflow:hidden"></iframe>');
</script>
<p></p>
</html>
beware that text and html have different functionality :
Text() : it replaces the text inside the html div or class specified but
but not the html
html() : it replaces the specified dom of html div/class ,or to be more specific
the function called returns or set the content (returning an innerHtml),
when you use to return content, it return the first matches,
if not it overwrites the content of all matched elements.
For certain reasons, I have it so a div will contain code that I want an iframe to load:
<div id="MyDiv">
<html>
<head>
</head>
<body>
<h1>Hi</h1>
</body>
</html>
</div>
<iframe id="MyFrame"></iframe>
My Javascript to get the text (the code) within the div above:
var DCode = document.getElementById("MyDiv").innerHTML;
My Jquery to add the code to my iframe:
$('#MyFrame').contents().find('html').append(DCode);
When I view the document in my iframe, I see the html from the div inside but wrapped with double quotes and in the body. How can I get it to display as a page?
One thing I realized when using an alert box to display the code, the "<" are shown as the escape characters: & l t ;
Few things to consider -
1) Contents in MyDiv - <head> and <body> tags starts but do not end.
2) var "DCode" holds innerHTML but jquery appends "DString".. Variables are different.
Is it a typo in asking the question?
I could not reproduce your issue. Following code works fine for me -
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function copy()
{
var DCode = document.getElementById("MyDiv").innerHTML;
$('#MyFrame').contents().find('html').append(DCode);
}
</script>
</head>
<body onload="copy();">
<div id="MyDiv">
<html>
<head></head>
<body>
<h1>Hi</h1>
Div body
</body>
</html>
</div>
<iframe id="MyFrame"></iframe>
</body>
</html>
I've this third party plugin where it will load a complete new doctype into my existing html file. I've specifically added custom css to overwrite the existing styling within the widget, but somehow my CSS doesn't work. I also noticed my javascript will not have affect within the widget itself as if the entire widget's html is being loaded from a different page. Can anyone give me a heads up as to how to edit the 3rd party loaded content?
code example:
<!doctype html>
<html>
<head></head>
<body>
<div class="widget">
<!--widget start here--->
<iframe src="http://snapwidget.com/sl/?u=ZWxsZW1hbGF5c2lhfGlufDI5MHwzfDN8fHllc3w1fGZhZGVPdXR8b25TdGFydHx5ZXM=&v=9114" >
<IDOCTYPE>
<html>
<head></head>
<body>
<!--html here-->
</body>
</html>
</iframe>
<!--widget end here--->
</div>
</body>
</html>
How to move div to before tag end body </body>. I'm using openx, I cannot change div content, because the content owned by others. I just put code javascript from openx in order to get banner I put the code after tag <body> before anyting tag in content.
And my problem is, when I put javascript from openx to generate banner I get two div parallel, which the banner in <div id="div1"> and <div id="div2"> there are in below tag <body>, I want to <div id="div1"> after tag start body <body> above anyting tag in content. And <div id="div2"> in before tag end body </body> after anyting tag.
This is I get html from openx, as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
<div id="div2"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define example insert after div id footer
Because this is content owned by others.
This is justexample content.
</body>
</html>
and I want to transform to as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define, example insert after div id footer
Because this is content owned by others.
This is justexample content.
<div id="div2"><img src="blablabla" /></div>
</body>
</html>
Because I want to put banner one above content and banner two to below content. I don't want to use CSS position: fixed.
So, possible to move tag div to before tag end body?
If possible, please help me code javascript to do it.
Thanks.
Plain simple javascript:
document.body.appendChild(document.getElementById('div2'));
To move the node you just use appendChild method.
And the demo http://jsfiddle.net/6GsbB/
Yes. You can do this way, but you need jQuery.
a = $("#div2").clone();
$("#div2").remove();
$("body").append(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/
Plain JavaScript method.
var a = document.getElementById("div2");
document.body.appendChild(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/1/
From the comments, this can be made in a better efficient way, given by dfsq:
document.body.appendChild(document.getElementById('div2'));