Develop Reference

Fixed div scroll stop after

I am working on a menu, that is fixed to the right side of the page. I am using some JavaScript that keeps the menu in it's fixed position until the site reaches a specific spot (243px from the top - which clears my header). All of this is working as I intended...but I'm looking for a way for the menu to stop scrolling at a specific number of pixels from the bottom (To clear my footer - 600px).
The JavaScript looks like:
$(window).scroll(function(){
$("#side").css("top",Math.max(15,243-$(this).scrollTop()));
});
The HTML looks like:
<div class="menu">
<div id="side">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
The CSS looks like:
.menu {
right: 0;
position: absolute;
top: 243px;
width: 250px;
z-index: 5;
}
#side {
background: #ace;
position:fixed;
width: 250px;
}
JS Fiddle: https://jsfiddle.net/050dqcea/
Original solution (scrolling from top): Stopping fixed position scrolling at a certain point?

I think I understand now, the fiddle didn't have jQuery loaded so it just wasn't running as intended.
You can change how you want this to show or hide, that's up to you. I'd make a bit of a comment about how irritated your users might be that the menu disappears but that is up to you to decide. Alternatively you can use these triggers to "refix" your menu. The world is your oyster, etc.
I've used $("#side").offset().top here. The idea is to check when the menu's bottom has scrolled to the top of the footer. Then to bring it back we check if the vertical scroll is less than the offset of the top of the footer.
A fiddle for you: https://jsfiddle.net/5p90s06n/1/

How to keep div visible when hovering another div

I found a few similar threads here after a good while of searching, but none of them was in the same situation as me, so i decided to ask.
I got this drop-down menu that gets the height 460px when i hover over a tab, and loses the height when unhovered. I need the menu to stay there even when the mouse is moved from the tab over to the menu.
Like this: http://jsfiddle.net/muo4ypvc/
I can accomplish this by setting the menu position to relative, however i need the position to be absolute in order to adjust the z-index.
When i try to set the position to absolute, the menu won't keep the 460px height on hover, it only has the height when the tab is hovered. I've also tried some other things like wrapping all the html in a container, and put that as the mouseleave element, but with no success. How can i make it stay on both tab and menu hover?
html
<div id="tab">
<a id="tab">Categories</a>
<div id="menuDropdown">
<div id="innerDropdown">
<!-- menu content -->
</div>
</div>
</div>
js
$(document).ready(function() {
var inner = $('#innerDropdown')
var rolldown = $('#menuDropdown');
$('#tab').mouseenter(function() {
rolldown.toggleClass('show');
if(rolldown.hasClass('show'));
setTimeout(showInner, 130); /* waits 'til drop-down animation is finished */
function showInner(){
inner.toggleClass('show');
}
});
$('#tab').mouseleave(function() {
inner.toggleClass('show');
rolldown.toggleClass('show');
});
});
css
#menuDropdown {
position: absolute;
transition: (some long ass transition code);
}
#menuDropdown.show {
height: 460px;
}
#menuDropdown.hide {
height: 0px;
}
#innerDropdown.show {
display: block;
animation: fadein .15s;
}

I wrapped your html into another div to show that the wrapper keeps its height, but I'm not sure I understand what you're trying to do and what doesn't work. I basically just added position: absolute:
.description {
position: absolute;
}
See demo: http://jsfiddle.net/4tb29u6h/1/

Make div fixed only inside another scrollable div

I have the page with structure something like this:
<div id="header"></div>
<div id="messages"></div>
<div class="content">
<div id="sidebar"></div>
<div id="content"></div>
<div id="other_stuff"></div>
</div>
Header is the header of the page.
Messages div is the place where I push messages. Sometimes it filled, sometimes it empty.
Sidebar is navigation menu.
Content is a long scrollable div.
And other stuff is other stuff.
I need to make sidebar be fixed in the page on the left side when content are scrolled. But sidebar should never overlay messages and header.
In other words, when I scroll down the page, header and messages are scrolled with content normally. But when I scroll up the page, sidebar should't overlay messages and header div's.
I've used CSS property position: fixed; for this but with this property sidebar overlays messages. How can I fix this with CSS and javascript/jQuery?

If I got you right, you want the sidebar to be fixed starting from a particular point.
This can be achieved through the jQuery. There are many ways, at least 3 I know. Here is the pure jQuery version i use in the cases like that (if you don't want to embed other external JS libraries)
jQuery(document).ready(function ($) {
$fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
$(window).scroll(function(){
if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
{
$fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
}
});
});
Other ways of doing that are using other JS libraries, I know 2 of them:
1) jQuery Waypoints
2) stickyjs.com
Hope that helps.

Its good if you can make jsfiddle of it or else I think something like below code can help you.
Fix height of your header and messages and give margin to the sidebar with total height of you header and messages.
#header, #messages {
height:3em;
}
.content #sidebar {
position:fixed;
margin-top:3em;
width:5em;
}
.content #content,.content #other_stuff{
width:3em;
margin-left:5em;
}

jquery slide down effect - without moving inner contents

I am trying to achieve a simple slide up/down effect similar to the 'more' link on www.bbc.co.uk
YOu can see that the inner contents do not move up and down, instead it is like a screen is being pulled over them.
Using jquery slideUp slideDown does not achieve this, instead the whole div is moved up and down so the text looks like it moves.
How can a similar effect be achieved using jquery?

Just put your sliding div between the menu and the content:
<div id="menu">Menu example. Click here!</div>
<div id="slide">Whoa! sliding div<br>See how it moves the content down</div>
<div>Content here</div>
See fiddle: http://jsfiddle.net/2hZme/1/

slideUp/slideDown uses the top position when it animates, when you want to use the height. So I'd suggest to animate it manually:
// Initial variables
var panel = $('#panel');
var panelHeight = panel.height();
// Set the height to 0
panel.height('0px');
// Animate it to its initial size
$('a').click(function() {
$('#panel').animate({'height' : panelHeight});
});
... and of course the CSS:
#panel {
overflow: hidden;
height: 300px; /* or whatever */
}
Fiddle: http://jsfiddle.net/3fsQr/

Is there anyway in CSS to make the page width variable?

I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.

As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/

Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example

You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?

Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.

I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>​
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
​
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});​
Demo:
http://jsfiddle.net/foxbunny/EY9sc/