Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

ändra scroll

Lostdoc

Startad av Lostdoc,
i Webbutveckling

Rekommendera Poster

Lostdoc

Lostdoc

Postad
Postad

hur gör man en egen scroll? scrollen skall bara ha en upp och en ner knapp, alltså ingen sådan här markör emellan.. helst så enkelt som möjligt då jag inte är allt för haj på javascript.

/Lostdoc

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Börjar bli lite trött så jag ger dig bara ett snabbt (fult) exempel på scroll i lager. För att anpassa det till din sida så får du lägga din content inne i det lagret. Dimensionerna kommer också behöva anpassas efter hur stort fönster du vill ha.

 

[log]

<html>
<head>
<script language="JavaScript">
dy=5;y=0;h=400;w=800;
var oLyr,oHndl;
function DoScroll(sign) {
y+=dy*sign;
if (y<0)
	y=0;
oLyr.style.clip='rect('+y+'px '+w+'px '+(y+h)+'px 0px)';
oLyr.style.top=100-y+'px';
}
function ScrollIt(state,sign) {
if (state) {
	oLyr=document.getElementById("lyr");
	oHndl=setInterval('DoScroll('+sign+')',50);
} else {
	clearInterval(oHndl);
}
}
</script>
</head>
<body>
<div id="lyr" style="position:absolute;left:100px;top:100px;width:800px;height:300px;clip:rect(0px 800px 400px 0px)">
dfgdfg dfg dfijg dfij gijdf igj dfijg idjf gijdf igdfig idf <br>
dfgdfg dfg dfijg dfij gijdf igj dfijg idjf gijdf igdfig idf <br>
d
</div>
<img onmouseover="ScrollIt(true,-1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:100px;" src="img/up.gif">
<img onmouseover="ScrollIt(true,1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:400px;" src="img/down.gif">
</body>
</html>

[/log]

 

 

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

tackar, det funkade nästan perfekt. problemet är att de vanliga rulllistorna är kvar när jag lägger in den där scrollen i mitt projekt. hur får jag bort dem?

 

 

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

kan ju lägga till att när jag scrollar ner med javascrollen så försvinner den vanliga scrollen efter ett tag när den fyllts

 

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad
vanliga rulllistorna är kvar när jag lägger in den där scrollen i mitt projekt. hur får jag bort dem?

 

<body style="overflow:hidden;">

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

det funkade fint det tackar...

 

en annan fråga, nu går boxen som man scrollar i hela vägen ner till slutet av framen eller sidan kan man korta av boxen så att den blir mindra i höjd.

 

jag provade med att ändra värdena för boxen vilket funkade tills man började scrolla då hoppade boxen tillbaka till sin ursprungliga storlek.

 

hur gör jag?

 

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Egentligen kan du ta bort height ) rödmarkerat nedan.Styr storleken på det synliga området med det blå värdet nedan:

 

<div id="lyr" style="position:absolute;left:100px;top:100px;width:800px;height:[color="#ff0000"]200px[/color];clip:rect(0px 800px [color="#0000ff"]300px[/color] 0px)">

 

Det värde som du sätter på det "blå" värdet skall även läggas in i variabeln h (som i mitt exempel är h=300;)

 

Om du även vill ändra positionen på lagret (top:100px) så skall detta värde (100 nedan) även ändras.

 

oLyr.style.top=100-y+'px';

 

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

tack så jäkla mycket... nu funkar det skitbra.. du förresten när jag ändå håller på här..

 

den håller ju på i all oändlighet.. kan man inte låsa den på något sätt alltså så den stannar när texten kommer till sitt slut?

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad
kan man inte låsa den på något sätt alltså så den stannar när texten kommer till sitt slut?

 

Jag tror inte det går att få fram höjden på lagret när det har "sträckts ut" av dess innehåll. Alternativet är att bestämma en fast gräns där scrollen slutar, men det är nog ingen bra lösning.

 

Det kanske dyker upp en idé i mitt huvud såsmåningom, isåfall återkommer jag, så bevaka tråden för säkerhets skull.

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Hm, jag tror jag löste det. Jag har ändrat lite i scriptet (bl.a lagt till en variabel top=100 som innehåller start-y för lagret. Dessutom har jag lagt ett lager inuti det första lagret. Detta ska läggas efter allt innehåll och används för att känna av när man scollat färdigt.

 

[log]

<html >
<head>
<script language="JavaScript">
dy=5;y=0;h=300;w=800;topY=100;
var oLyr,oHndl;
function DoScroll(sign) {
y+=dy*sign;
if (y<0)
	y=0;
tmp=topY+Math.abs(parseInt(oLyr2.style.top));
if (y>tmp)
	y=tmp;
oLyr.style.clip='rect('+y+'px '+w+'px '+(y+h)+'px 0px)';
oLyr.style.top=topY-y+'px';
}
function ScrollIt(state,sign) {
if (state) {
	oLyr=document.getElementById("lyr");
	oLyr2=document.getElementById("lyr");
	oHndl=setInterval('DoScroll('+sign+')',50);
} else {
	clearInterval(oHndl);
}
}
</script>
</head>
<body style="overflow:hidden;"> 
<div id="lyr" style="position:absolute;left:100px;top:100px;width:800px;clip:rect(0px 800px 300px 0px)">
dfgdfg dfg dfijg dfij gijdf igj dfijg idjf gijdf igdfig idf <br>
<div id="lyr2" style="position:absolute;">---- SLUT PÅ SIDA--------</div>
</div>
<img onmouseover="ScrollIt(true,-1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:100px;" src="img/up.gif">
<img onmouseover="ScrollIt(true,1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:400px;" src="img/down.gif">
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

jag har ganska mycket text som är uppdelad i kapitel, och av nån anledning så bryter han i slutet av kapitel två, allt funkar precis som jag vill förutom att han inte bryter i slutet utan innan slutet. han bryter precis i slutet av det kapitlet skitsnyggt

 

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

jag prövade med att ta bort

 

<div id="lyr2" style="position:absolute;"></div>

 

men fortfarande samma sak.. som om han har ett låsvärde någonstans

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Några ändringar, markerat med rött (hade slarvat lite). Se om det blir bättre nu.

 

[log]

<html >
<head>
<script language="JavaScript">
dy=5;y=0;h=300;w=800;topY=100;
var oLyr,[color="#ff0000"]oLyr2[/color],oHndl;
function DoScroll(sign) {
y+=dy*sign;
if (y<0)
	y=0;
tmp=topY+Math.abs(parseInt(oLyr2.style.top));
if (y>tmp) 
	y=tmp;
oLyr.style.clip='rect('+y+'px '+w+'px '+(y+h)+'px 0px)';
oLyr.style.top=topY-y+'px';
}
function ScrollIt(state,sign) {
if (state) {
	oLyr=document.getElementById("lyr");
	[color="#ff0000"]oLyr2=document.getElementById("lyr2");[/color]
	oHndl=setInterval('DoScroll('+sign+')',50);
} else {
	clearInterval(oHndl);
}
}
</script>
</head>
<body style="overflow:hidden;"> 
<div id="lyr" style="position:absolute;left:100px;top:100px;width:800px;clip:rect(0px 800px 300px 0px)">
sdf<br>huhuhhuhu<br>jijijijij<br>ijijijijijiji<br><br>
[color="#ff0000"]<div id="lyr2" style="position:absolute;top:0px;"></div>[/color]
</div>
<img onmouseover="ScrollIt(true,-1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:100px;" src="img/up.gif">
<img onmouseover="ScrollIt(true,1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:400px;" src="img/down.gif">
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Länk till kommentar
Dela på andra webbplatser
Lostdoc

Lostdoc

Postad
  • Trådskapare
Postad

nej fan det är något mer för jag får exakt samma fel som förrut. prövade även hela din harang och den har samma fel

 

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Om du vill så maila hela filen till mig (address finns i min profil), så blir det lättare för mig att felsöka (om det nu är fixbart förstås).

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Länk till kommentar
Dela på andra webbplatser
  • 1 month later...
Anjuna Moon

Anjuna Moon

Postad
Postad
Hej! Jag gillar denna scroll funktionen men fins det ett satt att fa den att sluta scolla nar texten ar slut?

 

Jag orkade tyvärr aldrig jobba vidare på den där funktionen så jag har inte funderat ut det smartaste sättet att lösa scrollstoppen på, när man inte från början vet hur högt lagret kommer bli. Jag återkommer om jag får en snilleblixt.

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Tjo, jag tycks ha löst scroll-stoppsproblemet nu. Här kommer koden uppdaterad för de av er som var intresserade:

 

[log]

<html >
<head>
<script language="JavaScript">
dy=5;y=0;h=300;w=800;topY=100;
var oLyr,oLyr2,oHndl;
function DoScroll(sign) {
y+=dy*sign;
if (y<0)
	y=0;
tmp=Math.max(0,oLyr.scrollHeight-h);
if (y>tmp) {
	y=tmp;
}
oLyr.style.clip='rect('+y+'px '+w+'px '+(y+h)+'px 0px)';
oLyr.style.top=topY-y+'px';
}
function ScrollIt(state,sign) {
if (state) {
	oLyr=document.getElementById("lyr");
	oLyr2=document.getElementById("lyr2");
	oHndl=setInterval('DoScroll('+sign+')',50);
} else {
	clearInterval(oHndl);
}
}
</script>
</head>
<body style="overflow:hidden;"> 
<div id="lyr" style="position:absolute;left:100px;top:100px;width:800px;clip:rect(0px 800px 300px 0px)">
LÄGG IN TEXTMASSA HÄR
</div>
<img onmouseover="ScrollIt(true,-1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:100px;" src="img/up.gif">
<img onmouseover="ScrollIt(true,1);" onmouseout="ScrollIt(false);" style="position:absolute;left:0px;top:400px;" src="img/down.gif">
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...