Align slideToggle boxes to bottom of parent div - javascript

I have the follwing so far: jsFiddle
Just a small script that pops out list elements
$(function() {
$("li.content").hide();
$("ul.nav").delegate("li.toggle", "click", function() {
$(this).next().slideToggle("fast").siblings(".content").slideUp("fast");
});
});
I am trying to figure out how I can align the box that slides out when you click "about" to the bottom of the outer div as it is with the "contact" box. Contact should also stay pinned to the bottom as well.
Can I achieve this without having to modify the javascript purely by changing the css, or do I have to make different toggle functions for both boxes?
Thank you all, much appreciated.

All you have to do is add this to your .content.
jsFiddle
.content {
position: absolute;
bottom: 0;
}

Related

Prevent background scroll & Jumping to top on mobile

On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body

Hiding a <div> and showing a new one in the same spot?

Lets say I have 2 divs, one is hidden, the other is showing. When a button is clicked, I want to use the jQuery fade effect to fade out one div and fade in the hidden div.
So -
<div id="part1">Hello</div>
<div id="part2" style="display: none">Hello2!</div>
<button id="btn1">Click here!</button>
and the JS -
$("#btn1").on("click", function(){
$("#part1").fadeToggle();
$("#part2").fadeToggle();
});
Now, this works, but as you can imagine what happens is that it first hides the 1st div, then shows the second div, and then immediately takes the second div up to the place where the previous div was located.
What can I do about this? I want them to stay in the same position (something like they have here http://kenwheeler.github.io/slick/ in their fade demo.)
Thanks!
You can do it with jQuery. Fade out the first div and fade in the second one in the callback. Like this: http://jsfiddle.net/D2Cw9/
$(".one").fadeOut(500, function() {
$(".two").fadeIn(500, function() {
});
});
One solution would be using absolute positioning on both divs relative to their container.
#parts-container {
position: relative;
}
#part1, #part2 {
position: absolute;
left: 0;
top: 0;
}
Use css position absolute to set them to the same position.
At the time of writing, you have 4 answers that all seem to be correct solutions using CSS positioning. I noticed you have jQuery as a tag, so I thought I'd offer up a different solution.
Have you thought about not actually hiding the div, and replacing it with the other? For example, you could change the CSS class of the div with jQuery:
$('#part1').fadeOut(300, function() {
$('#part1').addClass('part2');
$('#part1').innerHTML('Hello2!');
$('#part1').fadeIn(300, function(){});
});
Of course you should use a synchronous fade to make sure the class change happens while the div is hidden.
It seems that a lot of people answered this question correctly. I would like to add that you can also keep the div and just set the css opacity to 0 using the jQuery UI color animation.
I believe this is yet another option.
Try adding position absolute to both of them and wrapping them in a relative div

jquery slide effect, hide one div and show another

I have this JSFIDDLE setup demonstrating my problem, I'm sure that it's a simple fix.
I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?
code:
$("#slide2").on('click', function(){
$( "#blueDiv" ).effect( "slide", hideoptions, 1000);
$( "#redDiv" ).effect( "slide", showoptions, 1000);
});
You can use position: absolute to take them out of the flow and place them beside each other:
div > div
{
position: absolute;
}
If you want to make it more specific to this div, you can use a specific selector:
#contentWrapper div
{
position: absolute;
}
JSFiddle
http://jsfiddle.net/ggfA6/12
position: absolute
Both elements need to be absolutely positioned so that they don't occupy space in the flow.

Slide in/slide out header div / reveal partially hidden div

I would appreciate some help and insight on a solution to this problem. I am developing a website with a header div of initial visible height of 180px. The header div is 340px in total height. When a user clicks on a link, I am needing the header div to slide down to reveal the rest (top) of itself. So, mathematically speaking, when a user loads the page, the bottom 180px of the 340px header div will be displayed. When they click the link, the rest of the div slides down to reveal its top 160px. When a user clicks the same link, the header div slides back up so only the bottom 180px is displayed again.
I have tried getting this to work, but am not sure what I am doing wrong. My initial thinking was to use slideToggle() (hide/show), but I can't seem to get that to work. Others on StackOverflow suggest animate(), but I don't know how to get that to work either.
I have searched on StackOverflow and seem to find a lot of questions regarding showing and hiding an entire div, but the problem is this completely shows and hides the divs. I am needing my div to slide down to reveal the top hidden portion and then slide back up to it's original resting position (-160px offscreen).
Any help would greatly be appreciated! I have included my starter code below:
HTML:
<div id="header">
Click me to reveal the top half of this div
</div>
JQuery:
$(document).ready(function(){
$('.toggle').click(function(){
$('#header').slideToggle("slow");
return false;
});
});
CSS:
#header {
position: fixed; /*I would like this div to always be fixed to the top of the browser window*/
top: 160px;
left: 0;
width: 100%;
height: 340px;
z-index: 10;
}
Try this JSFiddle, please.
http://jsfiddle.net/WFxLJ/3/

jQuery: hide div on hover, stay visible on click

I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.
When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.
When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).
I thought this would be straightforward, but I can't get it to work.
with a little knowledge of your html, here's how I got it.
html
button
<div class="mydiv">some text in it.</div>
jQuery
$('.mydiv').addClass('hover').click(function(){
$(this).addClass('hover').fadeOut();
});
$('a.mybutton').click(function() {
$('.mydiv').toggleClass('hover').show();
// $('.mydiv').removeClass('hover').show();
}).hover(function() {
$('.mydiv.hover').fadeIn();
}, function() {
$('.mydiv.hover').fadeOut();
});
Crazy demo

Categories

Resources