I want to trigger the click on a tag which has div with id='a'.
$(document).ready(function() {
$("#chat_list_content a:has(div[id='a'])").click();
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$('#chat_list_content a').click(function() {
alert('you are here');
})
})
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Click should happen automatically and output alert box. But, there is no respond from the code.
Thanks in advance.
When you call $("#chat_list_content a:has(div[id='a'])").click(), the custom click handler is not yet described yet. That means it doesn't do anything. You just need to move the click trigger below the click function definition:
$(document).ready(function() {
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$("#chat_list_content a").click(function() {
alert("you are here");
});
// Make sure to add this after the click handler definition above
$("#chat_list_content a:has(div[id='a'])").click();
});
working sandbox: https://codesandbox.io/s/exciting-gagarin-t55er
There is no need to use :has() here at all, you can simply use Attribute Equals Selector [name="value"] to achieve what you are looking for.
$(document).ready(function(){
$('#chat_list_content a').click(function(){
alert('you are here at '+ $(this).index());
});
$('#chat_list_content a div[id=a]').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Related
I have two div elements:
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts" >
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep"/>
</a>
</div>
<div class="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander">
</div>
I want to get the href from my contact-sm class and replace the href of my contact-img class with Xing link. So if I click on the contact-img, the Xing Page of this person should open in a new window.
Thanks for your help
The best way would be to change your HTML. But if you "need" to have it the way you described then check this jQuery snippet:
($(function(){
$('.contact-img > a').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('.contact-sm > a')[0].click();
})
}))(jQuery);
The below code snippet will help you.
$(document).ready(function(){
$('.contact-img a').click(function(){
$(this).attr('href', $('.contact-sm a').attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts" >
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep"/>
</a>
</div>
<div class ="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander">
</div>
$(function() {
var xingHref = $(".contact-sm > a").attr("href");
$(".contact-img > a").attr("href", xingHref);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts">
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep" />
</a>
</div>
<div class="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander" />
</div>
In case above this should do:
var desiredHref = $('.contact-sm a').attr('href');
$('.evcms-open-contacts').attr('href', desiredHref);
This can be written in one line, of course, but for the sake of answer.
$(document).ready(function() {
$("#main1").attr("enter code herehref" , "https://www.xing.com/profile/FfAlexander");
});
I've got a following html structure:
<a class='support'>Podpořit</a>
<div class='fa'>
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'></a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'></a>
</div>
And this is my javascript code:
$(".support").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).hide();
});
$(".support").mouseleave(function() {
$(this).show();
$(this).next().hide();
});
I want to show the .fa div on .support hover and if I leave the area, I want to show .support back again. How can I do it? Now it's blinking :-(
Wrap it in a div and do like this,
$(".containerDiv").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).find(".support").hide();
});
$(".containerDiv").mouseleave(function() {
$(this).find(".support").show();
$(this).next().hide();
});
In your code your are hiding the element itself which in turn cause the mouse leave event to trigger.
Fiddle
$(function() {
$(".support").mouseover(function() {
$(this).children("div").show();
$(this).children("a").hide();
});
$(".support").mouseleave(function() {
$(this).children("div.fa").hide();
$(this).children("a").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="support">
<a>Podpořit</a>
<div class='fa' style="display:none">
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'>Random content</a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'>Random content</a>
</div>
</div>
I added a container because you can't put a mouseleave event on an element you are hiding, because it will trigger as fast as it hides.
For a new webdesign I have two 50% width slider div's as a menu, and I want to add/remove/toggle the 'open' class with jQuery. On the click of one of the .menul, the #left should have added class .open, unless #right:hover and the other way around. The first time you click it it works, but the second time you click it seems to be that the toggleClass is stuck / not updated... Does anyone know how to fix this?
Here's my HTML:
<div id='home'>
<div class='slide' id='left'>
<div class='wrap'>
<div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a><br/>
<div class='subtext'>
<a class='menul' href='#artist'>Performing artist</a><br/>
<a class='menul' href='#composer' id='one'>Media Composer</a><br/>
<a class='menul' href='#producer' id='two'>Band Producer</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logol'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
<div class='slide' id='right'>
<div class='wrap'>
<div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a><br/>
<div class='subtext'>
<a class='menur' href='#management'>Content Management</a><br/>
<a class='menur' href='#portfolio' id='one'>Design Portfolio</a><br/>
<a class='menur' href='#engines' id='two'>Search Engines</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logor'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
</div>
And here's my jQuery:
$('.menul').click(function(){
$('#left').addClass('open');
$('#right').removeClass('open');
$('#right').hover(function(){$('#left').toggleClass('open')});
});
$('.menur').click(function(){
$('#right').addClass('open');
$('#left').removeClass('open');
$('#left').hover(function(){$('#right').toggleClass('open')});
});
And here's the fiddle: http://jsfiddle.net/ytexqtyg/2/
Any help would be very much appreciated!
I had another look and you will have to add another class or data attribute to differentiate between an active-and-closed menu and a active-and-open menu or this won't work.
The active "flag" is to ensure you only toggle the .open class on an active menu.
In addition you also need to keep unbinding the hover event as otherwise you are constantly re-binding the hover, causing the element to have multiple hover events bound which then will all execute and contradict each other.
Note that when unbinding the hover event using jQuery off('hover')/unbind('hover') doesn't work and you must unbind the mouseenter and mouseleave events as those are bound by jQuery when using selector.hover(...)
The new JavaScript code is as follows:
$('.menul').click(function () {
$('#left').addClass('active');
$('#left').addClass('open');
$('#right').removeClass('active');
$('#right').off('mouseenter mouseleave').hover(function(){
if($('#left').hasClass('active')){
$('#left').toggleClass('open');
}
});
});
$('.menur').click(function () {
$('#right').addClass('active');
$('#right').addClass('open');
$('#left').removeClass('active');
$('#left').off('mouseenter mouseleave').hover(function(){
if($('#right').hasClass('active')){
$('#right').toggleClass('open');
}
});
});
DEMO - Using a separate indicator for an active menu
I have serval link buttons in order to show a div below it.
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
I want to clink one linkbutton and only show the div element below it. but my js code:
function showComment(){
var isshow=$(this).attr('isshow');
if(isshow=="0"){
this.$(".comment").show();
$(this).attr('isshow',"1");
}
else{
this.$(".comment").hide();
$(this).attr("isshow","0");
}
}
this show all div. and when i use $(this).siblings() or $(this).next(), i got null, i don't know why that not work.
What can i do?
this is not pointing to the element if you run it in an inline event. Try the following:
onclick="showComment(this)"
And:
function showComment(el) {
var isshow=$(el).attr('isshow');
if(isshow=="0"){
$(el).next(".comment").show();
$(el).attr('isshow',"1");
}
else{
$(el).next(".comment").hide();
$(el).attr("isshow","0");
}
}
Or if you use jQuery's click, you can use this to point to the element:
$('.btnComment').click(function(event) {
var isshow=$(this).attr('isshow');
if(isshow=="0"){
$(this).next(".comment").show();
$(this).attr('isshow',"1");
}
else{
$(this).next(".comment").hide();
$(this).attr("isshow","0");
}
});
You should wrap your <a> and <div> inside another <div> to create a more maintainable code. Like this:
<div class="commentContainer">
<a class="btnComment" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<div>
This parent div serves as the context for your tags. In the future, if you change the position, move <a> after <div>, your code still works fine. And it's even possible for you to to styling as a group just by assigning a class to the container.
Your jquery, here I use jquery event handler instead.
$(".btnComment").click(function () {
var isshow = $(this).attr('isshow');
var parent = $(this).closest(".commentContainer");
if (isshow == "0") {
parent.find(".comment").show();
$(this).attr('isshow', "1");
} else {
parent.find(".comment").hide();
$(this).attr("isshow", "0");
}
}
If you use .next(), it means your code is coupled to the current html.
css
.hide{visibility:hidden;}
.show{visibility:visible;}
jquery
$('.btnComment').click(function(){
$('.btnComment + div').removeClass('show').addClass('hide');
$(this).next().removeClass('hide').addClass('show'); });
html
<a class="btnComment" href="javascript:;"
sshow='0'>click1</a> < div
class="hide">sandy1</div> <a class="btnComment"
href="javascript:;" isshow='0'>click2</a> <div
class="hide">sandy2</div> <a class="btnComment"
href="javascript:;" isshow='0'>click3</a> <div
class="hide">sandy3</div>
On every click of anchor tag respective div will be shown and others will be hidden.
Hope this will help you.
I am using the javascript function for multiple hide show divs in custom tumblr theme.. my The problem is as the class name is same, if i click on a single div, by default all the div gets show or hide.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(".toparea3").slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>
<div class="toparea3" style="display:none;">
<div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
<div class="share-bar-buttons">
<div class="share-bar-facebook">
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&layout=button_count&show_faces=false&width=110&action=like&font=lucida+grande&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>
<div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="{Permalink}"
{block:Twitter}data-via="{TwitterUsername}"{/block:Twitter}
data-related="stylehatch:Premium Tumblr Themes by #newezra"></a>
</div>
<div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
<div class="linktumb">
http://www.tumblr.com/xdrs2sf
</div>
</div>
</div>
</div>
Assuming you have multiple "toggleme" buttons, if they're all in the format where you have a toggleme button and then a toparea3, you could do something like this:
$('.toggleme').click(function(){
$(this).next().slideToggle('slow');
return false;
});
The "next" function gets the next element in the DOM, which is the element you want to expand.
Edit: (nevermind the .children)
try using the .closest selector, or the .next selector someone else suggested. Just remember to provide the selector .toparea3 to make sure that only that class opens, not just any closest/next element.
$(document).ready(function() {
$(".toggleme").click(function () {
$(this).closest(".toparea3").slideToggle("slow");
return false;
});
});
I would recommend the following:
Place the 'a' and the corresponding 'div' in a parent 'div'. Something like this:
<div>
<a class='toggleMe' />
<div class='toparea3 />
</div>
Then you can update your inner selector to be:
$('.toggleMe').click(function(evt){
evt.preventDefault();
var parent = $(this).closest('div');
$(".toparea3", parent).slideToggle("slow");
}
My Recommendation is to give the div an id, and make the anchor element's href point to it:
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(this.hash).slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>
<div id="toparea3_1" class="toparea3" style="display:none;"></div>
This since the hash is given in the form #toparea3_1 that is a valid jQuery selector that selects on ID, and can be used directly.