Develop Reference

Javascript - Show/change image on hover

I have a table on one side and an area for an image on the right.
When a row within the table is hovered over, I want a different image to display.
There will end up being 20 rows of data, with 20 respective images.
I have javascript:
document.getElementById("showlot1").mouseover = function() {
document.getElementById("lot1").style.visibility = "visible"; }
document.getElementById("showlot2").mouseover = function() {
document.getElementById("lot2").style.visibility = "visible"; }
CSS:
#lot1, #lot2 { visibility: hidden; }
HTML Table:
<table style="width: 100%;" cellpadding="2">
<tbody>
<tr class="hover">
<td style="text-align: center;">
<a id="showlot1">1</a>
</td>
<td style="text-align: center;">
<a id="showlot1">3.4ha (8.4 acres)</a>
</td>
<td style="text-align: center;">
<a id="showlot1"></a>$99,000</a>
</td>
</tr>
<tr class="hover">
<td style="text-align: center;">
<a id="showlot2">2</a>
</td>
<td style="text-align: center;">
<a id="showlot2">3.5ha (8.6 acres)</a>
</td>
<td style="text-align: center;">
<a id="showlot2">$99,000</a>
</td>
</tr>
</tbody>
</table>
HTML Image Placer:
<img id="lot1" src="/wp-content/uploads/sites/291/2015/02/QA-CONTOUR-LOT1.jpg" />
<img id="lot2" src="/wp-content/uploads/sites/291/2015/02/QA-CONTOUR-LOT2.jpg" />

One simple way would be to do it with css.
HTML
<img id="myimg" src="first_image"/>
CSS
#myimg:hover {
content: url('second_image');
}
See running JSFiddle example here

I found using classes to denote functional elements easier; a bunch of elements with ids (which is illegal by the way, as id's should be unique in the document) I changed to putting a class .showImage on your tr's and targeting them with event listeners.
I used CSS to set images to display:none; by default. This is more ideal than visibility:hidden because they disappear completely and won't take up space.
Instead of using anonymous functions, I split the desired result into two mouseover and mouseout handlers that toggle the display property. You'll see they also take a parameter index, which I used to determine which #lot to target:
function showImageOnMouseover(i) {<change display property to block>}
and
function hideImageOnMouseout(i) {<change display property to none>}
Where i is a variable used to find the right image using your convention #lot<i>
// get elements by class name
var elementSelection = document.getElementsByClassName('showImage');
// attach event listener to each element
for( var i=0; i<elementSelection.length; i++ ) {
elementSelection[i].addEventListener( 'mouseover', showImageOnMouseover(i+1) );
// pass i+1 to index since i starts out as 0. You could just as easily change the for loop to var i=1, or alter your #lot naming convention to start at 0.
elementSelection[i].addEventListener( 'mouseout', hideImageOnMouseout(i+1) );
}
// handle mouseover
function showImageOnMouseover( index ) {
return function(e) {
var imgId = 'lot' + index.toString();
console.log(imgId);
document.getElementById( imgId ).style = ( 'display: block' );
}
}
// handle mouseout
function hideImageOnMouseout( index ) {
return function(e) {
var imgId = 'lot' + index.toString();
document.getElementById( imgId ).style = ( 'display: none' );
}
}
#lot1 {
display: none;
}
#lot2 {
display: none;
}
<table cellpadding="2" style="width: 100%;">
<tbody>
<tr class="hover showImage">
<td style="text-align: center;">
<a>1</a>
</td>
<td style="text-align: center;">
<a>3.4ha (8.4 acres)</a>
</td>
<td style="text-align: center;">
<a></a>$99,000
</td>
</tr>
<tr class="hover showImage">
<td style="text-align: center;">
<a>2</a>
</td>
<td style="text-align: center;">
<a>3.5ha (8.6 acres)</a>
</td>
<td style="text-align: center;">
<a>$99,000</a>
</td>
</tr>
</tbody>
</table>
<img id="lot1" src="http://www.kaybojesen.com/wp-content/uploads/2013/07/505-Dessertske-ni-tre.png" />
<img id="lot2" src="https://www.house.com.au/images/hires/HAG-CU249610.jpg" />

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>

Div containing a row of div are wrapping instead of overflowing

I am using JavaScript to insert elements inside a container div:
<tr>
<td align="left">
</td>
<td style="background-color:#5D7B9D">
<div id="headerMasterDiv">
</div>
</td>
<td style="width: 18px; height: 18px;">
</td>
</tr>
for (var i=0; i < len; i++ )
{
id = "headerColumn_" + i.toString();
width = columnWidths[i];
text = columnTexts[i];
html = " <div id=\""+id+"\" class=\"test\">"+text+"</div> ";
header.innerHTML += html;
}
However I would like the inner to overflow, so I can activate an horizontal scrollbar. But instead they are wrapping:
Tx.

Just add the overflow:auto to your div.
In the test class :
.test
{
overflow:auto;
}
Or inline style, i suggest using quot and double quot it's more readable :
' <div id="'+id+'" class="test" style="overflow:auto">'+text+'</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

I'm trying to get clicked images to animate into their position with JQuery

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.