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>
Related
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
How can I make a ''spoiler'' but instead of a button there's a image? Here's the code I used.
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
It isn't necessary to use this code, I only want it to be an image instead of a button.
It's working fine with me: http://jsfiddle.net/48PBY/
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://pbs.twimg.com/profile_images/858514627/eppaa_bigger.jpg" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<a href="javascript:;" onclick="showSpoiler(this);" >
<img src="image/path"></a>
try this
I'm trying to get the thumbnail images on my page to "animate" into position when clicked. So far it isn't working but I don't know why or how. Can someone provide insight into this? I'm trying to do it with the "clicky" function. Basically, I need the small thumbnail to "grow" into the right size in the right location on the page (essentially the middle-top of the page.
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Farm Animals</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js">
</script>
<script>
$('#cluster').hover(function(){
$(this).closest('cluster').css('display', 'block');
$(this).closest('cluster').css({ opacity: 1 });
},
function(){
$(this).closest('cluster').css('display', 'none');
$(this).closest('cluster').css({ opacity: 0.5 });
});
function hilite(a)
{
a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);
}
</script>
<script type="text/javascript">
function imgFade()
{
$('#cluster, #launch, #gas').fadeTo(0, .3);
}
$(document).ready(function () {
$("#cluster, #launch, #gas")
.mouseover(function () {
$(this).fadeTo("slow", 1);
})
.mouseout(function () {
$(this).fadeTo("slow", .3);
});
});
function clicky(something)
{
var t = $(something);
t.animate({right:"150px",top:"150px"},2000);
}
function showImage(clickImg)
{
var dest = document.getElementById("dest");
dest.src=clickImg.src;
dest.alt=clickImg.alt;
var descr = document.getElementById("descr")
if (clickImg.alt == "cluster")
{
descr.innerHTML = holsteinDescr;
}
if (clickImg.alt == "gas")
{
descr.innerHTML = herefordDescr;
}
if (clickImg.alt == "launch")
descr.innerHTML = pigDescr;
}
function hilite()
{
$("#cluster").fadeIn("slow");
}
function lolite(x)
{
x.style.borderWidth = "0px";
}
</script>
<style type="text/css">
.clickable { cursor:pointer; height:50px; width:50px}
.thumbTD { width:60px; height:60px }
caption { font-size:18pt; }
table { border:0px }
#dest { width:400px; height:400px }
#descr { width:420px }
#leftColumn { vertical-align:top }
</style>
</head>
<body onload="imgFade()">
<table>
<caption>Select image on left for more information.</caption>
<tr>
<td id="leftColumn">
<table id ="ta">
<tr>
<td class="thumbTD">
<img id="cluster" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this);clicky=(this)" src="cluster.png" alt="holstein"/>
</td>
</tr>
<tr>
<td class="thumbTD">
<img id="gas" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);"
onclick="showImage(this)" src="gas.png" alt="hereford" />
</td>
</tr>
<tr>
<td class="thumbTD">
<img id="launch" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this)" src="launch.jpg" alt="pig" />
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><img id="dest" src="blank.jpg" alt="blank" /></td>
</tr>
<tr>
<td id="descr" > </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
First, you have two functions named hilite in the global space. Change one of their names.
Second, in one of them, you have the code:
a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);
You need to close the function. Also, its mouseover, not mouseOver. In addition, you are often calling it with a non jquery object. To fix these issues, use:
$(a).mouseover(function(){$("#cluster").fadeTo("slow",0.5);});
You may have additional issues. It might be easier if you provided full links to the images sot that I can test your code.
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.
to save space, I would like to consolidate the username and logut buttons at the top of web template into one link. The username would be visible and when you hover over it as in stack overflow or click as in gmail or fb, you have option to logout or do other account related things. Ideally, would like to do this in css or javascript without jquery overhead.
Can anyone recommend simple javascript or other technique as I am very inexperienced in javascript. Don't need complicated full blown drop down menu. It should be something like below, but below is unpredictable...shows menu when page loads etc. Thx.
<html>
<head>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="showMenu()" >username</td>
</tr>
</table>
<div id="box1" onmouseout="hideMenu()">
Logout<br>
</div>
</body>
</html>
UPDATE- this should fix the "jumping" problem:
<html>
<head>
<style type="text/css">
.username {
width: 100px;
border: 1px solid #ff0000;
padding: 3px;
text-align: center;
position: relative;
display: inline-block;
}
#box1 {
display: none;
text-align: center;
position: absolute;
background-color: #ccc;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=3 align="left">
<img src=":">
</td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7
<div class="username" onmouseover="showMenu();" onmouseout="hideMenu();">Username
<span id="box1">
Logout
</span>
</div>
</td>
</tr>
<tr>
<td colspan=9>
<hr color="red">
</td>
</tr>
</table>
</body>
</html>
The problem is that absolute positioning doesn't work the same inside of a span than as it does a div. So I had to change the "username" span to a div and use absolute position for the "box1" span. You could even change the "box1" span to a div as well so it occupies the whole width possible of the "username" div. Let me know how this one goes!
Here is the version where it jumps up. If you put position: absolute; in the style tag the menu extends one more cell to the right past the other columns...
.username {
}
#box1 {
display: none;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table><tr>
<td colspan=3 align="left"><img src=":"></td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5
Menu6 Menu7 <span class="username" onmouseover="showMenu();"
onmouseout="hideMenu();">Username<span id="box1">
Logout
</span>
</span></b></td></tr>
<tr><td colspan=9><hr color = "red"></td></tr>
</table>
</body>
</html>