I have an anchor tag inside which I append some divs through jQuery. I want that the 'hyperlink' effect of the parent <a> tag should not appear in the appended child elements.
How can we achieve this with jQuery or in some other way.
Here is the fiddle of what I want.
UPDATE:
Most of the answers tell how to remove the click effect. Isn't there something that can prevent every default behavior of anchor tag from child elements?
FIDDLE
Ok. Here is some sample HTML
<a href="google.com" id="first">
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
</a>
<a href="google.com" id="second">
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
</a>
This CSS will remove the underscore, change the font color and the cursor
div{
display: inline;
}
#second{
text-decoration: none;
color: #000;
cursor: default;
}
The jquery removes the click event from the children
$('#second').children().each(function(){
$(this).click(function(e){
e.preventDefault();
});
});
Update: Further to your comments, what you are trying to do is complicated and kind of weird. You say for some reason you have to wrap the divs in an achor tag but not have them inherit the properties. You will have to make some trade-off. The trick is to remove the 'href' from the a tag. You would not have to write any jQuery/javascript for this. As a matter of fact you don't even need any CSS then. Essentially, remove all the css and jquery from the above and remove the href from the second a.
FIDDLE
You can use the :first-child Selector. Look at http://api.jquery.com/first-child-selector/
You can remove underline with CSS:
a div {
text-decoration: none
}
To stop anchor from following its href attribute you need to bind a handler to click event which returns false. In jQuery you can achieve it this way:
$('a div').on('click', function() {
// do whatever you want to do here
return false;
});
I edited selectors (added div) after you provided jsfiddle. Still, there is one more thing. According to your fiddle I assume you didn't want "Something" to be wrapped with div.
It should look like this: jsfiddle
You should add an eventlistener to your anchors and prevent the default behaviour:
document.getElementsByTagName("a")[0].addEventListener("click", function(e){
if(e.target.tagName=="DIV") e.preventDefault();
});
Related
I'm trying to add a CSS class on hover to an element using jQuery. However, the class should only be applied to the closest element with a specific class so I tried using .next
When I add the .next to my code though the class isn't added anymore (it works without that part of the code). This is the code:
$j('.products_overlay').hover(function(){
$j(this).next('.hover_text').addClass('overlay_text');
}, function(){
$j(this).next('.hover_text').removeClass('overlay_text');
});
Any idea what I'm doing wrong?
This is the HTML
<div class="products_overlay">
<a href="..." title="product1" class="product-image">
<img src="...." alt="product1" class="hover_test" />
</a>
<p class="hover_text">Test</p>
</div>
Should be
$j('.products_overlay .hoverText').addClass('overlay_text');
or
$j(this).find(".hoverText").addClass('overlay_text');
That's because next() doesn't look in the descendants, but in the next nodes.
Your problem is the next which only finds siblings
$j('.products_overlay').hover(function(){
$j(this).next('.hover_text').addClass('overlay_text');
}, function(){
$j(this).next('.hover_text').removeClass('overlay_text');
});
this in that case is the products_overlay div, so your .hover_text is a child and not a sibling.
To fix it use find:
$j('.products_overlay').hover(function(){
$j(this).find('> .hover_text').addClass('overlay_text');
}, function(){
$j(this).find('> .hover_text').removeClass('overlay_text');
});
Your jQuery code doesn't work as next() looks at siblings, yet .hover_text is a child of .products_overlay. As such you should use find(). You can also shorten the code using toggleClass():
$j(function($) {
$('.products_overlay').hover(function(){
$(this).find('.hover_text').toggleClass('overlay_text');
});
});
That being said, given your HTML you don't need to use jQuery at all. You can achieve what you need in CSS alone:
.products_overlay:hover p {
color: red; /* place the relevant hover styling in here */
}
<div class="products_overlay">
<a href="..." title="product1" class="product-image">
<img src="...." alt="product1" class="hover_test" />
</a>
<p class="hover_text">Test</p>
</div>
I have this div structure after clicking inside class "4u" i am calling one click event but dont know how to get data inside <p> tag.
HTML:
<div class="4u 12u(mobile)">
<section>
<header id="dynamicCampingDesc13">
<p>Loren ipsum</p>
</header>
</section>
</div>
Click event:
$(function() {
$(".image").click(function() {
alert($(this).attr('id'));
});
});
First thing, you cannot click on the <a> tag, because of its empty nature. You do not have a clickable area. But although, you can make it clickable by giving some padding or setting width and height through CSS.
Secondly, the way you need to get the contents of the <p> tag is:
$(function() {
$(".image").click(function() {
$(this).next("header").find("p").text();
});
});
Finally, the class naming. The class 4u 12u(mobile) I am not sure if this is valid. It would be better to change it to something like 4u 12u-mobile.
Given the following html for a type of blog post editor:
<div class="entry">
<div class="title" contenteditable="true">
<h2>Title goes here</h2>
</div>
<div class="content" contenteditable="true">
<p>content goes here</p>
</div>
</div>
I'm trying to use jquery to select the .title and .content divs to attach unique event handlers to each.
$('[contenteditable]').on(...);
works for both but
$('[contenteditable] .title').on(...);
or
$('.title').attr('contenteditable', 'true').on(...);
both don't work to select the specific contenteditable block.
You could use the attribute selector in CSS .title[contenteditable="true"].
jsFiddle example
.title[contenteditable="true"] {
background: red;
}
In jQuery: $('.title[contenteditable]').css("background","red")
jsFiddle example
For the first example you have to remove the space between the attribute selector and the class selector, as a space implies descendance.
$('[contenteditable].title').on("click", function(){
$(this).css('color', 'orange');
});
Example: http://jsfiddle.net/2Bsk4/
I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.
If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.
HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/
Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});
Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample
I have a div that contains four paragraph tags. When the page is loaded, I wanted to have the first two paragraphs to be shown then have the follow paragraph elements be hidden, but I have no idea how to do this. For simplicity I set the event to a button versus a document ready event in the jsfiddle example below.
http://jsfiddle.net/zTCFe/4/
<div id="div">
<p>1 keep me shown</p>
<p>2 keep me shown</p>
<p>3 hide me</p>
<p>4 hide me</p>
</div>
<input type="button" value="press" id="button"/>
<script>
$('#button').click(function () {
$('#div').children().hide();
});
</script>
You were almost there:
$('#div').children(':gt(1)').hide();
More on the :gt selector.
http://jsfiddle.net/gromer/Tdue6/1/
Use the :gt() selector to select them
As an alternative, you can also use .slice()
$('#div').children().slice(2).hide();
http://api.jquery.com/slice/
You can use the :gt() selector:
$("#div p:gt(1)").hide();
Or, you can also use .slice() to select specific elements from the jQuery object's DOM array:
$("#div p").slice(2).hide();
You could also just use CSS for this
li:nth-child(-1n+2) {
background: yellow;
}