Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Shoutbox wielkość
DreqX
post
Post #1





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.08.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Lwie_Serce_
post
Post #2





Grupa: Zarejestrowani
Postów: 38
Pomógł: 0
Dołączył: 2.12.2004
Skąd: Tarnów

Ostrzeżenie: (10%)
X----

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 (IMG:style_emoticons/default/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:
(IMG:http://www.northangel.is.net.pl/czattttt.png)

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 ? (IMG:style_emoticons/default/sad.gif) żeby ten pasek był cały czas na dole.
Go to the top of the page
+Quote Post

Posty w temacie
- DreqX   Shoutbox wielkość   13.10.2009, 20:49:27
- - jmail   max-height w css   13.10.2009, 21:40:35
- - DreqX   Nie nie pomogło, dalej tak się robi.   13.10.2009, 21:47:05
- - jmail   a pokaż to co jest zwracane do ajax'a przez ph...   13.10.2009, 21:53:27
- - nospor   U mnie na stronie masz shoutbox. By była stała dłu...   13.10.2009, 21:58:18
- - DreqX   nospor, ok dzięki działa A jak zrobić aby scroll ...   13.10.2009, 22:07:02
- - nospor   obj.scrollTop = obj.scrollHeight; gdzie obj to obi...   13.10.2009, 22:15:48
- - DreqX   Dałem daddy-shoutbox.scrollTop = daddy-shoutbox.sc...   13.10.2009, 22:24:22
- - nospor   a czy daddy-shoutbox jest obiektem DOM? Czy moze t...   14.10.2009, 06:24:33
- - Lwie_Serce_   Hej, właśnie też mam tego shoutboxa i nie moge sob...   6.03.2013, 15:38:41
- - nospor   Po zaladowaniu czata masz wywolac o to: var a = d...   6.03.2013, 20:04:12
- - Lwie_Serce_   nospor ale ten kod który pokazałeś mam już dodany ...   6.03.2013, 20:25:53
- - nospor   Skoro podczas rozmowy pasek ciągle jest na dole, z...   7.03.2013, 07:47:42
- - Lwie_Serce_   nospor probowałem to już przenosić w różne miejsca...   10.03.2013, 01:21:17

« Następny starszy · AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 27.12.2025 - 18:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn