Toon posts:

[JS] scrollpositie behouden met refresh?

Pagina: 1
Acties:

donderdag 13 juni 2002 12:30

Acties:

Verwijderd

Topicstarter
Als je een frame of ilayer refreshed d.m.v. javascript/met tag dan gaat de scroll bar automatisch weer naar beginpositie = boven.

Is het op de 1 of andere manier mogelijk de exacte posite van de scrollbar vast te houden tijdens en na het refreshen?

donderdag 13 juni 2002 12:35

Acties:
  • cutter
  • Registratie: November 2000
  • Laatst online: 28-09-2025

cutter

Wannabe i7 fanboy

Groeten hoeft niet en zijn verwijderd :)

donderdag 13 juni 2002 12:35

Acties:

Verwijderd

offsetTop Property

--------------------------------------------------------------------------------

Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

Syntax

HTML N/A
Scripting [ iCoord = ] object.offsetTop

Possible Values
iCoord Integer that receives the top position, in pixels.
The property is read-only. The property has no default value.

Remarks

You can determine the location, width, and height of an object by using a combination of the offsetLeft , offsetTop, offsetHeight , and offsetWidth properties. These numeric properties specify the physical coordinates and dimensions of the object relative to the object's offset parent.

For more information about how to access the dimension and location of objects on the page through the Dynamic HTML (DHTML) Document Object Model (DOM), see Measuring Element Dimension and Location .

Standards Information

There is no public standard that applies to this property.

donderdag 13 juni 2002 12:52

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:59

crisp

Devver

Pixelated

Op bovenstaande manier inderdaad je scroll positie bepalen, en de pagina op de volgende manier verversen:
code:
1

window.location = 'blaat.html?scrolltop=124';

En in je <head> die variabele uitlezen, en de pagina positioneren als hij gezet is.

Intentionally left blank

donderdag 13 juni 2002 13:46

Acties:

Verwijderd

Topicstarter
Hmmm ziet er interessant uit...

Maare hoe kan ik dit implementeren?

kan iemand mij een beter idee geven hoe dit te verwerken in javascript?

vrijdag 14 juni 2002 08:06

Acties:

Verwijderd

Op donderdag 13 juni 2002 13:46 schreef loaded het volgende:
Hmmm ziet er interessant uit...

Maare hoe kan ik dit implementeren?

kan iemand mij een beter idee geven hoe dit te verwerken in javascript?
code:
1
2
3
4
5
6
7
8

<script language="JavaScript">
function refresh()
{
window.location.href = "blaat.htm?scrolltop=" + object.offsetTop
}
</script>

<input type="button" onClick="javascript: refresh()">

Zoiets dan.
}

vrijdag 14 juni 2002 08:12

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:59

crisp

Devver

Pixelated

Op vrijdag 14 juni 2002 08:06 schreef Junt het volgende:

[..]
code:
1
2
3
4
5
6
7
8

<script language="JavaScript">
function refresh()
{
window.location.href = "blaat.htm?scrolltop=" + object.offsetTop
}
</script>

<input type="button" onClick="javascript: refresh()">

Zoiets dan.
}
Je vergeet deze:
code:
1
2
3
4
5
6
7
8
9
10
11
12

function init() {

  var urlvars = window.location.search;
  var oleft = urlvars.indexOf('scrolltop=');
  if (oleft > -1) {
    var oright = urlvars.indexOf('&', oleft);
    if (oright == -1) oright = urlvars.length;
    var scrolltop = parseInt(urlvars.substring(oleft + 10, oright), 10);
    window.scrollTo(0, scrolltop);
  }

}

in samenwerking met:
code:
1

<body onLoad="init()">

Disclaimer: niet getest! :)

Intentionally left blank

vrijdag 14 juni 2002 08:58

Acties:
  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02-2025

SchizoDuckie

Kwaak

ermmm... zou je niet gewoon op vaste plakken anchors neer kunnen zetten, net zoals hier op GoT gebeurt?

* PaPa Eend weet namelijk zeker dat op je wel automagisch naar de goeie pos gaat.

Stop uploading passwords to Github!

vrijdag 19 juli 2002 09:44

Acties:

Verwijderd

Topicstarter
Hmmm..

bedankt voor jullie replies! ik ben een beetje laat, maare ben het niet vergeten hoor. Maare heb het druk gehad met andere dingen, sorry....

ik probeer nu een simpel voorbeeldje te maken, maar het lukt mij niet!

[html]
<HTML>
<HEAD>
<TITLE>smart scrollbar</TITLE>
<script language="JavaScript">
function init() {
var urlvars = window.location.search;
var oleft = urlvars.indexOf('scrolltop=');
if (oleft > -1) {
var oright = urlvars.indexOf('&', oleft);
if (oright == -1) oright = urlvars.length;
var scrolltop = parseInt(urlvars.substring(oleft + 10, oright), 10);
window.scrollTo(0, scrolltop);
}
}
function refresh(){
window.location.href = "blaat.htm?scrolltop=" + object.offsetTop
}
</script>
</HEAD>
<BODY onLoad="init()">
1</br>
<!--nog 15 x 1</br>-->
1</br>
<input type="button" onClick="javascript: refresh()">
1</br>
<!--nog 15 x 1</br>-->
1</br>

</BODY>
</HTML>
[/html]

N.B. Het gaat mij om de verticale scrollbar.
Ik krijg een "Fout op de pagina" melding.
En het script werkt niet.
Ook de url verandert niet?
Kan ik die geturl wel gewoon opvangen in html d.m.v. javascript of moet ik dat met een scripttaal doen? Volgens mij gewoon javascript toch?

vrijdag 19 juli 2002 10:45

Acties:
  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

drm

f0pc0dert

Ten eerste:
van een </br> tag heb ik nog nooit gehoord. Dat zal een <br /> moeten zijn.

Ten tweede:
in een event van een element (bijv. onclick="..") moet geen javascript: staan. Die moet je je weghalen.

Ten derde:
In de functie refresh () roep je een property van een object 'object' aan. Wat is object? Die wordt nergens gedefinieerd.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

vrijdag 19 juli 2002 13:48

Acties:

Verwijderd

Topicstarter
Hoi,

Bedankt voor je reactie,

ik gebruik eigenlijk altijd </br> werkt ook prima tot zover ik weet. Heb ik vervangen door <br>.

button:
<input type="button" onClick="refresh()">

En verder kom ik niet...
Ik wil dat als je knop indrukt dat de pagina ververst en dat de scrollbar positie exact wordt overgenomen via get url
dus blaat.htm?scrolltop= positie scrollbar

wie o wie...

vrijdag 19 juli 2002 14:33

Acties:
  • Morrar
  • Registratie: Juni 2002
  • Laatst online: 31-08 12:55

Morrar

Ok, dit is toch niet zo heel lastig?

function MyRefresh()
{
if(document.all)
{
var HPos = document.body.scrollLeft;
var VPos = document.body.scrollTop;
}
else //NS 4 - 6 (& 7?) maar check is beetje brak
{
var HPos = self.pageXOffset;
var VPos = self.pageYOffset;
}

self.location = self.location + "?HPos=" + HPos + "&VPos=" + Vpos;
}

en dan als de pagina weer laadt, met onload eventhandler de waardes restoren en de page scrollen:

function MyRestore()
{
var Query = self.location.search;
if(Query.indexOf("?") == 0)
{
//dit kan wel netter...
var VarStrt = Query.indexOf("HPos=") + 5;
var VarEnd = Query.indexOf("&", VarStrt);

var HPos = parseInt(Query.substring(VarStrt, VarEnd));

VarStrt = Query.indexOf("VPos=") + 5;
VarEnd = Query.indexOf("&", VarStrt);

var VPos = parseInt(Query.substring(VarStrt, VarEnd));

self.scrollTo(HPos, VPos);
}
}

dat moet um wezen...

Suc6

vrijdag 19 juli 2002 14:46

Acties:

Verwijderd

Topicstarter
Hoi,

Misschien ben ik wel een beetje n00b ofzo, maare ik kom er nog steeds niet uit!

Bedankt voor al jullie bijdragen, als ik meer tijd heb ga ik zeker uit proberen te zoeken.

Maare een fysiek voorbeeld zou heel erg welkom zijn...

mzzl.

vrijdag 19 juli 2002 15:02

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:59

crisp

Devver

Pixelated

Een fysiek voorbeeld:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;smart scrollbar&lt;/title&gt;
&lt;script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;&gt;

function init() {

  var urlvars = window.location.search;

  if (urlvars) {

    var scrollL = parseInt(getelement(urlvars, 'scrollL'), 10);
    var scrollT = parseInt(getelement(urlvars, 'scrollT'), 10);

    window.scrollTo(scrollL, scrollT);

  }

}

// Get elements from string
function getelement(text, identifier) {

  identifier = identifier + '=';
  var oleft = text.indexOf(identifier);

  while (oleft != -1 &amp;&amp; text.substring(oleft - 1, oleft) != '&amp;'
        &amp;&amp; text.substring(oleft - 1, oleft) != '?') {

    oleft = text.indexOf(identifier, oleft + 1);

  }

  if (oleft != -1) {

    var oright = text.indexOf('&amp;', oleft + 1);
    if (oright == -1) oright = text.length;

    return text.substring(oleft + identifier.length, oright);

  } else {

    return null;

  }

}

function refresh(){

 var D = document;
 var W = window;

 var scrollT = W.pageYOffset? W.pageYOffset:0;
 scrollT = D.body.scrollTop? D.body.scrollTop:scrollT;
 var scrollL = W.pageXOffset? W.pageXOffset:0;
 scrollL = D.body.scrollLeft? D.body.scrollLeft:scrollL;

 var url = window.location.href;
 var r = url.indexOf('?');
 if (r != -1) url = url.substring(0, r);

 window.location.href = url+'?scrollT='+scrollT+'&amp;scrollL='+scrollL;

}

&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad=&quot;init()&quot;&gt;
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
&lt;input type=&quot;button&quot; value=&quot;Refresh!&quot; onClick=&quot;refresh()&quot;&gt;&lt;/input&gt;
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;

Intentionally left blank

vrijdag 19 juli 2002 15:07

Acties:
  • Morrar
  • Registratie: Juni 2002
  • Laatst online: 31-08 12:55

Morrar

Ok, iets tevroeg gepost. De vorige oplossing werkt dus niet wegens een paar bugjes... Nieuwe dan en meteen in een voorbeeldje. Overigens kom je wel in de problemen als je meerdere variablen in je URL zet, bijvoorbeeld voor PHP ofzo. Dan moet je dus dit script ff aanpassen. Het voorbeeld:

<html>
<head>
<script language="Javascript">
function MyRefresh()
{
if(document.all)
{
var HPos = document.body.scrollLeft;
var VPos = document.body.scrollTop;
}
else //NS 4 - 6 (& 7?) maar check is beetje brak
{
var HPos = self.pageXOffset;
var VPos = self.pageYOffset;
}

if(self.location.search.indexOf("?HPos=") == 0)
{
var ReloadURL = self.location.toString();
ReloadURL = ReloadURL.substring(0, ReloadURL.indexOf("?HPos="));
self.location = ReloadURL + "?HPos=" + HPos + "&VPos=" + VPos;
}
else
{
self.location = self.location + "?HPos=" + HPos + "&VPos=" + VPos;
}
}

function MyRestore()
{
var Query = self.location.search;
if(Query.indexOf("?") == 0)
{
//dit kan wel netter...
var VarStrt = Query.indexOf("HPos=") + 5;
var VarEnd = Query.indexOf("&");

var HPos = Query.substring(VarStrt, VarEnd);

VarStrt = Query.indexOf("VPos=") + 5;
VarEnd = Query.indexOf("&", VarStrt);
if(VarEnd == -1)
VarEnd = Query.length;

var VPos = Query.substring(VarStrt, VarEnd);

self.scrollTo(HPos, VPos);
}

}
</script>
</head>
<body onload="MyRestore();">
<font size="7">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:MyRefresh();">fsdvfdsv</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</font>
</body>
</html>

Zo, deze heb ik wel ff getest dus die zou het moeten doen... Excuses dus voor de vorige post, zal voortaan eerst ff testen en dan pas posten |:(

Suc6

vrijdag 19 juli 2002 15:09

Acties:

Verwijderd

Topicstarter
Cool!,

Het lijk goed te werken! Kga er nog ff mee knutselen...
Maare alvast hartelijk dank voor alle gewaarde hulp!

Mzzl.

dinsdag 23 juli 2002 14:11

Acties:

Verwijderd

Topicstarter
Hallo,

Ik ben een beetje aan het knutselen geweest.
Nou heb ik een probleem. ik heb het hierboven staande script in een <iframe> gegooid uit een php script.

Dus iframe src="script.php?action=blaat"....

Maare dan werkt het script niet meer. Als het dan refreshed krijg ik dat ie script.php opent in het betreffende iframe?

ligt aan de location.href ofzo? denk ik?, wie kan me hier mee helpen?

Mzzl
Pagina: 1
Reageer