Scroll vandret hen langs siden...

Prøv at kigge i koden på siden :)

Det har jeg gjort.. den er faktisk mere avanceret end den ser ud til ved første øjekast.. leder efter noget mere konkret!

<ole>

1. Det _er_ ikke helt uavanceret at lave.
2. Hvad, mener du, ville være 'mere konkret' end prodic's side?

/mvh
</bole>

Jeg mener at jeg ikke fatter en pind af prodics kode :) Dvs når jeg siger noget mere konkret, mener jeg om i måske lå inde med et lignende script jeg kunne få, eller i hvert fald starte ud fra.

Skal det være hele siden eller bare et div, der scroller?

Hele siden tak

Skal den scrolle til en bestemt position eller bare hele vejen frem og tilbage.

?

Bare hele veden langs siden... dvs fra venstre til højre.
Princippet skulle være at man klikkede på en knap til venstre, og hvorefter den så automatisk scrollede hele vejen over til højre.

Som på www.prodic.dk

I IE:

<script>
function scrollH() {
  if (document.body.scrollLeft < document.body.scrollWidth) {
    self.scrollBy(10, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>

Sættes i gang med:

<a href="#" onClick="scrollH(); return false;">Scroll til højre</a>

phoenixv >> Det vil da give en funktion, der kalder sig selv i det uendelige  :)

olebole>> document.body.scrollLeft bliver vel 10 større for hver gang. Og når den når op på hele sidens bredde, stopper den. Eller hvad?

Det virker fint på min computer.

Jaja ...... men den kører uendeligt - selvom siden er scrollet helt ud til højre. Det er ikke så fikst  :)

document.body.scrollLeft returnerer afstanden fra dokumentets venstre kant til vinduets venstre kant. Den kan aldrig blive lig med document.body.scrollWidth.

Det har du ret i. Selvom det faktisk ikke ser sådan ud på min com.
Men ændr det til dette:

<script>
function scrollH() {
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.clientWidth) {
    self.scrollBy(10, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>

Tilfreds? :)

Jeg kan ikke bruge:

<script>
function scrollH() {
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.clientWidth) {
    self.scrollBy(10, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>

Det vil den slet ikke reagere på, men den første virker... problemet er dog bare at siden er meget aflang... faktisk ca 2000 pixels... jeg har fået den til at "hoppe" derover, men den springer bare over, og kører ikke lige så stille som jeg ellers ville have den til!

Det script jeg bruger lige nu:

<script>
function scrollH() {
  if (document.body.scrollLeft < document.body.scrollWidth) {
    self.scrollBy(1950, 0);
    setTimeout("scrollH();", 1);
  }
}
</script>

Er det muligt man kunne få den til at køre glidende? Istedet for den bare springer til højre?

I må undskylde ventetiden... men har lige smidt 20 point ekstra i for besværet :)

Hmm fandt lige ud af at den ikke virkede korrekt! :/ phoenixv ved du hvordan det kan gøres??

Dette virker altså fint på min computer:

<script>
function scrollH() {
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.clientWidth) {
    self.scrollBy(100, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>

Der må være noget galt med den måde, du kalder scriptet på. Smid et link.

Du kan i øvrigt altid gøre tallet 100 større. Det får scriptet til at rykke lidt længere ad gangen.

Faktisk vil dette nok være smartest:

<script>
function scrollH() {
  self.scrollBy(100, 0);
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.clientWidth)
    setTimeout("scrollH();", 50);
}
</script>

Næ, det er ligemeget. Vælg den første! :)

phoenixv >> I IE6 reurnerer document.body.scrollWidth og document.body.clientWidth samme tal, så det er helt korrekt: Det virker ikke  :)

Det _er_ noget buggy L.... at lave den slags scroller ... ikke mindst, hvis det skal virke bare nogenlunde X-browser.

Så prøv offsetWidth da:

<script>
function scrollH() {
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.offsetWidth) {
    self.scrollBy(100, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>

Og desuden kører scriptet ikke uendeligt; har tjekket.

S(ame)O(ld)S(hit) ... Det _er_ ikke nemt  :)

Jo, det gør .... jeg har også checket  ;o)

Vi må have to helt forskellige versioner af IE6, for i min test returneres tre vidt forskellige (og efter hvad jeg mener - korrekte) tal ved scrollWidth, offsetWidth og clientWidth.
Og funktionen kører heller ikke uendeligt på min maskine.

Hvad får du ud af det her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>..:: TITLE ::..</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
function test() {
    var str = document.body.clientWidth+"\n";
    str += document.body.offsetWidth+"\n";
    str += document.body.scrollWidth;
    alert(str);
}
</script>
</head>
<body>

<div style="white-space:nowrap">
<button onclick="test()">TEST</button>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>

</body>
</html>

Nu ved jeg ikke, hvilket du mener ikke kører uendeligt. Det, du skrev i (16/03-2003 16:33:00) gør naturligvis  :)

Hm, ja det giver rigtignok det samme...
Men hvad siger din computer til dette:

<html>
<head>
<script>
var to;

function scrollH() {
  clearTimeout(to);
  to = setTimeout("window.status = '';", 100);
  window.status = "Scriptet kører";
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.clientWidth) {
    self.scrollBy(100, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>
</head>
<body onLoad="alert(document.body.scrollWidth + '\n' + document.body.clientWidth + '\n' + document.body.offsetWidth);">
<a href="#" onClick="scrollH(); return false;">Scroll</a><br>
Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html>

Ja, det er klart ..... hvis man ikke overholder HTML-standarden  :)
Den tåler ikke en doc-type  :(

... og du skal endelig huske at inkludere url'en. Ellers misfortolker IE box-modellen  ;o)

Som jeg skrev tidligere: Det _er_ ikke nemt.
Skal man scrolle, bør man lave en DHTML-scroller ... specielt, hvis det er horisontalt. Selv i en DHTML-scroller kan det volde problemer, men det er dog ikke så buggy en ting, som det at scrolle et helt dokument.

hien>> Måske kan du bruge:
www.phoenixv.dk/exp/div_slider.html
eller:
www.phoenixv.dk/exp/div_slider2.html

Det første link var:
www.phoenixv.dk/exp/div_slider1.html

Den virker i hvert fald ikke:

<html>
<head>
<script>
var to;

function scrollH() {
  clearTimeout(to);
  to = setTimeout("window.status = '';", 100);
  window.status = "Scriptet kører";
  if (document.body.scrollLeft < document.body.scrollWidth - document.body.clientWidth) {
    self.scrollBy(100, 0);
    setTimeout("scrollH();", 50);
  }
}
</script>
</head>
<body onLoad="alert(document.body.scrollWidth + '\n' + document.body.clientWidth + '\n' + document.body.offsetWidth);">
<a href="#" onClick="scrollH(); return false;">Scroll</a><br>
Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html>

http://v6.hien.dk/ brugernavn: eksperten - kode: script

Jeg har brugt www.phoenixv.dk/exp/div_slider1.html men problemet er at jeg selv bruger en del <div>'s i forvejen, og det ser ud som om at det ødelægger følgende script... prøv selv...

Prøv: http://v6.hien.dk/index2.htm og http://v6.hien.dk/index3.htm

og prøv at vælge scroll i bunden... se resultaterne... jeg har ændret dem til <span>'s så de ikke bliver kludret så meget sammen som før!

Problemet er at jeg gerne vil have at den bliver som nr 3... altså så scrollen følger med... men så skal man kunne scrolle tilbage med den almindelige scrollbar... men den forsvinder bare helt.

I index2.htm er den helt galt... den flytter bare derhen og man kan ikke få den tilbage... det er sq lidt kludret! :/

Nu er jeg så kommet til det punkt og indset at det ikke er spor let.. derfor er pointsats forhøjet til 100 points som tak for jeres store indsats :) Sætter jeg virkelig pris på!

Jubii.. har rodet lidt med koderne.. og har fået noget positivt ud af det :) index3.htm er hermed slettet, og http://v6.hien.dk/ virker som det skal... hehe prøv den og tag en lille slidetur! :) Smid et svar hvis i vil have jeres hårdttjente points ;)

Prøv at trykke på den venstre scroll-pil, mens den scroller tilbage ... det funker stadigvæk ikke ordentligt.

Prøv i stedet at se på ham her:
  http://www.gosume.com/viewsrc/
Tryk evt. på '02' - så kan du se de scrollere, han har lavet. Det er nok en langt bedre idé at lave det i DHTML ... derved slipper du også af med system-scrollbaren  ;o)
/mvh

Hm, det kunne lyde, som om det er en ordentlig omgang lortekode, jeg har fabrikeret. Så du må hellere spare pointene til en anden...

phoenixv >> Det er ikke lortekode, du har begået ... der er bare en masse ting, der er lidt buggy i browserne. Du har da gjort et fint og ihærdigt forsøg på at løse problemet - og det er jo ikke din skyld, der er besynderligheder i bruseren  ;o)
/mvh

Nej, nej. Jeg klarer mig også nok. :)

Det er skam fint nok det du har præsteret, jeg synes bare du skulle stoppe med at være så ydmyg og smide et velfortjent svar :) Det er fint det du har lavet.. lige hvad jeg kan bruge! :)

Det er i hvert fald ikke 100 point værd. Så snup nogle af dem selv eller giv dem til olebole

Så synes jeg også olebole skulle tage og smide et svar! :)

...og lidt reklame for et andet spg jeg har oprettet:
http://www.eksperten.dk/spm/332760 :)

Nå.. men du får bare point! :)

olebole>> Sig til, hvis du vil have nogle af pointene.