Code as follows:
<div class="mama">
<div class="son">Item 1</div>
</div>
<div class="mama">
<div class="son">Item 2</div>
</div>
$(".mama").hover(
function() {
$(".son").show();
},
function() {
$(".son").hide();
}
);
Forward to help. Thanks!
If you're asking how to only hide the ".son" blocks inside each ".mama" block, then it'd be something like this:
$('.mama').each(function() {
var mama = $(this);
mama.hover(
function() { mama.find('.son').show(); },
function() { mama.find('.son').hide(); }
);
});
if all you're doing is showing or hiding content, you don't need jQuery. CSS already has this functionality
.mama .son {
display:none;
}
.mama:hover .son {
display:block;
}
Use the hover() event and just scope your actions to the relevant elements:
$("div.mama").hover(function() {
$(this).find("div.son").show();
}, function() {
$(this).find("div.son").hide();
});
There are many variations on how you can limit this to only children of the affected element.
Related
I would like to make one function that recognizes which instance of playimg is being clicked and which popup to fade in. I have like 5 of these and want to compact the code as much as possible.
How can I rewrite this into just one function?
$('#playimg2').click(function() {
$('#popup2').fadeIn('fast', function() {
// Animation complete.
});
});
$('#playimg3').click(function() {
$('#popup3').fadeIn('fast', function() {
// Animation complete.
});
});
$('#playimg4').click(function() {
$('#popup4').fadeIn('fast', function() {
// Animation complete.
});
});
you can use
$(document).ready(function(){
$('[id*="playimg"]').on('click',function(){
var thisNum = $(this).attr('id').match(/\d+/);
$('#popup'+thisNum).fadeIn('fast', function() {
// Animation complete.
});
});
});
JSFIDDLE
Seeing that all your playimg id's look the same. You can access all of them in the following example. Then all you need to do is retreive the last character of the id (the number) and add the animation to the corresponding element.
$('id^=playimg').click(function(){
var _id = $(this).attr('id');
$('#popup' + _id.subString(_id.length-1)).fadeIn('fast', function(){
//do stuff
});
});
Are those popups descendant (children) HTML elements of #playimg? If yes, you can name it with classes instead of ids like this:
<div class="playimg">
<div class="popup"></div>
</div>
and now javascript:
$( '.playimg').click(function() {
$(this).find('popup').fadeIn('fast', function() {
// Animation complete
});
});
You could do this by simply using classes and getting the index of the clicked element and using that to affect it's partner element like this:
$('.playimg').click(function() {
var cur = $('.playimg').index($(this));
$('.popup').fadeOut('fast');
$('.popup').eq(cur).fadeIn('fast', function() {
// Animation complete.
});
});
.playimg{
width: 100px;
height:20px;
}
.popup{
width: 100px;
height:100px;
display:none;
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playimg"> playimg 1</div><br>
<div class="popup">popup 1</div><br>
<div class="playimg"> playimg 2</div><br>
<div class="popup">popup 2</div><br>
<div class="playimg"> playimg 3</div><br>
<div class="popup">popup3</div><br>
Below, I demonstrate how you can trigger the click event on all of your target elements.
You also need some way to get the number from the string id's (i.e. playimg2, playimg15, playimg232). You can use a regex with capturing groups via something like /([a-z]+)([0-9]+)/. This regex should work based off the format of your id strings.
Try this:
var splitRegex = /([a-z]+)([0-9]+)/;
$('#playimg2, #playimg3, #playimg4').click(function () {
$('#popup' + this.id.match(splitRegex).pop()).fadeIn('fast', function () {
// Animation complete.
});
});
You may also consider creating a common class for your id's instead.
$('.some-class').click(function () {
$('#popup' + this.id.match(splitRegex).pop()).fadeIn('fast', function () {
// Animation complete.
});
});
Hello I have the following 2 JavaScript functions to open up a div and to close it.
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
}
</script>
<script>
function close() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
</script>
Here is the html:
<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
some input in here plus the close button
<div id="upbutton"><a onclick=close()></a></div>
</div>
For some reason the show function works how it should, but the close button does not do its job. So if there is someone who could help me out I really would appreciate. Thanks a lot.
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<div id="opener">click here</div>
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="return hide();">click here</a></div>
</div>
I usually do this with classes, that seems to force the browsers to reassess all the styling.
.hiddendiv {display:none;}
.visiblediv {display:block;}
then use;
<script>
function show() {
document.getElementById('benefits').className='visiblediv';
}
function close() {
document.getElementById('benefits').className='hiddendiv';
}
</script>
Note the casing of "className" that trips me up a lot
The beauty of jQuery would allow us to do the following:
$(function()
{
var benefits = $('#benefits');
// this is the show function
$('a[name=1]').click(function()
{
benefits.show();
});
// this is the hide function
$('a', benefits).click(function()
{
benefits.hide();
});
});
Alternatively you could have 1 button toggle the display, like this:
$(function()
{
// this is the show and hide function, all in 1!
$('a[name=1]').click(function()
{
$('#benefits').toggle();
});
});
You need the link inside to be clickable, meaning it needs a href with some content, and also, close() is a built-in function of window, so you need to change the name of the function to avoid a conflict.
<div id="upbutton">click to close</div>
Also if you want a real "button" instead of a link, you should use <input type="button"/> or <button/>.
check this:
click here
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="close(); return false;"></a></div>
</div>
Rename the closing function as 'hide', for example and it will work.
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
Close appears to be a reserved word of some sort (Possibly referring to window.close). Changing it to something else appears to resolve the issue.
http://jsfiddle.net/c7gdL/1/
You can zip the two with something like this [like jQuery does]:
function toggleMyDiv() {
if (document.getElementById("myDiv").style.display=="block"){
document.getElementById("myDiv").style.display="none"
}
else{
document.getElementById("myDiv").style.display="block";
}
}
..and use the same function in the two buttons - or generally in the page for both functions.
I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!
Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});
The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.
You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following:
The site is hostingcouponsclub.com. I want to add a text tip "Click to copy & open site" effect to the yellow coupon code, which is near the scissors. But the tooltip is not working when I put this code to my local environment. It's ok. I think maybe there is a conflict with the "Click to copy & open site" JavaScript. How do I correct it? Thank you. This is the tooltip code:
$(document).ready(function() {
$(".coupon-code").hover(
function() { $(this).contents(".coupontooltip").show(); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);
});
Your HTML Markup in the site is,
<div rel="http://www.godaddy.com/" class="coupon-code hover">
BNX5246Lmg
<span class="coupontooltip" style="display: none;">Click to copy & open site</span>
</div>
<div rel="http://www.godaddy.com/" class="coupon-code hover">
BNX5246Lmg2
<span class="coupontooltip" style="display: none;">Click to copy & open site2</span>
</div>
Made these changes.
Took away display: none; from the coupontooltip css class
Change toolTipHover.js like this:
$(document).ready(function () {
$(".coupon-code").hover(
function () { $(this).find(".coupontooltip").show(); },
function () { $(this).find(".coupontooltip").hide(); }
);
});
Click here to see it working
.contents() doesn't work like that at all. Are you looking for $(".coupontooltip", this) and $("span:last-child", this) ?
Try using:
function() { $(this).find('.coupontooltip').show(); },
function() { $(this).find('span:last-child').css("display", "none"); }
as the arguments to the hover bind.
Try using
$(document).ready(function() {
$(".coupon-code").hover(
function() { $(this).children(".coupontooltip").show(); },
function() { $(this).children("span:last-child").css({ display: "none" }); }
);
});
The contents() and children() are same except that the former will get the text and comments nodes as well.
I have several nested div elements like this:
<div class="main">
blah blah blah <div class="clickme">clickme</div>
</div>
<div class="main">
bleh bleh bleh <div class="clickme">clickme</div>
</div>
<div class="main">
blih blih blih <div class="clickme">clickme</div>
</div>
I want to fire a toggle event that will show/hide the div marked with the class "main" by clicking on the corresponding clickme text inside its child div tag with "clickme" class. Sorry, I can't figure out how to do this. Thanks.
$(".clickme").click(function() {
$(this).parent("div.main").toggle();
});
In regards to your second problem, you need to add:
$(this).unbind('click');
At the end of either of your toggle functions, and it will work as you intend. Good luck.
EDIT: in response to your latest problem, this should do it:
$(".abrefecha").click( function() {
var that = this; // save this in that :)
jQuery(this).parent().toggle(
function () {
var itemId = jQuery(this).attr("id");
var itemIndex = $(".showhide").index(this);
var currentItemHeight = b[itemIndex] + 30 + 'px'
jQuery(this).css("overflow","auto");
jQuery(this).animate( { height: currentItemHeight } , 500 );
$(that).html('close'); // change html inside pink to 'close'
$(this).unbind('click');
},
function () {
jQuery(this).css("overflow","hidden")
jQuery(this).animate( { height:"60px" } , 500 );
$(that).html('abrefecha'); // change html back to 'abrefecha'
$(this).unbind('click');
}
);
});