So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?
slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.
As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you
$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".
Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle
Related
I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.
Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>
I have a 'div' tag( by id=go) and write a script which i click on div, then another div (by id=example) will be shown, and show some data:
this is my div :
<div id="go" style="position: relative">Click</div>
<div id="example" style="position: relative"></div>
and the script:
$("#go").click(function () {
$("#example").fadeIn(1200);
$("#count").text('');
setInterval(
function () {
p(); count();
}, 8000);
});
and i want when i click on div(by id= go) agin the div (with id=example) be hide , How can i improve my script to do it?
You can use fadeToggle() to toggle between fadeIn() and fadeOut() here:
$("#example").fadeToggle(1200);
Fiddle Demo
Did you try .toggle()?
Reference is at jQuery docs. AFAIK it does all you need - including animation.
Use .toggle(). Check this
$("#example").hide();
$("#go").click(function () {
$("#example").toggle('slow');
});
DEMO
I am creating a website where i want to display a div on hover of a button. Currently i am able to do this but it's not the desired effect. I have created a DEMO in jsfiddle to show what i have achieved and i will paste my HTML, jQuery and only the CSS which is pertaining to this question.
HTML
<div class="cart-btn" >CART
</div>
<div class="minicart" >
Items : 5
Total : $250
VIEW CART
</div>
jQuery
$(document).ready(function () {
$(".cart-btn").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
});
CSS
.minicart {
width:164px;
display: none;
background-color:#0A3151;
opacity:0.8;
position:absolute;
z-index:9999;
margin-left:450px;
margin-top:30px;
}
ISSUE: The desired effect i want is, "The div should slide from under the button" and dissapear in the same manner".
However my main concern is that the div should remain focused even when i hover over it. Currently it disappears as soon as i take my mouse away from the button. The div once displayed should remain displayed unless the user takes the mouse away either from the div or button.
A few things to note, when using absolute positioning use top instead of margin-top and so on.
Second to avoid the popup folding up when you leave the button use the following selector:
$(".cart-btn, .minicart").hover(
function () {
$(".minicart").slideDown(100);
}, function () {
$(".minicart").slideUp(2000);
});
Use slideDown and slideUp as BeNdErR sugested, here's an updated version of his fiddle
Wrap both button and div in another div. The use this div for hover-event.
<div id="cbutt">
<div class="cart-btn" >CART
</div>
<div class="minicart">Items : 5 Total : $250 VIEW CART
</div>
</div>
$(document).ready(function () {
$("#cbutt").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
})
Here is a fiddle:
http://jsfiddle.net/Ncj2E/
Hope this is what you wanted.
I have tried plenty of things and nothing appears to be working.
I am not sure if I am using .siblings() correctly so I had to remove it and made it simple without the actual thing that I want.
Currently I have made it to be as: fade currently selected/hovered div.
$('.recent_each').hover(function () {
$(this).stop().fadeTo(300, '.5')
}, function () {
$(this).stop().fadeTo(300, '1');
});
Can anyone tell me how I can set the opacity of '.5' to all of the siblings and have the currently hovered div on opacity of '1'
I am really confused. Here's html structure tho.
echo "
<div class=\"recent_each\">
<div class=\"recent_title\">
<a href=\"http://www.youtube.com/watch?v='{$info["yt_id"]}'\">
{$info["yt_name"]}
</a>
</div>
<div class=\"recent_thumbnail\">
<a href=\"http://www.youtube.com/watch?v='{$info["yt_id"]}'\">
<img src=\"{$info["thumb"]}\" alt=\"Recently Converted Thumbnail\">
</a>
</div>
</div>
";
As of CSS, there's no opacity at all set in there.
You can use .siblings:
$('.recent_each').hover(function () {
$(this).siblings('.recent_each').stop().fadeTo(300, '.5')
}, function () {
$(this).siblings('.recent_each').stop().fadeTo(300, '1');
});
Is it possible with js / jQuery to fade just the embedded image instead of the div in order to reveal the divs background image? I have multiple instances of the classes below and only want to affect change to the one's that are selected.
e.g:
.image {
width: 200px;
background-image: url(elements/pattern.png);
}
<div class="box">
<div class="image"><img src="pics/001.jpg"/></div>
<div class="project">Title</div>
</div>
$('.image').mouseover(function() { $(this img).stop().animate({opacity:.7}, 200); });
$('.image').mouseout(function() { $(this img).stop().animate({opacity:1}, 600); });
Also, is it possible to address specific classes within a div ?
e.g:
$('.image').mouseover(function() { $(**this .project**).css({color:'#FFF'}); });
$('.image').mouseout(function() { $(**this .project**).css({color:'#999'}); });
Thanks
....
SOLVED
Managed to get it to work by using find() as suggested and wrapping the image in an extra class. Now the image fades and .image's background pixel pattern blends through:
<div class="box">
<div class="image"><div class="p"><img src="pics/001.jpg"/></div></div>
<div class="project">Title</div>
</div>
$('.box').mouseover(function() {
$(this).find('.p').stop().animate({opacity:.3}, 200);
$(this).find('.project').css({color:'#FFF'});
});
$('.box').mouseout(function() {
$(this).find('.p').stop().animate({opacity:1}, 600);
$(this).find('.project').css({color:'#FFF'});
});
cheers!
Use jQuery's built in fade
$('.image').hover(function() { // on mouseover
$(this).stop().fadeTo(200, 0.7);
}, function(){ // on mouseout
$(this).stop().fadeTo(600, 1);
});
jQuery fadeTo()
Also to address specific items in a div you can use .find()
$('.box').mouseover(function(){
$(this).find('.image').animate({...}); // will animate .image when you hover .box
});
You can use next():
$('.image').mouseover(function() { $(this).next('.project').css({color:'#FFF'}); });
Try to look into the context attribute of the jQuery selector.
Basically:
$('.image').mouseover(function() { $('img',this).stop().animate({opacity:.7}, 200); });
This would select the img element inside the element where the mouseover is triggered.