Develop Reference

Hide overflow when scrolling

I'm trying to design a webpage where the page content shows within an iPhone screen but I cannot get the overflow to work correctly in that all overflow is being shown.
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}
function setScreen() {
var img = document.getElementById('iphone');
//or however you get a handle to the IMG
var myWidth = getWidth();
var width = String(Math.round(getWidth() / 2 - img.clientWidth / 2 + (img.clientWidth / 525) * 94)) + 'px';
var height = String(Math.round(getHeight() / 2 - img.clientHeight / 2 + (img.clientWidth / 915) * 170)) + 'px';
document.getElementById("screen").style.paddingTop = height;
document.getElementById("screen").style.paddingLeft = width;
document.getElementById("screen").style.paddingRight = width;
document.getElementById("screen").style.paddingBottom = height;
console.log("Image Width: " + img.clientWidth);
console.log("Screen Width: " + myWidth);
console.log("Calculated PaddingLeft: " + width);
}
window.onresize = function() {
setScreen();
}
setScreen();
.screen {
padding-top: 15%;
padding-left: calc(50% - 262px);
position: absolute;
overflow: hidden;
display: block;
}
.phone-image {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
</div>
I've put it in a jsfiddle and would appreciate to know what I've got wrong.
Many thanks

Maybe its work for you.
You need a container for your text and image, and play with relative and absolute positions.
Remember to hide the scrollbar, his width different between browsers and you don't want the text container change his width.
::-webkit-scrollbar {
display: none;
}
body {
font-size: 100%;
padding: 0;
margin: 0;
}
p {
font-size: 0.8em;
}
#container {
position: relative;
width: 50%;
margin: 0 auto;
}
.screen {
overflow: scroll;
width: 60%;
height: 61%;
position: absolute;
top: 14%;
left: 20%;
}
.phone-image {
width: 100%;
display: block;
}
<div id="container">
<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum purus id nisl tristique condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam elementum dui et turpis euismod ullamcorper.
Maecenas id tempus lectus. Duis rutrum lectus ac diam scelerisque posuere. Praesent sit amet auctor tellus, id vestibulum massa. Sed sed leo et nisl lobortis imperdiet eget sed leo.</p>
<p>Nunc augue risus, pharetra in nulla ut, posuere finibus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mollis erat mi, vel commodo lorem gravida in. Nulla euismod commodo leo, a egestas dolor
lacinia a. Suspendisse mattis lacus nisi, at consectetur ex auctor sed. Suspendisse potenti. Nunc hendrerit id nisl scelerisque cursus. Etiam suscipit, ipsum mollis volutpat ultricies, turpis arcu feugiat erat, et vulputate mauris velit vel leo.
Aenean ac dolor tempor, sodales nunc consectetur, gravida diam. Nulla sapien ipsum, tempus at vestibulum a, lobortis ut diam. Nam sit amet risus laoreet, mattis ex sed, semper odio. Nam sollicitudin tellus erat, ut vulputate elit bibendum ut.</p>
<p>Integer ultricies non nisi sed ultrices. Aliquam at odio accumsan, tincidunt ex nec, imperdiet magna. Vestibulum ac placerat justo. Nam facilisis tortor in tristique tincidunt. Phasellus tempor lectus eu libero dignissim, nec ultricies leo auctor.
Etiam dui tortor, faucibus id suscipit vel, aliquam non mi. Nulla non ultricies odio. Aenean at metus erat. Pellentesque eget consectetur velit, blandit pellentesque est. Nulla porta mi ligula, sit amet consequat lorem placerat ut. Ut mattis hendrerit
ex, at dapibus enim tincidunt et. Aenean quis nisl at neque porta sagittis sit amet nec mauris. Nullam libero purus, aliquet eu eleifend eget, fermentum a enim.</p>
</div>
</div>
My Fiddle

Fixed div bottom panel when height increase

Please have a look at the following code
https://jsfiddle.net/kamrant/qku5cp1w/1/
#wrapper {
position: relative;
border: 1px solid gray;
height: 100%
}
#panel {
height: 35px;
width: 100%;
position: absolute;
background: #EEEEEE;
bottom: 0;
}
The bottom panel acts fine (stays at the bottom of its container) however I have a tree view inside the container and when the tree is expanded as a result the container height increases, when scroll, my bottom panel stay where it is and does not adjust its position to the bottom of the container.
Any solution for this?

#main {
width: 400px;
float: left;
}
#container {
width: 400px;
float: left;
position: relative;
}
#wrapper {
width: 400px;
float: left;
position: relative;
border: 1px solid gray;
height: 100%;
min-height: 600px;
padding: 0 0 35px 0;
}
#panel {
height: 35px;
width: 100%;
position: absolute;
background: #EEEEEE;
bottom: 1px;
left: 1px;
}
#otherstuff {
height: 100px;
width: 400px;
background: gray;
margin-top: 10px;
float: left;
}
<div id="main">
<div id="container">
<div id="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula id neque laoreet lobortis. Nam laoreet ligula nec sapien finibus, interdum efficitur odio sollicitudin. Vivamus vitae erat nibh. Curabitur non magna quis sapien elementum porttitor vel et nulla. Nunc ultricies nisi quis eros ullamcorper, vitae malesuada velit venenatis. Suspendisse ultricies justo non ipsum pellentesque, eu consectetur massa ultricies. Morbi vel euismod erat, in condimentum elit. Aenean blandit mi ut nulla convallis, nec pellentesque mi facilisis. Sed vitae viverra mi, eu dapibus magna. Sed sollicitudin, velit sit amet tristique placerat, ante massa semper mi, id ultrices elit libero sit amet velit. Vivamus vitae lorem pretium nulla iaculis aliquet. Duis elementum erat vel pretium viverra. Phasellus ac ante quis tortor sollicitudin tristique. Ut tellus sem, congue sed arcu nec, venenatis efficitur risus. Curabitur ullamcorper viverra sapien ut maximus. Quisque ac elit finibus, fringilla diam ac, fermentum sapien.<br /><br />
Donec mattis sapien quis risus dictum aliquet. Etiam tristique tristique ex ut pharetra. Nulla vehicula tempor mauris ac ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu varius dui. Curabitur ornare nibh hendrerit eros lacinia semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean turpis dolor, posuere sit amet sapien quis, luctus viverra leo. Vivamus auctor, lorem et tempus fermentum, lorem velit ultrices nisi, ac bibendum felis ante vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet vitae mauris nec fermentum. asd
</div>
<div id="panel">do stuff</div>
</div>
<div id="otherstuff"></div>
</div>
Try this.

You have set the height of the container to 600px (I changed it to 100 for easier viewing on jsfiddle) which restricts the growth. Would be better use to use min-height, allowing div height to grow as content grows.
I suggest putting content inside its own div, so I made a new div ("tree") to contain the tree view you were talking about. This allows you to target just the content of this div in the future, should it come to that.
When you have an absolute position, it will take up the the space the inside which the div it belongs to, hence the extra padding inside the .tree css to allow for that content to not overlap the "tree" div.
#container {
min-height: 100px;
width: 400px;
}
See jsfiddle for the full code https://jsfiddle.net/jennift/qku5cp1w/4/

Editing Copied Content Slider to work

I copied a content slider and im trying to make it work. Can anyone help me to make it work? Thanks.
What i need is when you click the button next, next2, next3 it will display designated text as it shown below.
http://codepen.io/kevin11/pen/Byxvqa
HTML:
<section class="demo">
<button class="next">Next</button>
<button class="prev">Next2</button>
<button class="prev2">Next3</button>
<div class="container">
<div style="display: inline-block;" >
Sample Text
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text2
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
<div>
Sample Text3
On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.
I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.
- Lavon, Seattle WA
</div>
</div>
</section>
CSS:
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
left: 5px;
width:150px;
height:100px;
}
.prev {
left: 5px;
top:125px;
width:150px;
height:100px;
}
.prev2 {
left: 5px;
top:235px;
width:150px;
height:100px;
}

Here's a way to make a content slider with minimal JavaScript. The number of <a>s should be the same as the number of <div class="content">s.
$(function() {
$('.slider nav a').on('click', function() {
show_content($(this).index());
});
show_content(0);
function show_content(index) {
// Make the content visible
$('.slider .content.visible').removeClass('visible');
$('.slider .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
// Set the tab to selected
$('.slider nav a.selected').removeClass('selected');
$('.slider nav a:nth-of-type(' + (index + 1) + ')').addClass('selected');
}
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
background: #596283;
font: 14px Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
border: none;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
}
.slider {
margin: 0px 20px;
position: relative;
background: #EFF1E4;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 100%;
}
.slider nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
background: #AD9897;
color: #6C5D5D;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
}
.slider nav a {
padding: 20px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.slider nav a:hover,
.slider nav a.selected {
background: #6C5D5D;
color: #AD9897;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.slider .content {
padding: 20px 0px;
position: absolute;
top: 0px;
left: 150px;
color: #6C5D5D;
width: 0px;
height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.slider .content.visible {
padding: 20px;
width: calc(100% - 150px);
overflow: scroll;
opacity: 1;
}
.slider .content p {
padding-bottom: 8px;
}
.slider .content p:last-of-type {
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<nav>
<a>Content #1</a>
<a>Content #2</a>
<a>Content #3</a>
</nav>
<div class="content">
<p>Content #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
<p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis. Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis, nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
</div>
<div class="content">
<p>Content #2</p>
<p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
<p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
</div>
<div class="content">
<p>Content #3</p>
<p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
<p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>

anchor link to multiple classes instead of id's with jquery

I have a page with up and down arrows that are links that float on the left. I want them to navigate between div's on the page as a scrolling anchor links. Here is what I have so far.....I know the jquery is far from complete but I think im going in the right direction. Any help would be great.
JSFIDDLE: http://jsfiddle.net/t8uaQ/
HTML:
<ul id="et-float-menu">
<li class="et-float-menu-item1">
<span><img></span>
</li>
<li class="et-float-menu-item2">
<span><img></span>
</li>
</ul>
<div class="jumptosection" id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section4">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
MY CSS:
#section1 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section2 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#section3 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section4 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}
#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }
#et-float-menu li {
display: block;
margin-left: 0;
}
.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }
JQUERY:
jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
return false;
});
});

Change hrefs of your <a> to scrollUp and scrollDown correspondingly.
Stick to some .selected class, which will be used for identifying current selected section.
Add this class to the first section in html.
Add a function that will perform selection: by adding .selected class and scrolling to newly selected div.
function changeSelection(sectionFrom, sectionTo) {
if(sectionTo.length > 0) {
sectionFrom.removeClass("selected");
sectionTo.addClass("selected");
$("body").animate({scrollTop: sectionTo.offset().top});
}
}
Attach click listeners to your anchors. Inside each of them find current selected div and div you want to be selected and call changeSelection() using these divs.
For scrollDown we want to select the next div:
$(document).on("click", "[href='#scrollDown']", function(){
var currentSection = $(".selected");
var nextSection = currentSection.next(".jumptosection");
changeSelection(currentSection, nextSection);
return false;
});
For scrollUp we want to select the previous div:
$(document).on("click", "[href='#scrollUp']", function(){
var currentSection = $(".selected");
var prevSection = currentSection.prev(".jumptosection");
changeSelection(currentSection, prevSection);
return false;
});
In case you reach the end (the first or the last .jumptosection div), nothing will be changed (it is controlled by the changeSelection function - it checks do we have sectionWeWantScrollTo)
Here is the Demo
Edited (for http://94co.com/client3/about/)
See this answer about WordPress and jQuery. Use jQuery instead of
$ in your script
It is better to use id instead of href on anchor
Make sure you wrap JavaScript of click listeners in
jQuery(document).ready(function(){
/*scrollUp and scrollDown click listeners should be here*/
});
(JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped
Here is the updated Demo

You can set some initial var that let you know the start point like this:
var pre = $('.et-float-menu-item1'),
nex = $('.et-float-menu-item2'),
act = $('#section1');
Where act is the start
And then evaluate prev and next elements:
nex.click(function(){
pre.slideDown();
var gt = act.next('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.next('div');
})
pre.click(function(){
var gt = act.prev('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.prev('div');
})
This code can be improved but is the first aproach I can give.
Check the Demo Fiddle

Sticking a fixed div on scrolling down

Im trying to make a fixed div stick to the top once scrolled down.
See example - Desired effect would be for the green left column to remain anchored to the top once you have scrolled down past the red block.
Example - JS FIDDLE
HTML
<div id="block">block</div>
<div id="content">
<div id="left">fixed</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat neque ac diam pulvinar aliquet. Sed cursus mauris a ipsum ultricies malesuada. Integer vel velit accumsan, sagittis ipsum et, lacinia tellus.</p>
<p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
<p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
<p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
<p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
</div>
</div>
CSS
#block {
background: #B84B3D;
width: 100%;
height: 200px;
position: fixed;
z-index: 0;
font-size: 16px;
color: #fff;
text-align: right;
}
#content {
margin-top: 160px;
float: left;
}
#left {
background: #73CC66;
width: 50%;
height: 100%;
font-size: 16px;
color: #fff;
position: absolute;
}
#right {
background-color: rgba(255,255,255,0.8);
width: 50%;
float: right;
color: #ccc;
z-index: 10;
position: relative;
}
Is there a way to do this with CSS or more practical with JS?
Thanks in advance

Modify your css with this
#left {
background: #73CC66;
width: 50%;
height: 300px;
font-size: 16px;
color: #fff;
float:left;
position: static;
}
and apply this javascript
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" ></script>
<script>
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
if ( position > 160) {
$('#left').css({'position':'fixed', 'top':'0' });
} else {
$('#left').css({'position':'static', 'top':'auto' });
}
}
}
</script>
Hope this works