This is roughly my setup:
<div class="wrapper">
<div class="first">
<a class="button" href="">click</a>
</div>
<div class="second">
<div class="third">
Stuff
<div>
</div>
</div>
Ok, so what I want to is this: when you click the a tag, the .third div should animate.
What I have so far is this:
button.click ->
third.animate
left: '+=100%'
The problem is, I have multiple of these wrappers on one page. So when I click the button, every '.third' div on the page animates. How can I select the right one and only that one?
Thanks!
Try this:
$('a').click(function(){
var third = $(this).closest('.wrapper').find('.third');
//use third variable to animate
});
You can use closest or parents.
If you want only one div to animate, assign an id to the div and animate only that one by$("#third").animate("left", "100%");
Related
my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});
Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});
usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.
Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.
I have a two div with two id :
<div id="somediv">
many Content
</div>
<div id="result></div>
i want to make something like that :
$("#somediv").bind("mouseleave",function(){
$('#result').fadeOut();
});
$("#result").bind("mouseleave",function(){
$('#result').fadeOut();
});
But i don't want that result dissapears if if move my mouse on the
other div.
Is there a way to say : hide a div, when mouseout two divs, but not if
you are hover one or another ?
The divs are not exactly superposed in the page.
But They've got a common area.
Any ideas?
Try:
$("#somediv,#result").mouseenter(function(){
$('#result').stop().fadeOut();
}).mouseleave(function(){
$('#result').stop().fadeIn();
});
Another thing you can do is wrap both divs by another div such as:
<div id="container">
<div id="somediv">
Many Content
</div>
<div id="result"></div>
</div>
and set the event on the parent:
$('#container').mouseenter(function(){
$('#result').stop().fadeIn();
}).mouseleave(function(){
$('#result').stop().fadeOut();
});
I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.
.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/
try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.
I have a div within a div. On page load, they should both be hidden, then when I trigger the slideDown() function on the outer div, I want the inner div to remain hidden. How can I achieve this?
<script>
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body').slideDown();
});
});
</script>
<div class="wrapper">
<a class="display" href="#">Display Outer</a>
<div class="body">
Now displaying outer div
<div class="wrapper">
<a class="display" href="#">Display Inner</a>
<div class="body">
Now displaying inner div
</div>
</div>
</div>
</div>
Here is an example of it not working: http://jsfiddle.net/b7Tpt/
The reason it doesn't work is the use of find. find would traverse all levels to find the matches while the children would travel single level. So use find('.body:first') or children('.body')
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body:first').slideDown();
});
});
Updated Example
OR
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').children('.body').slideDown();
});
});
Updated Example
Try -
$('.display').click(function(){
$(this).siblings('.body').slideDown();
});
I think $(this).closest('.wrapper') was moving up the DOM tree and finding the top most wrapper div then opening all the body classes it found underneath. Using siblings should get the element with a body class that is directly beneath the clicked link.
Demo - http://jsfiddle.net/pMgVj/1/
try this: http://jsfiddle.net/Kf6gk/
So I have several containers with this markup on a page:
<div class="box w400">
<div class="box-header">
<span class="expand-collapse">expand/collapse</span>
<h3>Heading</h3>
</div>
<div class="box-content">
<p>Some content here...</p>
</div>
</div>
And I am trying to achieve that after clicking on the .expand-collapse span, the .box-content div will slide up or down (toggle).
Here is the jQuery I'm using, I am trying to achieve this with closest():
$(document).ready(function() {
$('.expand-collapse').click(function() {
$(this).closest('.box-content').slideToggle('slow');
});
});
But it is not working for some reason :(
Try this:
$(document).ready(function() {
$('.expand-collapse').click(function() {
$(this).parent().next('.box-content').slideToggle('slow');
});
});
That selects the next sibling of the parent div, it does not make use of closest.
closest() finds the closes parent element. In your case, the span doesn't have any parent elements with class .box-content. why not just do $('.box-content').slideToggle('slow'); ??
edit: i missed the part where you have several of these on a page. the parent().next should work.