I am trying to add the CSS(width:100%) using jquery into an iframe. But don't know where I am doing wrong. I tried the below mentioned code to add the CSS in an iframe using jquery.
HTML File
<div class="col-md-12">
<div class="page-content ask-question" style="margin-top: 5px;">
<div id="preview-container" style="height: 342px;">
</div>
</div>
</div>
Jquery code
$('.ace_text-input').keyup(function(e) {
delay(function(){
var html1 = buildSource(html, js, css);
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
iframe.frameBorder="0";
iframe.height = 496;
iframe.css='width:100%;';
iframe.className = 'preview-iframe';
$('.preview-iframe').remove();
$('div#preview-container').append(iframe);
iframe.contentWindow.document.open('text/html', 'replace');
iframe.contentWindow.document.write(html1);
iframe.contentWindow.document.close();
},1000);
});
Instead of
iframe.css='width:100%;';
I Write this
iframe.setAttribute( "Style", "width : 100%;");
You can apply width on the element using Javascript Review the below code snippet. Thanks
var iframe = document.createElement('iframe').style.width = "100%";
Related
I have a working code, that stops the video on modal close. However, I wonder is there a way to achieve the same results using Alpine.js only. Without having a separate JS as in my current case.
Here is my code:
<div x-show="videoModal">
<div #click.away="videoModal = false, handleClick(videoPlayer)">
<div id="videoPlayer">
<iframe src="https://www.youtube.com/embed/{{ $video_id }}"></iframe>
</div>
</div>
</div>
<script>
function handleClick(element) {
var iframe = element.querySelector( 'iframe');
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
}
</script>
I have a container called adcontainer, now I have another div which contains a video generated dynamically to the dom, this new div which are generated dynamically does not have id or class juts tag name,
Now I want to append this new divs to the adconatiner
Here is HTML
<div id="adcontainer"></div>
<div style="width: 100%; height: 100%">
<video src="videos/video.mp4" autoplay="true"></video>
</div>
Js
var adContainer = document.getElementById('#adcontainer')
var video = document.getElementsByTagName('video');
var parentEl = video.parentNode;
adContainer.appendChild(parentEl)
unfortunately, this is not working, what is wrong here?
getElementById() doesnt require #
getElementsByTagName() returns a HTMLCollection, so use [0]
var adContainer = document.getElementById('adcontainer')
var video = document.getElementsByTagName('video');
var parentEl = video[0].parentNode;
adContainer.appendChild(parentEl)
<div id="adcontainer"></div>
<div style="width: 100%; height: 100%">
<video src="videos/video.mp4" autoplay="true"></video>
</div>
You have to run javascript after page is loaded.
window.addEventListener('load', function() {
var adContainer = document.getElementById('adcontainer')
var video = document.getElementsByTagName('video');
var parentEl = video[0].parentNode;
adContainer.appendChild(parentEl)
});
This is my first question on stackoverflow. What I want to do is to create an iframe into test div with javascript and add html code in it. Also I want to resize iframe's height dynamically. The code below works good for me only if I set dynamic_div's height more than 150px. If the height of the dynamic_div less than 150 it automatically sets iframe's height to 150. How can I fix this problem ?
P.S : html code in the html variable is dynamic. So I can not change anything in it.
Many Thanks.
<html>
<head>
</head>
<body>
<div id="test" style="border: 1px solid;"></div>
<script text="text/javascript">
var html = "<html><head></head><body><div id=\"container\" style=\"text-align:center;padding:8px 0;background-color:#f0f0f0;border:1px dashed;\"> <div id=\"dynamic_div\" style=\"width:100%;height:50px\">Some Content</div></body></html>";
function ui_aa(element_id,content){ // create an iframe and add txt into it.
var iframe = document.getElementById(element_id).appendChild(document.createElement('iframe')),
doc = iframe.contentWindow.document;
iframe.style.cssText = "width:100%";
iframe.frameBorder = 0;
iframe.scrolling= 'no';
doc.open().write(content);
doc.close();
doc.body.style.cssText = "margin:0px;padding:0px;height:100%";
var height = doc.body.scrollHeight;
iframe.height = height;
};
ui_aa('test',html);
</script>
</body>
</html>
The iframe gets a height value for unknown reason to me, to give it a height value such as 0 did the trick, The doc.body.style.cssText overwrites the height value to 100% anyway, so you don't need to worry.
function ui_aa(element_id,content){ // create an iframe and add txt into it.
iframe.height= '0';
};
Example JSFiddle
Because of your <div id="container">
Automatically it wont be as tall as your iframe.
Add some style to it.
#container {
height: 100%;
display: block;
}
<html>
<head>
<script type="text/javascript">
function PrintElem()
{
var mydiv1 = document.getElementById("div1");
var mydiv2= mydiv.getElementsByTagName("div2");
printTheDivs(mydiv1, mydiv2);
}
function printTheDivs (d1,d2)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><body>' + d1.innerHTML + '</body></html>');
//Here I want to show the Images in this window.
$(d2).print();
//but want to print the Div2 Images I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers.
}
</script>
</head>
<body>
<div id="div1">
<img src=”image1.jpg”/>
<img src=”image2.jpg”/>
<img src=”image3.jpg”/>
<img src=”image4.jpg”/>
<img src=”image5.jpg”/>
</div>
<div id="div2">
<img src=”image6.jpg”/>
<img src=”image7.jpg”/>
<img src=”image8.jpg”/>
<img src=”image9.jpg”/>
<img src=”image10.jpg”/>
</div>
<input type="button" value="Print Div" onclick="PrintElem()" />
</body>
</html>
I want to show one div using window.open() and print another div. I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers. Please help me. Thanks in advance.
You can print particular div
<div id="divid">test</div>
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
printDiv('divid')
check here http://jsfiddle.net/jrhp8/
I need to insert an iframe into a div using javascript. I need this written in javascript so I can use the code in a greasemonkey script (and greasemonkey only allows for javascript).
The greasemonkey script will be inserting AOL's search bar into various websites. I've included the working HTML code below so you can test it out to see what the end result is when this works.
Here is exactly what I need to do, written in HTML:
<div style="overflow: hidden; width: 564px; height: 43px; position: relative;">
<iframe src="http://aol.com" style="border: 0pt none ; left: -453px; top: -70px; position: absolute; width: 1440px; height: 775px;" scrolling="no"></iframe>
</div>
I need to make that HTML code work in greasemonkey, which requires it being written in javascript. Here is what I've got so far (with my final question beneath the "pseudo-code"):
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.setAttribute("border", "0pt");
makeIframe.setAttribute("border", "none");
makeIframe.setAttribute("left", "-453px");
makeIframe.setAttribute("top", "-70px");
makeIframe.setAttribute("position", "absolute");
makeIframe.setAttribute("width", "1440px");
makeIframe.setAttribute("height", "775px");
makeIframe.setAttribute("scrolling", "no");
var makediv = document.createElement("div");
makediv.setAttribute("height", "43px");
makediv.setAttribute("width", "564px");
makediv.setAttribute("position", "relative");
makediv.setAttribute("overflow", "hidden");
I already know how to either insert the iframe OR insert the div into the source code of the sites I need to insert it into, by doing this:
var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(iframe OR div, getRef);
What I CAN'T figure out how to do, is how to write the iframe INTO the div and then insert that div into the source code. That very last code snippet works for inserting either the div or the iframe into the source code, but I need the iframe inside the div, and then for that div to be inserted into the source code (using that last code snippet).
Any ideas?
1- you can use element.appendChild
makediv.appendChild(makeIframe);
2- Or append iframe as html into div like this,
makediv.innerHTML = '<iframe src="http://aol.com" style="border: 0pt none ;'+
'left: -453px; top: -70px; position: absolute;'+
'width: 1440px;'+
'height: 775px;" scrolling="no"></iframe>';
than insert makediv to where you want,
var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);
UPDATE:
You cannot set style with setAttribute function,
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left = "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";
var makediv = document.createElement("div");
makediv.style.height = "43px";
makediv.style.width = "564px";
makediv.style.position = "relative";
makediv.style.overflow = "hidden";
Using on page reload the page redirected to the src URL of the iframe.
To avoid this use sandbox iframe, like this:
<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>