I'm working on this shoutbox located on my home page
The shoutbox div is split up into 2 iframes, one for the messages, one for the input form.. It works fine.
The Iframe source for the messaging(scrolling part) is here:
http://www.rebewlabs.com/Shoutbox/index2.php
I'm trying to get it so that when it hit the bottom it stops(currently it repeats).. But I cant.. I'm fairly new to javascript, But i'm trying to learn it.
Will rep, Here's my source code for the page
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#daddy-shoutbox {
padding: 5px;
background:#000;
color: white;
width: 600px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;0
}
.shoutbox-list {
border-bottom: 1px solid #666;
padding: 5px;
display: none;
}
#daddy-shoutbox-list {
text-align: left;
margin: 0px auto;
}
#daddy-shoutbox-form {
text-align: left;
}
.shoutbox-list-time {
color: #666;
}
.shoutbox-list-nick {
margin-left: 5px;
font-weight: bold;
}
.shoutbox-list-message {
margin-left: 5px;
}
</style>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.form.js"></script>
</head>
<body>
<div id="datacontainer" style="position:absolute;left:1px;top:10px;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->
<center>
<div id="daddy-shoutbox">
<div id="daddy-shoutbox-list"></div>
</div>
</center>
<script type="text/javascript">
var count = 0;
var files = '';
var lastTime = 0;
function prepare(response) {
var d = new Date();
count++;
d.setTime(response.time*1000);
var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
var string = '<div class="shoutbox-list" id="list-'+count+'">'
+ '<span class="shoutbox-list-time">'+mytime+'</span>'
+ '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
+ '<span class="shoutbox-list-message">'+response.message+'</span>'
+'</div>';
return string;
}
function success(response, status) {
if(status == 'success') {
lastTime = response.time;
$('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />');
$('#daddy-shoutbox-list').append(prepare(response));
$('input[@name=message]').attr('value', '').focus();
$('#list-'+count).fadeIn('slow');
timeoutID = setTimeout(refresh, 3000);
}
}
function validate(formData, jqForm, options) {
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('Please fill in all the fields');
$('input[@name='+formData[i].name+']').css('background', 'red');
return false;
}
}
$('#daddy-shoutbox-response').html('<img src="'+files+'images/loader.gif" />');
clearTimeout(timeoutID);
}
function refresh() {
$.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
if(json.length) {
for(i=0; i < json.length; i++) {
$('#daddy-shoutbox-list').append(prepare(json[i]));
$('#list-' + count).fadeIn('slow');
}
var j = i-1;
lastTime = json[j].time;
}
//alert(lastTime);
});
timeoutID = setTimeout(refresh, 3000);
}
// wait for the DOM to be loaded
$(document).ready(function() {
var options = {
dataType: 'json',
beforeSubmit: validate,
success: success
};
$('#daddy-shoutbox-form').ajaxForm(options);
timeoutID = setTimeout(refresh, 100);
});
</script>
<!-- END SCROLLER CONTENT -->
</div>
<script type="text/javascript">
/***********************************************
* IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=2
//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
</body>
</html>