I have a working web page, but I would like to generalize the code. When one clicks a link with e.g. anchor #11 or #12, a div called #t11 or #t12 will open (or close) with this piece of script:
Script
$( "#11" ).click(function() {
$( "#t11" ).toggle();
});
$( "#12" ).click(function() {
$( "#t12" ).toggle();
});
Stripped HTML
<div class="a">
<table>
<tr><td><a id="11">Foo</a></td></tr>
<tr><td>Find out more about Foo</td></tr>
</table>
</div>
<div class="a">
<table>
<tr><td><a id="12">Bar</a></td></tr>
<tr><td>Find out more about Bar</td></tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
Relevant CSS
.b {
display: none;
}
This is fine, however, with over 20 divs it's getting complicated and difficult to maintain. Is there a way to reduce the code, so every id in <a> will toggle its <div>? I've been struggling with $this but without the result I hoped for.
You can use a selector that will match all appropriate <a> elements, so that your click function will be applied to all of them. Then, you can get the id attribute from your <a> tag using $(this).attr('id'). You can then form a selector that matches the corresponding id of the content you want to toggle, then call the .toggle() method using that selector.
$('.a table tr td a').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
EDIT
You may also consider adding a class to your actual <a> tags, as mentioned by #Lelio Faieta.
In the above example, if the structure of your html changes, the $('.a table tr td a') selector will break, and the click functionality will be lost.
If, however, you assign a class of, say toggler to each <a> tag, then you can just replace the $('.a table tr td a') selector with $('.toggler') and your click functionality will still work if you change the location of your <a> tags in your html.
$('.toggler').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11" class="toggler">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12" class="toggler">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
You can use classes to group elements in jquery.
A class is referenced like id but with a dot instead of a dash:
$('.someClass')
where you used to write
$('#anID')
Many objects can share the same class so you can both use classes to target an animation to multiple objects at the same time or to use different element on the DOM to fire an animation
The best way to solve this is by adding a common class to all a tag and performing event with that class.
<a class="atag" id="11">
<a class="atag" id="12">
$(".atag").click(function() {
var id=$(this).attr("id");
$(body).find("#"+id).toggle();
});
Related
Here is my Fiddle
How can I make the entire <tr> as clickable.
In the fiddle all the elements like text and images are clickable, but i want to make the entire <tr> clickable. I won't want to make the jQuery query action, as it won't show the href icon while hovering it.
How can I do this ?
I read this question but it still uses jQuery on click event, which won't show the href icon while hovering it
Here is my HTML
<table border=1>
<tbody>
<tr>
<td style="display: none;">
13467.36232877521
</td>
<td style="display: none;">
0
</td>
<td width="5%" >
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/store/profile/1458470633N4IjGniw81.png" alt="image" height="58px" width="58px" style="margin: -8px 0px -9px -7px;" />
</a>
</td>
<td width="25%">
<div class="semibold">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation Demo 1
</a>
</div>
<div class="text-muted"><i class="fa fa-heart yellow"></i> 0</div>
</td>
<td width="35%">
<div class="text-muted">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation, 9th Avenue, New York, NY, United States
</a>
</div>
</td>
<td width="35%" class="text-right">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/tip/1456942351fQoyY8DNZd.png" alt="image" height="36px" width="40px" />
</a>
</td>
</tr>
</tbody>
</table>
A combination of the above should do the trick.
Add recognizable class to your element.
<tr class="clickable" data-href="http://website/your_href"></tr>
Write CSS for the element to appear clickable.
.clickable {
cursor: pointer;
}
Make the thing clickable using Javascript:
var elements = document.getElementsByClassName('clickable');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener('click', function() {
var href = this.dataset.href;
if (href) {
window.location.assign(href);
}
});
}
Try putting display as block.
td a {
display: block;
}
Fiddle
Also have a look at answer in this question too.
All you need to do is add cursor: pointer; to have it look like its clickable and then add an ID to it if you want to actually make the entire tr tag clickable. IE:
<tr id="clickable">
CSS
tr { cursor: pointer; }
You can do it by using javascript. Maybe:
$("tr").click(function() {
// what to do
});
I'm gonna try to explain my issue:
I have span elements, each span element have text, when the user hovers it, it should displays an image next to the element, each image is different, I was trying to use jQuery .hover() function, but when I hover on the text it shows me the whole images.
How can I solve it?.
My HTML.
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage">Azotea </span>
<span class="displayImage">Nivel 8 </span>>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="images/azotea-n9.jpg" alt="">
<img class="displayed" src="images/test2.jpg" alt="">
</div>
My Code.
$(".displayImage").hover(function(){
$(".displayed").show();
}, function () {
$(".displayed").hide();
});
Thanks!.
You could associate the span with a particular image via a data attribute and id.
$(".displayImage").hover(function(){
// $(this).attr('data-img') == 'azotea' or 'nivel8'
// so we end up with $('#azotea').show(), for example.
$('#' + $(this).attr('data-img')).show();
}, function () {
$('#' + $(this).attr('data-img')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage" data-img='azotea'>Azotea </span>
<span class="displayImage" data-img='nivel8'>Nivel 8 </span>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="images/azotea-n9.jpg" alt="azotea" id="azotea">
<img class="displayed" src="images/test2.jpg" alt="nivel 8" id="nivel8">
</div>
I try don´t change your html
https://jsfiddle.net/luarmr/hjreda3r/
I add a little css as well for hide the elements from the origin
$(".displayImage").hover(
function(el){
var image = $(this).data('ref');
$(".displayed:nth-child(" + image + ")").show();
}, function () {
$(".displayed").hide();
}
);
I would suggest you to better use css3 instead of jquery, cos jquery slows down productivity of your site on mobile gadgets, so maybe you should look here enter link description here
You need to find common ground between your span & image and without adding anything extra in your markup, that would be the index value of each of them. Obviously, this solution that I recommend below is entirely dependant on the order with which you lay out your HTML.
Take a look at this solution I posted for a similar problem.
So basically, your code should become something like this:
$(".displayed").hide();
$(".displayImage").hover(function(){
$(".displayed").eq($(this).index()).show();
},function(){
$(".displayed").eq($(this).index()).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage">Azotea </span>
<span class="displayImage">Nivel 8 </span>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" alt="">
<img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" alt="">
</div>
Hope it helps in some way.
T
This is not working and I don't know why. I have tried it in the console it works, but when I change my js codes it does not work.
$('#recipe-table td:last-child').width();
How can I get it the correct way?
this is the html
<div id="div-lists">
<div id="div-recipe-table">
<table class="" id="recipe-table" cellspacing="0" cellpadding="0">
<tbody>
<tr class="recipe-list" data-ng-repeat="recipe in recipe_data" ng-click="recipe_click(recipe.CodeListe,recipe.Name)">
<td id="td-img{{recipe.CodeListe}}">
<center>
<span id="img{{recipe.ID}}X">
<a id="{{recipe.ID}}" href="javascript:void(0);">
<img ng-if="recipe.Pictures !==''" fallback-src="images/default.png" ng-src="{{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/><img ng-if="recipe.Pictures===''" class="images" src="images/default.png" id="img1"/>
</a>
</span>
</center>
</td>
<!-- I want to get The width of this <td> -->
<td class="recipes">
<div id="div-recipe-name">
<strong>{{recipe.Name}}</strong></div>
</td>
<!-- Until here
I already tried using $('.recipes').width(); but it returns 0 -->
</tr>
</tbody>
</table>
</div>
<div id="div-list-loading"></div>
<div id="div-list-noresults">{{ui_translation.UIT[171610]}}</div>
</div>
</div>
Try the following:
$('#recipe-table td:last').width();
From the jQuery Docs
While :last matches only a single element, :last-child can match more
than one: one for each parent.
Since you have already tried $('.recipes').width(); does the following provide you any results:
$('.recipes').each(function (index, elem) {
alert($(this).width());
});
Try below jQuery
You can use .last() method constructs a new jQuery object from the last element in that set.
$('#recipe-table td').last().width();
JSFIDDLE DEMO
I have following structure in my page
HTML:
<div style="position:relative; width:200px; height:100px; overflow:hidden;">
<div style="position:absolute;" id="innerDiv">
<table style="width:400px;height:50px;" border="1" id="innerTable">
<tr>
<td>
<div id="td1"class="monthDiv" style="white-space:nowrap;">
2000
</div>
<div id="td2" style="white-space:nowrap;">
<table>
<tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr>
</table>
</div>
</td>
<td>
<div id="w" style="white-space:nowrap;">
2001
</div>
</td>
</tr>
</table>
</div>
</div>
JAVASCRIPT:
$("#td1").click(function(){
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(){
$("#td2").hide('slow');
$("#td1").show('slow');
});
$("#quarter1").click(function(){
});
$("#quarter2").click(function(){
});
So, when I click on 'td1'(2000) I am showing 'td2'(JAN-JUN00 AND JUL-DEC00)' and viceversa but I need to show another div(JAN00 FEB00 ... JUN00) when click on 'quarter1'. Also I need to find on which div click event was fired, 'quarter1' or 'quarter2' to show (JUL00 AUG00 ... DEC00)
Please help me.
You can simply call a show event on the div you want to display on click of quarter1:
$("#quarter1").click(function(){
alert('quarter1');
$('#quart1').show('slow');
});
$("#quarter2").click(function(){
alert('quarter2');
$('#quart2').show('slow');
});
quart1 and quart2 are the ids of the divs you want to display.
EDIT:
Add this:
$("#td1").click(function(e){
e.stopPropagation();
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(e){
e.stopPropagation();
$("#td2").hide('slow');
$("#td1").show('slow');
});
<div class="form_div">
<form name="first" class="dirs" method="post" action="">
<table>
<tr>
<td>
<img src="path..." class="info">
<div class="tip">
<p>Some text</p>
</div>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".info").tip({ effect : 'slide'});
});
</script>
I want to select the div with the class tip and img tag class info from the div > form > table > tr > td. But i can't select it with the function i have in the script.
The selector doesn't find the img tag and the div with the class tip.
Am i going wrong somewhere?
Use this :
$(".info, .tip")
Its a multiple selector.
And look at .slideDown(), .slideUp() and .slideToggle()
Try to put your javascript code at the top of the body