Display div in another frame - javascript

I have an index file containing a frameset:
<frameset border="1" frameborder="0" framespacing="0" rows="7%,93%">
<frame src="index_top.htm" scrolling="no" marginwidth="0"
marginheight="0" noresize name="top" target="_self">
<frame name="main" src="index_main.html"
scrolling="auto" marginwidth="0" marginheight="0">
<noframes>
The index_top file looks as following (just the relevant parts):
<table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad">
<tr valign="middle" align="center">
<td width="10%" id="homenav">Furniture home</td>
<td width="10%" colspan="6">Currently browsing: <i id="mainlink"><span id="header">Select page</span><div id="linkdiv"><p>Coffee tables</p><p>
Side tables</p><p>Stand tables</p><p>
Dinner tables</p><p>Stools/Pedestals</p></div></i></td>
<td width="4%" id="galleriesnav">Galleries</td>
<td width="4%" id="pressnav">Press</td>
<td width="4%" id="factsnav">Facts</td>
<td width="4%" id="contactnav">Contact</td>
<td width="10%">About artist Carlson</td>
</tr>
</table>
The relevant CSS for index_top:
#linkdiv
{
position:absolute;
visibility:hidden;
left:502px;
width:100px;
height:130px;
background-color:#FFF;
border-style:solid;
border-color:black;
border-width:2px;
font-style:normal;
}
#header
{
display:inline-block;
text-align:center;
width:100px;
}
#link1, #link2, #link3, #link4, #link5, #link6
{
color:#000;
text-decoration:none;
width:100%;
display:block;
outline:0;
}
#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover
{
width:100%;
color:#FFF;
font-weight:bold;
}
#mainlink:hover #linkdiv
{
visibility:visible;
}
Aaaaand the JavaScript:
function changeClass(Index)
{
var ids = new Array("null","homenav","galleriesnav","pressnav","factsnav","contactnav");
var color = new Array("null","#c9a900","#4814a9","#71a28a","#ac27a9","#998f86");
var i=1;
var length = ids.length;
while (i<length)
{
document.getElementById(ids[i]).style.backgroundColor = '#FFF';
document.getElementById(ids[i]).className = "blacklink";
document.getElementById(ids[Index]).style.backgroundColor =color[Index];
document.getElementById(ids[Index]).className = "whitelink";
i++;
}
}
function changeHeader(HeadIndex)
{
var headers = new Array("null","Select page","Coffee tables","Side tables","Stand tables","Dinner tables","Stools","Pedestals");
var colors = new Array("null","#f32837","#0085cf","#00aa86","#c99900","c42695","#617f90");
document.getElementById("header").innerHTML = headers[HeadIndex];
if (HeadIndex > 1)
{
document.getElementById("header").style.fontWeight = "bold";
document.getElementById("header").style.color = "#FFF";
document.getElementById("header").style.backgroundColor = colors[HeadIndex];
document.getElementById("header").style.fontStyle = "normal";
}
}
So, my problem here (sorry for the huge amount of code), is that when you try to hover over the "select page" text, the hidden div is being displayed... but under the main frame. Thus, it's impossible to press the links. How can I display the div OVER the main frame so it's clickable? Is it possible even?

Include your show/hide div in index.html OUTSIDE of the frame. Then use css positioning and z-index to force it to appear above the frames.

Related

Switch Video Position and Play Loop

I have a site with a video on it. It also has three divs.
<div id="top"></div>
<div id="middle> contains table </div>
<div id="bottom></div>
Now, what I would like to do, is have the video in the "top" div, and play. Once that is done, I want it to go to the "bottom" div and play. Once that is done, I want it to go back to the "top" div and play, and so on.
How would I go about doing this? Because I can't seem to get it working.
Currently I have this, which doesn't work:
<script>
document.getElementById("myVideo").addEventListener("play", function(){
var vidTop = document.getElementById('top').appendChild(document.getElementById('myVideo'));
});
document.getElementById("myVideo").addEventListener("ended", function(){
var vidBottom = document.getElementById('bottom').appendChild(document.getElementById('myVideo'));
var vidLoop = document.getElementById("myVideo");
function playVid(){
vidLoop.play();
}
});
</script>
Thanks in advance!
So all I have so far is this, as requested:
<!DOCTYPE html>
<div id="top">
<p>top</p>
</div>
<div id="middle">
<table style="width:1000px;">
<tr>
<td align="center" width="33%"><iframe src="https//slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td align="center" width="33%"><iframe src="http//slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td algin="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
</tr>
<tr>
<td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
</tr>
</table>
</div>
<div id="bottom">
<p>bottom</p>
</div>
<div id="video">
<video id="myVideo" controls autoplay width="300" height="200">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="javascriptSource">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</div>
<div id="script">
<script>
document.getElementById("myVideo").addEventListener("play", function(){
var vidTop = document.getElementById('top').appendChild(document.getElementById('myVideo'));
});
document.getElementById("myVideo").addEventListener("ended", function(){
var vidBottom = document.getElementById('bottom').appendChild(document.getElementById('myVideo'));
var vidLoop = document.getElementById("myVideo");
function playVid(){
vidLoop.play();
}
});
</script>
</div>
I am completely new to JavaScript. I tried using the information from w3schools but I am obviously making some basic mistakes somewhere.
$(document).ready(function() {
var computeTime = 0;
var bottomComputeTime = 0;
var LoopComputeLimit = 50;
var divVideo = $("<div/>")
.attr({
class: "divVideo"
}).html("<video id=\"myVideo\" controls autoplay width=\"300\" height=\"200\"><source src=\"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\" type=\"video/mp4\"></video>");
resetPositionToTop();
$("#myVideo").unbind("ended").bind("ended", function(e) {
console.log("bottomComputeTime:", bottomComputeTime,"computeTime:",computeTime);
if (computeTime === 0) {
resetPositionToBottom();
}
if (bottomComputeTime < LoopComputeLimit) {
bottomComputeTime++;
$("#myVideo").get(0).play();
} else if (bottomComputeTime === LoopComputeLimit) {
bottomComputeTime = 0;
computeTime = 0;
resetPositionToTop();
$("#myVideo").get(0).play();
}
});
function resetPositionToTop() {
divVideo.appendTo(".top");
}
function resetPositionToBottom() {
divVideo.appendTo(".bottom");
}
});
*{
font-family:"arial";
font-size:12px;
}
div{
text-align:center;
margin:5px 0px ;
}
#divVideo{
float:left;
}
.top{
min-height:200px;
border:1px solid #cccccc;
}
.middle{
border:1px solid #cccccc;
}
.middle table {
width:100%;
}
.bottom{
min-height:200px;
border:1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="top">
</div>
<div class="middle">
<table>
<tr>
<td align="center" width="33%">
Middle section
</td>
</tr>
</table>
</div>
<div class="bottom">
</div>
</body>

Iframe click with javascript doesn't work

I have this javascript code:
function start1(dis,www){
var visina = screen.availHeight;
var content = '<div id="showRtbn" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;background: #E81515;cursor: pointer; border-radius:5px; margin-left:-15px;"> <iframe src="https://domain.com/hotel/2" style="border:0px #FFFFFF none;" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div> <div id="rtb" style="width:100%; height:100%; opacity:0; position:fixed; box-sizing: border-box; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="'+www+'" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px; z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';
var newNode = document.createElement("DIV");
newNode.innerHTML = content;
document.body.appendChild(newNode);
var rtb = document.getElementById("rtb"),
timer = null;
document.getElementById("showRtb").addEventListener("click", function() {
if (rtb.style.opacity != 1) {
clearTimeout(timer);
rtb.style.display = "block";
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity + .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
clearInterval(timer);
}
}, 30)
}
});
document.getElementById("hideRtb").addEventListener("click", function() {
if (rtb.style.opacity != 0) {
clearTimeout(timer);
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity - .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
rtb.style.display = "none";
clearInterval(timer);
}
}, 30)
}
});
}
and as you can see, I create a link inside the body with id showRtb and inside that an iframe with content, but when I click it doesn't work, doesn't want to show div with id rtb ...
When I change the content so instead of an iframe I post an image, then it works well, but now with the iframe it doesn't work. Why? What is the problem?
So, I want when I click on showRtb to open div with ID rtb ...
UPDATE:
var content = '<div id="showRtb1" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;cursor: pointer; border-radius:5px; margin-left:-15px;"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="showRtb" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 99999999;cursor: pointer; opacity:0; pointer; border-radius:5px; margin-left:-15px;"></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Change this:
var content = '<div id="showRtbn"> <iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
To be something like:
var content = '<div id="showRtbn"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div>Show RTB<div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Remove the iFrame from within the anchor tags (<a>..</a>) and you can set its containing <div> as hidden. NOTE: I've removed your styles. You should consider moving them into a stylesheet
JS:
document.getElementById("showRtb").addEventListener("click", function() {
rtb.style.display = "block";
console.log("clicked");
});

Change Background javascript function not working

The code (below) seems to compile without any errors, but the "changebackground" function isn't working. it does nothing when you click on it.
I don't think there is a problem with Syntax, but cant be sure. There are no errors, just no response when i click on the cell.
"MyClick" works, bu t"ChangeBackground" doesn't.
Any thoughts??
<html><body>
<head>
<style>
table,th
{
border:1px solid black
font-size: 15px;
font-family: Arial;
font-weight: bold;
empty-cells: show;
}
</style>
<style>
td
{
font-size: 10px;
font-weight: normal;
font-family: Arial;
border:1px solid black;
empty-cells: show;
align = "middle;"
}
</style>
<style>
p
{
font-size: 18px;
font-weight: bold;
font-family: Arial;
}
</style>
<style>
a.1{ text-decoration:none;color:WindowText}
</style>
<style>
#header{ display:block;top:0px;left:0px;width:100%;height: 112px;position:fixed;background-color: #ffffff;border:1px solid #888;}
</style>
<style>
#content{ margin:113px 0px 0px 0px;display:block;border:1px solid #888;}
</style>
<script type="text/javascript"> function myClick(args) { window.clipboardData.setData('text',args.toString()); }</script>
<script type="text/javascript"> function changeBackground() {document.getElementById(cellID).style.borderColor = "2px solid red"; }</script>
</head>
<p> Scanned Samples </p> <table></table></div> <p> Rack: 202771 - _SMEYER_IND_AC_2D-02 </p>
<table>
<thead>
<tr>
<font size = "10"> </font>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
<td> <font size = "2"><b>A</b></td>
<td><a class = "1" href = "#abcd"onclick="javascript:myClick('202772')"><center>A1<br>0<br>(202772)</center></td>
<td id = "Cell9"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202780') "; javascript:changeBackground('Cell9')"> <center> A2<br>0<br>(202780)</center> </td>
<td id = "Cell17"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202788') "; javascript:changeBackground('Cell17')"> <center> A3<br>0<br>(202788)</center> </td>
<td id = "Cell25"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202796') "; javascript:changeBackground('Cell25')"> <center> A4<br>0<br>(202796)</center> </td>
<td id = "Cell33"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202804') "; javascript:changeBackground('Cell33')"> <center> A5<br>0<br>(202804)</center> </td>
<td id = "Cell41"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"> <center> A6<br>0<br>(202812)</center> </td>
<td id = "Cell49"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202820') "; javascript:changeBackground('Cell49')"> <center> A7<br>0<br>(202820)</center> </td>
</tr>
</table>
</body></html>
You're calling changeBackground with parameters when the function definition didn't have it. Here's an example
javascript:changeBackground('Cell9')"
Here is your function definition
function changeBackground() {
document.getElementById(cellID).style.borderColor = "2px solid red";
}
Try changing that to
function changeBackground(cellID) {
document.getElementById(cellID).style.borderColor = "2px solid red";
}
Also, this is pretty bad form too. You should prefer stylesheets over style tags, and you have a bunch of them. Same thing with the script tags. Please place them in an external JavaScript file.
Also, you are using inline javascript too often like this example
onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"
This makes the HTML really difficult to read. You should instead use event listeners and place them in your JavaScript file.
Also, the center and font tags are not supported in HTML5.

Drag and copy with a swap function

I have created a user interface that has a working drag and copy in javascript. My problem is the div getting copied has a hidden div that i need to swap once they reach the dropzone. Upon dragging the visible div gets a new id but the hidden one doesn't and when i swap them it swaps to the hidden div in it's original position. Here is my javascript code:
These work the drag and copy functions.
function allowDrop(ev) {
/* The default handling is to not allow dropping elements. */
/* Here we allow it by preventing the default behaviour. */
ev.preventDefault();
}
function drag(ev) {
/* Here is specified what should be dragged. */
/* This data will be dropped at the place where the mouse button is released */
/* Here, we want to drag the element itself, so we set it's ID. */
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");
/* If you use DOM manipulation functions, their default behaviour it not to
copy but to alter and move elements. By appending a ".cloneNode(true)",
you will not move the original element, but create a copy. */
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId"; /* We cannot use the same ID */
ev.target.appendChild(nodeCopy);
}
</script>
This function works the divs swap
<script type="text/javascript">
function SwapDivsWithClick(div1,div2)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if( d2.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
}
}
</script>
Is there a way to drag the hidden div along with the visible one? Can the hidden div also be assigned a new number so it can be swapped?
Thank you
I managed to solve this little riddle. The divs swap when dragged into the drop zone there's no need to have them swap on a mouse click. Anyway here are the javascript functions that i used, i had to modify the drag and copy from the previous one I posted.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
</script>
{{--Works the swap functions--}}
<script type="text/javascript">
function SwapDivsWithClick(div1,div2)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if( d2.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
}
}
</script>
Here is 1 set of components incase it helps someone else:
<div id="swapper-two" style="display:none; padding:0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600px" draggable="true" ondragstart="drag(event)" id="drag1">
<tr>
<td align="left" bgcolor="40374B" style="padding: 0px 0px 0px 60px;">
<img src="" valign="top" alt="" draggable="false" color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif"
<td style="color:#ffffff; padding:0px 60px 5px 0px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px;" bgcolor="40374B" align="right" valign="bottom">
<p>My Account</p>
</td>
</tr>
</table>
</div>
<div class="img" draggable="true" ondragstart="drag(event)" id="drag9">
<div id="swapper-one" style="display:block; padding:0px;" >
<table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="" draggable="true" ondragstart="drag(event)" id="drag1">
<tr>
<td align="center">
<img src="" draggable="false" alt="" width="610" height="270" id="img-one" />
</td>
</tr>
</table>
</div>
</div>

How can I assign an anchor tag to expand content

I have a list of things with links to click for more information which use anchor tags to move down the page. Since there is quite a bit of additional information I have it hidden in expandable/collapsable sections.
So far all I've managed to come up with is an expand collapse on the section itself. I know basically nothing about Javascript so what I have include is some stuff I pieced together from some other sites and research.
I would like for the 'click more' anchor tag link to expand the section automatically when clicked, but something that also collapses it similar to what I have now.
Here is the js I managed to pull together
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.all) {
document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";
}
else {
document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";
}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
#tbl1 {display:none;}
#lnk1 {
border:none;
background:none;
width:85px;
}
</style>
And here is an example of the body
<body style="background-color: #FFFFFF; margin: 20;">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent">
<input type="checkbox">
<strong>Item one</strong><br />
<em>For more information about Item one click here!</em>
</p>
<br />
<table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#333333" colspan="3"></td>
</tr>
<tr bgcolor="#EEEEEE" height="15">
<td>
<strong><a id="Item1">Item one</a></strong>
</td>
<td bgcolor="#EEEEEE" align="right">
<input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');">
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</body>
Thanks for your help!
jquery may be your best route, and in particular the slideToggle or show and hide functions.
In addition, have a peek at jQuery ui accordion
A jquery accordion may be your best route
to hide elements:
document.getElementById(idOfElement).style.display="none"
to show them:
document.getElementById(idOfElement).style.display="block"
lets make a function
function toggleElementDisplay(elementID){
element = document.getElementById(elementID);
if(element.getPropertyValue("display") == "block"){
element.style.display="none";
} else {
element.style.display="block";
}
}
To use it do it like this
<body>
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div>
<div id="stuff">Hello</div>
<script>
function toggleElementDisplay(elementID) {
var element = document.getElementById(elementID),
style = window.getComputedStyle(element),
display = style.getPropertyValue("display");
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
</body>
Here is a demo to help

Categories

Resources