I'm trying to create a website that's going to be a presentation. I had this idea to make it a slideshow effect using JS. Right now I have some of the functions I want but It's not very clean. The general Idea is that you start the page on the first slide, and when you press space bar it will fade out the slide and fade in the next one. Then when you press space bar on the second page it moves on to the third. So on and so-forth.
I have an example below using JS BIN but the idea isn't implemented very well. If someone could help me flesh it out and make it more functional I would appreciate it very much. Ideally the code will allow me to easily add slides but I can't wrap my head around how to do so. I'm playing with the thought of having either a for loop, switch statement, or something similar that would allow me to do so but I can't nail down which one I need to use exactly. Thanks for taking the time to read this far.
JS BIN EXAMPLE
You can simplify HTML and CSS a lot, there is no need for css repeating, or using of ids, for the same looking elements:
<div class="div">IntroPage</div>
<div class="div">Page0</div>
<div class="div">Page1</div>
<div class='div'>
END
</div>
CSS:
body{
font-family: 'apercuregular', arial, sans-serif;
background-color: #96bff7;
overflow:hidden;
position: absolute;
margin: 0px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10;
}
.div{
position:absolute;
width:400px;
top:170px;
left:50%;
margin-left:-26px;
font-weight:300;
line-height:110%;
text-align:justify;
background-color:#96bff7;
}
And jQuery part, could be more elegant, for sure, but this will work too. Set z-indexes (avoid css repeating), set counter, number of slides, and slide on ENTER click:
i = 0;
num_of_slides=4;
//set z-indexes
$('.div').each(function(i) {
$(this).css('z-index',num_of_slides-i);
});
$(document).keypress(function(e) {
if (e.keyCode == 13) {
if (i <= num_of_slides) {
i++;
$('.div').eq(i).fadeIn(2000);
$('.div').eq(i - 1).fadeOut(2000);
//if you want to go from the slideshow start
if (i == num_of_slides) {
i = 0;
$('.div').eq(i).fadeIn(2000);
}
}
}
});
Demo: https://jsfiddle.net/tx0p4xge/
You can use bootstrap slideshow. see this.
I fiddled around with your jsbin and it seemed to work fine, although i did change the keycode to 13 (enter) instead of 32 (spacebar) - i find this varies from pc to mac. I adjusted the css a little, have a look at the updated code (snippet below). I did insert dummy text - maybe this may be an easier way to go? Unless you have pages already prepared? But either way, I would recommend verifying if the material fits on the screen before you give the presentation. All you have to do now is copy and paste the center divs and rename them center3, 4 etc. Your js loops through the pages at the moment, but you can see how to fix that - you managed to kill the first slide! And it is a WIP (work in progress).
A great start to your presentation.
Rach
var lastLoaded = "";
$(document).ready(function(){
initIntro();
});
function initIntro(){
$("#title");
$(document).keypress(function(e){
if (e.keyCode == 13) {
killIntro();
}
});
}
function killIntro(){
$("#title").fadeOut(1000, function(){
$("body").remove("#title");
});
initPage0();
}
function initPage0(){
$("#center").fadeIn(1000, function(){
$("body");
});
$(document).keypress(function(e){
if (e.keyCode == 13) {
killPage();
}
});
}
function killPage(pg){
$("#center").fadeOut(1000, function(){
$("body").remove("#center");
initPage1();
});
}
function initPage1(){
$("#center2").fadeIn(1000, function(){
$("body").load("./pages/page1.php");
});
}
body{
font-family: 'apercuregular', arial, sans-serif;
background-color: #96bff7;
overflow:hidden;
position: absolute;
margin: 0px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10;
}
h2, h3, h4{text-align:center;}
div section{text-align:justify;}
#title{
position:absolute;
width:100%;
height:100%;
top:5%;
margin:0 auto;
font-weight:300;
line-height:1.1em;
background-color:#96bff7;
z-index: 10;
}
#center{
position:relative;
width:100%;
height:100%;
top:5%;
margin:0 auto;
font-weight:300;
line-height:1.1em;
background-color:#96bff7;
z-index: 9;
}
#center2{
position:relative;
width:100%;
height:100%;
top:5%;
margin:0 auto;
font-weight:300;
line-height:1.1em;
background-color:#96bff7;
z-index: 8;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Presentation</title>
</head>
<body>
<div id="title"><h2>Presentation</h2>
<h4>by Your Name</h4></div>
<div id="center"><h3>Page</h3>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae scelerisque massa. Cras sed tortor pellentesque dolor interdum dapibus. Sed lobortis feugiat mauris, vel posuere nunc sagittis vitae. Aenean diam purus, pretium vitae sem quis, varius scelerisque orci. Sed in lectus pellentesque augue scelerisque congue. Sed cursus ultrices ante, id volutpat orci congue sit amet. Proin suscipit ipsum nec enim varius consequat. Mauris eget vulputate nisl, commodo condimentum nisi. Integer sodales consectetur metus, non mattis leo cursus in. Duis lacinia molestie dui sit amet euismod. In ullamcorper molestie arcu, in consequat augue eleifend tincidunt. Curabitur quis turpis efficitur, tempus mi id, hendrerit lorem.</p>
<p>
Ut ut laoreet diam. Vestibulum bibendum, diam vitae cursus convallis, dui lorem ultrices est, ac consectetur libero est a dolor. Maecenas tincidunt tristique augue, non bibendum dolor. Duis ut dolor vel lorem hendrerit ultrices et in tortor. Curabitur bibendum libero sit amet eros rutrum, consectetur molestie lorem efficitur. Sed eleifend, diam a iaculis sollicitudin, lorem ipsum malesuada massa, ac aliquam lorem tortor nec justo. Mauris finibus vulputate semper. Quisque vitae tempus diam. Ut bibendum nisi nec massa blandit feugiat. Sed non nisi sapien. Phasellus ac ipsum eu ipsum mattis aliquam vitae eu purus. Proin vel egestas libero. Phasellus non finibus erat.</p></section></div>
<div id="center2"><h3>Page2</h3>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae scelerisque massa. Cras sed tortor pellentesque dolor interdum dapibus. Sed lobortis feugiat mauris, vel posuere nunc sagittis vitae. Aenean diam purus, pretium vitae sem quis, varius scelerisque orci. Sed in lectus pellentesque augue scelerisque congue. Sed cursus ultrices ante, id volutpat orci congue sit amet. Proin suscipit ipsum nec enim varius consequat. Mauris eget vulputate nisl, commodo condimentum nisi. Integer sodales consectetur metus, non mattis leo cursus in. Duis lacinia molestie dui sit amet euismod. In ullamcorper molestie arcu, in consequat augue eleifend tincidunt. Curabitur quis turpis efficitur, tempus mi id, hendrerit lorem.</p>
<p>
Ut ut laoreet diam. Vestibulum bibendum, diam vitae cursus convallis, dui lorem ultrices est, ac consectetur libero est a dolor. Maecenas tincidunt tristique augue, non bibendum dolor. Duis ut dolor vel lorem hendrerit ultrices et in tortor. Curabitur bibendum libero sit amet eros rutrum, consectetur molestie lorem efficitur. Sed eleifend, diam a iaculis sollicitudin, lorem ipsum malesuada massa, ac aliquam lorem tortor nec justo. Mauris finibus vulputate semper. Quisque vitae tempus diam. Ut bibendum nisi nec massa blandit feugiat. Sed non nisi sapien. Phasellus ac ipsum eu ipsum mattis aliquam vitae eu purus. Proin vel egestas libero. Phasellus non finibus erat.</p></section></div>
</body>
</html>
Related
I have a lorem ipsum text that is truncated. When you press the "readmore »" button it fully displays the text.
My issue is the text shifts up vertically when you press the "readmore »" button.
$(document).ready(function(){
$(".readmore-btn").on("click",function(){
$(".readmore").toggleClass("truncate");
})
});
.truncate {
max-height: 55px;
overflow-y:hidden;
}
.readmore-btn {
color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Text before</h1>
<div class="readmore truncate">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. </p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>
Moving the overflow-y: hidden; from the .truncate class and moving it to the .readmore class resolves the shifting issue.
$(document).ready(function(){
$(".readmore-btn").on("click",function(){
$(".readmore").toggleClass("truncate");
})
});
.readmore {
overflow-y:hidden;
}
.truncate {
max-height: 55px;
}
.readmore-btn {
color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Text before</h1>
<div class="readmore truncate">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. Vestibulum malesuada neque sit amet eros efficitur pharetra. Vestibulum consequat purus sit amet ex euismod, ut consequat tellus vehicula. Proin suscipit in risus ut placerat. Integer porta id libero ac finibus. Ut at tellus turpis. Phasellus dolor erat, ullamcorper a risus ultrices, iaculis malesuada nisl. Integer tellus arcu, sodales quis mattis ac, sagittis eu turpis. Suspendisse tristique tempor pharetra.</p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>
This is caused by the default margins the browsers adds to paragraphs.
Just add
.truncate p{margin:0}
to your css
I have the following page, which is behaving exactly how I want it to.
However, I know the page can be written more efficiently in two ways:
First and most importantly, I am repeating a javascript function. This is to denote which text should be expanded when its specific button is clicked, but I know the two can be written as one since they share the same type of functionality.
Second, the css is clumsy. I've used !important to override whether text is shown or hidden.
Can someone please suggest the most eloquent rendition of this page?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.very-hidden {
display: none!important;
}
.mystyle {
display: block!important;
}
</style>
</head>
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand1()">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand2()">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
<script type="text/javascript">
function expand1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("mystyle");
var element = document.getElementById("b1");
element.classList.toggle("very-hidden");
}
function expand2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("mystyle");
var element = document.getElementById("b2");
element.classList.toggle("very-hidden");
}
</script>
</body>
Try this:
Use the same class to hidde the elements, and use the same function passing a variable with the number of the div you are clicking, so you can so you can build the id name of the button and the div.
function expand(number) {
var id = 'myDIV'+ number
var divElement = document.getElementById(id);
divElement.classList.toggle("mystyle");
var idButton = 'b'+ number
var button = document.getElementById(idButton);
button.classList.toggle("hidden");
}
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.mystyle {
display: block;
}
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand('1')">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand('2')">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
</body>
Hope this help you :)
I am making a page where the page is segregated into two sections, left (70% width) and right (30%). Both the columns have dynamic content in them coming from the database.
What I want is that when the content in the right section finishes the left section should take all the width i.e 100%. 70% its own width and 30% freed by the right section. Here is the pictorial representation of what I want:
How to achieve this using only two divs? i.e left div and right div with percentages.
One might propose that I should Use three divs. One 70%, on the left, 30% on the right and 100% below both the divs but that is not what I want because of the dynamic contents of the divs. I want when the content of the right div is finished the left div should take 100% of the space then. The content on the right div can be 2 lines or 100 lines, that is purely dynamic.
Here is my current HTML structure:
<div class='main'>
<div class='left'></div>
<div class='right'></div>
</div>
Here is my CSS:
<style>
.main { width: 100%; }
.left { float: left; width: 70%; }
.right { float: left; width: 30%; }
</style>
But this is not working, with this code the content on left side stays inside 70% after content on right side is finished. Any suggestions?
Use the float first approach. Move the <div class='right'> above the left div in the mockup, actually, you won't need the left div if you want.
.right {
float: right;
width: 30%;
height: 100px;
background: yellow;
}
<div class='main'>
<div class='right'>right</div>
<div class='left'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
<p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>
</div>
Example without the left div, the result is the same as above.
.right {
float: right;
width: 30%;
height: 100px;
background: yellow;
}
<div class='main'>
<div class='right'>right</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
<p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>
I like to use
display: flex;
http://codepen.io/hesonline/pen/AXRGKd
Click on the header of the right section to remove it.
Probably a very stupid question, but I added overflow:hidden to my body to remove white space that appears beneath it but this disables scrolling, I realize the issue is probably elsewhere and this isn't the fix, but am wondering if it's possible to hide overflow but enable scrolling?
Try
#elem { overflow:auto }
this will enable scrolling when the conatining content is bigger that the parent
If you want to do it with webkit you can do it like this:
#container {
overflow: scroll;
overflow-x: hidden;
height:65px;
width:350px
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
</div>
element{ overflow: scroll; }
This will remove white space and if content is overflow generate scroll automatically.
Try This:
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim quis.
Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nuncleo a
libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas.
</div>
</div>
CSS
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child{
height: 150px;
width: 312px;
padding-right:15px;/* change as per your browser scroll*/
overflow-y: scroll;
}
I have been seeing this thing for months and years and i really wanna know how to do that one.
For example, there is an element in the middle of the page. and it is in absolute position. When scroll downs and comes to that element, it becomes fixed positioned and follows the scroll, when scroll up and back to middle of the page it becomes absolute again.
I can give google adwords accounts page as an example, in the campaigns page, your keywords' header is the same thing.
how to do that one ?
thanks
Something like this (tested on Chrome) will work:
<html>
<head>
<title>Example</title>
<style>
.banner {position: absolute; top: 40px; left: 50px; background-color:cyan}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script type="text/javascript" >
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop();
if (top < 40) top= 40;
$('.banner').css({top: top})
})
})
</script>
</head>
<body>
<div class="banner">This is the banner</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/><br/><br/> Cras rhoncus euismod sagittis.<br/><br/><br/> Fusce tincidunt consectetur ante eu commodo.<br/><br/><br/> Fusce lacinia consectetur nulla sit amet mattis.<br/><br/><br/> In viverra bibendum nibh vitae pharetra.<br/><br/><br/> Nam non eros semper ipsum facilisis fringilla.<br/><br/><br/> Phasellus sit amet purus interdum arcu hendrerit sagittis.<br/><br/><br/> Sed fermentum, orci non tincidunt pellentesque, tellus ipsum ultrices dui, at venenatis mi turpis non odio.<br/><br/><br/> Etiam elementum massa eu libero molestie nec pulvinar lacus suscipit.<br/><br/><br/> Etiam erat massa, mattis et sollicitudin eu, posuere commodo ligula.<br/><br/><br/> Vestibulum nec sem arcu.<br/><br/><br/> Vestibulum justo risus, feugiat at tristique a, sagittis vel dui.<br/><br/><br/> Sed enim erat, scelerisque sit amet accumsan scelerisque, vestibulum vitae dui.<br/><br/><br/> Integer et orci enim.<br/><br/><br/> Aliquam est mauris, consequat sed egestas vitae, scelerisque non sapien.<br/><br/><br/> Nam feugiat diam eu elit dignissim commodo.<br/><br/><br/> Curabitur eleifend lacus a leo vehicula rhoncus.<br/><br/><br/> Fusce luctus antequis urna sodales vestibulum.<br/><br/><br/> Aliquam tempus nisl vitae arcu bibendum sollicitudin.<br/><br/><br/>
</body>
Edit: positioning the element 40 px under the title, but making it visible if the user scrolls down
you can do this with any element by applying the css:
#keepmefixed{
position:fixed;
}
however be aware that IE's support of this is missing, and it doesn't seem to work in Safari on the iPad (from my testing). You'll need to hook in some JavaScript to get it to work in these browsers.