We Keep Coding

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.

Displaying hidden divs without moving the view of the page

I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").

The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?

Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/

You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});

Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.

You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.

One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.

You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

Jquery detect hover over an element but not the elements contents

Here is the page i am working with: http://jimeagle.com/new/music/
I want to make it so when you hover over a row the image shows and when you leave the row the image shows, but because (i think) the image is in the hover div, the image stays visible when you hover out of the row but over the image.
I tried to move the image out of the hover div but it caused some horrible flickering because when your over the image you are no longer over the hover div.
Any way around this? Thanks.

Get the height of the div with the class "music_row". If the mouse y-position (on mousemove) is higher then the calculated height, hide the image.
$(document).ready(function() {
var iHeight = $(".music_row").height();
$(".music_wrapper")
.mouseover(function() {
$(this).find('.image').show();
})
.mousemove(function(o) {
if (o.layerY > iHeight) {
$(this).find('.image').hide();
}
})
.mouseout(function() {
$(this).find('.image').hide();
});
});
Also see my jsfiddle.

Because the image is a child of the element you bind the handlers on, it will prevent the mouseout event being triggered unless the pointer also leaves the container, .music_wrapper in your case.
To work around this, you could create an absolute positioned 'ghost' element with zero opacity and use this for triggering your hover events. Something like this:
$(function() {
$('.music_wrapper').each(function() {
var ghost = $(this).find('.music_row').clone();
ghost.css({opacity: 0, position: 'absolute', overflow: 'hidden' });
ghost.hover(
function() { $(this).parent().find('img').show(); },
function() { $(this).parent().find('img').hide(); }
);
$(this).append(ghost);
});
})
Not tested, but this should recreate your .music_row div element in every .music_wrapper, set some css properties, bind the hover handlers and append it to the wrapper element.
Now image and hover element are seperated, which can hide the image even when the mouse is still over it.

I would suggest not doing this, actually. I think the intuitive thing is that when you hover over the number / text the image pops up, but moving your mouse inside the image shouldn't do anything.
How about just moving the images to the right a little so that the big numbers are still at least partly visible? Then it would feel natural to move over to the next # to see the next image.

Showing and hiding a DIV partially

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