Showing and hiding a DIV partially - javascript

I need to hide a DIV partially, not totally. When page loads, I want it to show the first, let's say, 100 pixels sitting on the uppermost part of the div. When the user clicks a certain button, the div will open (it could be a sliding effect like jQuery's show()). When the user clicks back the same button, the div will return to its original state showing only the top 100 pixels. I am trying to figure out how to do this with jQuery because it seems to be the best way to do that. Any hints? Thank you.

it could be done by setting div's initial height to 100px and setting its overflow to hidden in CSS. then you can change div's height to auto when you show the full div on javascript button click.
example: http://www.quirksmode.org/css/overflow.html
CSS code:
overflow : hidden;

you will need the toggle method and some animation ,
jquery style :
set the height of the div to 10px with Css.
$("td").toggle(
function () {
$(this).animate( { height:"100px" } , 1000 )
},
function () {
$(this).animate( { height:"10px" } , 1000 )
}
);

Related

SlidingPanel Animation

I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.

4 buttons toggle 4 different divs, wrapper height transition with jQuery

I'm a newbie in jQuery and Javascript in general, and what I'm trying to achieve is that 4 buttons show 4 different divs.
The idea is that the 4 divs can be seen together at the same time if you click on the 4 buttons, and if you click them again they close BUT the wrapper does not shrink and stays the size of when the divs are opened.
I know that you can not make a transition to the height of a div. Then I am trying to remove a class from the wrapper if the user "close" all the divs.
This is what i'm trying:
if($('.show-divs').length == 3) {
$('#divs-wrapper').removeClass('expand');
}
But ofcourse is not working, is there way to acomplish what i want?, thanks.
This is a representation of the divs closed
This is a representation of the divs after click all the buttons
Add a different ID attribute to each div you want to show and then add the following attribute to each button.
data-target="#THEID"
then use the following jquery:
$('.show-divs').click(function() {
var target = $(this).attr('data-target');
$(target).toggleClass('expand');
});
Assuming show-divs is your button class, warning, I typed this on my phone.
If you want to animate the heights you could do something like this:
$(".show-divs").toggle(function(){
var target = $(this).attr('data-target');
$(target).animate({maxHeight:1000},200);
},function(){
var target = $(this).attr('data-target');
$(target).animate({maxHeight:0},200);
});
As height would be auto but max-height would animate the height of the div between 0 and its max height (assuming it's less than 1000, you can change that to suit)
Here's a fiddle :)
http://jsfiddle.net/SQHQ2/3328/
Am not sure I completely comprehend what you are tring to accomplish. But if it is to just make a div appear and disappear you can add a css style of
display: none;
this makes it seem as if the div doesn't exist (so it doesn't take up space) then using javascript on the button such as
onclick="this.style.display = 'whatever display value'";
or replace 'display' with 'visibility'
this allows the div to not show yet still take up the space it would if it was showing so from
visibility: hidden -> visibility: visible

How to make a div fit to screen without the other divs being visible

One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.

Partially expanding a div to preview contents

When I hover over a div, I want another div (which starts as display:none) to partially expand downward, revealing only the top of its contents. How can I partially expand a hidden div with jQuery? Preferably so that the div fades out towards the bottom. There don't seem to be parameters for the toggle() command or fadeIn() that allow partial expansion.
Edit
Unfortunately, the requirements don't allow a separate 'teaser' div to be used. The hidden div containing all the text has to be partially expanded.
Let's say you want to only show the top 30 pixels of the hidden div:
var HowManyPixelsToShow = 30;
$(body).on({
mouseenter: function() { ShowInfoBoxDiv($(this)); },
mouseleave: HideInfoBoxes
}, '.info-box');
function ShowInfoBoxDiv(TheInfoBox) {
//this assumes the 'more-info' divs are located after the '.info-box' divs
TheInfoBox.next('.more-info')
.css('overflow':'hidden')
.height(HowManyPixelsToShow)
.slideDown(500);
}
function HideInfoBoxes() {
$('.more-info').hide();
}
instead of toggling the entire div, separate the inner contents into a teaser div, and a content div, then toggle only the teaser div when you want a sneak peak
You can use jQuery's animate function to show a preview. (open it a certain amount) Add a PNG with a transparent gradient to the bottom of that div to have it fade to white.
Start the #contentDiv with a height of 0px.
$("#hoverDiv").hover(
function(){
$("#contentDiv").animate({"height":"100px"});
},
function(){
$("#contentDiv").animate({"height":"0px"});
}
);

How to remove the scrollbar without scrolling the content?

I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>

Categories