Scrolling/fixed sidebar gets cut off when sidebar is very long - javascript

I have a small jQuery script to keep the sidebar visible when you scroll down the browser. However, the sidebar can get very long since it will contain filters (dropdowns and checkboxes) so the bottom part gets cut-off.
I'd like to have an effect like on this website:
http://www.lyst.com/
In a way, when the sidebar is long, you are still able to scroll up and down. It will only become fixed when it reaches the bottom/top of the sidebar.
Does anybody know where I can get a script that does this exactly?

Set your CSS and HTML markup in a fashion that you can easy reference the objects you want to avoid collision with. Create conditional statements to compare said references.
Firstly, the working jsFiddle.
The HTML ->
<div class="content">
<div class="main">
Main Content
</div>
<div class="sidebar">
Sidebar
</div>
<div class="footer">
Footer
</div>
</div>
The CSS ->
#content{
position:relative; /* required */
height:2000px;
}
.main{
margin-left:100px;
border:1px solid rgb(120,120,120);
height:1500px;
}
.sidebar{
position:absolute; /* required */
top:25px; /* required -- does NOT need to be this value, however. */
left:5px; /* required -- does NOT need to be this value, however.*/
border:1px solid rgb(8,8,8);
background:rgba(70,70,70,.9);
color:#ecebeb;
width:93px;
}
.footer{
border-top:1px solid #ff0000;
height:498px;
}
The jQuery ->
$(window).scroll(function(){
var dist = $(window).scrollTop();
var sTop = $('.sidebar').position().top;
var mHeight = $('.main').height();
var userDist = 100;
if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){
//the sidebar is pinned now. it won't scroll further.
}else if(dist < (mHeight - userDist)){
$('.sidebar').animate({
top: dist + $('.sidebar').height()
}, 0);
}
});

Related

CSS based on viewport height

Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.
the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.
here's some code (merely for illustration purpose!)
$(window).scroll(function (event) {
var numOfButtons = 4;
var scroll = $(window).scrollTop();
var heightContainer = $(".container").height();
console.log('scrollPos', scroll);
if(scroll > heightContainer/ numOfButtons){
$(".header .button:nth-child(2)").addClass('act');
}else{
$(".header .button:nth-child(2)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*2){
$(".header .button:nth-child(3)").addClass('act');
}else{
$(".header .button:nth-child(3)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*3){
$(".header .button:nth-child(4)").addClass('act');
}else{
$(".header .button:nth-child(4)").removeClass('act');
}
});
.header{
height:50px;
background-color:blue;
color:white;
position:fixed;
top:0;
left:0;
width:100%
}
.button{
display:inline-block;
width:10px;
height:10px;
background-color:white;
border-radius:20px;
}
.button.act{
background-color:red;
}
h1{
margin-top:60px;
}
.container{
height:4000px;
background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Scroll demo</h1>
<div class="header">
<div class="button act"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="container"><div id="mydiv"></div>
</div>
</body>
</html>
enter link description here
you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.

javascript setting width dimensions changes element location

I'm trying to adjust the width of a div that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above contentSectionLeftSide.
Here's what I've got:
function setButtonH(e){
var item = e;
var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
if(e==items[1])
{
document.getElementById("contentSectionLeftSide").style.width="600px";
document.getElementById("contentSectionRightSide").style.width="300px";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
else {
document.getElementById("contentSectionLeftSide").style.width="45%";
document.getElementById("contentSectionRightSide").style.width="45%";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
}
HTML
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">
Home
</div>
<div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">
Interests
</div>
<div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">
Creations
</div>
<div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">
Bio
</div>
</nav>
#contentSectionLeftSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
#contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
I think I have a handle on the situation now, and recreating your code locally I did notice a small gap above the left content section.
The problem is that because your divs' content are (probably) resulting in different div heights, the display: inline-block CSS declaration is causing them to be vertically aligned to each other at the bottom baseline, so all you need to do is tell the CSS to align them vertically to the top.
I constructed the left- and right-hand side content areas like this, below the HTML you provided:
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
<div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
<div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
<div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>
<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
Right side content!<br />
There's a little more content in here!
</div>
I also removed the menuGo(#) function from the onClick's, as I didn't know where that functionality went. Side note: be careful here, as in your code above it reads (for example):
onclick="setButtonH('menu_item2'), menuGo(2)"
Where it should be:
onclick="setButtonH('menu_item2'); menuGo(2)"
Which could yield problems down the line.
However, back to the solution, all you need to do is add the line vertical-align: top; to each of your content areas' style declarations, and they'll be aligned to the top, effectively:
#contentSectionLeftSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
#contentSectionRightSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
Here's a working fiddle for you to see it in action. Hope this helps, good luck and keep coding! :)

jQuery : Make Automatically Scrolling Div

Can anyone tell me how to implement the scroll 'sidebar' follows the users scrolling the page, but stops when it reached the 'footer'
<div id="section">
<div id="sidebar"> </div>
<div id="hello"> </div>
</div>
<div id="footer"> </div>
Div 'section' doesn't have a set height meaning it grows whenever the div with an id of hello grows. This means that neither the 'hello' nor 'section' has a set height
Div 'section' has a width of 728 and 'hello' has a width of 400. 'sidebar' has a width of 200.
What I want to happen is (using jquery) when the person scrolls just a little past the sidebar then the sidebar should scroll with the page. Hoever the sidebar should not overlap with the footer.
Therefore sidebar should only scroll along with the page till the end of the div section.
The red block (on my website) is the sidebar that want to scroll.
Something like the following should get you started (Tested CHROME only): http://jsfiddle.net/MyFB9/3/
JS
var $sb = $('#sidebar');
var $foot = $('#footer');
var footerTop = $foot.offset().top;
$foot.html(footerTop);
$(document).scroll(function(){
//+ 100 since the height of the sidebar is 100px
if($(this).scrollTop() + 100 > footerTop){
//when we get close, line up perfectly with the footer
$sb.css({top:footerTop - 100});
}else{
//otherwise scroll with the page
$sb.css({top:$(this).scrollTop()});
}
//Visualy display the position of the bottom edge of the sidebar
$sb.html($sb.offset().top + 100)
});
HTML
<div id="section">
<div id="sidebar"> </div>
<div id="hello"> </div>
</div>
<div id="footer"> </div>​
CSS
#section{
vertical-align:top;
}
#sidebar, #hello{
display:inline-block;
position:relative;
vertical-align:top;
top:0px;
left:0px;
}
#sidebar{
height:100px;
width:50px;
background-color:red;
}
#hello{
height:900px;
width:50px;
background-color:green;
}
#footer{
height:450px;
width:100px;
background-color:yellow;
}
​

duplicate div then do a horizontal scroll

I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>​
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
​
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});​
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>​
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
​If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.

Simulate this slider effect with jquery (instead of mootools) [Horizontal accordion effect]

I can use javascript and everything else, but before reinventing the wheel, I would like to know if there is already a similar plugin for jquery because I would like to use that framework and not mootools.
I don't have problems with money, expecially for a 5€ template, but really I would like to use jquery because I studied it and not mootools.
The template: http://www.globbersthemes.com/demo/upsilum/
EDIT 1: I changed the title for future references for people that know the correct name of this type of effect, thanks to everyone.
i always liked the jquery tools tabs for this - see http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html
Here a plugin that might interest you : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html
Here, I reinvented the wheel. But had looot of fun! :)
Tested in all modern browsers + IE 6-7-8
Instead of using 'title' images now you can use classic editable text!
Set desired 'start' tab
EDIT: added/fixed title support (rotaion for IE 6-7-8)
H - ACCORDION DEMO
The simple HTML:
<div id="acc">
<div class="title"><p class="button">Title 1</p></div>
<div class="cont">Cont 1</div>
<div class="title"><p class="button">Title 2</p></div>
<div class="cont">Cont 2</div>
<!-- more tabs here.... -->
</div>
The CSS style Ex:
.title{
cursor:pointer;
position:relative;
float:left;
width:20px;
height:200px;
background:#444;
color:#ccc;
padding:15px;
border-left:3px solid #aaa;
}
.cont{
position:relative;
float:left;
width:300px;
background:#999;
height:200px;
padding:15px;
}
.slide{
position:relative;
float:left;
overflow:hidden;
width:0px;
}
.active{
background:#cf5;
color:#444;
}
.button{
white-space:nowrap;
margin-top:180px;
font-size:20px;
line-height:25px;
text-align:left;
}
And the fun part: jQuery !
//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3; // set desired opened tab
var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.slide').stop().animate({width:0},700);
$(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');
if($.browser.msie && $.browser.version<="8.0"){
btn.css({
filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
width: titleH+'px',
position:'absolute',
marginTop:'0px'
});
}
One more thing- you'll just have to wrap the accordion into a positioned 'container' with set height and width to avoid accordion elements 'dance' on window resize.

Categories