Sliding a <div> from the bottom - javascript

I am trying to create a keypad which can slide up from the bottom using the jQuery animate. The keypad will be first hidden at the bottom of the page, and it will slide up only when I press the button. Below is the code:
$("#keypad-toggle").click(function(e) {
e.preventDefault();
if ($("#qnumbers").hasClass("toggled")) {
$("#qnumbers").animate({
"height": "390px"
}).removeClass("toggled");
$("#num").css("display", "none");
} else {
$("#qnumbers").animate({
"height": "250px"
}).addClass("toggled");
$("#num").css("display", "inline");
}
});
#qnumbers {
background-color: #3C4050;
height: 390px;
overflow: auto;
}
#keypad {
height: 30px;
background-color: springgreen;
text-align: center;
}
#numpad {
background-color: springgreen;
}
#screen {
border: 2px solid black;
height: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="qnumbers" class="container-fluid">
<div id="servenumber"></div>
</div>
<div id="keypad" class="container-fluid"><span class="glyphicon glyphicon-th"></span> Number Pad
</div>
<div id="numpad" class="container-fluid">
<div id="num" style="display:none;">
<div id="screen">1234567890</div>
</div>
</div>
JSFIDDLE
However, I have found out that there is something not right with the keypad when it slides down. My keypad will disappear first and it's background will become white before the sliding down animation occurs. What do I have to change so that the keypad will not disappear when sliding down?

$("#num").css("display", "none");
This code runs while animating. To run codes after animation done, you can attach callback function like this.
$("#qnumbers").animate({"height": "390px"},function(){
$("#num").css("display", "none");
}).removeClass("toggled");

Please see my fiddle here.
I edited your open toggle code so that it will show after the toggle using a callback on the animation:
if ($("#qnumbers").hasClass("toggled")) {
$("#qnumbers").animate({
"height": "390px"
}, function() { /* added callback for animation */
$("#num").hide();
}).removeClass("toggled");
}

you could adjust the height of the numpad element instead of hiding its contents, this way your keypad will slide in and out smoothly. also you would like to set the box sizing of your "screen" to border-box if you plan on having the border fully visible without too many height adjustments:
$("#keypad-toggle").click(function(e) {
e.preventDefault();
if ($("#qnumbers").hasClass("toggled")) {
$("#qnumbers").animate({
"height": "390px"
}).removeClass("toggled");
$("#numpad").animate({
"height": "0"
});
} else {
$("#qnumbers").animate({
"height": "250px"
}).addClass("toggled");
$("#numpad").animate({
"height": "140px"
});
}
});
#qnumbers {
background-color: #3C4050;
height: 390px;
overflow: auto;
}
#keypad {
height: 30px;
background-color: springgreen;
text-align: center;
}
#numpad {
background-color: springgreen;
overflow: hidden;
height: 0;
}
#screen {
border: 2px solid black;
height: 140px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="qnumbers" class="container-fluid">
<div id="servenumber"></div>
</div>
<div id="keypad" class="container-fluid"><span class="glyphicon glyphicon-th"></span> Number Pad
</div>
<div id="numpad" class="container-fluid">
<div id="num">
<div id="screen">1234567890</div>
</div>
</div>
here is a fixed Fiddle

Related

Scroll to bottom of hidden div?

I have a simple chat JS application, with a div.chat-holder holding all chat messages within a pane on the overall window. I set height of '.chat-holder so it remains fixed in size, and allows for scrolling of all the messages.
<style>
.chat-holder {
height: 30px;
overflow-y: scroll;
}
</style>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">
first msg
</div>
<div class="chat-item">
second msg
</div>
....
<div class="chat-item">
last msg
</div>
</div>
</div>
On page load, I scroll to the bottom by setting the scrollTop of the holder:
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
and this works fine.
Problem occurs when I start with div.pane set to display:none. Ideally, I look to have a separate event to "show/hide" the chat pane, and start with the pane hidden.
When the parent pane is hidden, the .chat-holder scrollHeight is 0, so on load, the hidden pane won't be scrolled to the bottom. Which means when the pane is displayed, the chats are not scrolled to the most recent chats. You can see this in the following snippet: with .pane initially not displayed, scroll isn't set. If you set .pane to start displayed, then scroll works fine.
Is there anyway to "scroll to the bottom" while parent is hidden? (Yes, I know I could do this by detecting when the chat-holder is exposed & then scroll to the bottom, but I'm looking to do it on load.)
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
display: none;
}
.pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>
You can get creative and use opacity or visibility rules instead of display: none:
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
opacity: 0;
position: absolute;
z-index: 1;
}
.pane.active {
opacity: 1;
position: relative;
}
button {
z-index: 2;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>

How can I keep hover during scrolling or how detect NOT scrolling

I have huge green div blocks (with screen height). When I hover one of them- it change it's color to yellow and the image in the block 'slidesup'. When i scroll- the block's color roll back to green (and the image 'slidesdouwn)', and after stopping the scroll- the block becomes yeallow again (and image 'slidesup' again). How can i keep div block hovered, during my scroll?
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<style>
.news-block {
width: 33%;
color: green;
height: 700px;
}
</style>
<script>
$(".news-block").hover(
function () {
$(this).css({color: 'yellow'});
$(this).find('img').slideUp(180, function() {});
},
function () {
$(this).css({color: 'green'});
$(this).find('img').slideDown(180, function() {});
}
);
</script>
ADDED. Or may be i can unhover only when an user doesnt scroll? How can i detect NOT scrolling?
$(".news-block").on('mouseover',
function () {
$(this).find('.event-info').stop().hide().css({opacity: 0});
$(this).find('.picture-block').stop().slideUp(180, function() {
$(this).find('.news-text').stop().show().animate({opacity: 1}, 500);
$(this).find('#voting-block').stop().show().animate({opacity: 1}, 500);
});
}
);
$(".news-block").on('mouseout',
function () {
--------------if not scrooll do the next ---------------
$(this).find('.event-info').stop().hide().css({opacity: 0});
$(this).find('.picture-block').stop().slideUp(180, function() {
$(this).find('.news-text').stop().show().animate({opacity: 1}, 500);
$(this).find('#voting-block').stop().show().animate({opacity: 1}, 500);
});
}
);
You can use CSS hover, which will work during scroll as well, and can slide down an image.
.news-block {
position: relative;
width: 300px;
background: green;
height: 700px;
overflow: hidden;
}
.news-block img {
position: absolute;
top: -120px;
transition: top 1s;
}
.news-block:hover {
background: yellow;
}
.news-block:hover img {
top: 20px;
transition: top 1s;
}
<div class="news-block">
<img src="http://lorempizza.com/200/120" alt="pizza">
</div>
<div class="news-block">
<img src="http://lorempizza.com/200/120" alt="pizza">
</div>
<div class="news-block">
<img src="http://lorempizza.com/200/120" alt="pizza">
</div>

JQuery Hide/Show on Scroll down

I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!
If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>
You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});
I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.

Horizontal slide banner design & functionality

I need to show the vertical banner which will slide out horizontally from the right of the screen once user click the open button/div and should be able to close the same. Base design is show in the sample image below
I have set up fiddle for the same http://codepen.io/anon/pen/oXgePX
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>
UPDATE:
I managed to do it by wrapping banner & button inside another div.
.wrapper{
float:right;
position:absolute;
right:0;
}
example: http://codepen.io/anon/pen/aOzyxo
still need to improve it so that button also slides with the banner for smooth look
You've to change your css
For example:
/* float */
float:right;
/* absolute position */
position:absolute;
You need it like this:
http://codepen.io/anon/pen/mJyMgW
Or do I missunderstand your Question?
Maybe you wanted something like this. It's a good start I think.
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});
#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>
You can do it cleaner and simpler using CSS transitions and a simple toggleClass in jQuery:
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});
Demo : http://codepen.io/mbrillaud/pen/NqPvZM
use a JQ toggle class
$('#slider').toggleClass('sliderthing');
that plus CSS to give it looks and stuff should work well
I managed to do it by wrapping the banner & button inside another wrapper.
Here is the updated example : http://codepen.io/anon/pen/aOzyxo
I have added some exact animation so that red button hide/shows immediately upon click event with some smooth animation.
.wrapper{
float:right;
position:absolute;
right:0;
z-index:100000;
}

100% width (of page) drop down/drawer menu with JQuery?

I've been stuck trying to figure out how to code a menu much like what you see on the Playstation website: http://us.playstation.com/
EDIT: Fiddle: http://jsfiddle.net/jjcarlson/7q64A/
So far I have a number of issues. The first is that I have been unable to create the 100% width, because, I am assuming, of the parent/child relationship.
The second issue I have is that my Timeout works on all class elements rather than only the currently hovered element. In other words, if all elements have slid down and one is hovered over, they all will remain open until none of them have been hovered for 1.5 seconds. I admit that my inability to come up with a solution may be due to my limited experience with the language. Below is the CSS:
.accordion-container {
width: 90%;
padding-bottom: 5px;
margin: 20px 0 0 20px;
}
.accordion {
width: 40%;
padding: 20px;
margin: 0 15px 35px;
position: relative;
float: left;
display: inline-block;
}
.accordion-question {
margin: 0;
padding: 0 0 5px 20px;
display: inline-block;
color: #06F;
background-color: #9F0;
cursor: pointer;
}
.accordion-answer-container {
padding: 0 20px;
overflow: hidden;
color: #999;
background: #F00;
}
.accordion-answer {
margin: 0;
padding: 0;
color: #0C0;
}
Then, the JQuery:
$(document).ready(function () {
var menu = $('.accordion-answer')
var timeout = 0;
var hovering = false;
menu.hide();
$('.accordion-question').hover(function () {
hovering = true;
// Open the menu
$(this).closest('.accordion').find('.accordion-answer')
.stop(true, true)
.delay(400).slideDown(600);
if (timeout > 0) {
clearTimeout(timeout);
}
})
.on("mouseleave", function () {
resetHover();
});
$('.accordion-answer').hover(function () {
hovering = true;
startTimeout();
})
.on("mouseleave", function () {
resetHover();
});
function startTimeout() {
timeout = setTimeout(function () {
closeMenu();
}, 1500);
};
function closeMenu() {
if (!hovering) {
$('.accordion-answer').stop(true, true).slideUp(400);
}
};
function resetHover() {
hovering = false;
startTimeout();
};
});
And finally, the HTML:
<div class="accordion-container">
<div class="accordion">
<div class="accordion-question">
<h2>Is this a question?</h2>
</div>
<div class="accordion-answer-container">
<div class="accordion-answer">
<p>To be honest, I am not sure</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
<p>That is all.</p>
</div>
</div>
</div><!-- /accordion -->
<div class="accordion" id="testanchor">
<div class="accordion-question">
<h2>What would be a good second question?</h2>
</div>
<div class="accordion-answer-container">
<div class="accordion-answer">
<p>I don’t know, man!</p>
<p>That is all.</p>
</div>
</div>
</div><!-- /accordion -->
</div>
Styling is minimal right now (sorry) as I'm just trying to get this figured out. Thank you for any help you can provide.
To get a width of 100% you should not display them as inline-block and set the width of .accordion to 100%.
In the hover-event you set hovering to true. If the next hover-event occurs prior to the call of closeMenu, then the if clause will already be false.
You should be able to accomplish the 100% width of your dropdown by altering the css of your .according-answer-container to a fixed position along with setting left and right to 0:
.accordion-answer-container {
padding: 0 20px;
overflow: hidden;
color: #999;
background: #F00;
position: fixed;
left: 0;
right: 0;
}
An update to your fiddle shows this working

Categories