JQuery Hide/Show on Scroll down - javascript

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.

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>

JQuery Offset issue when div position is fixed

I have a website which has a page layout and style something like mentioned in this JsFiddle
Now Using JQuery when I click on the button, content is being displayed properly as shown below:
But when I first scroll the page and then click the button, content is not displaying properly as shown:
Can you please guide me to handle this situation ?
I have used below jQuery for this. But it seems offset or position is not working
$('#btn').click(function(){
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 20 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function(){
$('.control-container').css('display', 'none');
});
You don't need to use offset to achieve that... And if you need to keep CSS with position:fixed, you need to switch it in javascript to static.
The thing you are looking for is simply display:table ...
$('#btn').click(function(){
$('.control-container').css({'display': 'table','position': 'static'});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none','position': 'fixed'});
});
Check out this JSFiddle
But if you really need a solution with position:fixed based on button position, you should try this way:
$('#btn').click(function(){
var button_fixed_position = $('#btn').get(0).getBoundingClientRect();
$('.control-container').css({'display': 'block','left' : button_fixed_position.left, 'top' : button_fixed_position.bottom});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none'});
});
Check out second JSFiddle
There is no need to specifically mention position property here.
Also remove the closing a tag and replace it with </button>
Currently container is occupying full width ,but that can also be set
$('#btn').click(function() {
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 30 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function() {
$('.control-container').css('display', 'none');
});
.header {
background-color: maroon;
color: #fafafa;
height: 60px;
position: fixed;
width: 100%;
text-align: center;
line-height: 19px;
font-size: 25px;
z-index: 2;
padding: 0px;
margin: 0px;
top: 0;
}
.content {
background-color: #fff;
border: 1px solid #999;
padding: 5px;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: 60px;
}
.control-container {
width: auto;
background-color: red;
#position: fixed;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
Header
</div>
<div style="clear:both">
</div>
<div class="content">
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="btn">Click Me</button>
<div class="control-container" style="display:none;">
Keep me exactly underneath 'Click Me' when Page is scrolled.
</div>
</div>
</div>
CSS position fixed property positions an element referencing view's/body's dimension.
If you have access of modifying CSS, then just remove the position: fixed; property from .control-container.
If you don't have access, then using script add position: static !important property to .control-container.
$('.control-container').css('cssText', 'position: static !important');
Modified JSFiddle

Sliding a <div> from the bottom

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

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;
}

Dynamic Image Overlay with Jquery

I have an image with an overlay DIV which shows 2 images when I hover on the image, this works fine, but I want it to be dynamic and work for countless images on the page, currently it works for the first picture only, I'm not that good with javascript and jquery and would appreciate your help on this one.
Jquery Code:
$("#imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
HTML Code:
<div id="imageOverlay">
<div id="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
<img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>
CSS Code:
#imageOverlay {
display: inline;
position: relative;
}
#imageOverlay #hover {
display: none;
position: absolute;
margin-top: 10px;
margin-right: 10px;
z-index: 2;
}
#imageOverlay #hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
Use a class for #imageOverlay and #hover, you can only have one instance of an ID, so when you have more than one of those IDs, the function is only finding the first one. Also, just fade the container box, not each individual image. Also, use stop() before an animation to make sure you don't get weird behavior when people are mousing on and off your element. Then, putting the main image first ensures that the hovered images are "on top" without having to worry about z-index.
HTML
<div class="imageOverlay">
<img src="http://placehold.it/1000x1000&text=Thumbnail">
<div class="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
</div>
JS
//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
function() {
$(this).find(".hover").stop().fadeTo(200, 1);
},
function() {
$(this).find(".hover").stop().fadeTo(200, 0);
} //when writing clean code, be sure your closer ends at the same indent as your opener
);
CSS
.imageOverlay {
display: inline-block;
position: relative;
}
.imageOverlay .hover {
position: absolute;
top: 10px;
right: 10px;
}
.imageOverlay .hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
And your images should show up on top when you hover!
Make #imageOverlay a class and apply it to multiple attributes in your html.
css:
.imageOverlay
//css rules
jquery:
$(".imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
html:
<div class="imageOverlay">
// do stuff
</div>
<div class="imageOverlay">
// do stuff
</div>

Categories