[HTML & JS] knipperende website - Softwareontwikkeling

zondag 15 mei 2005 19:54

Acties:

Verwijderd

Topicstarter

Hallo,

samen met een klasgenoot zijn we bezig met een website maken.
De website is grotendeels af, maar er zit nog een probleem in.

Er is een uitklapmenu aanwezig, en wanneer met in een ietwat oudere browser of firefox oid met de muis over het dropdownmenu heen gaat, begint de site te knipperen.

In die browsers komt het menu ook onder het iframe, maar in de search heb ik gevonden dat we daar niets aan kunnen doen. Het probleem zit het in het feit dat het een frame is.
Daarom hebben we ook enkele 'linkpagina's' ingebouwd.

Het is net alsof de website helemaal wordt herladen.
Weet iemand misschien waar dat aan ligt?

Het hele script is met javascript geschreven.
Het menu bestaat uit div-jes die dan worden weergegeven (hidden) en gekleurd.

Het linkje is: http://sh59.surpasshosting.com/~zeptaae (tijdelijke link, totdat hij helemaal af is).
http://sh59.surpasshosting.com/~zeptaae/codelibrary.js is het linkje voor het javascript gedeelte.

zondag 15 mei 2005 19:57

Acties:

rb338

Er knippert niks hier, in Firefox.
Wel inderdaad het menu onder het iframe en dat krijg je ook niet gefixed, zoals je zelf al aangeeft.

Er is overigens een prima manier om dit op te lossen: maak een divje met overflow: scroll en gebruik php om je content dynamisch erin te plempen.

edit: en is het niet een beetje gebruikers-onvriendelijk om 1280x1024 als optimale resolutie te handhaven? Krijg hem hier wel goed in beeld op 1280x800, maar AFAIK wordt 1024x768 nog het meeste gebruikt...

[ Voor 27% gewijzigd door rb338 op 15-05-2005 19:58 ]

zondag 15 mei 2005 19:58

Acties:

robbert

Om eerlijk te zijn snap ik niet waarom je het zo graag in een iframe wil. Je hebt nu ook 2 scrollbars wat erg vervelend is. Als je geen iframe gebruikt heb je ook direct het probleem opgelost dat de menu's eronder worden weergeven.

zondag 15 mei 2005 20:00

Acties:

Verwijderd

Topicstarter

robbertkrebbers schreef op zondag 15 mei 2005 @ 19:58:
Om eerlijk te zijn snap ik niet waarom je het zo graag in een iframe wil. Je hebt nu ook 2 scrollbars wat erg vervelend is. Als je geen iframe gebruikt heb je ook direct het probleem opgelost dat de menu's eronder worden weergeven.

En hoe moet ik dan de inhoud 'aanpassen / weergeven' zonder dat de hele pagina moet worden gerefreshd?

Daarvoor hebben wij een iframe gebruikt, dat leek ons het gebruikelijkst. Maar het kan misschien ook wel op een andere manier.

zondag 15 mei 2005 20:02

Acties:

robbert

Verwijderd schreef op zondag 15 mei 2005 @ 20:00:
[...]

En hoe moet ik dan de inhoud 'aanpassen / weergeven' zonder dat de hele pagina moet worden gerefreshd?

Daarvoor hebben wij een iframe gebruikt, dat leek ons het gebruikelijkst. Maar het kan misschien ook wel op een andere manier.

Een gemakkelijke manier mbv php

tpl.php

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
    <title>Blaat - <?=$tpl["title"];?></title>
    <link href="stijl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div1">
    Divje dat overal moet worden weergeven
</div>

<ul id="menu">
    <li>Menu dat op elke pagina moet komen</li>
</ul>

<div id="content">
    <h1><?=$tpl["title"];?></h1>
    <?=$tpl["content"];?>
</div>
</body>
</html>

eenpagina.php

PHP:

<?
$tpl["title"] = "Een pagina met een simpele template";
$tpl["content"] = "Wat content";

require($tpl.php);
?>

[ Voor 40% gewijzigd door robbert op 15-05-2005 20:03 ]

zondag 15 mei 2005 20:06

Acties:

boiert

je moet de z-index van al die menu's hoger zetten, dan komen ze wel over het iframe heen

Cascading Stylesheet:

1
2
3

iframe  {color: black; z-index:3; height:100%; width:100%;}
.menubar {position:relative; height:15px; overflow:visible;}
#menubar1 {z-index:2;}

#menubar1 (z-index van 2) komt onder iframe (z-index van 3)

[ Voor 91% gewijzigd door boiert op 15-05-2005 20:10 ]

zondag 15 mei 2005 20:14

Acties:

Rowanov

Kop eens wat anders...

Verwijderd schreef op zondag 15 mei 2005 @ 20:00:
En hoe moet ik dan de inhoud 'aanpassen / weergeven' zonder dat de hele pagina moet worden gerefreshd?

Daarvoor hebben wij een iframe gebruikt, dat leek ons het gebruikelijkst. Maar het kan misschien ook wel op een andere manier.

Zonder te refreshen kan niet zonder frames, althans niet op een makkelijke manier. Waar je ook naar kan kijken zijn de php functies include en require die je in combinatie met een switch statement kan gebruiken om de pagina's in te voegen. De meeste mensen gebruiken een switch constructie vanwege beveiligingsredenen, maar daar is voldoende info over te vinden.

edit:
Grrrr, offday met typen...

[ Voor 25% gewijzigd door Rowanov op 15-05-2005 20:17 ]

zondag 15 mei 2005 20:45

Acties:

Verwijderd

Topicstarter

boiert schreef op zondag 15 mei 2005 @ 20:06:
je moet de z-index van al die menu's hoger zetten, dan komen ze wel over het iframe heen
Cascading Stylesheet:
1
2
3
iframe  {color: black; z-index:3; height:100%; width:100%;}
.menubar {position:relative; height:15px; overflow:visible;}
#menubar1 {z-index:2;}
#menubar1 (z-index van 2) komt onder iframe (z-index van 3)

Dit heb ik aangepast, maar kan helaas niet testen.
Dus als iemand kan zeggen of dit werkt, graag. (sinds nieuwe chello modem krijg ik laptop niet meer op internet, heeft tot nu toe ook geen prioriteit gehad.)

En voor het 'refreshen' zullen wij dus het frame moeten wegdoen en vervangen door divjes op de manier die Robbert laat zien. Dit is in principe wel makkelijk te doen, omdat we nu de content ook uit een database halen (het wordt er ingezet d.m.v. htmlarea, ideaal script), helaas gaat het wel weer veel tijd kosten om alles aan te passen.

zondag 15 mei 2005 20:49

Acties:

Not Pingu

Dumbass ex machina

Verwijderd schreef op zondag 15 mei 2005 @ 20:00:

En hoe moet ik dan de inhoud 'aanpassen / weergeven' zonder dat de hele pagina moet worden gerefreshd?

Daarvoor hebben wij een iframe gebruikt, dat leek ons het gebruikelijkst. Maar het kan misschien ook wel op een andere manier.

We leven inmiddels in het jaar 2005. In de tijd van dialup was het idd een groot bezwaar om navigatie e.d. bij elke pageview opnieuw mee te sturen, maar vandaag de dag maken die paar bytes echt niks meer uit.

Overigens ken ik het probleem van de knipperende sites wel, bij ons op school is dat probleem ook. Daar gebruiken we Windows XP met IE6, op toch redelijk snelle pc's. Geen idee waardoor het komt overigens. Hier zie ik in Firefox niks knipperen

[ Voor 20% gewijzigd door Not Pingu op 15-05-2005 20:51 ]

Certified smart block developer op de agile darkchain stack. PM voor info.

zondag 15 mei 2005 22:47

Acties:

Vinnienerd

Gunp01nt schreef op zondag 15 mei 2005 @ 20:49:
[...]

We leven inmiddels in het jaar 2005. In de tijd van dialup was het idd een groot bezwaar om navigatie e.d. bij elke pageview opnieuw mee te sturen, maar vandaag de dag maken die paar bytes echt niks meer uit.

Overigens ken ik het probleem van de knipperende sites wel, bij ons op school is dat probleem ook. Daar gebruiken we Windows XP met IE6, op toch redelijk snelle pc's. Geen idee waardoor het komt overigens. Hier zie ik in Firefox niks knipperen

Refreshen van content zonder de hele pagina te reloaden kan met AJAX, maar is wel wat ingewikkelder

zondag 15 mei 2005 23:05

Acties:

boiert

Verwijderd schreef op zondag 15 mei 2005 @ 20:45:
[...]

Dit heb ik aangepast, maar kan helaas niet testen.
Dus als iemand kan zeggen of dit werkt, graag. (sinds nieuwe chello modem krijg ik laptop niet meer op internet, heeft tot nu toe ook geen prioriteit gehad.)

Bij mij werkt het.

zondag 15 mei 2005 23:36

Acties:

Not Pingu

Dumbass ex machina

Vinnienerd schreef op zondag 15 mei 2005 @ 22:47:
[...]

Refreshen van content zonder de hele pagina te reloaden kan met AJAX, maar is wel wat ingewikkelder

Sowieso moet die data ook weer ingeladen worden. Zolang het om statische sites gaat en geen webapplicaties of widgets die echt baat hebben bij asynchrone dataoverdracht, zou ik gewoon een pageload laten doen. Dat duurt toch hooguit een seconde aangezien het overgrote merendeel van de internetters breedband heeft (zelfs in kleine afgelegen dorpen enz.). Dan zien gebruikers ook dat er iets is veranderd op de pagina. Als je met XmlHttp nieuwe content gaat ophalen, kan het zijn dat het een gebruiker niet eens echt opvalt dat er iets nieuws in beeld staat

Certified smart block developer op de agile darkchain stack. PM voor info.

zondag 15 mei 2005 23:44

Acties:

AxiMaxi

robbertkrebbers schreef op zondag 15 mei 2005 @ 20:02:
Een gemakkelijke manier mbv php

Niet om het één-of-ander, maar niet iedereen heeft PHP ter beschikking. Een doorsnee gebruiker van een doorsnee provider moet het echt zonder stellen. Sniesogoeie oplossing dus...

[Hier had mijn handtekening kunnen staan]

maandag 16 mei 2005 10:06

Acties:

Verwijderd

Topicstarter

AxiMaxi schreef op zondag 15 mei 2005 @ 23:44:
[...]
Niet om het één-of-ander, maar niet iedereen heeft PHP ter beschikking. Een doorsnee gebruiker van een doorsnee provider moet het echt zonder stellen. Sniesogoeie oplossing dus...

Maar wij hebben wel php tot onze beschikking.
Zoals je ook al las, gebruiken wij een database om de inhoud op te slaan en aan te passen.
Dat gebeurt natuurlijk ook via php.

Maar het menu gaat dus nu over het iframe heen?

Maar dan zullen wij toch de pagina maar moeten aan passen.
Maar toch is het vreemd dat niemand hier iets ziet knipperen, terwijl onze opdrachtgever met firefox dat probleem wel heeft, en met ietwat oudere IE-versies het probleem ook ontstaat. (Maar tweakers gebruiken die natuurlijk niet).

maandag 16 mei 2005 11:40

Acties:

Verwijderd

Topicstarter

Ik ben even wat aan het proberen met die require(), alleen kan ik dan in die variabele wel html tags meegeven?

Want op http://sh59.surpasshostin...aae/testen/eenpagina2.php heb ik een kleine test.

Hier leest hij iets uit de database, maar het wordt niet weergegeven, zoals je in de broncode kunt zien, staat het er wel.

HTML:

<div name="innerFrame" id="miniFrame"><p align="center">
<align="center"><font color="#219CF7" size="1" face="Trebuchet MS">Kakatoe</font><br>
<h1 align="center"><font color="#ffa11e">Edities</font></h1><br>
<table border="0" width="700">
  <tr>
    <td width="324">[img]"http://sh59.surpasshosting.com/~zeptaae/afbeeldingen/kakatoe.jpg"[/img]</td>
    <td width="362"><font color="#000000" face="Trebuchet MS" size="2">Ongeveer
      vier keer per jaar komt ons clubblad, de &quot;Kakatoe&quot; uit. Alle
      leden ontvangen natuurlijk het clubblad thuis. Daarnaast wordt hij ook
      hier op de website geplaatst. Zo kun je, wanneer de hond het clubblad
      bijvoorbeeld verscheurd heeft, toch nog via de computer op de hoogte komen
      van de laatste nieuwtjes omtrent ZEPTA. Ook niet ZEPTA leden kunnen op
      deze manier eens kennis maken met ons clubblad.</font></td>
  </tr>
</table>
<p align="center"><b><font face="Trebuchet MS" size="3"><font color="#000000">De
volgende Kakatoe komt omstreeks augustus uit. </font></font></b><br>
<b><font color="#000000" face="Trebuchet MS" size="3">Kopie
dient voor 1 augustus ingeleverd worden!</font></b>
<p align="left">&nbsp;
<table border="1" width="702">
  <tr>
    <td width="692">
      <p align="left"><font face="Trebuchet MS" size="2" color="#FFA11E"><i>- Er
      is op dit moment geen oude Kakatoe digitaal beschikbaar. </i></font></td>
  </tr>
</table></div>

Weet iemand waarom dat niet wordt weergegeven, maar wel wordt meegestuurd?

Heel vreemd vind ik dat.
De linkjes, afbeeldingen en het menu werkt nu nog niet, omdat ik de bestanden nog niet heb gekopieerd, maar het zal dan toch moeten worden aangepast.
Daarom laat is dat totdat het goed werkt.

[ Voor 25% gewijzigd door Verwijderd op 16-05-2005 11:45 ]

woensdag 18 mei 2005 13:43

Acties:

Verwijderd

Topicstarter

robbertkrebbers schreef op zondag 15 mei 2005 @ 20:02:
[...]

Een gemakkelijke manier mbv php

tpl.php

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
    <title>Blaat - <?=$tpl["title"];?></title>
    <link href="stijl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div1">
    Divje dat overal moet worden weergeven
</div>

<ul id="menu">
    <li>Menu dat op elke pagina moet komen</li>
</ul>

<div id="content">
    <h1><?=$tpl["title"];?></h1>
    <?=$tpl["content"];?>
</div>
</body>
</html>

eenpagina.php

PHP:

<?
$tpl["title"] = "Een pagina met een simpele template";
$tpl["content"] = "Wat content";

require($tpl.php);
?>

Het begint hier wel wat een monoloog te worden.
Maar ik heb een stukje code welke gegevens uit de database haalt, die opslaat in $inhoud.
Deze inhoud probeer ik nu in tpl.php weer te geven, maar het werkt niet.
Weten jullie hoe het kan?

eenpagina2.php:
temInhoud is het resultaat van de SQL querie.

PHP:

$tempInhoud = mysql_fetch_row($result); 
$inhoud = $tempInhoud[0]; 

include 'http://sh59.surpasshosting.com/~zeptaae/testen/tpl.php' ;

tpl.php:
Waar het iframe stond, heb ik door onderstaande vervangen.

PHP:

1	<div name="innerFrame" id="miniFrame"><?php echo $inhoud;?></div>

Kan dit op de manier die ik wil? Of hoe kan ik anders de gegevens overdragen vanaf eenpagina2.php naar tpl.php?
Want volgens ons is dit op de enige oplossing om het knipperen tegen te gaan.

donderdag 19 mei 2005 09:15

Acties:

Dirtbiter

eehm, je bent er wel van op de hoogte dat met het gebruik van firefox, je menu wel uitklapt, maar op het moment dat je met je muis naar een element lager dan het 1e wil gaan, je menu net zo hard weer inklapt?

donderdag 19 mei 2005 10:14

Acties:

Verwijderd

Topicstarter

Dirtbiter schreef op donderdag 19 mei 2005 @ 09:15:
eehm, je bent er wel van op de hoogte dat met het gebruik van firefox, je menu wel uitklapt, maar op het moment dat je met je muis naar een element lager dan het 1e wil gaan, je menu net zo hard weer inklapt?

Daar ben ik inderdaad van op de hoogte, kijk maar in de startpost, daar heb ik het probleem omschreven.

Daarom probeer ik het nu met een div en include() te doen.
Ik heb dit nu werkend gekregen, maar helaas wordt de layout van de content dan aangepast in een negatieve zin.

Kijk maar op sh59.surpasshosting.com/~zeptaae/testen/eenpagina.php

Hier zie je (op dit moment, later zal deze pagina worden aangepast), dat de tabellen zeer groot zijn uitgevallen, wat op de gewone pagina niet het geval is.

Hier moet ik me nog even in verdiepen.

Pagina: 1

Reageer