Floating/static Iframe - Softwareontwikkeling

dinsdag 26 juli 2005 10:51

Acties:

Topicstarter

Geachte tweakers,

Ik tracht een floating/static Iframe te maken.
Gewoon een Iframe lukt me natuurlijk wel, maar ik wil graag dat dit Iframe altijd in het midden (van de hoogte) van het scherm blijft.
Ik ben goed thuis in ASP(en .NET) en CSS, maar in mindere maten bekend met Javascript.
Natuurlijk ken ik wel een grote lijnen de opbouw van Javasript.

Als eerste was ik op internet naar wat scriptjes aan het zoeken.. doe ik vaker... gewoon om te kijken HOE het werkt, maar ervaring is dat ik hier toch goed van leer.

Ik had een script gevonden op dynamic drive;
http://www.dynamicdrive.com/dynamicindex17/floatiframe.htm
Echter werkt dit script ALLEEN in IE.. en niet in FF.
Na dit script bekeken te hebben zag ik het ook helemaal afhankelijk is van IE.. proberen dit te veranderen wilde niet helpen.

Ook search op google en GoT leverde niet het gewenste resultaat op.

Ik verwacht niet van een van jullie om mij direct een kant en klare code te geven, of een link naar een code (zou wel mooi zijn, maar script request mag hier niet).

Maar kan iemand me vertellen in welke richting ik zou moeten kijken.. welke javascript functies zou ik hiervoor kunnen gebruiken..

Ikzelf zou het zo willen doen..

- Iframe met CSS op position:absolute zetten
- left met CSS gewoon vast zetten
- top van CSS met javascript ([id].top.style=....)
- het aantal pixel wat bij top ingevuld moet worden zou ik dan dus met javascript moeten bepalen.
- natuurlijk met de functie die de top pixels nakijkt constant moeten kijken omdat er dus gescrolled word.

Alvast bedankt voor jullie hulp

dinsdag 26 juli 2005 10:54

Acties:

Alfa Novanta

VRRROOOAAARRRP

Euj .. dus je wilt een venster met scrollbalk midden op't scherm en de rest van de content scrollt er omheen omhoog/omlaag?

Of gaat alle content in dat iframe? If sow, dan kan dat toch gewoon prima met een plain frameset?

dinsdag 26 juli 2005 11:08

Acties:

Predje

Topicstarter

ing._Buttje schreef op dinsdag 26 juli 2005 @ 10:54:
Euj .. dus je wilt een venster met scrollbalk midden op't scherm en de rest van de content scrollt er omheen omhoog/omlaag?

Of gaat alle content in dat iframe? If sow, dan kan dat toch gewoon prima met een plain frameset?

Dat zou ik kunnen doen, maar dan komt de scrollbalk voor de "main" content niet aan de rand van het scherm.
In het Iframe komt een preview van de winkelwagen.. dus als iemand iets in de winkelwagen stopt dan ziet hij dat direct in de winkelwagen verschijnen...
Het geheel moet er dus gewoon uitzien als een "zwevend" tabelletje waar je artikelen in kunt zetten.
Een gewone plain Frameset zou wél de content op de juiste positie houden, maar niet de scrollbalk van de gewone pagina aan de rechterkant van het scherm

dinsdag 26 juli 2005 11:16

Acties:

Fles

Zo iets?

code:

<html>
<head>
<script language='JavaScript'>
  function update_position()
  {
    var top = document.body.scrollTop + 100;

    document.getElementById('blaat').style.top = top;
  }
</script>
<body onScroll='update_position()'>
<div id='blaat' style='position: absolute; left: 100px; top: 100px; width: 50px; height: 50px; background-color: #500000'></div>
</body>
</html>

dinsdag 26 juli 2005 11:32

Acties:

Alfa Novanta

VRRROOOAAARRRP

Predje schreef op dinsdag 26 juli 2005 @ 11:08:
[...]

Dat zou ik kunnen doen, maar dan komt de scrollbalk voor de "main" content niet aan de rand van het scherm.
In het Iframe komt een preview van de winkelwagen.. dus als iemand iets in de winkelwagen stopt dan ziet hij dat direct in de winkelwagen verschijnen...
Het geheel moet er dus gewoon uitzien als een "zwevend" tabelletje waar je artikelen in kunt zetten.
Een gewone plain Frameset zou wél de content op de juiste positie houden, maar niet de scrollbalk van de gewone pagina aan de rechterkant van het scherm

Achso, ik snap .. grappig, leuk ideetje

dinsdag 26 juli 2005 11:38

Acties:

Predje

Topicstarter

Graveheart schreef op dinsdag 26 juli 2005 @ 11:16:
Zo iets?

code:

<html>
<head>
<script language='JavaScript'>
  function update_position()
  {
    var top = document.body.scrollTop + 100;

    document.getElementById('blaat').style.top = top;
  }
</script>
<body onScroll='update_position()'>
<div id='blaat' style='position: absolute; left: 100px; top: 100px; width: 50px; height: 50px; background-color: #500000'></div>
</body>
</html>

Dat is idd een hele mooie/goede crossbrowser funtie.. ook precies zoals ik het bedoel en wilde uitwerken. Alleen zou hij het ook moeten doen als je de scrollwheel van de muis gebruikt.

dinsdag 26 juli 2005 11:47

Acties:

Verwijderd

onmousewheel werkt iig in IE, verder weet ik niet eigenlijk

dinsdag 26 juli 2005 11:52

Acties:

Predje

Topicstarter

Mhh, het werkt idd in IE.. en daarvoor is het ook echt een heerlijke oplossing.. in FF heb je echter en helaas niet de mousewheel functionaliteit.. Nu is dit geen absolute ramp.. maar het was iig mooi geweest als dit ook gewoon goed zou werken.

dinsdag 26 juli 2005 12:18

Acties:

Fles

Je kunt ipv onScroll ook een interval zetten die hem gewoon aanroept of je nou scrollt of niet. Dan doet hij het altijd.

code:

1	interval = setInterval('update_position()', 15);

dinsdag 26 juli 2005 12:22

Acties:

Predje

Topicstarter

mhh dat zou ook kunnen ja

,

Ik neem aan dat die "15" staat voor 15 seconden?

Maar is dit niet resource vretend? als een soort van background process?

edit:

Getest.. Het lijkt niet echt veel meer resource te gebruiken, kun je dit bevestigen?
Het werkt nu iig ook goed in FF..

Maar waar staat die 15 voor?

[ Voor 37% gewijzigd door Predje op 26-07-2005 12:26 ]

dinsdag 26 juli 2005 12:26

Acties:

Fles

15 miliseconden...

Denk dat een beetje computer van tegenwoordig het niet zo erg vind

dinsdag 26 juli 2005 12:38

Acties:

Predje

Topicstarter

Thx man!
Heb nu in de DIV een Iframe staan dat zelf zijn hoogte bepaald a.h.v. de inhoud.
Vanuit de mainpage post ik nu bestelde artikelen naar dit iframe.. hoever je ook naar beneden scrolled.. je zit altijd je winkelwagentje meegaan en daar kun je dan vanuit de mainpage netjes artikelen inzetten.
Die oude computer hier heeft er iig niet echt veel moeite mee.. en 15 miliseconden is "snel" genoeg.

10 punten voor jou