How can I remove the extra iframe space at the bottom? - javascript

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;
}

Related

trying to print iframe content but print the whole page instead

I've iframe that i created dynamically in my html page and print button with event on click
to print iframe's content
but unfortunately it prints the whole page instead
but after long search
I've found some solutions like focus on iframe before fire print event
but it seems doesn't work on IE and MS Edge
it works in Chrome
the only solution that works with me is to open new window and copy iframe outerhtml in it and fire print event after the content loaded in new window
then close the new window immediately after the user take an action to print or cancel
but this solution doesn't look user friendly
so does it there any solution to print iframe content in IE and Edge
<html>
<head>
<title>IFrame Printing Issue</title>
<script type="text/javascript">
var g_iFrame;
function onLoad()
{
g_iFrame = document.createElement("iframe");
g_iFrame.id = "testFrame";
var style = g_iFrame.style;
style.border = "1px solid black";
style.width = "300px";
style.height = "200px";
document.body.appendChild(g_iFrame);
}
function setIFrameSrc()
{
g_iFrame.src = "Test.htm";
}
function printIFrameContent()
{
window.frames["testFrame"].contentWindow.focus();
window.frames.testFrame.contentWindow.print();
}
</script>
</head>
<body onload="onLoad();">
<button type="button" onclick="setIFrameSrc();">Set IFrame Src</button>
<br />
<button type="button" onclick="printIFrameContent();">Print IFrameContent</button>
<br />
<div style="border: 1px solid black; width: 300px; height: 200px;">
This is to test printing the content of an IFrame whose src is set dynamically.
</div>
</body>
</html>
You may first check if the user agent is IE:
function printIFrameContent()
{
var ua = window.navigator.userAgent;
var msie = ua.indexOf ("MSIE ");
var iframe = document.getElementById("testFrame");
if (msie > 0) {
iframe.contentWindow.document.execCommand('print', false, null);
} else {
iframe.contentWindow.print();
}
}
Referred a similar answer on SO: https://stackoverflow.com/a/19639241/1500851

Appending the elements within div using appendchild attribute

I have a div as :
<div id="div1" width="100px" height="100px">
</div>
Now within this div I want to place 20 elements, but dynamically it can grow upto 50 elements(images) also.
I am using the following code to append these elements in a div,
var i = document.createElement("img");
var d= document.getElementById("div1");
d.appendchild(i);
Now, the issue is ,as the number of elements increase the elements are going out of div ,and if I use the max-width and max-height on images, the result doesnt change:
i.setAttribute('max-width', '100%');
i.setAttribute('max-height', '100%');
Is there anything which I am missing?
Edit:
The images need to shrink as the div size is fixed
If the width is fixed and the height is dynamic. The image will shrink and they will get stacked. Check my fiddle here
img {
width:100%;
display:inline-block;
}
<div style="width:100px;border: 1px solid black;">
<img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
<img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
<img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
</div>
Cant think of a nice way to do it with percentages,
var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index= 0,l= count;index<l;index++){
imags[index].setAttribute('height', (100/count)+'%');;
}
its not pretty but should work.
i smushed something together from all the answers that fits your needs (if i understand you correctly)
https://jsfiddle.net/b30d88g6/3/
the div has fixed width/height and the images wont get out of the div
function add_img() {
var i = document.createElement("img");
i.src= "https://jsfiddle.net/img/logo.png";
var d= document.getElementById("div1");
d.appendChild(i);
var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index=0, l=count;index<l;index++){
imags[index].setAttribute('height', (100/count)+'%');;
}
}

Change an img height so it's at a certain aspect ratio to it's width with jQuery

I have an image that I need to change the dimensions of with jQuery. The image width should be the same as the width of it's parent div. The parent div is a responsive column container, so it's width is dynamic(fluid). Once the width of the image is changed, the height should also be changed to a value that would correspond with the aspect ratio of 16:9 in relation to the image's width. So let's say the column width is 1920... the image height would then be 1080. How can I modify my code to do this?
$(document).ready(function(){
$('#featured-articles').find('.featured').each(function(){
var slide = $(this);
$(this).find('img[rel="featured_preview"]').each(function(){
var new_width = slide.width();
var new_height = ?????
$(this).prop("width", new_width).prop("height", new_height);
});
});
});
<div id="featured-articles">
<div class="featured">
<img src="slide.jpg" rel="featured_preview">
</div>
<div class="featured">
<img src="slide2.jpg" rel="featured_preview">
</div>
</div>
I haven't tested your code, but is this what you want?
var new_height = Math.round(new_width*9/16);
Add width: 100%; to your img css. This naturally keeps the aspect ratio of the original picture (this assumes your original image is at a ratio of 16:9 -- which is a pretty valid assumption because you shouldn't be stretching/distoring images)
img {
width: 100%;
}
JSFiddle Demo
here a simple example :
html code :
<div id="test" style="width:300px">
<img src="http://placehold.it/300x300" />
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
javascript code (using jquery) :
var aspectRatio = 9/16;
$('#test img').css('width','100%');
var imgWidth = $('#test img').css('width');
// we have to remove the suffix px in imgWidth otherwise we will get
// a NaN value when we attempt to use that value in arithmetic
// operations
imgWidth = imgWidth.replace('px','');
// above the image width is converted from percentage format(%) to a
// static value for example 300px
var newHeight = imgWidth*aspectRatio;
$('#test img').css('height',newHeight+'px');
console.log(imgWidth+'\n');
console.log(newHeight);
you can try the example jsfiddle

change image SRC and Style

Hi I want to rewrite an image Src and Style element.
The image tag has an element called "data-orig-file" wich has the url that I want to write to the src element.
I came up with this but I'm not good at javascript:
function changeImageSrc(img) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
Now Secondly I want to grab the "Style" element with it's values from the grandparent div of the image and write that style to the image instead of the original style.
Finally I want to do these two things on all images inside a container div on a page when it is loaded (I suppose).
Any help is greatly apreciated!!
Thanks
update:
what I came up with so far is this:
function ChangeImageSrc() {
var image=document.getElementById("img");
var div=document.getElementById("LastPost");;
for each (image in div) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
}
window.onload = function()
{
ChangeImageSrc();
};
I also tried it with an "onload" event on the body element like this (instead of the wondow.onload part):
onload="javascript:ChangeImageSrc()
Both don't work this far :(
Ok AffluentOwl, here's the HTML:
<div class="gallery-group images-1" style="width: 677px; height: 507px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<a href="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg" class="zoom">
<img data-attachment-id="5786" data-orig-file="http://www.mydomain.com/wp-content/uploads/..../../image.jpg" data-orig-size="1333,1000" data-medium-file="http://www.mydomain.com/wp-content/uploads/..../../image-300x225.jpg" data-large-file="http://www.mydomain.com/wp-content/uploads/..../../image-1024x768.jpg" src="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg?resize=1191%2C893" align="left" title="shelter-childrens-farm" data-recalc-dims="1" style="width: 73px; height: 9px;">
</a>
</div>
</div>
As you can see there is a CDN prefix to the url that I'm trying to loose (for good reasons, it's opposed to me by wordpress and doesn't work for me).
The second thing is about the style of the image tag, that's somehow set to the wrong dimensions so I want to grab the right size from the first div (top of code).
Here's how you replace an images' src attribute with a url stored in an attribute on the image called data-orig-file when the page loads.
<html>
<script>
function ChangeImageSrc() {
var div = document.getElementsByClassName("gallery-group images-1")[0];
var images = div.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", images[i].getAttribute("data-orig-file"));
images[i].setAttribute("style", div.getAttribute("style"));
}
}
window.onload = ChangeImageSrc;
</script>
<div class="gallery-group images-1" style="width: 500px; height: 500px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<img src="a.jpg" data-orig-file="b.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="c.png" data-orig-file="d.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="e.png" data-orig-file="f.png" id="image_id" style="width: 100px; height: 100px">
</div>
</div>
</html>
It would probably be helpful for you to look into the element selection functions in Javascript.
getElementById
getElementsByClassName
getElementsByTagName
querySelector
You may even like to use jQuery which makes selecting elements much easier. In jQuery you could replace the <script> code with the following for the same result as above:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
var div = $(".gallery-group.images-1");
var images = div.find("img");
images.each(function() {
$(this).attr("src", $(this).attr("data-orig-file"));
$(this).attr("style", div.attr("style"));
});
});
</script>

Insert Iframe Into a Div Using Javascript - for Greasemonkey

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>

Categories

Resources