Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Shoutbox wielkość
Forum PHP.pl > Forum > XML, AJAX > AJAX
DreqX
13.10.2009, 20:49:27
Witam,
Pobrałem ostatnio ciekawego Shoutbox-a w Ajax-ie i chciałbym zrobić stałą długość. Index.php wygląda tak: (podałem go, bo on ma szerokość)
Kod
<!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">
  <title>jQuery</title>
  <style type="text/css">
    #daddy-shoutbox {
      padding: 5px;
      background: #3E5468;
      color: white;
      width: 600px;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 11px;
    }
    .shoutbox-list {
      border-bottom: 1px solid #627C98;
      
      padding: 5px;
      display: none;
    }
    #daddy-shoutbox-list {
      text-align: left;
      margin: 0px auto;
    }
    #daddy-shoutbox-form {
      text-align: left;
      
    }
    .shoutbox-list-time {
      color: #8DA2B4;
    }
    .shoutbox-list-nick {
      margin-left: 5px;
      font-weight: bold;
    }
    .shoutbox-list-message {
      margin-left: 5px;
    }
    
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.form.js"></script>
</head>
  <body>

  <center>
  <div id="daddy-shoutbox">
    <div id="daddy-shoutbox-list"></div>
    <br />
    <form id="daddy-shoutbox-form" action="demos/jquery-shoutbox/daddy-shoutbox.php?action=add" method="post">
    Nick: <input type="text" name="nickname" /> Say: <input type="text" name="message" />
    <input type="submit" value="Submit" />
    <span id="daddy-shoutbox-response"></span>
    </form>
  </div>
  </center>
  
  <script type="text/javascript">
        var count = 0;
        var files = 'demos/jquery-shoutbox/';
        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>
</body>
</html>

Pomyślałem, żeby pod width: 600px; dodać height: 300px; no i dodałem. Gdy wszedłem na stronę, sb miał rzeczywiście 300px, ale jak zacząłem dodawać wiadomości to on się wydłużał. Żeby powrócić do 300px musiałem odświeżyć stronę. Jak zrobić, aby stała długość sb to była 300px, nawet jak będę dodawał nowe wpisy? Jeżeli trzeba dam inne pliki tego sb.
jmail
13.10.2009, 21:40:35
max-height w css
DreqX
13.10.2009, 21:47:05
Nie nie pomogło, dalej tak się robi.
jmail
13.10.2009, 21:53:27
a pokaż to co jest zwracane do ajax'a przez php. Ty chcesz mieć obcięte do ilości wypowiedzi czy scroll ma się pojawić?
nospor
13.10.2009, 21:58:18
U mnie na stronie masz shoutbox. By była stała długość należy określić dwa parametry:
height: jakasdlugosc
overflow:auto;
DreqX
13.10.2009, 22:07:02
nospor, ok dzięki działa winksmiley.jpg A jak zrobić aby scroll zawsze był na samym dole?
nospor
13.10.2009, 22:15:48
obj.scrollTop = obj.scrollHeight;
gdzie obj to obiekt DOM twojego diva
DreqX
13.10.2009, 22:24:22
Dałem daddy-shoutbox.scrollTop = daddy-shoutbox.scrollHeight; i nie działa... Nie wiem czy to dobrze zrobiłem.
nospor
14.10.2009, 06:24:33
a czy daddy-shoutbox jest obiektem DOM? Czy moze tak ma ID twoj div.

pobrac obiekt DOM to:
document.getElementById('iddiva')
Lwie_Serce_
6.03.2013, 15:38:41
Hej, właśnie też mam tego shoutboxa i nie moge sobie poradzic z tym, żeby po wejsciu na czat ten pasek przewijania był na dole sad.gif
Jak sie rozmawia na czacie to pasek jest na dole, ale jak wejde na czat to zeby zobaczyc nową wiadomość to musze przesunąć pasek w doł.
Może ktoś mi w tym pomóc ? Tak to u mnie wygląda:


czat.php
Kod
<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:',':-(',':-)',':-&gt;',':-]',':-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');

    var a = document.getElementById('daddy-shoutbox-list');
        a.scrollTop = a.scrollHeight;

        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>

style.css
Kod
#daddy-shoutbox {
    background-color: #3e5468;
    padding: 5px;
    font-size: 0.85em;
}

#daddy-shoutbox .shoutbox-list {
    background-color: #86aed7;
    padding: 5px;
}

#daddy-shoutbox .co_drugi_wpis {
    background-color: #4684c1;
}

#daddy-shoutbox .shoutbox-list .shoutbox-list-nick { font-weight: bold; color: #333333; padding: 0 3px }
#daddy-shoutbox .shoutbox-list .shoutbox-list-time { color: #333333; padding: 0 3px; }

#daddy-shoutbox-list {
      height: 245px;
      overflow: auto;
}


Czy może mi ktoś pomóc w tym ? sad.gif żeby ten pasek był cały czas na dole.
nospor
6.03.2013, 20:04:12
Po zaladowaniu czata masz wywolac o to:
var a = document.getElementById('daddy-shoutbox-list');
a.scrollTop = a.scrollHeight;
Lwie_Serce_
6.03.2013, 20:25:53
nospor ale ten kod który pokazałeś mam już dodany do pliku czat.php nie wiem czy zauważyłeś:
Kod
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');

    var a = document.getElementById('daddy-shoutbox-list');
        a.scrollTop = a.scrollHeight;

        timeoutID = setTimeout(refresh, 3000);
    }
}

Jednak ten pasek przewijania nie jest dalej na samym dole tak jak powinien sad.gif Możesz mi pomóc ?
nospor
7.03.2013, 07:47:42
Skoro podczas rozmowy pasek ciągle jest na dole, znaczy ze coś tam działa. Musisz tylko to coś przenieść do miejsca, gdzie odpala się czat po starcie.
Lwie_Serce_
10.03.2013, 01:21:17
nospor probowałem to już przenosić w różne miejsca i nie działa dalej tak jak powinno sad.gif tylko pasek jest ciągle na dole wtedy gdy rozmawiamy na czacie.
Ale jak wejde na czat to pasek jest na gorze i musze przesunać go w dół.
Kombinowałem tak:
Kod
var adminNickName = 'NorthAngel';
var count = 0;
var files = '/shoutbox/';
var lastTime = 0;
var a = document.getElementById('daddy-shoutbox-list');
a.scrollTop = a.scrollHeight;

Próbowałem też tak:
Kod
var a = document.getElementById('daddy-shoutbox-list');
a.scrollTop = a.scrollHeight;
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);
}

Próbowałem nawet tak:
Kod
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);
    });
var a = document.getElementById('daddy-shoutbox-list');
a.scrollTop = a.scrollHeight;
    timeoutID = setTimeout(refresh, 3000);
}

Nawet tak też próbowałem :
Kod
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');

var a = document.getElementById('daddy-shoutbox-list');
a.scrollTop = a.scrollHeight;

        timeoutID = setTimeout(refresh, 3000);
    }

I dalej nic sad.gif Pasek jest tylko na dole wtedy gdy rozmawiamy na czacie. A jak się wejdzie na czat to jest na gorze.
Możesz mi jakoś pomóc żeby mi to wreszcie zadziałało tak jak ma być sad.gif

Obecnie mam zrobione tak:
W pliku style.css
Kod
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');

    var a = document.getElementById('daddy-shoutbox-list');
        a.scrollTop = a.scrollHeight;

        timeoutID = setTimeout(refresh, 3000);
    }
}

Prosze Cię pomoż mi sad.gif

Pomoze mi ktos czy nie questionmark.gifquestionmark.gifquestionmark.gifquestionmark.gifquestionmark.gif?/

Czy ktos moze mi pomoc z tym czatem czy nie ? nospor licze na ciebie bo to tylko Ty wiesz. Prosze pomoz mi sad.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.