<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
Related
i am currently working on making a div clickable, and when clicked it has to follow a link. This is my HTML:
<div class="product">
<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
<div class="image">
</div>
<div class="prodinfo">
/* Lots of text here */
<div class="listprodbuy">
<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
</div>
</div>
</form>
</div>
The idea is that when i click the div element with the class "product", it will follow the link wrapped in the div with the class "image". But when clicking the div with the class "listprodbuy", it will not follow that link.
This is my Jquery so far:
$(".product").click(function(){
window.location = $(this).find("a").attr("href");
return false;
});
$("div.listprodbuy").click(function(e){
e.stopPropagation();
});
When the main div is clicked, absolutely nothing happens, i assume that it is because the Jquery does not accurately pinpoint the link, as it is not a direct child element of the div. How would i go about specifying exactly which element it should follow?
While i would love to just wrap the entire div in an anchor, it's not possible because my CMS (DanDomain) wont let me access and edit the above HTML.
Jsfiddle
window.location Should be set to absolute path instead of relative path. Since you are finding the href of anchor tag as $(this).find("a").attr("href"), It will give you the relative path. Just change html from to to get the absolute path.
Use e.preventDefault(); along with e.stopPropagation(); to avoid the postback.
Complete Code:
$(".product").click(function(){
window.location = $(this).find("a").attr("href");
return false;
});
$("div.listprodbuy").click(function(e){
e.preventDefault();
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
<div class="image">
</div>
<div class="prodinfo">
/* Lots of text here */
<div class="listprodbuy">
<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
</div>
</div>
</form>
</div>
I have the following elements:
fieldset (class="A") > div > p > several input and labels
I want to get the last div in the fieldset - with the div tag included
i.e. not from the "p" tag that is inside the last "div"
I tried :
$('.A').children().last().html()
but it gives me the last div without the div tag (i.e. from the p inside)
any ideas why or how i can include the div tag in the query?
html:
<div class="form">
{{ form.as_p }}
<fieldset class="A">
{% for b in B%}
<div id="b-{{ forloop.counter0 }}">
{{b.as_p}}
</div>
{% endfor %}
</fieldset>
</div>
html() will only get the innerHTML. You can make use of the native outerHTML property by retrieving the native DOM element
$('.A').children().last()[0].outerHTML
Try this : You can clone the last div. Add it to some temp jquery element and take .html() will give you outer html of last div
$(function(){
var tempDiv = $('<div></div>');
tempDiv.append($('.A').children().last().clone());
alert(tempDiv.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="form">
<fieldset class="A">
<div id="a">
<p>a</p>
</div>
<div id="b">
<p>b</p>
</div>
<div id="c">
<p>c</p>
</div>
</fieldset>
</div>
I think you don't need to use other functions. You can just try
$(".A > div:last-child")
to select your last div with DIV tag included.
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();
});
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');
});
I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});
Anyone have a solution for this ?
Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.
Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.
Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/