I have recently made some minor edits to a website of mine that uses a javascript scroller in it (that i found onlin eyears ago) and suddently it's no longer working. I can't think what I would have changed. it's strange because it continues to work fine on my local server (MAMP) but no longer works on the web.
Here is a link to the page online where it is not working:
http://tinyurl.com/scrollernotworking
If it makes more sense to post the code here, here is my html:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/scroll.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" --><title>TEST SCROLLER ONLINE</title><!-- InstanceEndEditable -->
<!-- InstanceParam name="id" type="text" value="staff" -->
<style type="text/css">
#import url(test.css);
</style>
<script type="text/javascript" src="../javascript/jsScroller.js"></script>
<script type="text/javascript" src="../javascript/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>
</head>
<body id="staff">
<div id="content">
<div id="Scroller">
<div class="Scroller-Container"><!-- InstanceBeginEditable name="text" -->
<div id="lipsum">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere nisi sed tortor molestie sodales. In at turpis id nibh eleifend porta. Sed risus dui, eleifend non sem eget, tempor adipiscing mauris. In sodales sem vel commodo pretium. Phasellus vulputate velit a imperdiet tristique. Nunc a lacus ut elit sagittis bibendum. Ut vel quam nunc. Aenean hendrerit nulla eu ligula porttitor accumsan. </p>
<p> Duis turpis justo, commodo ac massa rhoncus, rhoncus semper massa. Nullam faucibus leo ut tempor tempus. Mauris a elementum nibh, non congue felis. Curabitur eu nibh mauris. Maecenas quis fringilla augue. Morbi id malesuada nisl. Donec nec aliquam purus. Proin at malesuada justo. Vivamus tempor velit lectus, a sagittis nisl mollis eu. Donec at enim laoreet, rhoncus nulla posuere, consequat elit. Nam vel ante eros. Phasellus laoreet tempus mattis. Phasellus a fringilla neque. Nulla rutrum nibh quis malesuada sollicitudin. Etiam suscipit nibh eu porttitor tristique. </p>
<p> Ut aliquam, diam sit amet dapibus imperdiet, nisl augue pharetra odio, in interdum tortor quam non sem. Nulla molestie rhoncus sem eget tincidunt. Sed vel velit fermentum, sagittis turpis vel, accumsan nibh. Aliquam erat volutpat. Fusce leo est, pharetra eu tortor non, sollicitudin tempor ligula. Proin nec adipiscing erat, at suscipit tellus. Nullam scelerisque porta iaculis. Cras est tortor, scelerisque non vestibulum eu, pellentesque vel magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<h2> Heading Example 1</h2>
<p>ullam accumsan leo erat, in interdum quam luctus ac. In nulla mi, sodales a aliquet at, gravida nec mauris. Quisque nec interdum diam. Etiam fermentum pulvinar dolor in cursus. Ut hendrerit porta ullamcorper. In lobortis neque sed sem condimentum, quis feugiat elit consequat. In eu erat mi. </p>
<p> Nulla ornare egestas libero nec tempus. Sed id ornare enim. Maecenas pharetra massa sed augue sodales vestibulum. Suspendisse potenti. Duis et accumsan justo, a dictum velit. Aliquam ultricies eleifend sagittis. Cras in risus est. Sed molestie urna elit, eget varius magna euismod sit amet. </p>
<h2> Heading Example 2</h2>
<p>Sed turpis elit, hendrerit eu diam nec, vulputate laoreet lectus. Pellentesque volutpat erat vel nisl tincidunt feugiat. Vestibulum quam sem, condimentum eu ultrices eu, scelerisque a turpis. Duis condimentum dictum lectus, in ornare lacus vehicula posuere. Ut venenatis urna ac euismod bibendum. Aenean eu arcu cursus, fermentum mi at, interdum libero. Praesent tincidunt tortor eu ultrices viverra. Fusce in velit a mi euismod mollis. Suspendisse venenatis congue justo, at luctus enim. Aliquam nec volutpat erat. </p>
<p> Fusce fringilla sapien magna, ac bibendum turpis condimentum sed. Donec posuere, nunc et rhoncus dapibus, velit magna semper leo, sed commodo odio enim feugiat magna. Nam aliquet turpis eu lectus ultricies, eget tempor urna eleifend. Aliquam sit amet magna volutpat nunc pretium accumsan quis nec erat. Fusce volutpat porta ipsum nec adipiscing. Donec eu enim molestie ante sollicitudin consequat eget at arcu. Ut id ante eget metus porttitor imperdiet. Fusce faucibus nunc vel elit convallis, eu iaculis nulla semper. Vivamus ullamcorper diam libero, non dignissim dolor vestibulum et. Vivamus in volutpat nunc. Aliquam erat volutpat. Maecenas massa massa, congue quis tortor at, interdum laoreet augue. Aenean mattis lacus dui, quis ullamcorper massa tincidunt quis. </p>
<h2> Heading Example 3</h2>
<p>Nullam sit amet porta urna. Pellentesque quis tristique diam. Sed ac porta urna. Nunc porttitor eget nibh id ornare. Duis a nunc a purus ultrices pretium eu et lacus. Duis auctor condimentum ligula, nec commodo lectus eleifend sed. Cras varius adipiscing feugiat. Mauris posuere sem a ultrices adipiscing. Sed id lectus tortor. Aenean vitae rhoncus turpis, a vulputate purus. Etiam rutrum nulla sit amet urna hendrerit bibendum. Donec laoreet porttitor risus nec porttitor. </p>
</div>
<div id="generated"></div>
<!-- InstanceEndEditable --></div><!--close Scroller-Container-->
</div><!--close Scroller-->
<div id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div><!--close Scrollbar-Handle-->
</div><!--close Scrollbar-Track-->
<!-- InstanceBeginEditable name="homepage-calltoActions" --><!-- InstanceEndEditable -->
</div><!--close Scrollbar-Container-->
</div><!--close Content-->
</body>
<!-- InstanceEnd --></html>
and here is my css:
html, body {
height:100%;
width:100%;
}
body {
margin:0;
padding:50px;
background-color:#676B62;
line-height:135%;
font-family:Verdana,Arial, Helvetica, sans-serif;
color:#333;
}
p {
margin:0 0 15px 0;
line-height:145%;
}
h2 {
font-size:1.1em;
margin:0 0 9px 0;
text-transform:none;
font-weight:bold;
line-height:140%;
}
#content {
float:left;
width:700px;
min-height:469px; /** added min to test ****/
margin:0;
padding:50px;
background-color:#FFC;
}
/*************** Scroller CSS **************/
#Scroller {
text-align:left;
font-size:12px;
position:absolute;
width: 590px;
height: 375px;
overflow: hidden;
margin:0;
line-height:135%;
/*background-color:#6CF;*/
}
.Scroller-Container {
position: absolute;
}
.Scrollbar-Track {
width: 20px;
height: 375px;
position: absolute;
background-color:#ccd59a;
margin:0 0 0 605px;
}
.Scrollbar-Handle {
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 30px;
background-color: #81943B;
background-image:url(images/site/scrollbar-handle.gif);
background-repeat:no-repeat;
}
and the javascript hasn't been chaged by me since it was original working perfectly, but you can see it linked to in the head of the linked page above.
I'd be grateful for any help anyone can offer!
Thanks so much in advance... I've spent hours trying to figure out what i might possibly have accidentally changed, but to no avail :(
I can see this error in my console when I opened the link Uncaught ReferenceError: jsScroller is not defined that means that you have not included the js file or your path to js file is wrong. correct that it will surely work.
Related
I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.
There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>
I've seen a couple of articles here but I just can't find the right answer.
I'm not looking for a smooth scrolling to an anchor point, I already got that, I'm looking for a smooth scrolling like this or this.
somehow they both uses this jquery which I don't know how to implement.
I've tried this one: simplr-smoothscroll. But this one is not really that 'smooth', when you scroll fast it slows you down.
I've also tried: simple smooth-wheel. But I couldn't implement that properly, since my body height is set to 100%, someone else complained about that as well on github. Above that, the demo provided in the Download (not on github) didn't work for me aswell, tried to fix that demo but still no luck.
I've also try to use the source of that one: smoothwheel. However I'm not a javascript magician with javascript so, no couldn't get that done.
Here is the simple jsfiddle page I have, where it should work: jsfiddle
<div id="menubar">
WelcomeWelcomeWelcomeWelcome
</div>
<div id="container">
<div id="content">
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tortor fringilla, volutpat justo malesuada, suscipit justo. Fusce ante dui, bibendum non sapien vitae, hendrerit ultricies enim. Quisque dictum fermentum congue. Vestibulum posuere iaculis arcu, ultrices pharetra mauris ultrices finibus. Ut pulvinar sit amet justo et rhoncus. Maecenas id ante vel tortor vulputate commodo in in lacus. Nunc auctor vulputate ornare. Donec lacus odio, maximus ut massa a, finibus pulvinar justo. In facilisis quam sed pharetra aliquet. Etiam varius non eros non suscipit. Vestibulum venenatis placerat accumsan. Nulla nec consequat mauris. Etiam nisl magna, semper vel sem mollis, vehicula bibendum urna. Nunc porttitor dui sed volutpat imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra ligula sit amet sapien mollis malesuada.
Sed mollis convallis risus. Duis volutpat, diam rutrum pretium scelerisque, odio nunc faucibus odio, sit amet cursus justo justo ac mi. Aenean laoreet et eros non viverra. Praesent id erat vel nisl molestie pharetra. Pellentesque eu eros nibh. Aliquam mollis, tortor eget consequat varius, metus sapien suscipit nisl, eu convallis ligula orci eu erat. Fusce et ex dignissim eros porta eleifend in quis sapien. Suspendisse potenti. Quisque non vehicula mauris, eget ornare tellus. Pellentesque aliquet massa augue, sed hendrerit massa condimentum eget. Nunc vulputate neque nunc, ac interdum velit tristique sed. Donec vestibulum nibh at tellus condimentum, sed rutrum quam pellentesque. Mauris congue blandit justo, a auctor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse et sem vulputate, malesuada lectus ultrices, luctus elit.
Ut enim metus, lobortis in malesuada sed, fringilla sit amet velit. Phasellus nec tincidunt risus. Nam id nulla et dolor tempor consectetur elementum sit amet lacus. Nunc non felis enim. Curabitur feugiat at quam ac auctor. Duis nibh enim, consequat id sagittis vitae, pharetra nec arcu. Pellentesque vitae nisl tincidunt purus faucibus dignissim ut egestas enim. Integer gravida suscipit interdum. Nunc ac tellus urna. Proin odio quam, pulvinar sed tristique sed, viverra sed mi. Phasellus dapibus ipsum in tempor aliquet. Nam a lectus eu purus volutpat sodales eu at ante. Duis quis scelerisque lectus. Mauris interdum massa quis nisi luctus tincidunt. Etiam ut varius arcu, venenatis lacinia nulla. Cras tristique porta accumsan.
Nam dignissim risus tellus, sit amet faucibus mi dignissim eget. Sed luctus dolor et augue convallis tristique. Etiam sed urna urna. Etiam id lacinia neque. Aliquam ac sapien lacus. Ut lacus quam, efficitur a orci a, gravida porttitor dui. Nunc eget augue vehicula, congue mi ultrices, tempus neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam at venenatis ante. Ut odio justo, auctor non lacinia at, sollicitudin vel augue. Pellentesque urna felis, posuere sit amet lacus fermentum, congue dignissim elit. Phasellus eleifend lectus vitae arcu tristique, et pellentesque nunc venenatis. Duis at est velit. Nullam vestibulum lorem auctor vestibulum ornare. Mauris sed libero ut libero pellentesque fermentum eget eu nisi. Nam augue dolor, mollis ut volutpat eget, vulputate sit amet nisl. Etiam at elit dapibus, laoreet est at, sagittis nisl. Pellentesque sed risus in quam pretium porta sed vitae velit. Phasellus risus odio, imperdiet vel vulputate eget, imperdiet eu nisl. Aliquam ultrices lorem nec aliquet consectetur.</p>
<br />
</div>
<div id="img2">
<img src="someImage.png" />
</div>
css:
body {
min-width:800px;
margin: 0;
background-color:blue; <!--this is a image -->
background-size: 100% auto;
background-attachment:fixed;
height:100%;
}
#menubar{
position:fixed;
top:5px;
right:0;
background-color:none;
height:auto;
z-index:1;
}
#container{
position:absolute;
top:75%;
}
#content{
width:100%;
background-color:white;
margin:0;
}
#img2{
width:100%;
margin:0;
}
#img2 img{
width:100%;
}
In the example you gave, they are using jquery.smoothwheel by IntelliJ IDEA.
Check this link. Maybe it's the effect you are searching for.
Hope it's useful!
Edit by OP:
After #Academia gave me this fiddle I manged to get it to work for my needs.
This is what I ended up with:
css:
body {
background: url(someImage.png);
background-size: 100% auto;
background-attachment:fixed;
margin: 0 auto;
width:100%;
height:1000px; /*key value to make this script work, else it only scrolls smoothly when your mouse is hovering over the #container*/
overflow:auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
#container{
width:100%;
background-color:white;
position:absolute;
top:700px; /*I intent to scroll the content over the bg image, that was my struggle, I had it in procentage first*/
}
#content{
width:100%;
background-color:white;
margin:0;
}
html:
<body>
<div id="container">
<div id="content">
<p>some content</p>
</div>
</div>
</body>
Now for the javascript, I had to add an function that would keep the top value of the container correct to the width of the screen
script for smoothscroll:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.smoothwheel.js"></script>
<script>
$(document).ready(function () {
$("body").smoothWheel()
});
</script>
script for the top value of the container, 0.36 because 1920/700 = 0.36, this depends on the top value you want to have:
<script type="text/javascript">
$(document).ready(function () {
var jqeuryElem = jQuery("#container");
var w = $(window).width();
var top = w *0.36;
jqeuryElem.css("top", top+"px");
});
$(window).resize(function () {
var jqeuryElem = jQuery("#container");
var w = $(window).width();
var top = w * 0.36;
jqeuryElem.css("top", top + "px");
});
</script>
I'll post the result when the website is done.
I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!
I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.
It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.
You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,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);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>
Ive made this jsfiddle that explains everything.
My JSFiddle
asd
Look what happens to the resize handler when you scroll down/up.
How do i change that? Could i add some css to this to stick always fixed at the bottom of the div?
The html/css structure is not correct. You should have a parent (resizable box), a child (with the handles) and a sub-child with the content.
This should do the trick:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></script>
<script type="text/javascript" >
jQuery(document).ready(function($) {
$("#resizable").resizable();
});
</script>
<style type="text/css">
#resizable{
width: 250px;
height: 200px;
background-color: #eee;
text-align: center;
}
#resizable .handles {
width:100%;
height:inherit;
overflow: auto;
}
#resizable .handles .content {
display:block;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="resizable">
<div class="handles">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut sagittis erat. Ut vitae dictum leo. Proin dignissim lobortis nunc, vitae suscipit ante viverra eu. Integer mauris orci, dignissim a venenatis convallis, dictum vitae leo. Nullam sapien tellus, tristique in venenatis sed, malesuada id justo. Aliquam lobortis consectetur augue, id condimentum odio bibendum sit amet. Suspendisse bibendum, urna nec luctus lobortis, ipsum risus placerat dolor, eget interdum dui mi ut neque. Nunc imperdiet pretium magna eget malesuada. Nam mattis magna in enim ultrices pharetra eu ac leo. Nullam sed purus dolor, a faucibus ipsum. Donec et sagittis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sollicitudin vehicula laoreet. Duis luctus mattis massa vehicula pulvinar. Integer dictum ultricies augue, non aliquet enim dictum ac. Etiam non mi in nisi porta pulvinar eu non dolor. Nullam et nisl eget sem auctor tincidunt vel ut metus. Vestibulum sed est quis mauris rutrum tristique. Aenean pellentesque malesuada leo non pharetra. Integer commodo, eros vel sollicitudin porta, turpis lacus accumsan magna, non imperdiet mauris mi ut lectus. Nulla eget velit purus. In et nulla mauris. Ut elementum ligula eget est gravida ut euismod tellus auctor. Cras enim velit, vulputate quis iaculis at, sagittis vel nisl. Proin sagittis est quis mi volutpat et molestie nisi pretium. Aliquam pulvinar aliquet nisl a laoreet. Suspendisse potenti. Praesent molestie mattis felis et suscipit. Curabitur vulputate est nec nunc sollicitudin ultricies. Aliquam et sapien eros, vitae molestie massa. Nullam quis pellentesque odio. Suspendisse at mauris vel massa consequat tempor sed eget nulla. Suspendisse ullamcorper, velit mattis condimentum sodales, est massa sollicitudin velit, vel laoreet turpis est ut metus. Suspendisse elementum, diam sit amet tincidunt cursus, orci erat sollicitudin neque, id varius augue nibh vitae odio. Proin congue metus id arcu congue adipiscing. Maecenas sed augue in metus placerat blandit non vel dui. Duis nec placerat justo. Maecenas metus dui, aliquet id fermentum non, fringilla mattis nibh. Donec porta pellentesque ligula, fringilla tristique justo aliquam non. Sed mi arcu, tincidunt a pulvinar eu, varius vitae ante. Donec congue egestas ipsum. Quisque feugiat, magna vel ultricies auctor, nulla velit luctus enim, sed adipiscing felis arcu vitae elit. Phasellus luctus sapien vitae tortor pulvinar vel placerat purus tincidunt. Phasellus posuere molestie purus. Donec mauris neque, bibendum nec consectetur eget, porttitor ut lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictums
</div>
</div>
</div>
</body>
</html>
hope this helps, happy coding :)
I want an overall scrollbar on the rightmost but it will only scroll a div within the Window and everything else stays static. Is this a css thing or a java script thing? I appreciate any help I can get. Thanks.
does either overflow: auto or overflow: scroll help? Referencing the spec might help explain more.
it's a css thing. make everthing elses' position fixed
Try using the css property "position:fixed" on the things you don't want to move and let everything else be normal.
Try out the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.maincontent{
width:300px;
margin:30px 100px;
}
.static1{
position:fixed;
top:10px;
left:100px;
width:300px;
height:20px;
background:red;
}
.static2{
position:fixed;
top:10px;
right: 30px;
width:100px;
height:40px;
background:green;
}
.static3{
position:fixed;
top: 300px;
left: 30px;
width:100px;
height:40px;
background:blue;
}
</style>
</head>
<body>
<div class="maincontent">
<h2>this is my main content that I want to scroll</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo mi nec sapien feugiat sit amet fermentum odio pretium. Nulla et velit risus. Aenean lectus sem, semper vel interdum ut, elementum ac tortor. Suspendisse aliquam lectus quis elit adipiscing dignissim. Nullam turpis dui, tincidunt quis egestas id, auctor quis purus. Morbi ac augue eu diam tempus venenatis tempor ut orci. Curabitur nec massa eget est porttitor euismod. Nam elementum tempus mauris. Duis eleifend lorem sed odio vestibulum tincidunt. Vestibulum nisl massa, imperdiet quis egestas nec, molestie sed ipsum.</p>
<p>In quis ornare felis. Vivamus a neque mi. Sed ac mi id nunc porta commodo. Quisque ipsum tellus, elementum a aliquam ut, convallis vitae leo. Aenean pulvinar, tellus in interdum vehicula, sapien eros sodales felis, sed tincidunt justo arcu id ipsum. Integer lacus risus, scelerisque sed pharetra sed, vehicula in enim. Morbi vitae urna neque. Phasellus enim metus, cursus ac rutrum nec, porttitor non ipsum. Suspendisse tempor vestibulum sapien, non lobortis magna vestibulum at. Nulla hendrerit adipiscing massa eu faucibus. Donec est ligula, luctus eu semper pretium, facilisis a tortor. Suspendisse malesuada vulputate est in lacinia. Fusce cursus cursus ipsum sit amet porta.</p>
<p>In in ligula at urna varius tristique. Mauris vitae tellus vel est vestibulum porta. Nulla feugiat ipsum rhoncus turpis elementum sed aliquam tortor volutpat. Mauris mauris sem, consectetur sed fringilla a, feugiat eu nunc. Proin a nibh orci. Praesent gravida rutrum sodales. Quisque eget dui ac massa vestibulum vestibulum non id purus. Praesent velit purus, commodo at scelerisque vitae, pretium sit amet lacus. Praesent faucibus lacus quis turpis condimentum sit amet tincidunt augue tempor. Nunc scelerisque ultricies lorem in gravida. Curabitur est turpis, feugiat vel auctor non, convallis id elit. Morbi arcu orci, vulputate non cursus id, tincidunt ac lectus. Vivamus sed dui mauris, quis lobortis diam. Maecenas auctor arcu eu turpis rhoncus feugiat. Curabitur nisi quam, auctor non porta eu, hendrerit eu eros.</p>
<div class="static1">
static content 1
</div>
<div class="static2">
static content 2
</div>
<div class="static3">
static content 3
</div>
</body>
</html>