Avatar billede superjma Nybegynder
03. august 2004 - 16:36 Der er 22 kommentarer

InnerHTML og scroll

Jeg har en chat hvor beskederne skrives i bunden af et span-tag, via en hidden-frame med javascript innerHTML.

Problemet er at sidste besked skrives uden for det aktuelt viste område på skærmen såfremt der er flere beskeder en der kan vises på skærmen.

Hvor sikrer jeg mig at man altid kan læse den sidste besked?

Har forsøgt mig med flg funktion
function pageScroll() {
    window.scrollBy(0,50);
    scrolldelay = setTimeout('pageScroll()',1000);
}

som dog betyder at man ikke længere kan scroll'e op og se tidligere beskeder da skærmen automatisk scroll'er ned igen.

Hvad gør jeg?
Avatar billede roenving Novice
03. august 2004 - 16:49 #1
Hvad med:

function pageScroll() {
  var sp = document.getElementById('chat');
  sp.scrollTo(0,sp.offsetHeight);
}
Avatar billede superjma Nybegynder
03. august 2004 - 17:56 #2
Det virker slet ikke. Så scroller den ikke ned efterhånden som der kommer nye meddelelser.
Avatar billede roenving Novice
03. august 2004 - 18:12 #3
Du skal bare kalde den, når du indsætter tekst !-)
Avatar billede superjma Nybegynder
03. august 2004 - 18:54 #4
Ahh. man skal bare lige slette sp foran scrollTo()..

Tak for det!
den hopper dog en lille smule.. det kan man vel ikke fjerne?
Avatar billede roenving Novice
03. august 2004 - 18:55 #5
-- ja, jeg kom også i tvivl om man kunne bruge scrollTo på et span ...
Avatar billede supermand69 Nybegynder
03. august 2004 - 19:22 #6
lytter
Avatar billede knudx Nybegynder
07. august 2004 - 00:27 #7
ifaik kan man kun lave scroll på et <span> hvis det er {display:block;overflow:hidden}, men det er det vel i dit tilfælde, ellers giver det jo ikke mening at scroll'e det overhovedet vel ?!?
Avatar billede roenving Novice
07. august 2004 - 00:35 #8
Ja, jeg tror også man skal scrolle på body-elementet !-)

-- hvilket netop er resultatet af at fjerne sp ...

(i så tilfælde vil window og document.body pege på det samme område af browserens vindue ,-)
Avatar billede superjma Nybegynder
07. august 2004 - 11:48 #9
Der er 2 ting i den nævnte løsning.

Nr. 1. Det er umuligt at scrolle op uden at blive forstyret hver gang der indsættes tekst.

Nr. 2. Det virker IKKE i FireFox eller Mozilla.

Finder der virkeligt ikke en løsning der fungerer.. således at man ikke scroller hvis brugeren har fat i scroll-baren, samt en der er browser uafhængig?
Avatar billede knudx Nybegynder
08. august 2004 - 01:47 #10
jo der gør
kan jeg ikke skrive
Avatar billede knudx Nybegynder
08. august 2004 - 01:50 #11
scriptet er her, håber du kan tilpasse

<HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>test af chat iframe</title>
    <script type="text/javascript">
        var chat, fakeno = 0;
       
        // indsætter ny tekst hele tiden...
        function fake_chat () {
            chat.appendChatText ('Ged_' + ++fakeno + ':' +
            '[er vi tæt på bunden...: :' + chat.dist + ']');
            if (fakeno < 30) setTimeout ('fake_chat()', 600);
        }
        window.onload = function () {
            chat = new ChatFrame ('chat_vindue');
            fake_chat();
        };
       
        /**************************************************
        skrevet af jakob lund
        jalun2 AT edu DOT kts DOT dk
        respekter det eller dø
        **************************************************/
        function ChatFrame (id) {
            //the id must be BOTH the id AND name attribute of the <iframe>
            this.win = window[id];
            this.bodyElement = this.win.document.body||this.win.document.getElementsByTagName('BODY')[0];
            this.outer_height = document.getElementById (id).height;
            this.updateHeightValues();
        }
        ChatFrame.prototype.updateHeightValues = function () {
            this.height_value = this.bodyElement.offsetHeight;
            this.atBottom = this.height_value - (this.bodyElement.scrollTop||this.win.pageYOffset) - this.outer_height < 1;
        }
        ChatFrame.prototype.appendChatText = function (s) {
            this.updateHeightValues();
            var wasAtBottom = this.atBottom, p = this.win.document.createElement('p');
            p.appendChild (this.win.document.createTextNode (s));
            this.win.document.getElementById('chattxt').appendChild (p);
            this.updateHeightValues();
            if (wasAtBottom)
            this.win.scrollTo (0,this.height_value);
        }
    </script>

  </head>
  <body>
  <iframe name="chat_vindue" id="chat_vindue" width="250" height="220" src="chatskelet.html" scrolling="auto"></iframe>
  </body>
</html>

der skal også være et dokument "chatskelet.html", med en div med id "chattxt"
Avatar billede knudx Nybegynder
08. august 2004 - 15:27 #12
bedre:
        function ChatFrame (iframe_id, chat_div_id) {
            //the iframe_id must be BOTH the id AND name attribute of the <iframe>'
            //chat_div_id defaults to "chattxt"
            this.win = window[iframe_id];
            this.bodyElement = this.win.document.body||this.win.document.getElementsByTagName('BODY')[0];
            this.outputElement = this.win.document.getElementById (chat_div_id||"chattxt");
            this.outer_height = document.getElementById (iframe_id).height;
        }
        ChatFrame.prototype.getContentHeight = function () {
            return this.bodyElement.offsetHeight;
        }
        ChatFrame.prototype.isAtBottom = function () {
            return this.getContentHeight() - (this.bodyElement.scrollTop||this.win.pageYOffset) - this.outer_height < 1;
        }
        ChatFrame.prototype.appendChatText = function (s) {
            var wasAtBottom = this.isAtBottom(), p = this.win.document.createElement('p');
            p.appendChild (this.win.document.createTextNode (s));
            this.outputElement.appendChild (p);
            if (wasAtBottom)
            this.win.scrollTo (0,this.getContentHeight());
        }
Avatar billede superjma Nybegynder
08. august 2004 - 18:17 #13
TAK.. Det virker supergodt i Mozilla..

Dog viker det overhovedet ikke i IE, da den ikke scroller her.
Avatar billede superjma Nybegynder
08. august 2004 - 18:20 #14
99% af brugerne benytter IE. Så det er vigtigst at det virker i den.
Avatar billede knudx Nybegynder
08. august 2004 - 22:16 #15
jo.. det kan der sgu være noget om.
Jeg har desværre ikke windows, så jeg har ikke mulighed for at teste... Men det kører i Konqueror, og jeg troede egentlig at javascripten der var det samme som i IE. Får du en fejlmeddelelse i IE? (dobbeltklikke på den gule /!\ dims forneden...?) Og kommer vrøvleteksten frem overhovedet?
Avatar billede superjma Nybegynder
08. august 2004 - 22:36 #16
Nej nej. Alt virker. Dvs. tekst i iframet og ingen javascript fejl.. men altså heller ikke noget scroll. Scrollbaren bliver bare i toppen hele tiden, hvilket jo ikke helt er meningen.
Avatar billede knudx Nybegynder
08. august 2004 - 22:57 #17
hmm, der må jo mangle en oplysning så prøv at udkommentere (sætte // foran) linien:
if (wasAtBottom)
hvad sker der så?
Avatar billede superjma Nybegynder
08. august 2004 - 23:27 #18
Scroller den til nr 8 messages.. og stopper. Hvis man manuelt scroller ned hopper den tilbage til nr 8 :-(

Dybt underligt..

Men jeg tror dog at getContentHeight() er det der i IE-sprog kaldes offsetHeight.

Btw. jeg har lidt svært ved at få koden til at virke i et rigtig frameset, med parent.frames.<framenavn>...
Avatar billede knudx Nybegynder
08. august 2004 - 23:47 #19
getContentHeight returnerer også bare document.body.offsetHeight - så hvis den kun scroller efter de første 8 beskeder, må det være fordi at denne værdi ikke ændrer sig efter det... Det er underligt. Som sagt har jeg ikke adgang til en windows maskine, så jeg kan ikke rigtig hjælpe. Måske er der nogle af de kvikke hoveder her på exp som kan !?!
Avatar billede knudx Nybegynder
09. august 2004 - 00:00 #20
mht frameset... koden skal sidde i det samme frame som iframen (den synlige?) er i ?!?
Avatar billede superjma Nybegynder
09. august 2004 - 09:27 #21
Nu er der slet ingen iframe, så siden men kun alm. frames.
Avatar billede roenving Novice
09. august 2004 - 11:35 #22
-- måske en ide at hive fat i scrollHeight (IE/Opera?) og window.innerHeight (Moz++), som burde lever den samlede højde, men jeg kan ikke gennemskue om det er tilstrækkeligt ...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester