JQuery Autoscroll/Stick to Bottom of Page
Problem - http://jsbin.com/aZiZipE/1/
Code -http://jsbin.com/aZiZipE/1/edit
I was using the following code below via autoclick to stick to the bottom...
$(document).scrollTop($(document).height());
I don't want to use an autoclick function just to get the page to display
on the bottom. Is there anyway to tell the document to stay at the bottom
of the page even when content is additionally added so that way I won't
have to scroll down, but scroll up when needed?
Full Code:
<!DOCTYPE html>
<html>
<head>
<title>Jquery Typewriter Effect</title>
<meta http-equiv='Content-Type' charset='utf-8'
content='text/html;charset=ISO-8859-1'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'
type='text/javascript'></script>
<style type="text/css">
body {
margin:0;
padding:0;
background:#fff;
font-family:Arial, Sans-Serif;
font-size:12px;
color:#000;}
#caption {
display:none;}
#container {
position:absolute;
top:0px;
left:0px;
width:90%;
height:auto;
padding:2em;}
div#indent {
padding-left:1.5em;}
</style>
<script type="text/javascript">
$(function() {
var ch = 0;
var item = 0;
var items = $('#caption li').length;
var time = 0;
var delay = 0;
var wait = 0;
var tagOpen = false;
$('#showCaption').css('width', ($('#caption').width() + 20));
function tickInterval() {
if(item < items) {
var text = $('#caption li:eq('+item+')').html();
type(text);
text = null;
var tick = setTimeout(tickInterval, time);
} else {
clearTimeout(tick);
}
}
function type(text) {
time = delay;
ch++;
if(text.substr((ch - 1), 1) == '<') {
if(text.substr(ch, 1) == '/') {
tagOpen = false;
}
var tag = '';
while(text.substr((ch - 1), 1) != '>') {
tag += text.substr((ch - 1), 1);
ch++;
}
ch++;
tag += '>';
var html = /\<[a-z]+/i.exec(tag);
if(html !== null) {
html = html[0].replace('<', '</') + '>';
tagOpen = html;
}
}
if(tagOpen !== false) {
var t = text.substr(0, ch) + tagOpen;
} else {
var t = text.substr(0, ch);
}
$('#showCaption').html(t);
if(ch > text.length) {
item++;
ch = 0;
time = wait;
}
}
var tick = setTimeout(tickInterval, time);
});
</script>
</head>
<body>
<div id="container">
<ul id="caption">
<li><!DOCTYPE html><br />
<html><br />
<head><br />
<title>Simple Example HTML Editor with Preview</title><br />
<meta http-equiv='Content-Type' charset='utf-8'
content='text/html;charset=ISO-8859-1'><br />
<meta content='width=device-width, height=device-height,
minimum-scale=1.0, maximum-scale=1.0' name='viewport'><br />
<link rel='stylesheet'
href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'><br
/>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'
type='text/javascript'></script><br />
<script
src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js'
type='text/javascript'></script><br />
<style type="text/css"><br />
body, .content {<br />
<div id="indent">
background-color:#303030;<br />
overflow:hidden;}<br /><br />
</div>
textarea#editor {<br />
<div id="indent">
display:block;<br />
margin:0px;<br />
padding:.5em;<br />
width:100%;<br />
height:100%!important;<br />
border:0px;<br />
font-family:monospace;<br />
line-height:1;<br />
min-height:1.4em;<br />
line-height:1.4em;<br />
font-size:1em;<br />
border-radius:0px;<br />
resize:none;<br />
outline:none;<br />
background-color:#1c1c1c;<br />
color:#a9a9a9;<br />
box-shadow:0em 0em 0em #000, inset 0em 0em 1em #000;<br />
text-shadow:.125em .125em .5em #000;}<br /><br />
</div>
::-webkit-input-placeholder { /* WebKit browsers */<br />
<div id="indent">
color: #666;}<br /><br /></div>
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */<br />
<div id="indent">
color: #666;}<br /><br />
</div>
::-moz-placeholder { /* Mozilla Firefox 19+ */<br />
<div id="indent">
color: #666;}<br /><br />
</div>
:-ms-input-placeholder { /* Internet Explorer 10+ */<br />
<div id="indent">
color: #666;}<br /><br />
</div>
div#preview {<br />
<div id="indent">
width:100%;<br />
height:100%;<br />
overflow:auto;<br />
background-color:#fff;}<br /><br />
</div>
.content .ui-grid-a {<br />
<div id="indent">
display:inline-block;<br />
width:100%;<br />
height:100%;<br />
overflow:auto;}<br /><br />
</div>
.content .ui-block-a {<br />
<div id="indent">
display:inline-block;<br />
height:100%;<br />
overflow:auto;}<br /><br />
</div>
.content .ui-block-b {<br />
<div id="indent">
display:inline-block;<br />
height:100%;<br />
overflow:auto;}<br />
</div>
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
<div id="indent">
var fixgeometry = function() {<br />
<div id="indent">
/* Some orientation changes leave the scroll position at something<br />
* that isn't 0,0. This is annoying for user experience. */<br />
scroll(0, 0);<br /><br />
/* Calculate the geometry that our content area should take */<br />
var header = $(".header:visible");<br />
var footer = $(".footer:visible");<br />
var content = $(".content:visible");<br />
var viewport_height = $(window).height();<br /><br />
var content_height = viewport_height - header.outerHeight() -
footer.outerHeight();<br /><br />
/* Trim margin/border/padding height */<br />
content_height -= (content.outerHeight() - content.height());<br />
content.height(content_height);<br />
</div>
}; /* fixgeometry */<br /><br />
</div>
<div id="indent">
$(document).ready(function() {<br />
<div id="indent">
$(window).bind("orientationchange resize pageshow", fixgeometry);<br />
</div>
});<br /><br />
</div>
<div id="indent">
// Indent using the TAB<br />
$('textarea.tab').keydown(function(e) {<br />
<div id="indent">
if(e.keyCode == 9) {<br />
<div id="indent">
var start = $(this).get(0).selectionStart;<br />
$(this).val($(this).val().substring(0, start) + "\t" +
$(this).val().substring($(this).get(0).selectionEnd));<br />
$(this).get(0).selectionStart = $(this).get(0).selectionEnd =
start + 1;<br />
return false;<br />
</div>
}<br />
</div>
});<br /><br />
</div>
<div id="indent">
// Indent using Spaces<br />
$('textarea.space').keydown(function(e) {<br />
<div id="indent">
if(e.keyCode == 9) {<br />
<div id="indent">
var start = $(this).get(0).selectionStart;<br />
$(this).val($(this).val().substring(0, start) + " " +
$(this).val().substring($(this).get(0).selectionEnd));<br />
$(this).get(0).selectionStart = $(this).get(0).selectionEnd =
start + 4;<br />
return false;<br />
</div>
}<br />
</div>
});<br /><br />
</div>
<div id="indent">
var input = $('#editor'),<br />
<div id="indent">
preview = $("[ID$=preview]");<br /><br />
</div></div>
<div id="indent">
input.keyup(function(e) {<br />
<div id="indent">
preview.html(input.val());<br />
</div>
});<br />
</div>
});<br />
</script><br />
</head><br />
<body><br />
<div id="indent">
<div class="content" data-role="content"><br />
<div id="indent">
<div class="ui-grid-a"><br />
<div id="indent">
<div class="ui-block-a"><br />
<div id="indent">
<textarea class="space" id="editor" placeholder="NOTE:
div#preview acts as your body (#editor is the main text
editor of page. Any css applied to this will overwrite
original css)"></textarea><br />
</div>
</div><br />
<div class="ui-block-b"><br />
<div id="indent">
<div id="preview"></div><br />
</div>
</div><br />
</div>
</div><!-- /grid-a --><br />
</div>
</div><br />
</div>
</body><br />
</html></li>
</ul>
<div id="showCaption"></div>
</div>
</body>
</html>
No comments:
Post a Comment