Flytte scrollbar

Du kan ikke flytte en scrollbar til nogen af siderne, den er altid i højre side, lev med det ... men når nu vi ikke kan gøre noget ved det, kan vi da kode udenom og lave noget der ligner :)

Sæt scrollbar=NO på din frame, og lav en frame til venstre for denne der har scroll=AUTO. Når den rigtige side er indlæst, sætter du document.body.clientHeight i den falske frame til det samme som i den rigtige, og du har nu en scrollbar i venstre side af framen (i den falske frame) der passer til størrelsen af indholdet. Brug så onscroll event\'en i den falske frame til at aflæse document.body.scrollTop, og sæt denne til det samme i den rigtige frame. Voila, en \'falsk\' scrollbar i \'venstre\' side af din frame.

/Thor

He he - det jo er smart - men husk - det virker kun i IE 5.5 :)

tentakkel, mit forslag skulle da gerne virke i IE4+ ?

/Thor

Hej Thor.

Der \"klikker\" du nok ind på et teknisk niveau der ligger lidt over mit. Kan du uddybe dit svar.

Jeg har \"rightFrame\" og opretter \"rightframe1\".
Hvordan vil vil du ha\' at syntaksen skal se ud på / i de to frames ?

/Tony

Hej Tony

Jeg synes opgaven lød rigtig sjov, og kom også selv til at tænke en smule (wauh), så jeg skyndte mig at lave et lille eksempel til dig:

http://jscript.dk/Jumper/LeftScroll.html

Prøv at kigge i koden og se om det giver mening, jeg kortede den ret langt ned ;)

/Thor

Hej Thor (Ja, jeg fik også et \"Wauh\" da jeg kom til at tænke på muligheden :-).

OK med koden så langt. Dog er selve \"baren\" for kort. Jeg kan scrolle med den (i 800 x 600) selvom jeg er nået ned i bunden af siden, men jeg er sikker på, at du er på rette spor !

Jeg bliver nød til at løbe - ungerne skriger på jordisk føde :o) - vender tilbage senere.

/Tony

hvad men at lægge en 1 gange en .gif i \"den falske ramme og så onload ændre størrelse på den så den blive ligeså høj som den side der skal scrolles?

OK Jakob - det kan måske lade sig gøre.

Men det ærger mig nu stadig, at vi tilsyneladende ikke kan kontrollere placeringen af scrollbaren i et sheet, når vi nu kan bestemme farve m.m.

Har du hørt om \"problemmet\" før ?

/Tony

Gutter ... kan man \"skygge\" rightFrame\'s strenglængde og \"tilkende\" rightFrame1 værdien ?

... Just a thought ...

/Tony

nej, ikke som \"et problem\" :) der er jo også mange andre grænser for hvad vi kan (eg: dreje et billede 45 grader).
men jeg har set et par \"løsninger\" før. oftest i retning af et flyvende billede af en scrollbar man kan klikke på og scrolle siden. Jumpers løsning er klart bedre.
Og kan såvidt jeg kan se også laves så den virker i NS.

Der tog jeg vist munden for fuld. Nok kan jeg få en scrollbar ti den ene ramme til at styre den anden i NS. men hvis jeg scrotter scrollbars med scrolling=\'no\' mister rammen også evnen til at scrolles med javascript.

Thor.

Din http://jscript.dk/Jumper/LeftScroll.html virker vist ikke mere. Kan du få den til at virke igen ? Jeg kan heller ikke få det til at virke hos mig.

Når jeg har fået prototype op og køre, \"smider\" jeg den lige op på brinkster.com, så I kan se, om det er noget, der kan bruges ...

/Tony

her virker jumpers script stadig. prøv igen.

Tak jakob.

... ja, nu kan jeg se Thor\'s scrollbar igen ... jeg tror \"borte\" har haft lånt den ...  :-|

Vender tilbage, når jeg fået det til at virke ...

/Tony

Kære venner.

Jeg smider håndklædet i ringen ... jeg kan ikke få det til at virke.

Jeg har et framesæt - \"Pizza Bella Italia\" - der betår af 4 frames i kolonneform - leftFrame.htm, mainFrame.htm, scrollFrame.htm og rightFrame.htm

Jeg ønsker ved klik på et hotspot
<area shape=\"circle\"  coords=\"238,221,14\" target=\"rightFrame\" alt=\"GRATIS PIZZA!\" title=\"GRATIS PIZZA!\"  href=\"gratis.htm\">
at filen \"gratis.htm\" åbnes i \"rightFrame.htm\" uden scrollbar og at filen \"scrollFrame.htm\" aktiveres med en scrollbar der kan scrolle \"gratis.htm\" - altså indholdet af \"rigtFrame.htm\". Og at denne funktionalitet i øvrigt virker uafhængig af hvad der hentes ind i \"rightFrame.htm\" bare det er større (længere) en skærmen.

Kan I hjælpe mig ?

/Tony

fil til rammen scrollFrame:  kald den scrollfil.html

<HTML>
<HEAD>
<META NAME=\"GENERATOR\" Content=\"Thor Larholm\">
<script>
//  dette virker kun i IE.

var hojde=0;
if ( self.location.search.length > 0 )
    hojde=self.location.search.substring(1);


function AdjustRightFrame(){
    parent.SRight.document.body.scrollTop = document.body.scrollTop;
}

</script>
</HEAD>
<BODY style=\"margin:0px;\" onscroll=\"AdjustRightFrame()\">

<script>
document.write( \'<div id=SPACER style=\"width:100%; height:\'+hojde+\'px\"></div>\' );
</script>

</BODY>
</HTML>

i alle filer der loades ind i rammen rightFrame indsættes en onload event:

<body ... onload=\"parent.scrollFrame.location=\'scrollfil.html?\'+document.body.scrollHeight;\">

Beklager Jakob, men jeg kan stadig ikke få det til at virke.

Nu vises min \"gratis.htm\" i \"rightFrame\" når siden hentes. Den skal først vises, når jeg klikker på hotspot\'et. Og scrollframen virker stadig ikke.

Min \"scrollfil.html\":
<html>
<head>
<title>Pizza Bella Italia</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<META NAME=\"GENERATOR\" Content=\"Thor Larholm and Jakob Aggernaes\">
<style>
<!--
BODY{
scrollbar-face-color:#C06060;
scrollbar-arrow-color:#993300;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-Color:#FFFFFF;
}
-->
</style>

<script>
//  dette virker kun i IE.

var hojde=0;
if ( self.location.search.length > 0 )
    hojde=self.location.search.substring(1);

function AdjustRightFrame(){
    parent.SRight.document.body.scrollTop = document.body.scrollTop;
}
</script>
</head>

<BODY style=\"margin:0px;\" onScroll=\"AdjustRightFrame()\" bgcolor=\"#FFFFFF\" leftmargin=\"0\" topmargin=\"2\" marginwidth=\"0\" marginheight=\"0\">
<script>
document.write( \'<div id=SPACER style=\"width:100%; height: \'+hojde+\' px\"></div>\' );
</script>
</BODY>
</html>


Min \"rightFrame.htm\":
<html>
<head>
<title>bella</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
</head>

<body bgcolor=\"#FFFFFF\" text=\"#000000\" leftmargin=\"0\" topmargin=\"11\" marginwidth=\"0\" marginheight=\"0\">
</body>
</html>

Min \"gratis.htm\":
<html>
<head>
<title>pizzaer</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
</head>

<body onLoad=\"parent.scrollFrame.location=\'scrollfil.html?\'+document.body.scrollHeight;\" bgcolor=\"#FFFFFF\" text=\"#000000\" leftmargin=\"0\" topmargin=\"11\" marginwidth=\"0\" marginheight=\"0\">
<font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b></b></font> <font color=\"#006600\"></font><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><s></s></font></b></font></b></font>
<font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><s></s></font></b></font></b></font></b></font>
<table border=\"1\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\" bordercolor=\"#993300\">
  <tr bgcolor=\"#009966\">
    <td width=\"152\" align=\"center\" valign=\"middle\" bgcolor=\"#FFFFFF\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#993300\" size=\"4\">GRATIS
      PIZZA !</font></b></font></td>
  </tr>
  <tr bgcolor=\"#009966\">
    <td width=\"152\" align=\"center\" valign=\"middle\" bgcolor=\"#FFFFFF\"><font color=\"#006600\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"2\">Allerede
      n&aring;r du<br>
      har k&oslash;bt </font></b></font><font color=\"#006600\" size=\"2\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\">8
      pizza\'er, f&aring;r du &eacute;n gratis<br>
      pizza eller &eacute;n flaske vin !</font></b></font></td>
  </tr>
  <tr bgcolor=\"#009966\">
    <td width=\"152\" align=\"center\" valign=\"middle\">
      <div align=\"center\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">1</font></font></b></font>
      </div>
    </td>
  </tr>
  <tr bgcolor=\"#009966\">
    <td width=\"152\" align=\"center\" valign=\"middle\">
      <div align=\"center\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">2</font></font></font></font><font color=\"#FF3333\" size=\"5\"></font></b></font></b></font></b></font></div>
    </td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#009966\" align=\"center\" valign=\"middle\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">3</font></font></b></font></b></font></b></font><font color=\"#FF3333\" size=\"5\"></font></b></font></b></font></b></font></td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#009966\" align=\"center\" valign=\"middle\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">4</font></font></b></font></b></font></b></font></td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#009966\" align=\"center\" valign=\"middle\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">5</font></font></font></font></font></b></td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#009966\" align=\"center\" valign=\"middle\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">6</font></font></b></font></b></font></b></font></td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#009966\" align=\"center\" valign=\"middle\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">7</font></font></b></font></b></font></b></font></td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#009966\" align=\"center\" valign=\"middle\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#FF3333\"><font size=\"5\" color=\"#993300\">8</font></font></font></font></font></b></td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#993300\" align=\"center\" valign=\"middle\" nowrap>
      <div align=\"center\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#009966\" size=\"4\">GRATIS
        !</font><font color=\"#009966\" size=\"2\"> </font></font></font></font></b></div>
    </td>
  </tr>
  <tr>
    <td width=\"152\" bgcolor=\"#FFFFFF\" align=\"center\" valign=\"middle\">
      <div align=\"center\"><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><b><font color=\"#006600\" size=\"2\">HUSK
        at f&aring; stemplet din folder n&aring;r du henter din pizza ...</font></b></font></b></font></b></font></b></font></b></font></div>
    </td>
  </tr>
</table>
</body>
</html>


Hva\' tror du der er galt (ud over sikkert min \'fejl 40\') ?

/Tony

Og i din frameset fil har du:

<frameset ... >
  <frame ... >
  <frame ... >
  <frame name=\'scrollFrame\' src=\'scrollfil.html\' scrolling=\'auto\' margin... >
  <frame name=\'rightFrame\' src=\'rightFrame.htm\' scrolling=\'NO\' margin... >
</frameset>

Det ser ud til du bruger defaultendelsen .htm hvor jeg bruger .html. check for korrekt endelse på diverse filer.

check også for korrekte store og små bogstaver. Du har fx en fil \'rightFrame.htm\' er den stavet med stort F allevegne.

og check også store og små bogstaver i dine navne.

mvh JakobA

Jakob.

... alt er gået igennem igen, igen. Jeg kan ikke se, at der er noget, der mangler / er forkert.

Scrollbarerne i \"scrollFrame\" og \"mainFrame\" er nu nøjagtig lige lange, men når jeg trykker på en af pilene i toppen eller bunden af scrollbaren i \"scrollframe\" fremkommer:

Fejlmelding
Linie: 29
Tegn: 2
Fejl: \'parent.SRight.document\' er null eller ikke et objekt
Kode: 0
URL: File://C\\bella\\prototype3\\test\\scrollfil.html

Min linie 29 i \"scrollfil.html\" indeholder:
parent.SRight.document.body.scrollTop = document.body.scrollTop;

Har du en svag idé om, hvad der kan være galt, eller skal vi droppe det nu, du har jo trods alt brugt meget tid allerede ?

/Tony

Ahhh. det er fordi rammen ikke hedder  SRight  som den gjorde i Jumpers eksempel.
Rammen hedder \"rightFrame\" nu så linien skal være:

parent.rightFrame.document.body.scrollTop = document.body.scrollTop;

burde have set det da du postede filen.

mvh JakobA

OK Jakob.

De tilsvarende var selvfølgelig også gældende for \"scrollFrame\", så nu er den der næsten ... og det er virkeligt tæt på.

Jeg kan ikke scrolle, hvis jeg trykker på pilene, kun hvis jeg tager ved \"baren\". Og scrollbaren kommer ikke frem, før jeg har kørt musen (couseren) hen over \"scroolFram\'en\". Det er ligesom den mangler fokus (ikke bliver aktiv), når jeg sætter fokus på \"rightFrame\" ved at trykke på mit hotspot. Gu\' ve\' hva\' der mangler ...

/Tony

Hvis pilen ikke genererer en  onscroll  event vil det måske være bedre at gøre det som jeg gjorde da jeg prøvede at lave det til netscape.

ny fil til scrollframe:  scrollfil.html

<html>
<head>
<title>Pizza Bella Italia</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<META NAME=\"GENERATOR\" Content=\"Thor Larholm and Jakob Aggernaes\">
<style>
<!--
BODY{
scrollbar-face-color:#C06060;
scrollbar-arrow-color:#993300;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-Color:#FFFFFF;
}
-->
</style>

<script>
//  dette virker kun i IE.

var hojde=0;
if ( self.location.search.length > 0 )
    hojde=self.location.search.substring(1);

var yPos = 0;
var timeHandle = 0;

function AdjustRightFrame(){
  if ( yPos != document.body.scrollTop ) {
    parent.rightFrame.document.body.scrollTop = document.body.scrollTop;
    yPos = document.body.scrollTop;
  };
}; //end AdjustRigthFrame()

function initier() {
  document.body.scrollTop = 10;
  document.body.scrollTop = 1;
  timeHandle = setInterval( \"AdjustRightFrame()\", 50 );
}; //end initier()

</script>
</head>
<BODY style=\"margin:0px;\" onLoad=\"initier()\" bgcolor=\"#FFFFFF\" leftmargin=\"0\" topmargin=\"2\" marginwidth=\"0\" marginheight=\"0\">
<script>
document.write( \'<div id=SPACER style=\"width:100%; height: \'+hojde+\' px\"></div>\' );
</script>
</BODY>
</html>

Så skulle der blive opdateret uanset hvordan du rykker med den der scrollbar.

Måske endda det der 10 pixels scroll i initieringsroutinen vil få din scrollbar frem

mvh JakobA

OK Jakob - jeg kikker på det i morgen ...

Gaaaab ...

/Tony

Hej Jakob.

Nu virker alt, med undtagelse af pilene i scrollbaren. D.v.s. selve baren virker helt perfekt, men der sker ikke noget, når man trykker på \"op\" og \"ned\" pilene. Gu\' ve\' om man kan (skal) give dem særskildt fokus a la din velfungerende idé med initiering:

document.up-arrow.scrollTop = 1;
document.down-arrow.scrollBottom = 1;

  ?

Du kan se oplæget, som det tager sig ud p.t., på:
http://www16.brinkster.com/breindal/pizza/pbi1/index.htm

Ses bedst i 800 x 600 med IE => 4.0

/Tony

Det virker fint for mig (bortset fra at den hemmelige champingon åbner et tomt popop vindue). men scrollbars, og pilene forenden kører fint. (IE4)

Ku det være du har en gamme version i cashe der lige skal flushes?

110 kr for en pizza ??? du må være fløjtendes .. Nånej den er 2.5 gange større en normal.
Vil anbefale at størrelsen rykkes op så man ser den FØRST :)

Men jeg kan altså ikke hjælpe. Såvidt min IE4 kan se virker det perfekt.

mvh JakobA

OK Jakob.
Tak for al hjælpen. Det har været en større smørre, du har været \"trukket\" igennem - håber jeg kan gi\' dig en underentreprise med lidt \"£$£\" i på et senere tidspunkt.

Thor - tak for at \"føde\" grundidéen med en \"fake\" scrollbar.

Masser af kollegiale hilsner - Tony Breindal