We Keep Coding

Creating a "Slideshow" effect using JS/jQuery

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>

jQuery - how to make a horizontal splitter to be shown at a middle even when the screen been re-sized

first of all I'm using this plugin - jQuery Splitter .
Now what I'm trying to do is to make the splitter been shown at the middle also when the height of the screen had changed.
In order to do so I've used the next code -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.splitter-0.14.0.js"></script>
<link href="jquery.splitter.css" rel="stylesheet" />
<script>
jQuery(function ($) {
var height = $(window).height();
$('#foo').height(height).split({ orientation: 'horizontal', limit: 50 });
$('#b').height(height / 2);
});
$(window).resize(function () {
var height = $(window).height();
console.log(height);
$('#foo').height(height).split({ orientation: 'horizontal', limit: 50 });
$('#b').height(height/2);
});
</script>
<style>
.splitter_panel .hsplitter{
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="foo">
<div id="a">
<div id="x">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper.
</div>
</div>
</div>
<div id="b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper. Nulla suscipit, massa vitae suscipit ornare, tellus est consequat nunc, quis blandit elit odio eu arcu. Nam a urna nec nisl varius sodales. Mauris iaculis tincidunt orci id commodo. Aliquam non magna quis tortor malesuada aliquam eget ut lacus. Nam ut vestibulum est. Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet. Nulla vel odio erat, ac mattis enim.
</div>
</div>
</body>
</html>
Currently, if let's say I moved the splitter to a cretin position and then I've changed the screen height, the splitter stays at it's position.
Any idea what am I doing wrong? Or maybe what can I do in order to make it work?
Thanks in advance for any kind of help.

Your code looks OK.
You can try this, though it's more of a tidy-up than a fix.
jQuery(function($) {
$(window).on('resize', function() {
var height = $(window).height();
console.log(height);
$('#foo').height(height).split({ orientation:'horizontal', limit:50 });
$('#b').height(height / 2);
}).trigger('resize');
});
If it works initially but not after a resize, then you have to conclude that splitter can't be re-invoked. Maybe apply to the author for an improvement or find a way to destroy splitter before re-invoking.

capture overflow text height using javascript

i am using overflow:hidden property in the css which makes the text to be hidden when it goes outside the container.
can any one please let me know if there is a way to capture the height of the whole text including the overflow text
as well. height() value is just returning me the height of the container and not the overflow text ?

Use scrollHeight, see documentation.
$('#id')[0].scrollHeight

Live demo
JQuery
$('document').ready(function(){
$("#info").text("Width of real text: "+$('.real').css('width'));
$("#info").html($("#info").html() + "<br/>Height of real text: "+$('.real').css('height'));
});
HTML
<div class="overflow">
<div class="real">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non justo eget eros accumsan mattis. In a auctor magna, sit amet dapibus sapien. Mauris lectus justo, ornare eu pretium in, fringilla nec risus. Phasellus at risus dapibus, imperdiet tellus lacinia, feugiat risus. Nullam ultrices luctus ante, id aliquet eros. In iaculis elit ut hendrerit facilisis. Cras tristique non orci non sodales. Aliquam semper libero sed diam venenatis, imperdiet rhoncus augue eleifend. Nullam euismod mauris neque, ac semper erat posuere a. Nam a tortor commodo, adipiscing nisl vel, sollicitudin nisl. Suspendisse adipiscing laoreet neque sit amet tempor.
</div>
</div>
<div id="info"></div>
CSS
.overflow{
width:200px;
height:100px;
overflow:hidden;
}
.real{
width:300px;
}
#info{
background-color:gray;
margin-top:15px;
}

How To Fix A DIV When Scroll Horizontally And Allow To Scroll When Scroll Vertically?

I have a problem. I have a webpage that is too wide like 3 time of a screen width. I allow that webpage to scroll horizontally and vertically both. But now I added a menu bar. Here I have a problem. I want my menu bar DIV to scroll vertically with page but be fix when visitor scroll my web page horizontally. How to do this?
Note: First I want CSS code, If not able to do with that then Pure JavaScript code(No JQuery).
Problem DEMO: www.jsfiddle.net/X8s4X

Thanks for reading my Question. I got solution myself and now sharing that code below. I also created a live DEMO at www.jsfiddle.net/X8s4X/1/ for a quick view.
<script type='text/javascript'>
window.onscroll = xScroll;
function xScroll(){
var x = window.pageXOffset;
var y = window.pageYOffset;
if (x){
document.getElementById('one').style.position = 'fixed';
}
if (y){
document.getElementById('one').style.position = 'relative';
}
}
</script>
<style type='text/css'>
div#wrapper {
width:2000px;
margin:0;
padding:0;
}
div#one {
height: 50px;
background: #ddd;
width: 100vw;
}
div#two {
background: #efefef;
}
</style>
<div id="wrapper">
<div id="one">
This DIV Should Be Fixed When Scroll Horizontally And Will Be Scroll Able When Scroll Vertically.
</div>
<div id="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec consequat ante. Proin sit amet mauris pretium, tristique risus et, eleifend enim. Phasellus gravida enim a lorem aliquet semper. Duis placerat sed dui ut feugiat. Curabitur elementum eu leo eget vestibulum. Praesent vel condimentum est. Nullam dignissim, nulla eu tincidunt tempor, sem turpis interdum elit, non rhoncus orci ante sit amet lectus. Vivamus ut dolor id tortor venenatis semper. Ut id tortor consectetur, pretium felis a, vehicula massa. Integer ultrices dui id nisl accumsan, eu dictum sapien mollis. Vivamus volutpat dignissim fringilla. Aenean vitae felis consectetur, tincidunt augue quis, fringilla augue. Nam ultrices lobortis quam eget rhoncus. Fusce eu ante ut mauris fermentum euismod non et nisl. Nulla posuere rutrum massa non malesuada.
</div>
</div>

jQuery.. div reveal/slide?

I have a div, which has content in it.
The content could be really long, or the content could be really small.
I don't want the content to stretch the page on page load if it is long, I want them to click a "more" link and it will slide down and reveal the rest of the content.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.
Below it is a bar or link that says "show the rest"
Up on click, this div lengthens and shows the rest of the content:
Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse vulputate mi egestas
ligula feugiat volutpat. Morbi eros
felis, aliquam in varius id, sodales
quis nunc. Nulla sagittis consectetur
arcu, sed auctor odio placerat quis.
Praesent vitae lacus neque. Curabitur
ultricies tristique sollicitudin.
Suspendisse malesuada nunc at augue
interdum at facilisis ipsum gravida.
Nunc congue sapien sed sem tincidunt
ut adipiscing neque lacinia. Praesent
facilisis quam sed tellus sodales id
tristique massa ullamcorper. Donec sem
turpis, cursus in elementum id,
tincidunt a libero. Etiam feugiat, sem
quis dictum imperdiet, nisl ante
pharetra erat, ut ornare nulla justo
ac sapien.
I know itll be hard to control what will be cut off, blah blah but it isn't for that type of thing. The div does not contain text, it contains a list of features, for example X listing may have 4 features, Z listing may have 14 features, instead of the page stretching if the listing has 14 features listed vertically, we want it to only show a few and then they must click "show me more" for it to slide down and reveal the rest.
How would I go about doing this? Even a jsfiddle to demonstrate it?
Thank you :)

Try giving a fixed height to the div. You can use CSS for this. Then compare height of the list with the outer div. If it is greater show the bar with link show more. On click of this bar you can manage the height of outer div. Like this -
CSS
.parentDiv{
height:some fixed height px;
overflow: auto;
}
Jquery
var parentHeight = $('.parentDiv').height();
var listHeight = $('#List').outerHeight(true);
if(parentHeight < listHeight) {
$('#linkBar').show();
}
$('#linkBar').click(function(){
//$('.parentDiv').height(listHeight);
//OR you can use following code to animate the div
$('.parentDiv').animate({'height': listHeight}, 'slow')
});

Here's a working demo of my implementation (coincidentally similar to the answer given above; I was making this before any answers were given): http://jsfiddle.net/7fhrN/15/
It works for users without JavaScript and gives graceful degradation to your page. Try switching the JS library to something random on JsFiddle and click Run.
HTML:
<div class="stretchy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.</div>
<div class="stretchy">Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.</div>
CSS:
.stretchy
{
margin: 20px;
padding: 5px;
background-color: rgb(240, 240, 240);
overflow: hidden;
position: relative;
padding-bottom: 20px;
}
.inner
{
max-height: 120px;
overflow: hidden;
}
.reveal
{
position: absolute;
bottom: 0px;
}
JavaScript:
$(document).ready(function()
{
$('.stretchy').each(function()
{
if ($(this).height() > 130)
{
$(this).replaceWith('<div class="stretchy"><div class="inner">' + $(this).html() + '</div>Show me more lipsum</div>');
}
});
$('.reveal').toggle(function()
{
$(this).parent().find('.inner').animate({maxHeight: '1000px'});
}, function() {
$(this).parent().find('.inner').animate({maxHeight: '120px'});
});
});
Basically, I iterate over all the <div>s with the class stretchy. If they are too big, I replace them with a <div> with a container and a link at the bottom which changes the max-height of the inner <div> to some ridiculous value.
Just try it. Seeing > having me explain it to you.