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.
Related
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>
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 have a overlay page where I have one parent div and children div like this
<div id="completeBlock" style="display:block">
<div id="id1" style="display:block">
This is div one
</div>
<div id="id2" style="display:none">
This is div two
</div>
<div id="id3" style="display:none">
This is div three
</div>
</div>
and separate links to show the divs
<a onclick=doChangeDiv(id1)>link one</a>
<a onclick=doChangeDiv(id2)>link two</a>
<a onclick=doChangeDiv(id3)>link three</a>
My aim is to show one div at a time and make others none.It works fine in all browsers but in firefox
it works for the very first time I open the page.If I close the page and open it again,
the hidden divs cannot be made visible and I got an error "TypeError: can't access dead object"
My jquery script is
function doChangeDiv(fromId){
$('#completeBlock').children().each(function() {
if($(this).css('display') != 'none')
{
var hideId = '#'+$(this).attr('id');
$(hideId).hide();
}
});
$(fromId).attr('display','block');
$(fromId).show();
}
Please help me to sort out this problem.
See this : http://jsfiddle.net/uD9mU/1/
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var fromId = $(this).attr("data");
//alert(fromId);
$('#completeBlock').children().hide().filter('#'+fromId).fadeIn('slow');
});
});
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.
If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?
Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.
Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.
look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});
Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);