Inaczej mówiąc okienko z czatem się rozciąga w dół. Tak jak widać na tym screenie Kliik
Co zrobić, żeby tak się nie działo ? żeby tekst w czasie pisania przesuwał się do góry i żeby okienko z czatem utrzymywało swoją stałą długość (stałe okienko) tak jak widać na tym poniższym screenie:
Tak wygląda kod mojego czata.
daddy-shoutbox.php
Kod: Zaznacz cały
<?php
include '../helpers.php';
function replace(&$item, $key) {
$item = str_replace('|', '-', $item);
}
if (!function_exists('file_put_contents')) {
function file_put_contents($fileName, $data) {
if (is_array($data)) {
$data = join('', $data);
}
$res = @fopen($fileName, 'w+b');
if ($res) {
$write = @fwrite($res, $data);
if($write === false) {
return false;
} else {
return $write;
}
}
}
}
//file_put_contents('debug.txt', print_r($_GET, true));
switch($_GET['action']) {
case 'add':
array_walk($_POST, 'replace');
$arr = file('messages.txt');
if(count($arr) > 10)
array_shift($arr);
$_POST['nickname'] = htmlentities($_POST['nickname'], ENT_COMPAT, 'utf-8');
$_POST['message'] = htmlentities($_POST['message'], ENT_COMPAT, 'utf-8');
$time = time();
$arr[] = $time.'|'.$_POST['nickname'].'|'.$_POST['message'].'|'.$_SERVER['REMOTE_ADDR']."\n";
file_put_contents('messages.txt', implode('', $arr));
$data['response'] = 'Good work';
$data['nickname'] = $_POST['nickname'];
$data['message'] = bbcode($_POST['message']);
$data['time'] = $time;
break;
case 'view':
$data = array();
$arr = file('messages.txt');
if(!$_GET['time'])
$_GET['time'] = 0;
foreach($arr as $row) {
$aTemp = null;
list($aTemp['time'], $aTemp['nickname'], $aTemp['message']) = explode('|', $row);
$aTemp['message'] = bbcode($aTemp['message']);
if($aTemp['message'] AND $aTemp['time'] > $_GET['time'])
$data[] = $aTemp;
}
//file_put_contents('debug.txt', print_r($data, true));
break;
}
require_once('JSON.php');
$json = new Services_JSON();
$out = $json->encode($data);
print $out;
?>Kod: Zaznacz cały
<body>
<center>
<?php if (isset($_SESSION['login'])){
echo '<div id="daddy-shoutbox">
<div id="daddy-shoutbox-list"></div>
<br />
<form id="daddy-shoutbox-form" action="shoutbox/daddy-shoutbox.php?action=add" method="post">
<input type="hidden" name="nickname" value='.$_SESSION['login'].' /> Say: <input type="text" name="message" />
<input type="submit" value="Wyślij" />
<span id="daddy-shoutbox-response"></span>
</form>
</div>
';} else {echo '<p style="background-color:#86AED7; width: 300px; color:#333333; font-weight: bold">Czat tylko dla osób zarejestrowanych.</p>';}
?>
</center>
<script type="text/javascript">
var count = 0;
var files = '/shoutbox/';
var lastTime = 0;
function prepare(response, pozycja) {
var d = new Date();
count++;
d.setTime(response.time*1000);
var godzina = d.getHours();
var minuta = d.getMinutes();
var mytime = ['(', godzina > 9 ? '' : '0', godzina, ':', minuta > 9 ? '' : '0', minuta, ')'].join('');
var string = '<div class="shoutbox-list' + (pozycja % 2 ? ' co_drugi_wpis' : '') + '" 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, $('#daddy-shoutbox-list').children().length));
$('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], $('#daddy-shoutbox-list').children().length));
$('#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>
</body>Kod: Zaznacz cały
<div id="daddy-shoutbox">
<script type="text/javascript" src="/bbcode.js"></script>
<script type="text/javascript" src="/adds.js"></script>
<div id="daddy-shoutbox-list"></div>
<br />
<form id="daddy-shoutbox-form" action="/shoutbox/daddy-shoutbox.php?action=add" method="post">
<fieldset>
<div>
<div class="bbcode">
<button type="button" onclick="bbcode('b', {name:'message'})">B</button>
<button type="button" onclick="bbcode('i', {name:'message'})">I</button>
<button type="button" onclick="bbcode('u', {name:'message'})">U</button>
<select onchange="if (this.selectedIndex > 0)sizeFontColor('color', this.options[this.selectedIndex].value, 'message')">
<option>Kolor</option>
<option value="darkred" style="color:darkred">Ciemnoczerwony</option>
<option value="red" style="color:red">Czerwony</option>
<option value="orange" style="color:orange">Pomarańczowy</option>
<option value="brown" style="color:brown">Brązowy</option>
<option value="yellow" style="color:yellow">Żółty</option>
<option value="green" style="color:green">Zielony</option>
<option value="olive" style="color:olive">Oliwkowy</option>
<option value="cyan" style="color:cyan">Błękitny</option>
<option value="blue" style="color:blue">Niebieski</option>
<option value="darkblue" style="color:darkblue">Ciemnoniebieski</option>
<option value="indigo" style="color:indigo">Purpurowy</option>
<option value="violet" style="color:violet">Fioletowy</option>
<option value="white" style="color:white">Biały</option>
<option value="black" style="color:black">Czarny</option>
</select>
<button type="button" onclick="closeAllTags('message')">Zamknij tagi</button>
<button type="button" onclick="return pokazPasekEmotek();">Emotki</button>
</div>
<div id="lista-emotek" style="display: none">
<?php
$listaEmotek=array();
$listaEmotek['graph']=array('biggrin','confused','cool','cry','curve','eek','evil','exclaim','idea','lol','mad','mrgreen','neutral','razz','eusathink','redface','rolleyes','sad','smile','smile2','square','surprised','wink','question','arrow');
$listaEmotek['text']=array(':-D',':-?','8-)',':cry:',':-/',':shock:',':evil:',':!:',':idea:',':lol:',':-x',':mrgreen:',':-}',':-P',':-k',':oops:',':roll:',':-(',':-)',':->',':-]',':-o',';-)',':?:',':arrow:');
for ($i=0;$i<count($listaEmotek['graph']);$i++)
echo '<img class="emotka" src="/shoutbox/images/emotki/icon_'. $listaEmotek['graph'][$i] .'.gif" onclick="emoticon(\''. $listaEmotek['text'][$i] .'\');" title=" '.$listaEmotek['text'][$i].' ">';
?>
</div>
<input type="hidden" name="nickname" value="<?php echo _e($_SESSION['username']); ?>"> <input type="text" id="message" name="message" />
<input type="submit" value="Wyślij" />
<span id="daddy-shoutbox-response"></span>
</fieldset>
</form>
</div>
<script type="text/javascript" src="/shoutbox/javascript/jquery.js"></script>
<script type="text/javascript" src="/shoutbox/javascript/jquery.form.js"></script>
<script type="text/javascript">
var adminNickName = 'NorthAngel';
var count = 0;
var files = '/shoutbox/';
var lastTime = 0;
function pokazPasekEmotek()
{
if (document.getElementById('lista-emotek').style.display=='none')
document.getElementById('lista-emotek').style.display='block';
else
document.getElementById('lista-emotek').style.display='none';
return false;
}
function konwertujEmotki(text)
{
<?php
for ($i=0;$i<count($listaEmotek['graph']);$i++)
echo ' text=text.replace(/'. preg_replace('/([\/\\\?\:\(\)\|\-])/mi','\\\\$1',$listaEmotek['text'][$i]) .'/gi,\'<img class="emotka" src="/shoutbox/images/emotki/icon_'. $listaEmotek['graph'][$i] .'.gif" title=" '.$listaEmotek['text'][$i].' ">\');' ."\n";
?>
return text;
}
function prepare(response, pozycja) {
var d = new Date();
count++;
d.setTime(response.time*1000);
var godzina = d.getHours();
var minuta = d.getMinutes();
var mytime = ['(', godzina > 9 ? '' : '0', godzina, ':', minuta > 9 ? '' : '0', minuta, ')'].join('');
var string = '<div class="shoutbox-list' + (pozycja % 2 ? ' co_drugi_wpis' : '') + '" id="list-'+count+'">'
+ '<span class="shoutbox-list-time">'+mytime+'</span>'
+ '<span class="shoutbox-list-nick'+(response.nickname==adminNickName?' admin':(response.nickname=='<?php echo _e($_SESSION['username']); ?>'?' thisuser':''))+'">'+response.nickname+':</span>'
+ '<span class="shoutbox-list-message">'+konwertujEmotki(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, $('#daddy-shoutbox-list').children().length));
$('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], $('#daddy-shoutbox-list').children().length));
$('#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>
Kod: Zaznacz cały
<div style="overflow:hidden; width:300px; height:400px;Position:relative;">
<div style="position:absolute;bottom:0;left:0;right:0">
{ zawartosc czatu }
</div>
</div>
Nie jestem tylko pewien czy przez 
