im trying to make the iframe gradually grow onclick from the link(link being the center point). its going to be the size of the link then grow to the size of the iframe. there will be other links so they will have the same effect. any ideas? sorry im a newbie
<html>
<head>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("src","");
ifrm.style.display = "block";
ifrm.style.width = "640px";
ifrm.style.height = "400px";
ifrm.style.marginLeft = "325px";
ifrm.style.marginTop = "125px";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
}
function closeFrame(){
ifrm.style.display = "none";
}
</script>
</head>
<body>
<img src="" onclick=makeFrame() height="100px" width="100px" />
</body>
</html>
you could create another function that animates the desired behavior, i.e. something that adds small increments to the height and width of your iframe.
<script>
function grow () {
ifrm = document.getElementById('amazingIFrame');
if (ifrm.style.width < 500) {
ifrm.style.width += 10;
} else {
clearInterval(interval); // stop growing when it's big enough
}
}
function startGrow() {
makeFrame(src); // create the frame first
interval = setInterval("grow()", 10); // grow every 10 ms
}
</script>
Then you could have
<img onClick="startGrow();">
somewhere in your document.
You might also have to adjust the position as it grows so that it stays centered, but the idea is there.
It sounds like you're trying to have a box open up when a user hovers over a link. There are better ways of doing this than an iframe, such as a div with dynamically loaded content.
Related
I'm creating an image gallery and I need to know the size of the div containing the image or the image itself after it loads. How can I get that? I've tried everything but it gives me the size of the DIV before it loads, which is 1px X 1px.
Basically everything is hidden, you click a link and the image displays, so the div goes from 1px by 1px to for example, say 419px by 1000px. How do I get that final size after the DIV or Image loads? the size can change depending on the device used and the image loaded. Is there anyway to get this information using just JavaScript?
Here's the function. If possible I would like to get the height of the image or the DIV after the image loads in the same function.
here's the function that i am testing
function ShowArt(nam,imgs,)
{
var currentPosition = parseInt(movingDivObj.style.top);
var scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
movingDivObj.style.top = currentPosition + scrollPos + "px";
movingDivObj.style.display = "block";
document.getElementById("close").style.display = "block";
document.getElementById("selectedart").style.display = "block";
document.getElementById("artname").style.display = "block";
document.getElementById("background").style.display = "block";
display.src = imgs;
document.getElementById("artname").textContent= nam;
scrollPosition = window.pageYOffset;
document.body.style.position = "fixed";
document.body.style.top = `-${scrollPosition}px`;
}
Thanks!
Try using this DOM event listener, in the callback function you can write the necessary code to get your value I presume:here
In the same way that the "load" event works for the body, it works for images. So you could attach an "load" event on the image and when it triggers, measure the width/height.
const img = document.querySelector('#img')
img.addEventListener('load', (event) => {
console.log('width', event.target.width)
console.log('height', event.target.height)
})
img.src = 'https://via.placeholder.com/900x1000'
Have you tried:
<script>
var myImg = document.getElementById('image');
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
console.log(realWidth);
</script>
Solution 1:
Use this Solution in your JS file
JavaScript:
window.onload = () => {};//enter the code that gets the image or divs width and height in the {} brackets`
The window.onload function waits till the DOM is loaded and then executes a function. It is used mostly when you need to get default values from a predefined and static element.
Further Readings: https://www.w3schools.com/jsref/event_onload.asp
Solution 2:
NOTE: Use this only if you are using a 'script' tag to use the JS code in your HTML.
Use the script tag at the end of your HTML document
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--Your code goes here-->
<script src="myScript.js"></script>
</body>
</html>
Thanks guys I appreciate all the help. I finally found an answer that worked though I got some great ideas. The answer was to have the images preload and when I did that it gave me the height of the image I needed for the next steps. Again thanks very much! I appreciate it. The code I used for this is below. After the images are preloaded I am able to get the width / height of the images so they work in the gallery as planned. It worked like a charm.
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"Photos/AloneInTheStorm.jpg",
"Photos/deepinthought.jpg",
"Photos/68degrees.jpg",
"Photos/forgotten.jpg",
"Photos/babylycan2.jpg",
"Photos/americancoot.jpg"
)
I am having a problem with the background-image inside a div.
I am trying to program a html-webgame, using mainly canvas. So as a result, my index looks like this.
<head>
<title>Cardgame</title>
<link rel="stylesheet" type="text/css" href="resoursces/css/index.css">
</head>
<body>
<div class='game_object' id='game_object'>
<canvas class='main_canvas' id='main_canvas'>Error</canvas>
</div>
<script type="text/javascript" src='main.js'></script>
</body>
The problem comes along like this:
window.onload = (function() {
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
drawing();
} resizeCanvas();
})();
in the function "drawing()" i am doing 2 things.
The first one is to remove all divs, i have created so far,
and the second is the i am drawing all div's new with new x-coordinate, y-coordinat, hight and width. So it looks like this
function drawing() {
delete_div();
create_div();
}
function delete_div() {
battlefield_div.style.removeAttribute("backgroundImage", false);
battlefield_div.parentNode.removeChild(battlefield_div);
}
funtciont create_div() {
var board_div= document.createElement("div");
board_div.setAttribute("id", "board");
board_div.style.position = 'absolute';
board_div.style.top = board.y1+"px";
board_div.style.left = board.x2+"px";
board_div.style.height = board.y2 - board.y1+"px";
board_div.style.width = board.x1 - board.x2+"px";
board_div.style.zIndex = '2';
board_div.style.backgroundImage="url(resoursces/images/board.png)";
board_div.style.backgroundSize = "100% 100%";
game_object.appendChild(board_div);
}
This game is a cardgame and i wanted to make it to resize when ever you change the height and the width of the browser without loosing its function. The divs i am creating are part of the functionality.
Everything works fine with it, except one thing: Whenever you resice the browser, the divs are getting remove and new ones are calculated but the background-images is still there. So when you resized your browser like 4 times, you are just seeing the background-images.
What am i doing wrong?
Can anyone help me?
I use the following code to achieve dynamic iframe height:
In the <head>:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
In the <body>:
<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0"
scrolling="no" onload='javascript:resizeIframe(this);' />
</iframe>
This codes works fine with height increasing only. So, when the content inside the iframe increases in height, the iframe updates its height and increases with it.
The problem is with height decreasing or shrinking. When the content inside the iframe decreases, it doesn't decrease and causing big unwanted white space. This only occurs in Chrome, IE & FF works fine.
Here is my Page
I want to know how to make this code works to auto shrink iframe height when it decreases?
Screenshot one:
Screenshot two:
Update 1
I placed the following code in the <head>
<script src="jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
The iframe code in the <body>
<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>
The iframe not showing in the page. It appears for one second and then disappears.
Update 2
I think The problem was the $ character before (function(){, I removed it. I'm sorry I don't have much experience with jquery. I updated the page and removed the onload="resizeFrame()" but the iframe doesn't act dynamically now.
Problem Solved
I was digging in the internet and I found a code solved the whole problem for me. I would like to share it so anyone can use it in order to get dynamic iframe height.
First, put the following code between the <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(myiframeid) {
var ifrm = document.getElementById(myiframeid);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>
<script>(function(run){
for (i=0;i<frames.length; i++) {
var f1 = document.getElementsByTagName('myiframename')[i];
if(!f1 && window.addEventListener && !run){
document.addEventListener('DOMContentLoaded', arguments.callee, false);
return;
}
if(!f1){setTimeout(arguments.callee, 300); return;}
f2 = f1.cloneNode(false);
f1.src = 'about: blank';
f2.frameBorder = '0';
f2.allowTransparency = 'yes';
f2.scrolling = 'no';
f1.parentNode.replaceChild(f2, f1);
}
})();
</script>
Second, the Iframe code in the <body> :
<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>
Third and Last, the CSS:
#myiframeid{
width: 100%;
}
Note: You should have Name and ID for the Iframe.
Compatible with all browsers (Chrome, Firefox, IE).
Have a good day!
I wrote a little library that deals with all these issues and keeps the iframed sized when the content changes or the browser window is resized.
https://github.com/davidjbradshaw/iframe-resizer
I thought about it quite a bit, and think I came up with another solution that may resolve your problem from the parent document. Rather than editing the documents in your iframe. However I can't test it due to cross origin policy. Try this out and let me know how it works.
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
Hope this does it for you.
Edit: This fix would require you to remove the onload="" function.
Edit-2: You seem to have combined the two scripts. You have this:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
}
Replace that entire script with this:
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
And remove the onload="resizeFrame()" from the iframes tag.
I am currently using this method to have a slidehow of promo images, everything working nice, but i would like to add a few things to it, like image transition (fade in) and little dots on the right bottom corner showing which image i am viewing and have the ability to switch to another image
How can i do this?
I am working on the circle buttons now, and the code looks like this so far
<div id="feature-image">
<img id="promo-image" src="images/pentagg.jpg" width="100%" height="800px" name="slide" />
<script type="text/javascript">
var step=1;
var imagesTotal= 2;
var circleDiv;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<imagesTotal)
step++;
else
step=1;
setTimeout("slideit()",5000);
}
slideit();
function createCircles()
{
for (i=0; i<imagesTotal; i++) {
circleDiv = document.createElement('div');
circleDiv.className = 'results';
circleDiv.style.width = '32px';
circleDiv.style.height = '32px';
circleDiv.style.backgroundColor = '#ff4444';
circleDiv.innerHTML = '<span class="msg">Hello world.</span>';
document.getElementsByTagName('feature-image')[0].appendChild(circleDiv);
//document.getElementsByTagName('body')[0].appendChild(circleDiv);
}
}
createCircles();
</script>
</div>
Here's a partial answer
You can use a CSS "Hack" of sorts to position the circles at the bottom of your div by making the wrapping div have position: relative and the inner elements have position: absolute
http://jsfiddle.net/wWunK/
I have built a javascript/css dependency manager similar to http://code.google.com/p/jingo/.
It allows me to do something like this:
Loader.DependsOn(['/scripts/jqueryui.js', '/scripts/jquery.js'])
.Css('/css/jquery.css')
.Execute(function() { //Insert script here});
Loader will dynamically load both the script and the css before executing (if they haven't been loaded already).
Everything is working, except in IE. The style sheets are loaded by appending a link to the head of the document. However, before doing this, the loader looks to see if the requested css file is itself dependent on another module. If it is, it will figure out where in the order of CSS files it should be inserted. In all browsers except IE, if I insert it at the beginning of the list, any other stylesheets after will override it's styles (intended behavior). In IE, however, although it is inserted at the beginning, IE treats it as if it were at the end.
Is there a way to force IE to recompute styles?
UPDATED WITH TEST CASE:
Create two styles sheets, sheet1.css, sheet2.css
sheet1.css
.testdiv
{
width:200px;
height:200px;
background-color:#c7c7c7;
}
sheet2.css
.testdiv
{
width:400px;
height:400px;
}
markup:
<html>
<head>
<link href="style1.css" rel="stylesheet" "type="text/css" />
</head>
<body>
<div class="testdiv">
</div>
</body>
</html>
<script type="text/javascript" language="javascript>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.head || document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
setTimeout(function () {
//suggestion from Simon West
document.body.className = document.body.className;
}, 3000);
}, 3000);
</script>
What should happen:
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
What happens on IE8
Gray box 200px by 200px. After 3 seconds, it grows to 400px by 400px.
What happens on Safari (windows) -
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
This occurs with or without #Simon West's suggestion.
<html>
<head>
<link href='sheet1.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='testdiv'></div>
<script type='text/javascript'>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
var docElem = document.documentElement,
docElemNext = docElem.nextSibling;
document.removeChild(docElem); // this will clear document.styleSheets
document.insertBefore(docElem, docElemNext);
}, 500);
</script>
</body>
</html>
The following JS snippet should force a reflow/repaint of the entire page.
document.body.className = document.body.className;