I have a comparison table that has about 20 items. I would like when a link is clicked it will show more information on that item. I can do this by using the following function:
$(function(){
$('.show').click(function() {
$('#keywords').fadeIn('slow');
});
});
However as I mentioned there are twenty items and repeating the above code could get cumbersome.
How do I create a function that would show the div below the link that is clicked? On top of that if a div is open or visable and another item is clicked I want the other item to close or fade out and then the other to show.
Here is my HTML for part of the page:
<tr class="second">
<td class="cat" style="width: 33%;">
<div>
<a class="show" href="#"> Mobile Keywords</a>
</div>
<div id="keywords" class="hide">
p>Info Here</p>
</div>
</td>
<td style="width: 33%;">
<i class="icon-ok"></i>
</td>
<td class="" style="width: 33%;">
<i class="icon-ok"></i>
</td>
</tr>
<tr class="second">
<td class="cat" style="width: 33%;">
<div>
<a class="show" href="#">Another Category</a>
</div>
<div id="category-2" class="hide">
p>Info Here</p>
</div>
</td>
<td style="width: 33%;">
<i class="icon-ok"></i>
</td>
<td class="" style="width: 33%;">
<i class="icon-ok"></i>
</td>
</tr>
I assume this can be done using the this property but I do not know how to implement this as I am not familiar enough with JS.
To summarize: How do I have a link in this table that will be clicked and then the link shows the appropriate div without having to create a repeat the code for every item?
Try
$('.show').click(function() {
$('.hide').hide();
$(this).closest('td.cat').find('.hide').fadeIn();
});
Fiddle
edit: Added hide functionality as requested in the question.
Explanation
In the code above, this references the element that triggered the click event handler (the clicked anchor element).
Then, this is wrapped inside a jQuery object and we traverse the DOM tree up to a common ancestor using the .closest method, from there we find the hidden element to display.
The $('.hide').hide() in the first line is self-explanatory, it hides all elements with the hide class before animating the fadeIn of the one to be displayed.
$(function(){
$('.show').click(function() {
$(this).parent().next('div').fadeIn('slow');
});
});
Utilizing the .parent() method, we can traverse up the dom one level, then using .next() we get the next immediate div, which seems to follow sequence with your markup.
Using your HTML markup, this might work. Will hide currently shown div, only if its not the same element and show the desired one.
$(function(){
$('.show').click(function() {
if ( !$(this).hasClass('shown') )
{
$('.shown').removeClass('shown').parent().siblings('div').hide();
$(this).addClass('shown').parent().siblings('div').fadeIn('slow');
}
});
});
Edit: working code.
$(function(){
$('.show').click(function() {
$('.hide').hide();
$(this).parent('div').next('div').fadeIn('slow');
});
});
Uses this (as you expected), looks for its parent div, and then looks for its first sibling div.
Edited to include the hide functionality.
Related
I've been struggling with this piece of code:
<div class="parent">
<tr>
<td class="box">
<td class="box">
</tr>
</div>
<div class="parent">
<tr>
<td class="box">
<td class="box">
</tr>
</div>
So what I want is that when I click on the first parent, first box, that it gives a class to that box. But when you click on the second parent, second box, that it gives a class to that box and also keep the first box of the first parent enabled.
I have a piece of javascript, but it also disables the click on the first parent when I click on the second parent.
$(".box").click(function(e){
e.preventDefault();
$('.box').removeClass('boxActive');
$(this).addClass("boxActive");
});
Hope someone could help me out!
Apreciate it and thanks!!
Your HTML is too confusing.
Firstly, you can not use tr td tags where ever you want. It should be enclosed inside <table> tag.
Secondly, You are not closing <td> tags.
I removed tr and replaced all td with div and it works.
<div class="parent">
<div class="box">11</div>
<div class="box">12</div>
</div>
<div class="parent">
<div class="box">21</div>
<div class="box">22</div>
</div>
Here is my fiddle : http://jsfiddle.net/rshutxpj/3/
As you can see, when you click on the rows, there is a little border appearing. I basically want to only have the border change on the last row clicked, but I don't know what event to use to bring the previous row I clicked with no border. What would be the best way to do that?
P.S. I cant use the any type of "losefocus" or similar, because I got many table on my page and the last row clicked on this particular table need to stay visible to the user. Think it the same way as many groups of radiobox.
Here is the code:
<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>UPLOAD SCHEDULE</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a>
</li>
</ul>
You have duplicate IDs.
Why do want to have onclick on each anchor.(removed in demo)
Use this JS
$(document).on('click', '.fitting', function () {
$('.fitting').removeAttr('style'); // removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Demo
Warning:As you have only border in style attribute , removing it will not effect anything, Suppose if you have other styles along with border don't use .removeAttr('style'); , Use .css('border', 'none') like below
$(document).on('click', '.fitting', function () {
$('.fitting').css('border', 'none')// removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Update :
If there are multiple tables then use this $(this).parents('table').find('.fitting').css('border', 'none')
this finds the fitting elements of the table in which the row is clicked, excluding the same elements in other tables in DOM
NOTE: #J Santosh's answer will toggle all links in all of the tables and the question mentioned that there are multipe tables on the page would all lose their highlighting.
Having your onclick links on the list items will make this messy and is not performant (as I'll go thru below). To stay within The solution you are looking for is:
onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length; for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"
This will make sure you are only removing the highlighted row from that table.
HOWEVER, There are some very concerning things about this structure.
Your id's are not unique. You should remove the id attributes.
You can use the href=javascript:"/* onclick stuff goes here */" instead of adding an onclick attribute.
There is no need to use anchor tags in the li as you are doing. Adding extra DOM items makes your DOM heavier and the page slower. I suspect you are only adding those because you want the pointer icon. You can fix that with CSS.
Your onclicks will all need to be updated the same way and makes your code less reusable. Adding eventHandlers to every li also is expensive in that the function isn't cached and requires extra resources for each DOM element.
Setting the style purely in javascript might be better done in CSS since it will be tied to your page layout styling. Create a class called "selected" or something similar and add the class onclick.
SO here is how I would code it:
HTML:
REMOVE ALL OF YOUR LINKS! You are using anchor tags wrong! Also, remove all of your id's.
CSS:
li.fitting { cursor: pointer; }
li.fitting.selected { border: 2px solid #000099 }
Javascript:
$(function(){
$('li.fitting').on('click', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});
You could use the HTML state of :focus and the JS "blur" event, hooked using the HTML attribute onblur. So, you would amend your onclick to this.style.border='2px solid #000099';this.focus(); and add onblur="this.style.border='none';" to that same link.
The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!
I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();
I create a div box with css : overflow: scroll. Here is my code:
<div id="resultbox" style="overflow:auto">
<div id="abc"><a id="p1" href="123.php" class="fac_result" >abc</a>
<a id="p2" href="456.php" class="fac_result" >def</a>
<a id="p3" href="789.php" class="fac_result" >ghi</a>
</div>
<div id="ccc">
<a id="pt1" href="123.php" class="fac_result" >123</a>
<a id="pt2" href="456.php" class="fac_result" >456</a>
<a id="pt3" href="789.php" class="fac_result" >789</a>
</div>
<div id="kkk">
<a id="s1" href="ddd.php" class="fac_result" >wer</a>
<a id="s2" href="fff.php" class="fac_result" style="background-color:#C7C8CA">fff</a>
<a id="s3" href="ggg.php" class="fac_result" >ggg</a>
</div>
<div id="opo">
<a id="t1" href="qqq.php" class="fac_result" >rrr</a>
</div>
</div>
How can I do so that after an user clicked a link after the page refreshed but it will still return user to the row that I just selected which is highlighted background with background-color:#C7C8CA but I don't wish to scroll down the page. I just want it bring me back the selected link within the div box only. Is it possible?
You need to pass id via hash eg #id. Let's assume you want to redirect user to this row scrolled:
<a id="s1" href="ddd.php" class="fac_result" >wer</a>
You would redirect using:
page.php#s1
page.php is supposed to be the same page where above link is defined.
Working example is right here, click on following link:
My Answer
It would take you to my answer scrolled directly. The same technique is used here, here is the url:
https://stackoverflow.com/questions/7844837/
click-on-a-link-and-go-back-to-the-link-row-without-scroll-back/7845469#7845469
As can be seen at the end, there is #7845469 which is the id of row containing my answer.
Are you doing it cross pages?
You could use the scrollTo plugin, which can scroll inside a div.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Their examples are created that way: http://demos.flesler.com/jquery/scrollTo/
If you want it on pagereload, and are setting the background dynamic - then just do:
$('resultbox').scrollTo($('a[background-color=#C7C8CA]'));