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.
Related
Is there any way to auto numbering table data with local or custom language. I'm a Bengali, I know how to auto numbering table each row 1st data using css and js. But I don’t know how to use custom number, e.g. Bangla or Arabic.
Look at my code:
<table border="1">
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>
I want something like that;
১. Apple
২. Banana
৩. Orange
৪. Strawberry
How can I get that using Javascript / jquery.. Without adding any third party plugin.
You need to use toLocaleString() method or Intl.NumberFormat() constructor with the locale language as a parameter.
For example.
For Arabic numbers num.toLocaleString('ar-EG').
For Bangla numbers num.toLocaleString('bn-BD')
const table = document.querySelector('table');
[...table.rows].forEach((row, index) => {
row.cells[0].textContent = (index + 1).toLocaleString('bn-BD')
})
<table border="1">
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>
A CSS only solution would be using the CSS counter(..) function and pass the counter-style parameter (list-style-type) for 'bengali'.
E.g. td::before { content: counter(some-counter, bengali) }
Reference: MDN: counter() and MDN: list-style-type
table {
counter-reset: row 0;
}
tr {
counter-increment: row;
}
td::before {
content: counter(row, bengali) '. ';
}
<table border="1">
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>
I have a table with columns:
Artist
Song Title
Album
Add to playlist
I have some code that sorts the table rows by artist.
function sortAsc(a, b) {
var aText=$(a).find('.artist').text();
var bText=$(b).find('.artist').text();
return aText==bText?0:aText<bText?-1:1;
}
function sortTheTable(){
$(function() {
elems=$.makeArray($('tr:has(.artist)'));
elems.sort(sortAsc);
$('#songs').append(elems);
});
}
window.onload = function() {
document.getElementById("artistsort").onclick = function() {
sortTheTable();
}
}
And here is some HTML I'm using to test it:
<table class="table" style="table-layout:fixed">
<thead>
<tr>
<th>Artist/Band:</th><th>Song:</th>
<th>Album:</th>
<th style="padding-left:6%">Add to Playlist</th>
</tr>
</thead>
</table>
<table id="songs" class="table table-hover" style="table-layout:fixed">
<form action="">
<tr>
<td class="artist">Capital Cities</td><td class="songtitle">Safe and Sound</td><td>In a Tidal Wave of Mystery</td>
<td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
</tr>
<tr>
<td class="artist">Capital Cities</td><td class="songtitle">Kangaroo Court</td><td>In a Tidal Wave of Mystery</td>
<td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
</tr>
<tr>
<td class="artist">Two Door Cinema Club</td><td class="songtitle">Remember My Name</td><td>Beacon</td>
<td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
</tr>
<tr>
<td class="artist">Anamanaguchi</td><td class="songtitle">Blackout City</td><td>Dawn Metropolis</td>
<td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
</tr>
</form>
</table>
What ends up happening is that it sorts the rows by artist as intended, but the order of songs by the same artist gets mixed up every time "Artist/Band:" gets clicked.
I don't want a solution that involves some plugin, I can find plenty of those on my own.
I just want to know what is going on here.
welcome to the subtleties of sorting algorithms. As noted in my comments, you're asking for what is known as a stable sorting algorithm. But browser implementations of sort() aren't required to be stable. Some are; some aren't. To solve your problem reliably you'll have to use your own sort algorithm rather than the built-in. More information in this question: Fast stable sorting algorithm implementation in javascript
I have a table that lists a lot of data (each row is an offer, and there can be a couple hundred of them). Each offer has data associated with it: a group ID (multiple offers can be in the same group), a cost, if you must trade other items as a requirement to fulfill offer, etc.
I've made a fiddle to demonstrate:
http://jsfiddle.net/gd5Nd/
and since i need to include code with fiddle links:
<label class='checkbox'>
<input type='checkbox' class='toggle' id='filterToggle' value='true' data-toggle='filtering' />Filtering Options</label>
<fieldset id='filtering'>
<label class='checkbox'>
<input type='checkbox' class='filter' value='1' data-type='req' />Offers with Required Items</label>
<label class='checkbox'>
<input type='checkbox' class='toggle' id='groupToggle' value='true' data-toggle='groups' />Filter By Group</label>
<fieldset id='groups'>
<div class="col-md-3">
<label class='checkbox'>
<input type='checkbox' class='filter' value='11' data-type='group' />Cap Boosters</label>
</div>
<div class="col-md-3">
<label class='checkbox'>
<input type='checkbox' class='filter' value='475' data-type='group' />Datacores</label>
</div>
<div class="col-md-3">
<label class='checkbox'>
<input type='checkbox' class='filter' value='24' data-type='group' />Gunslinger Implants</label>
</div>
</fieldset>
</fieldset>
<table class='table table-striped table-hover table-condensed' id='offerList'>
<tr>
<th>Offer</th>
<th>Items Req</th>
<th>LP Cost</th>
<th>ISK Cost</th>
</tr>
<tr id='offer-1607' data-group='11' data-isk='60000' data-lp='60' data-req='1'>
<td><a href='offer/1607/'>20x Navy Cap Booster 25</a>
</td>
<td>1</td>
<td>60</td>
<td>60,000</td>
</tr>
<tr id='offer-1608' data-group='11' data-isk='125000' data-lp='125' data-req='1'>
<td><a href='offer/1608/'>20x Navy Cap Booster 50</a>
</td>
<td>1</td>
<td>125</td>
<td>125,000</td>
</tr>
<tr id='offer-1609' data-group='11' data-isk='185000' data-lp='185' data-req='1'>
<td><a href='offer/1609/'>20x Navy Cap Booster 75</a>
</td>
<td>1</td>
<td>185</td>
<td>185,000</td>
</tr>
<tr id='offer-1431' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1431/'>5x Datacore - Amarrian Starship Engineering</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1432' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1432/'>5x Datacore - High Energy Physics</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1433' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1433/'>5x Datacore - Laser Physics</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1434' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1434/'>5x Datacore - Mechanical Engineering</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1435' data-group='475' data-isk='250000' data-lp='250' data-req='0'>
<td><a href='offer/1435/'>5x Datacore - Nanite Engineering</a>
</td>
<td>0</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-1464' data-group='11' data-isk='250000' data-lp='250' data-req='1'>
<td><a href='offer/1464/'>20x Navy Cap Booster 100</a>
</td>
<td>1</td>
<td>250</td>
<td>250,000</td>
</tr>
<tr id='offer-249' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/249/'>1x Eifyr and Co. 'Gunslinger' Large Projectile Turret
LP-1001</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-252' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/252/'>1x Eifyr and Co. 'Gunslinger' Medium Projectile Turret
MP-801</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-255' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/255/'>1x Eifyr and Co. 'Gunslinger' Motion Prediction
MR-701</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-258' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/258/'>1x Eifyr and Co. 'Gunslinger' Small Projectile Turret
SP-601</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
<tr id='offer-261' data-group='24' data-isk='375000' data-lp='375' data-req='0'>
<td><a href='offer/261/'>1x Eifyr and Co. 'Gunslinger' Surgical Strike
SS-901</a>
</td>
<td>0</td>
<td>375</td>
<td>375,000</td>
</tr>
</table>
JS:
$(document).ready(function () {
// !- Bind checkboxes to show filters
$('input[type="checkbox"].toggle').bind("change", function () {
if (typeof $(this).data('toggle') != 'undefined') {
if ($(this).is(":checked")) {
$("#" + $(this).data('toggle')).show();
} else {
$("#" + $(this).data('toggle')).hide();
}
}
}).trigger('change');
$('input[type="checkbox"].filter').bind("change", function () {
switch ($(this).data('type')) {
case 'group':
var filtered = $('*[data-group="' + this.value + '"]');
console.log("Affected offers for " + this.value + ": " + filtered.length);
filtered.toggleClass('danger');
break;
case 'req':
var filtered = $('*[data-req="1"]');
filtered.toggleClass('danger');
break;
}
}).trigger('toggle');
});
The problem I'm having is that multiple filters may point to the same data row. For example: I have an offer that is part of group 11 (Cap Boosters), and it also requires items to trade. I have two filters that affect this: Has required items filter, and the group filter.
If I were to activate the group filter for group 11, I highlight the group 11 offers. However, when I activate the filter for offers with required items, I want it to remain highlighted. Instead, it removes the highlight.
This is because I'm toggling the class for the highlight on/off. I've tried show()/hide() which pretty much do the same thing (of course). One thing I tried that didn't work was addClass() and removeClass(). I thought it would append the class, so that if you had two filters that added the class, and then removed one filter, the other filter's class would still be active, but it seems that addClass only adds the class if it's not already present.
I could do some checking, such as if I choose to deactivate the group toggle, it will check to see if the req items toggle is still checked. However, that seems like a hack, and I'm not sure if it will work well (the example I have is a simplified version; in reality, there are about 10 groups and I would like to add more filters, so I'm not sure how feasible it would be to recursively check all filters and if they affect the data row every time one filter is checked/unchecked).
I was curious as to how best solve this problem of multiple filters pointing to the same data row.
Solution
I basically set up, as part of routine JS init, a 'filter container' object initially structured as so: rowID : Array(). Every time I add a filter, the filter will add itself to array for that row (so, having two filters in this example, each row could be filtered with group or req). Every time a filter is applied, we loop through the matching rows, and add/remove the filter from the list. If we're adding a filter, we go ahead and .hide() the element as well. If we remove the filter, we check to see if the array is empty, which means no filters are applied and we then .show() the element.
Sweet. A fellow EVE pilot.
I think your primary problem here is relying too much on simple notions like CSS classes or something to accomplish your goal. It sounds like what you need to do is keep track of all the different market items in a data structure, then go through and "turn on highlight" for the items you want. If it's already highlighted, who cares, otherwise turn it on (and vice versa). This is a strategy I typically use when I have complex hierarchies of collapsible items, or complex groupings such as what you're dealing with.
I think the solution you describe as a "hack" is fine - and is the only way I can think to do it simply. I had an idea involving adding an additional data-attribute for every filter option and then applying the styling via those instead of the class
IE:
<style>
.danger,
[data-req_style=1],
[data-group_style=11],
[data-group_style=475]{
...
}
</style>
Then rather than toggling the class you could safely add remove multiple filters without interfering with others. BUT that becomes really unmaintainable if you have an arbitrary or ever expanding list of filters.
Your "hack" solution is how I would implement it were it my project. Class selectors and determining the status of check boxes are comparably pretty fast so I wouldn't worry too much about performance even with really large data sets.
I'm using #Mottie's excellent fork of Tablesorter and would like to be able to filter table column(s) with external links.
It isn't strictly necessary, but I'd like to make multiple clicks toggle the filter on and off. Alternatively, I could always add an All Records link that resets the column(s).
I don't need to combine filters in a single column. In other words, the data wouldn't be both January and October.
I found a table sort with external link demo, but that one sorts, not filters, and it doesn't toggle.
I also found a table filter with buttons demo which is pretty close. However, as I mentioned, I'd really like links instead, would like to have the links toggle if possible, and don't need the filters to combine.
Thanks in advance.
This was actually a lot easier than I thought. Here's a working demo that came directly from Mottie's demo code above. I replaced the buttons with links, renamed the associated class so it made more sense and replaced the class on the JavaScript function to match the one on the links.
Fair warning: I don't claim to know everything, so my modifications could have very silly errors.
$('.link-filter').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});
The filters in the various columns combine, but I only need a single column filter at the moment, so that's not really an issue for me.
Country:<br>
All Countries |
Netherlands |
Belgium |
Germany
<br /><br />
<table id="festivaloverzichttable" class="tablesorter">
<thead>
<tr>
<th width="17%" data-placeholder="Search...">Event</th>
<th width="18%" data-placeholder="Search...">Date</th>
<th width="9%" data-placeholder="Search...">Duration</th>
<th width="12%" data-placeholder="Search...">Place</th>
<th width="10%" data-placeholder="Search...">Country</th>
<th data-placeholder="Zoek...">Genre(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Event 1</td>
<td data-date="06-02">TBA</td>
<td>2</td>
<td>Oisterwijk</td>
<td>Netherlands</td>
<td>Hardstyle</td>
</tr>
<tr>
<td>Event 2</td>
<td data-date="10-11">11 October t/m 13 October</td>
<td>3</td>
<td>Volkel</td>
<td>Netherlands</td>
<td>Pop, Rock, Urban, Electronic</td>
</tr>
<tr>
<td>Event 3</td>
<td data-date="06-02">TBA</td>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
<td>Electronic</td>
</tr>
<tr>
<td>Event 4</td>
<td data-date="09-01">TBA</td>
<td>1</td>
<td>Utrecht</td>
<td>Netherlands</td>
<td>Electronic, Urban</td>
</tr>
<tr>
<td>Event 5</td>
<td data-date="07-06">6 July - 7 July</td>
<td>2</td>
<td>Beek en Donk</td>
<td>Netherlands</td>
<td>Electronic, Hardstyle</td>
</tr>
...
</tbody>
</table>
Javascript
$("#festivaloverzichttable").tablesorter({
sortList: [[0, 0]],
widgets: ['zebra', 'filter', 'saveSort'],
widgetOptions: {
filter_reset: 'button.reset'
}
});
$('.link-filter').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});
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