Communicating between iframes - javascript

I'm trying to do something with iframes and am struggling a little bit at the moment. Basically, I have a script that generates a grid of squares (image below) and I want to make it so that when I click on a square, I display something in a different iframe.
So for instance, say I had frame 1 (which contains the grid) and frame 2 (this is the "display" frame). If I click the top left square, then I want to display "index(0,0)" in the display frame. If I click the (1, 1) square, then I want to display "index(1,1)" and so on.
I already know how to do this within the same frame (ie I can display "index(0,0)" within frame 1 if I click on a square in frame 1), but I am just confused on how to do this in a separate frame. I've tried quite a few things but nothing seems to be working.
I will include all of my code below as well as a picture for your reference. Any help is greatly appreciated!
Javascript:
// I know this isnt good coding practice, but I was getting desperate
// trying things xD
var currentDisplay = "display";
function changeSquare() {
var image = document.getElementById(this.id);
// If image is currently green square, change to red, and vice versa
if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
} else {
image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
}
currentDisplay = this.id;
};
function printInfo() {
document.write(currentDisplay);
}
// Creates a grid of dimensions width by height
function makeGrid(height, width) {
// Loop over height and width to create black square objects with
// buttons in middle
for (i = 0; i < height; i++) {
for (j = 0; j < width; j++) {
// Outer div is black square
var div = document.createElement("div");
div.className = "square";
div.id = ("div").concat(i,",", j);
var innerDiv0 = document.createElement("div");
innerDiv0.className = "content";
div.id = ("innerDiv0").concat(i,",", j);
div.appendChild(innerDiv0);
// InnerDiv1 & 2 are table structures (necessary for alignment)
var innerDiv1 = document.createElement("div");
innerDiv1.className = "table";
div.id = ("innerDiv1").concat(i,",", j);
innerDiv0.appendChild(innerDiv1);
var innerDiv2 = document.createElement("div");
innerDiv2.className = "table-cell";
div.id = ("innerDiv2").concat(i,",", j);
innerDiv1.appendChild(innerDiv2);
// Add green square image
var image = document.createElement("img");
image.id = ("image").concat(i,",", j);
image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
image.className = "rs";
innerDiv2.appendChild(image);
document.body.appendChild(div);
// Add onclick feature
image.onclick = changeSquare;
}
}
};
GridTest.html
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
</head>
<body>
<script src="GridTest.js">
</script>
<script>
makeGrid(20, 20);
</script>
</body>
displayPanel.html
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
</head>
<body>
<script src="GridTest.js">
</script>
<script>
printInfo();
</script>
</body>
nestTest.html (here is where I create the iframes)
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
<script src = "GridTest.js"> </script>
</head>
<iframe id="frame1" scrolling="no" src="GridTest.html">
</iframe>
<iframe id="frame2" scrolling="no" src="displayPanel.html"></iframe>
CSS (probably unnecessary but I'll include it anyways)
.square {
float:left;
position: relative;
width: 5%;
padding-bottom: 2.8125%;
background-color:#1E1E1E;
overflow:hidden;
outline: 1px solid #FFFFFF;
}
.whiteSquare {
float:left;
position: relative;
width: 5%;
padding-bottom: 2.8125%;
background-color:#FFFFFF;
overflow:hidden;
outline: 1px solid #FFFFFF;
}
/*
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
*/
.content {
position:absolute;
height:40%;
width:47%;
padding: 5% 26.5%;
text-align:center;
}
.content .rs{
width:auto;
height:auto;
max-height:90%;
max-width:100%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
body {
font-size:20px;
font-family: 'Lato',verdana, sans-serif;
color: #000000;
background:#ECECEC;
}
.numbers{
font-weight:900;
font-size:100px;
}
Picture of current result.

In your changeSquare method, try something like this:
var frame2 = $('#frame2', top.document) //Give you top level frame jQuery Object.
for more backwards compatibility, you can use something like:
window.parent.$('#frame2')
Or something like this for no jQuery:
window.parent.getElementById('#frame2')[attributeName]
Once you have the root iFrame object, you can proceed with regular jQuery/DOM manipulation.
EDIT: here is a fully working and tested solution (Safari/Mac OS). Only the changes are highlighted below:
displayPanel.html:
<head>
<link rel="stylesheet" type="text/css" href="GridTest.css">
</head>
<body>
<script src="GridTest.js">
</script>
<script>
printInfo();
</script>
<div id="label1"></div> <!--Added a div for displaying text -->
</body>
GridTest.js:
function changeSquare() {
var image = document.getElementById(this.id);
//First get a reference to the second frame document
var secondFrameDocument = window.top.document.getElementById('frame2').contentWindow.document;
//Now set the value of the Div
secondFrameDocument.getElementById('label1').textContent=this.id;
// If image is currently green square, change to red, and vice versa
if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
} else {
image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
}
currentDisplay = this.id;
};
Depending upon your exact scenario, you may run into security issues, particularly with Chrome. A better solution would be to perhaps use two Divs instead of iFrames.
Here's a screenshot:

Related

dynamically added elements with absolute positioning do not flow with parent

I am playing around with JavaScript. I am having an issue with page resizing and the position of dynamically created elements. The Parent div is positioned relative and the appended child elements are absolute in relation to the parent they are added to. When I shrink the browser window the parent scales ok but the children's positions do not get updated. How would you handle a situation like this in the real world?
Thanks
PS: keep in mind I am trying to learn this and a lot I'm sure is wrong or unnecessary. I appreciate the correction as well.
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="1.css"> -->
<script language="javascript"></script>
<style>
#div1{
postion:relative;
margin:auto auto;
height:400px;
width:400px;
background-color: black;
}
</style>
</head>
<body>
<!-- Goal; -->
<!-- I want a js class that will create itself and manage its own properties
So when I click on the div I fire up a new object button. -->
<div>
<label id = "lblID"></label>
<div id="div1"></div>
</div>
<script>
document.getElementById("div1").addEventListener("click", createchild, false);
function createchild(e)
{
obj1 = new child(this,e);
}
function child(el,e)
{
this.parent = el;
this.parentID = el.id;
// Create the object
this.child = document.createElement('div');
this.parent.appendChild(this.child);
// Set some attributes
var c = this.parent.childElementCount + 1;
this.child.id = "child"+c;
// Set some style
var l = e.clientX - 20;
var t = e.clientY - 20;
var stylestring = "position:absolute;top:"+t+"px;left:"+l+"px;height:40px;width:40px;background-color:red;";
this.child.style.cssText = stylestring;
// Add some eventhandling
this.child.addEventListener("click",getchildcoords,false);
}
function getchildcoords(e)
{
alert(this.id);
e.stopPropagation();
}
</script>
</body>
</html>
There is a missing 'i' in 'position' keyword of #div1 css
Append new divs to the container itself to link their positions
Use offsetX, offsetY for correct placement
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="1.css"> -->
<script language="javascript"></script>
<style>
#div1{
position:relative;
margin:auto auto;
height:400px;
width:400px;
background-color: black;
}
</style>
</head>
<body>
<!-- Goal; -->
<!-- I want a js class that will create itself and manage its own properties
So when I click on the div I fire up a new object button. -->
<div>
<label id = "lblID"></label>
<div id="div1"></div>
</div>
<script>
document.getElementById("div1").addEventListener("click", createchild, false);
function createchild(e)
{
obj1 = new child(this,e);
}
function child(el,e)
{
this.parent = el;
this.parentID = el.id;
// Create the object
this.child = document.createElement('div');
// Set some attributes
var c = this.parent.childElementCount + 1;
this.child.id = "child"+c;
// Set some style
var l = e.offsetX - 20;
var t = e.offsetY - 20;
var stylestring = "position:absolute;top:"+t+"px;left:"+l+"px;height:40px;width:40px;background-color:red;";
this.child.style.cssText = stylestring;
el.appendChild(this.child);
// Add some eventhandling
this.child.addEventListener("click",getchildcoords,false);
}
function getchildcoords(e)
{
alert(this.id);
e.stopPropagation();
}
</script>
</body>
</html>

Random background gifs doesn't work

I have code that when the body loads, it chooses a random gif from a folder and uses that as the background. When a new page loads, or the same page, it chooses another random gif as the background. I've looked online, and even though the code is relatively the same, it doesn't load the new gif as the background. Here's the HTML code.
<html lang="en">
<head>
<!-- Random Background Image -->
<script>
function newBackground()
{
// Set up the image files to be used.
var theBackgrounds = new Array() // do not change this
// To add more image files, continue with the pattern below, adding to the array.
theBackgrounds[0] = 'images/EXTRA/Backgrounds/equalizer.gif'
theBackgrounds[1] = 'images/EXTRA/Backgrounds/equalizer2.gif'
theBackgrounds[2] = 'images/EXTRA/Backgrounds/recordSpinning.gif'
var p = theBackgrounds.length;
var whichBackground = Math.round(Math.random()*(p-1));
document.body.style.background = theBackgrounds[whichBackground];
}
</script>
</head>
<body onLoad="newBackground();">
*some code*
</body>
</html>
And here's the body's CSS code that's in styles.css.
body{
background-size:cover;
background-repeat: repeat-y;
background-attachment: fixed;
background-color:#000000;
color:#FFF;
font-size:13px;
font-family: Helvetica, Arial, sans-serif;
text-align:left;
}
Why is the code not working?
because that is not how you set a background image with CSS. You are missing the url() portion.
It should be
document.body.style.backgroundImage = "url(" + theBackgrounds[whichBackground] + ")";

How to start page at center of center or at specific height after load

I want to start page at the center horizontally and vertically when it had loaded (not at top), anyone any suggestions? Or at a specific height if that is possible. Thank you!
You can Do it like this:
$(document).ready(function() {
$(window).scrollTop($(window).height()/2);
$(window).scrollLeft($(window).width()/2);
});
You can change the position to what suit your needs.
Also you can use $(window).scrollTo($(window).width()/2, $(window).height()/2);
not sure what you are asking but have you tried relative coordinates ?
like >>
/*i put this all css selector for canceling all margins, paddings so i can remove default browser prefereces for the same*/
/*border box is just that any size od div is not changed after addinational padding*/
*{margin:0;padding:0;box-sizing:border-box;}
body{
position:absolute;
width:100%;height:100%;
background-color:red;
padding-top:10%;
padding-left:10%;
padding-right:10%;
padding-bottom:10%;
}
centerd{
/*relative dimensions wont work if not display:block;*/
display:block;
width:100%;height:100%;
background-color:blue;
}
<!doctype html>
<html>
<meta charset = "UTF-8" />
<title>Center Content</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<centerd>
<!--html5 element, you can create your own -->
</centerd>
</body>
</html>
for more information visit : it is cool way to know enough about html, css, javascript etc.
Although not sure if this is what you are looking for:
To center a container (a DIV element say) horizontally, give it a fixed width and auto left and right margins in CSS:
div#container
{ width: 1024px; /* a fixed width container */
border: thin solid green; /* debug, to see */
margin-left: auto;
margin-right: auto;
}
then an anonymous JavaScript function to center a container vertically after load using its margin-top property:
function ()
{ var e = document.getElementById("container");
var eHeight = e.offsetHeight;
var clientHeight = document.documentElement.clientHeight;
var marginTop = 0;
if(clientHeight > eHeight)
{ marginTop = (clientHeight - eHeight) >> 1; // integer divide by 2
}
e.style.marginTop = marginTop + "px";
}
added to the page using jQuery's ready() function for the window, and HTML
<div id="container">
hello this is page content
</div>
centers a container element in the viewport where possible
Old question but I just use:
function Scrolldown() {
window.scroll(250, 400);
}
window.onload = Scrolldown;

jquery animation and float not floating

I have two images I want to be stuck together for lack of a better term. As the image on the left animates off the screen, the right image just sits there not moving. I have tried to use position: relative; in the CSS for the right-hand image and even tried to animate it by adding to the javascript (see comments in the js file) but it didn't change anything.
The HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="slidetest01.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="./javascripts/picslider01a.js"></script>
</HEAD>
<BODY onload="picrotate()">
<div id="slideshow"><img id="picshown" src="./pix/mtn01.jpg">
<img id="pichidden" src="./pix/mtn02.jpg"></div>
</BODY>
</HTML>
The CSS
#slideshow {
position: relative;
left:0px;
top:0px;
width: 1200px;
float: left;
}
#picshown {
position: relative;
float: left;
}
#pichidden {
float: left;
}
The javascript
function picrotate () {
var picts = new Array();
picts[0] = "./pix/mtn01.jpg";
picts[1] = "./pix/mtn02.jpg";
picts[2] = "./pix/mtn03.jpg";
picts[3] = "./pix/mtn04.jpg";
picts[4] = "./pix/mtn05.jpg";
var count = 2;
function rotator() {
$("#picshown").animate({left: "-600px"});
//Tried adding $("#pichidden").animate({left: "0px"}); here but did not work
//Need to delay since the rest triggers immediately after transition starts.
setTimeout(function () { //1 second should be enough time for the slide.
count = (count+1)%5;
var discard = document.getElementById("picshown"); //removes old picture
discard.parentNode.removeChild(discard);
document.getElementById("pichidden").setAttribute("id", "picshown"); //makes current picture the active one
ith = document.createElement("img"); //create a new image
ith.id = "pichidden";
ith.src = picts[count];
$("#slideshow").append(ith);//Append it to the slideshow
}, 1000);
} //end rotator
setInterval(rotator, 2000);
} // end picrotate

How to change 'div' background and text colour using jquery to flash a message And revert back to original colors?

I have a div with id and class names as tab. The css are defined for the div. The original background-color is blue and color is white. I need to flash some text on this div , where the message should flash 3 times with black background and white text and vice versa.
I tried toggleClass. Using this the effect is generated but the previous class css is not restored.
I have tried fade also $("#tab").fadeOut(200).fadeIn(200); , it helps the blinking part but doesnt give the desired results.
Please suggest... Thanks in advance.
This is what i have tried so far:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<style type="text/css">
.backgroundRed
{
background-color: #cccccc;
color: red;
}
.blink
{
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var flg = 0;
$.fn.blink = function()
{
var i = 0;
for(var i = 0; i <= 3; i++)
{
// attempt#1 //
//blinking works well with this ////
//$("#test").fadeOut(200).fadeIn(200);
// attempt#2 //
//changes looks good but doesnt revert back to original class ////
//$(".backgroundRed").toggleClass("blink");
//$("#test").removeClass("blink");
//$("#test").addClass("backgroundRed");
// attempt #3 //
// doesnt work correctly
if(i >= 3)
{
$("#test").fadeOut(200).fadeIn(200);
$("#test").removeClass("blink");
$("#test").addClass("backgroundRed");
}
else
{
$("#test").fadeOut(200).fadeIn(200);
$("#test").removeClass("backgroundRed");
$("#test").addClass("blink");
}
}
}
$("#tab").click(function(){
$.fn.blink();
});
});
</script>
<html>
<body>
<div id="test" class="backgroundRed" style="height: 200px; width: 400px; ">
<h1>test value</h1>
</div>
<button id="tab">click</button>
</html>
How about something like this:
http://jsfiddle.net/sydzL8Lc/21/
Using https://github.com/madbook/jquery.wait and since you want blink 3 times
$("#test").addClass("blink").wait(400).removeClass("blink").wait(400).addClass("blink").wait(400).removeClass("blink");
Use this blink()
function blink(){
var i = 0;
var obj = setInterval(function(){
if(i == 5)
{
$("#divtoBlink").removeClass("backgroundRed");
clearInterval(obj);
}else{
$("#divtoBlink").toggleClass("backgroundRed");
}
i++;
},100)
}
DEMO

Categories

Resources