JQuery - Show Additional Image on Hover - javascript

I am practicing JS/JQuery and trying to create a sports web site that shows a small player image and a couple of stats next to it. When this small image is rolled over, I want a different large image to appear to the right.
The images and player info are in a table. Both images are within the table. The image that I want to appear on hover is set to display:none.
I can make the images appear but they all appear in a stack when 1 thumbnail is hovered.
Here is a small sample of the HTML:
<table id="roster">
<tr>
<th class="title" colspan=4>St. Louis Blues 2013-2014 Roster</th>
</tr>
<tr>
<th class="positions" colspan=2>Forwards</th>
</tr>
<tr>
<th></th>
<th>Player</th>
<th>Shoots</th>
<th>Acquired</th>
</tr>
<tr>
<td><span class="large" style="position:absolute;margin-left:550px;display:none;"><img src="images/backes_large.jpg" width="500px" /></span><span class="small"><img src="images/backes_small.png" alt="david backes" width="70px" /></span>
</td>
<td>David Backes "C"</td>
<td>Right</td>
<td>2003</td>
</tr>
<tr>
<td><span class="large" style="position:absolute;margin-left:550px;display:none;"><img src="images/berglund_large.jpg" width="500px" /></span><span class="small"><img src="images/berglund_small.png" alt="patrik berglund" width="70px" /></span>
</td>
<td>Patrik Berglund</td>
<td>Left</td>
<td>2006</td>
</tr>
</table>
The script is:
$('span.small').hover(
function () {
$('span.large').show();
},
function () {
$('span.large').hide;
});
});
Obviously I want to open the additional image that is only in that table row. This is where I am stuck. Any help would be appreciated.

All of them will appear because you're using span.large and there are multiple of them. Instead use $(this).prev() for the related span to hide/show.
$('span.small').hover(
function () {
$(this).prev('span.large').show();
},
function () {
$(this).prev('span.large').hide();
});
});
Also, you're missing the parentheses () in the last line

Related

Change javascript variable with html button

I am implementing the IGV genome browser in a website.
I would like to link a table with chromosome positions to the genome browser, so when a user clicks to one position, the genome browser changes to that position automatically.
By now, I have the genome browser code in a separate javascript file, which uses the value of the button.
// Construct genome browser
document.addEventListener("DOMContentLoaded", function () {
// Obtain position
var position = $('#ins').val();
// Use the position
var options = {locus: position, ...};
var igvDiv = document.getElementById("igvDiv");
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})
};
And the table in html with buttons.
<table class='results-table'>
<tr>
<th class='text text--bold'>Chromosome</th>
<th class='text text--bold'>Start</th>
<th class='text text--bold'>End</th>
<th class='text text--bold'>Genome Browser</th>
</tr>
<tr>
<td class='text'>chr1</td>
<td class='text'>0</td>
<td class='text'>100</td>
<td><button class='editbtn' value='chr1:0-100' id='ins1'>chr1:0-100</button></td>
</tr>
<tr>
<td class='text'>chr2</td>
<td class='text'>200</td>
<td class='text'>400</td>
<td><button class='editbtn' value='chr2:200-400' id='ins2'>chr2:200-400</button></td>
</tr>
</table>
With this, the browser gets the first position but it does not change when I click the button.
I think I need some kind of onClick() action but I can't figure out how to change a javascript script.
Any help would be appreciated.
Thank you!
Júlia
edit:
I added more javascript code as I think that I was not able to illustrate my question properly. And also modified the ids from buttons, to make them different.
The question is how to use different ids in javascript depending on the button that was clicked.
You can change some things. I remove the id from your buttons because you will already have the context with the passing event. And instead of a value in the button, I would recommend you to use a data attribute. data-value for example.
function check(e) {
console.log(e.getAttribute('data-value'))
}
<button class='editbtn' onclick="check(this)" data-value='chr2:200-400' >chr2:200-400</button>
<button class='editbtn' onclick="check(this)" data-value='chr1:0-100' >chr1:0-100</button>
You can access the ID and value in a click event:
// Construct genome browser
document.querySelector('table.results-table').addEventListener('click', function ({ target }) {
if (!target.id) return;
const id = target.id;
const position = target.value;
console.log(id);
console.log(position);
});
<table class='results-table'>
<tr>
<th class='text text--bold'>Chromosome</th>
<th class='text text--bold'>Start</th>
<th class='text text--bold'>End</th>
<th class='text text--bold'>Genome Browser</th>
</tr>
<tr>
<td class='text'>chr1</td>
<td class='text'>0</td>
<td class='text'>100</td>
<td><button class='editbtn' value='chr1:0-100' id='ins1'>chr1:0-100</button></td>
</tr>
<tr>
<td class='text'>chr2</td>
<td class='text'>200</td>
<td class='text'>400</td>
<td><button class='editbtn' value='chr2:200-400' id='ins2'>chr2:200-400</button></td>
</tr>
</table>

How to select and manipulate column in table jQuery

jQuery('.rolly').hover( function() {
var colorclass = jQuery(this).attr('colorclass');
var colorcolumn = jQuery(this).attr('colorcolumn');
var selector = "#table-struct tr td:nth-child(" + colorcolumn + ")";
jQuery(selector).toggleClass(colorclass);
});
<img id="img1" class="rolly" title="Biddr" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus-image.png" alt="" width="150" height="150" />
<img class="rolly" title="bRT Biddr" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr-image.png" alt="" width="150" height="150" />
<img class="rolly" title="Biddr API" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API-image.png" alt="" width="150" height="150" />
<!-- Begin Table -->
<div id="table-struct">
<table class="table table-bordered table-right" style="margin-right: 70px;">
<thead>
<tr>
<td>SIMPLE INTEGRATION:seamless
setup process to get started</td>
<td align="center">X</td>
<td>X</td>
<td>X</td>
</tr>
</thead>
<tbody>
<tr>
<td>NO ADVERSE EFFECTS OF LATENCY:
publishers can set the overall
timeout threshold</td>
<td>Across All Header
Bidding Partners</td>
<td>For The bRT
Integration Only</td>
<td>** Controlled by
Publisher**</td>
</tr>
<tr>
<td>HORIZONTAL INTEGRATION: unlike
some integrations that will
compete only for first look or
cookie matching, we compete
on every impression served</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>ACCOUNT MANAGEMENT: access to
a technical & operational
resource to ensure rapid and
effective support</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>ACCESS THE bRT MARKETPLACE:
drive significantly more
competition with access to
bRT’s unparalleled proprietary
programmatic and managed
advertiser demand</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>BILL OFF PUBLISHER’S AD SERVER:
ensures no risk of revenue
loss, guaranteeing results
yielded are purely incremental</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>MEDIATION: we optimize all
partners to maximize
competition and drive the
highest CPM possible</td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td>EQUAL PLAYING FIELD: create
parity and fairness for all
demand partners competing
at the same level</td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td>INCREASED OPERATIONAL
EFFICIENCY: a publisher’s ops
team does not need to worry
about multiple integrations,
managing discrepancies & the
adverse performance effects
of working with multiple
header providers</td>
<td>X</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I'm doing this in a WordPress post
So I'm trying to select a full column when a mouse hovers over a particular image and change the color of the column with jquery. So when I hover over the first image it turns the second column red, when I hover over the second it turns green and so on. Any suggestions? I have images with the class 'rolly' and have coded some jQuery logic as well. Just not sure if the logic will make sense when I apply it or not. So far I've been a bit unsuccessful.
Class .rolly doesn't have an attribute 'colorclass'. In fact, what you want to do is identify columns, so why don't you mark the table data as such? Like this:
<tr>
<td class="col-1">NO ADVERSE EFFECTS OF LATENCY:
publishers can set the overall
timeout threshold</td>
<td class="col-2">Across All Header
Bidding Partners</td>
<td class="col-3">For The bRT
Integration Only</td>
<td class="col-4">** Controlled by
Publisher**</td>
</tr>
and then have your script change the background of the particular column class when you roll over and image? Like this:
<script type="text/javascript">
$(document).ready(function(){
$("#img1").hover(function(){
$(".col-2").css('background-color', 'red');
}, function() {
$(".col-2").css('background-color', 'white');
});
$("#img2").hover(function(){
$(".col-3").css('background-color', 'red');
}, function() {
$(".col-3").css('background-color', 'white');
});
$("#img3").hover(function(){
$(".col-4").css('background-color', 'red');
}, function() {
$(".col-4").css('background-color', 'white');
});
});
The images which have '.rolly' class don't have 'colorcolumn' and 'colorclass' attributes.
So you need to add them to the images like following.
<img id="img1" class="rolly" title="Biddr" colorcolumn="1" colorclass="red" onmouseove .... >
<img class="rolly" title="bRT Biddr" colorcolumn="2" colorclass="blue" onouseover.....>
<img class="rolly" title="Biddr API" colorcolumn="3" colorclass="green" on....>
The jQuery code what you made will work.
According to the above code snippt, you need to add color style classes like following.
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
You can modify color values as you want.

Table row hover, background change and click but have some child cells in the row have different properties

<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('go.html');">
<td>1</td>
<td>John/td>
<td>Dump</td>
</tr>
</table>
Javascript:
function ChangeColor(tableRow, highLight)
{if (highLight)
{tableRow.style.backgroundColor = '#F5FFDB';}
else
{tableRow.style.backgroundColor = '';}}
function DoNav(theUrl)
{document.location.href = theUrl;}
I use the following structure to draw the table. When I hover on a row it changes the background and anywhere I click on the row it will jump to the url. What I'm trying to do is have some id identifier (that maybe goes into <td>) which basically tells certain columns in a row to behave differently. Namely this is what I'm looking for:
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr>
</table>
Any ideas?
EDIT:
I forgot to mention... the id="hover_go_style_1" would take me to one url and id="hover_go_style_2" would take me to another url. That's the "difference". As it is now with onClick the whole row takes me to one url, but in essence im trying to isolate cells. Not sure how to explain this better.
You should be using CSS for your hover color, it's much simpler there. Your click event can be much nicer hooked up and handled completely in your JavaScript also. I've added a data-url (HTML5-compatible) attribute to your row to define the URL.
jsFiddle
HTML
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr data-url="go.html">
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr>
</table>
JS
$('tr[data-url]').click(function () {
window.location.href = $(this).attr('data-url');
});
CSS
tr:hover td {
background-color:#F5FFDB;
}
/* Style the third column differently */
tr:hover td:nth-child(3) {
background-color:#F00;
}

jQuery: Position of Images inside a HTML Table

Say I have a table:
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
I am using following code to add images to these table cells
$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');
$('#id2').append('<img src=images/image4.jpg />');
Now what I want to achieve is this:
1. for cell "id2", i want the image always align to the right so it's not next to the text.
2. for cell "id1", since those 3 images has different sizes (24x24, 32x32, 24x24), i don't want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32x32, and put those images into those small cells one by one.
I am not good at html or javascript. is it possible to do so?
CSS
#id2 img { float: right; }
HTML
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"><table><tr></tr></table></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
Javascript
$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...
Based off item #2 I'd say you're not done defining your table. You need to add a nested table in #id2 (the merits of this approach can be debated later).
So your table would be
<table>
<tr>
<td id="id1"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td id="id1a"></td>
<td id="id1b"></td>
<td id="id1c"></td>
</tr>
</table>
</td>
</tr>
</table>
From there you'd append your images to the sub-cells.

hide/show not working properly with jquery

I have a page with three rows of main information that all have a 'More Info' button attached, sort of like wefollow.com and their info button.
When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.
The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.
I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.
Any help would be awesome. Thanks.
Scripts
index
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td>
<div id="1" class="more-information" />
</td>
</tr>
<tr class="">
<td> </td>
<td> </td>
<td> <a id="1" class="more-info" href="#">More info</a> </td>
</tbody>
</table>
listing.js
$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id;
$("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});
First problem is you're repeating IDs. They need to be unique. That's no doubt throwing off your code.
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td><div id="more-1" class="more-information">More information</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a id="1" class="more-info" href="#">More info</a></td>
</tr>
</tbody>
</table>
combined with:
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
});
});
Not sure why you need to hide siblings in the above though.
Also, I wouldn't hide the "more-information" divs in jquery. Just add CSS for that:
div.more-information { display: none; }
You are hiding the more-information div but you are not hiding its parent element, the <tr> with class mi. Try putting the id attribute in the <tr> instead of the enclosed div, and hiding the whole row. Also, you'll have to take cletus' advice about not repeating id's and unnecessary sibling hiding.

Categories