Javascript - Show/change image on hover - javascript

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" />

Related

Comparing table tr values before and after and get two objects or arrays with difference

I have a table structure like this,
<table id="dltable" class="dTable">
<tbody>
<tr class="dRow " data-userid="s-1-5-21-34154-1668">
<td class="dCell" style="width:40px;">
<img src="1.png" class="avatar" />
</td>
<td class="dCell" style="vertical-align: top; padding-top:8px;"><span class="personItem">person 1</span>
</td>
<td class="dCell" style="width:30px;">
<div class="dir-list_tick on hide" onclick="toggleSelection(this);" style="display: block;"></div>
</td>
</tr>
<tr class="dRow " data-userid="s-1-5-21-3415-3433">
<td class="dCell" style="width:40px;">
<img src="2.png" class="avatar" />
</td>
<td class="dCell" style="vertical-align: top; padding-top:8px;"><span class="personItem">person 2</span>
</td>
<td class="dCell" style="width:30px;">
<div class="dir-list_tick on hide" onclick="toggleSelection(this);" style="display: block;"></div>
</td>
</tr>
</tbody>
</table>
Now on edit click button, user may toggleSelection,
function toggleSelection(e) {
var obj = $(e);
if (obj.hasClass('on')) {
obj.removeClass("on").addClass("off");
} else {
obj.addClass("on").removeClass("off");
}
}
and CSS
.dir-list_tick.on {
background-image: url(/_layouts/15/images/arrow.png);
background-position: 50%;
width:22px;
height:22px;
}
.dir-list_tick.off {
background-image: url(/_layouts/15/images/arrow_inactive.png);
background-position: 50%;
width:22px;
height:22px;
}
Now what I want is that, when user clicks on Edit button, I capture all users with there ids and statuses (atleast for now) e.g.
var user = { id: userid, status: 1 if image is arrow or class is on and -1 for not}
And then when user clicks on another button Save I want to get all user whoes status (may have more properties in future) has changed from on to off or off to on.
Only way i can think of is to iterate through table again and again to compare them, any easier way of doing it please ?
Edit
Based on comments I think i am on right track but i am stuck here,
var beforeEditUsers = [];
$('#dltable > tbody > tr').each(function () {
beforeEditUsers.push({
id : $(this).attr('data-userid'),
status : // how can i cast div with class dir-list_tick on class as one here and otherwise 0 ?
});
});
Found it
var beforeEditUsers = [];
$('#dltable > tbody > tr').each(function () {
beforeEditUsers.push({
id : $(this).attr('data-userid'),
status : $(this).children('.dir-list_tick').hasClass('on')
});
});

Targeting a div with the right selector

My HTML:
<tr class="main">
<td class="dropdown">
<a href="#">
<div class="dropdown-image"></div>
</a>
</td>
<td class="from">from</td>
<td class="subject">subject</td>
<td class="received">received</td>
<td class="status">Quarantined</td>
<td class="action">
<a href="#">
<div class="dropdown-menu"></div>
</a>
</td>
</tr>
I am trying to target the .dropdown-menu to change it's background image once the .dropdown-image has been clicked.
My JavaScript:
$(function) {
$('.dropdown-image').click(function() {
var clicks = $(this).data('clicks');
var td = $(this).parent().parent();
var tr = $(this).parent().parent().parent();
if (clicks) {
td.closest('.action').child().child().css("background-image", "url(images/new-arrow.png)");
} else {
td.closest('.action').child().child().css("background-image", "url(images/new-arrow-blue.png)");
}
$(this).data("clicks", !clicks);
});
});
However, this doesn't work. How can I target the .dropdown-menu correctly?
You seem to be trying to use the .closest() method to find the sibling '.action' element, but that's not what .closest() does. As explained in the doco, it looks for a matching ancestor element. So you can get the tr element that the clicked div belongs to like this:
var tr = $(this).closest("tr");
And then you can find the dropdown-menu div that belongs in that tr using .find() method - which is like the opposite of .closest() in that it looks for a descendant:
tr.find(".dropdown-menu")
In other words, to find the related .dropdown-menu, navigate up to the tr with .closest() and then back down to the related div with .find().
$(function() {
$('.dropdown-image').click(function() {
var $this = $(this),
clicks = $this.data('clicks'),
$relatedDiv = $this.closest("tr").find(".dropdown-menu");
if (clicks) {
$relatedDiv.css("background-image", "url(images/new-arrow.png)");
} else {
$relatedDiv.css("background-image", "url(images/new-arrow-blue.png)");
}
$this.data("clicks", !clicks);
});
});
Note that I only call $(this) once, putting the result in a variable. This is more efficient.
Also, as has been pointed out in comments, you have two syntax errors:
the first line should be $(function() { (you have incorrect parentheses)
the third-last line is missing a " before the comma.
JS
$(function () {
$('.dropdown-image').click(function () {
var $relatedDiv = $(this).parents('tr.main').find('.dropdown-menu');
$relatedDiv.toggleClass('bg-image-new-arrow-blue');
$relatedDiv.toggleClass('bg-image-new-arrow');
});
});
css
.bg-image-new-arrow{
color: red;
font-size: 12px;
background: url(images/new-arrow.png) no-repeat;
}
.bg-image-new-arrow-blue{
color: blue;
font-size: 23px;
background: url(images/new-arrow-blue.png) no-repeat;
}
html
<table>
<tr class="main">
<td class="dropdown">
<a href="#">
<div class="dropdown-image">asasdasdd</div>
</a>
</td>
<td class="from">from</td>
<td class="subject">subject</td>
<td class="received">received</td>
<td class="status">Quarantined</td>
<td class="action">
<a href="#">
<div class="dropdown-menu bg-image-new-arrow-blue">DropDown menu</div>
</a>
</td>
</tr>
</table>
The related is code-pen is in this link

OnMouseOver SubMenu not showing in Firefox

I have a submenu that appears when you put the mouse over the menu, is properly working in Chrome and in IE but is not working on Firefox.
Here's where the function to show the sub menu is called.
<div id="nav1">
<table>
<tr>
<td style="width: 400px;" class="navItem"
onmouseover="showSubMenu(this, 'subMenu1');">
</td>
</tr>
</table>
</div>
<div id="subMenu1" class="nav1SubMenu" onmouseover="cancelBubble();">
{code to show the list of options }
</div>
and here's the function that shows and hide the sub menu
function showSubMenu(pCell, pSubMenu){
var subMenu = document.getElementById(pSubMenu);
var unionCell = document.getElementById("unionCell");
var offsetElem = pCell;
var offsetTop = null;
var offsetLeft = null;
while (offsetElem.parentNode){
if (offsetElem.tagName != "DIV"){
offsetTop += offsetElem.offsetTop;
offsetLeft += offsetElem.offsetLeft;
}
offsetElem = offsetElem.parentNode;
}
pCell.className = "hover"
subMenu.style.left = (offsetLeft) + "px";
subMenu.style.top = (offsetTop + pCell.offsetHeight - 1) + "px";
subMenu.style.display = "block";
activeMenu = pCell;
activeSubMenu = subMenu;
cancelBubble();
document.getElementById("document").onmouseover = hideSubMenu;
}
function hideSubMenu(){
var subMenu = activeSubMenu;
subMenu.style.display = "none";
activeMenu.className = "navItem";
cancelBubble();
document.getElementById("document").onmouseover = hideSubMenu;
}
function cancelBubble(){
if (window.event){
window.event.cancelBubble=true;
}
The submenu appears and hides correctly in IE and Chrome, but is not showing in Firefox
here's the complete html
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div id="document">
<div id="head" class="headerBackground_Local">
<div id="nav1">
<table>
<tbody>
<tr>
<td class="navItem" style="width: 200px;">
<td style="width: 100px;"></td>
<td class="navItem" onmouseover="showSubMenu(this, 'subMenu1');" style="width: 400px;">
<td style="width: 10px;"></td>
<td class="navItem" style="width: 50px;"></td>
<td style="width: 100px;"></td>
<td class="navItem" style="width: 100px;"></td>
<td style="width: 135px;"></td>
</tr>
</tbody>
</table>
</div>
<div id="subMenu1" class="nav1SubMenu" onmouseover="cancelBubble();" style="left: 274px; top: 129px; display: none;">
<table cellspacing="0" cellpadding="0" border="0">
</div>
<div id="fade" class="overlay"></div>
<div id="dialogWin" class="floatWin">
</body>
</html>
The submenu has been shown normally in Firefox. The problem is that hideSubmenu function is also called right after. It's a good idea to check who is triggering the event before hide.
something like:
function hideSubMenu(e){
if (e.target instanceof HTMLTableCellElement) return;
var subMenu = activeSubMenu;
subMenu.style.display = "none";
activeMenu.className = "navItem";
cancelBubble();
document.getElementById("document").onmouseover = hideSubMenu;
}

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

Categories

Resources