I have a page with buttons that show/hide divs using slideUp() and slideDown(). Previously I was just using hide() and show() to display and hide these divs, but I really want to use the slide animations because it helps the user see what's changing on the page.
Here's the problem: Some of these divs exist within other divs that are also hidden at times, and it seems that when the parent div is hidden, slideUp() will not work on the child.
Here's a rough example:
$('#Abutton').unbind('click').click(function(){
$('.A').slideToggle(500);
});
$('#Cbutton').unbind('click').click(function(){
$('.C').slideToggle(500);
});
$('#Bbutton').unbind('click').click(function(){
$('.B').slideToggle(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<button id="Abutton">Toggle A</button>
<button id='Bbutton'>Toggle B</button>
<button id='Cbutton'>Toggle C</button>
<div class='context1'>
<div class="A">
<p>Parent</p>
<div class='C'>
<p> and child </p>
</div>
</div>
</div>
<div class='context2'>
<div class="B">
<p> something else </p>
</div>
</div>
In this example, if the user toggles OFF "A," then toggles OFF "C," C doesn't successfully hide because it's within a hidden parent - so when the user toggles A back on, C will be displayed even though the user just turned it off. It seems that it's not hiding successfully because the animation effect can't execute when it's invisible (?).
Again, when I replace the toggle functions with show() and hide(), it works just fine, but I really need the animating effect.
The only solution I could find was to use setTimeout to do the following after slideUp finishes...
$('.C').slideUp(500);
setTimeout(function(){ $('.C').hide() }, 500);
...but I was wondering if anyone out there knew of a simpler solution. Thanks in advance for any insight you might share!
EDIT: I realize this is a bit difficult to explain and I probably didn't do a very good job explaining myself; here's what I want to happen sequentially:
The user turns off A. In this one instance, A contains C, so both are hidden, but there may be other instances where C is not the child.
The user turns off C.
When A is turned back on, C is off.
maybe this:
$('#Abutton').click(function(){
if($('.A').is(':visible')){
if($('.C').is(':visible')){
$('.C').slideUp(500,function(){
$('.A').slideUp(500);
});
}else{
$('.A').slideUp(500);
}
}else{
$('.A').slideDown(500,function(){
$('.C').slideDown(500);
});
}
});
$('#Cbutton').click(function(){
if($('.A').is(':visible')){
$('.C').slideToggle(500);
}else{
$('.A').slideDown(500,function(){
$('.C').slideDown(500);
});
}
});
$('#Bbutton').click(function(){
$('.B').slideToggle(500);
});
div{
margin: 10px;
border-style:solid;
border-width:1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="Abutton">Toggle A</button>
<button id='Bbutton'>Toggle B</button>
<button id='Cbutton'>Toggle C</button>
<div class='context1'>
<div class="A">
<p>Parent</p>
<div class='C'>
<p> and child </p>
</div>
</div>
</div>
<div class='context2'>
<div class="B">
<p> something else </p>
</div>
</div>
There is callback function, that trigger when your animation is ended
var $c = $('.C');
$c.slideUp(500, function(){
$c.hide(
});
Related
I have 3 elements that show/hide their contents when clicked on.
What I am aiming for: Click on element 1, brings the entire div into view. If I then click on element 2, the second div is brought into view.
What happens currently: Click on element 1, brings the entire div into view. Scroll down a bit and click on element 2, it scrolls back up to display the entire first div instead of the second div.
I believe the issue is that I have .content as the parameter in the scrollTop function but I haven't been able to figure out what I should put in there to address the issue.
My jquery/javascript is here:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle(); //toggles the content
setTimeout(function(){
$('body').animate({scrollTop:$('.content').offset().top},200)
}, 200); //delay of 200 ms to let the entire slidetoggle animation finish, then scrolls to the top of the div
});
});
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Experience</h2>
</div>
<div class="content">
content goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Dogs</h2>
</div>
<div class="content">
contents goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Cats</h2>
</div>
<div class="content">
more content
</div>
</div>
</div>
</div>
The solution for me has been to use $("html,body") when animating scrollTop property. Some browsers do not play nicely with $("body") alone, although I have no proper explanation for this.
Second problem is you're referencing $(".content") in your timeout function. This animates scrollTop to the first occurrence of .content, not necessarily the clicked occurrence. But, we can do one better:
Third, and not a problem but a better way to handle, is to use the callback function of slideToggle: this function is code that gets executed only after slideToggle finishes. Do this rather than set a timeout. Timeout length is arbitrary, for example in a very old, very slow browser, 200ms may not be long enough duration to wait.
See the updates below:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle( function(){
$('body,html').animate({scrollTop: $(this).offset().top},200);
});
});
});
If you want to scroll to the top including the headline, simply grab the parent again and use its offset instead.
This line:
$('body,html').animate({scrollTop: $(this).offset().top},200);
becomes:
$('body,html').animate({scrollTop: $(this).parent().offset().top},200);
Example here: https://jsfiddle.net/nb0fvu3u/
Parent example here: https://jsfiddle.net/nb0fvu3u/1/
I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.
This is my code:
<div class="col-sm-9 col-md-10 message-list">
This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
<button type="button" class="button save sign_btn" data-action="save">Save</button>
</div>
</div>
and this is the js part:
$(document).ready(function() {
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('display','none');
$(".view-message").fadeIn('slow').css('display','block');
});
});
I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.
Use: height: 0; overflow: hidden;
instead of: display:none
It works for me.
Can you try setting visiblity hidden instead of display:none ?
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('visibility','hidden');
$(".view-message").fadeIn('slow').css('visibility','visible');
});
});
CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.
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%");
I have this JS code:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
which opens up a new window on click. What I want it to do next from that first click is go to another function. That function entails a scroller that has 5 divs in it. Say I want it to go to the third div or ID, how would I go about writing that type of function? So a HTML example would be:
<div id="this">
<div class="outer">
<div class="innerdiv">
<div class="1" id="1">1</div>
<div class="2" id="2">2</div>
<div class="3" id="3">3</div>
<div class="4" id="4">4</div>
<div class="5" id="5">5</div>
</div>
</div>
</div>
This would represent my scroller. So on that initial first click, the idea is that it would open up a new window and scroll to that 3rd div, or if scrolling to it is to difficult, then go to that first div. http://jsfiddle.net/qYTK4/
<div class="arrowbox">
<div style="display:inline-block; width:155px; height: 50px; float:left;"></div>
<div class="leftbox" id="leftbox"></div>
<div class="backtohome">BACK TO HOME PAGE</div>
<div class="rightbox" id="rightbox"></div>
Using window.scrollTo() and move it to the objects position. Retrieve the position (X,Y) of an HTML element
jQuery.ScrollTo is a great, simple plugin for smooth scrolling animations. It has tons of options for ways to define the scroll behavior and is pretty easy to use. There are a ton of demos and examples on the site linked you should be able to use. In yours you would just tell it to scroll to either the DOM element itself or jQuery object/selector for the 3rd div.
Also, you can't have id attributes start with numbers (like your divs), it's not valid. Classes can but not IDs.
It is also a good idea to rely on click event handlers (i.e. $('.backtohome a').on('click', function() { // your code });) rather than onclick attributes.
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.