voor de duidelijkheid, neem even een kijkje op www.frank-raterink.nl/2 (let op de /2 hoort er wel bij, maar pakt 'ie niet bij de link)

bij weblog zie je 3 weergaven.
1. gedeelte tekst + lees verder (moet nog relealiseerd worden)
2. opgesomde items
3. enkel item (moet nog gerealiseerd worden)

Deze 3 weergaves staan in divs, welke door middel van visibility worden getoond/verborgen. Nu wil ik dus door midden van een klik op een titel uit de 2de weergave en de 'lees meer' uit de eerste weergave, het volledige bericht tonen in de 3de weergave.

Hoe doe ik dit?
Kan ik een id naar een div sturen welke vervolgens bijbehorende tekst uit de database opvraagd?
Je kunt gewoon via PHP het id meesturen naar de div en vervolgens met js onclick="functie(elementnaam)" oid.
Jurgen schreef op 16.09.2007 22:25
Je kunt gewoon via PHP het id meesturen naar de div en vervolgens met js onclick="functie(elementnaam)" oid.


elementnaam? alsin?
ik wil bv het id weblogid meesturen (bv ?weblogid=23)
Ik moet wel enorm lang wachten om op die site van je te komen. Of komt dat doordat je nu aan t klussen bent?
Als je zorgt dat de links in je tweede div er zo uit zien:

<a href="?weblogid=123">titel van de weblog</a>

kun je gewoon via $_GET['weblogid'] de juiste inhoud uit je DB laten rollen.
wanneer ik werk met een href ben ik dus genoodzaakt de pagina te refreshen.. ik probeer dit refreshen tot een minimum te beperken, vandaar.

mijn code voor de weblog pagina is:

weergave: <a onClick="toggleBox('weblog-indeling1',0), toggleBox('weblog-indeling2',1), toggleBox('weblog-indeling3',0);" onMouseover="this.style.cursor='pointer'" value="Hide div"><img src="img/algemene-opmaak-extra/icon-weblog-weergave-50.gif" border="0" /></a>&nbsp; 
<a onClick="toggleBox('weblog-indeling1',1), toggleBox('weblog-indeling2',0), toggleBox('weblog-indeling3',0);" onMouseover="this.style.cursor='pointer'" value="Hide div"><img src="img/algemene-opmaak-extra/icon-weblog-weergave-1.gif" border="0" /></a>&nbsp;
<a onClick="toggleBox('weblog-indeling1',0), toggleBox('weblog-indeling2',0), toggleBox('weblog-indeling3',1);" onMouseover="this.style.cursor='pointer'" value="Hide div"><img src="img/algemene-opmaak-extra/icon-weblog-weergave-100.gif" border="0"/></a>&nbsp;


<div ID="weblog-indeling2" class="weblog-indeling2"> 

        <?
			$result3 = mysql_query("SELECT * FROM weblog ORDER BY `weblogid` DESC " ) or die (mysql_error());
			while ($rij3 = mysql_fetch_array($result3))
			{
				echo("<table width='100%' border='0'>");
  				echo("<tr>");
    			echo("<td width='70%'><b><i><font color='#7F4F11'>" . $rij3[2] . "</font></i></b></td>");
    			echo("<td width='30%'><div align='right'>" . $rij3[1] . "</div></td>");
  				echo("</tr>");
  				echo("<tr>");
				echo("<td colspan='2'><div align='justify'>");
				
				$tekst = "$rij3[3]";
				$short = ShortTxt($tekst, 50);
				echo $short;
				
				echo("</div></td>");
  				echo("</tr>");
				echo("</table>");
				echo("<br /><br />");

			}
		?>



<br />
</div> 


<div ID="weblog-indeling1" class="weblog-indeling1"> 
        <?
			$result3 = mysql_query("SELECT * FROM weblog ORDER BY `weblogid` DESC " ) or die (mysql_error());
			while ($rij3 = mysql_fetch_array($result3))
			{
				echo("<table width='100%' border='0'>");
  				echo("<tr>");
    			echo("<td width='70%'><a onClick='toggleBox('weblog-indeling1',0), toggleBox('weblog-indeling2',0), toggleBox('weblog-indeling3',1);' onMouseover='this.style.cursor='pointer'' href='?weblogid=123'><b><i><font color='#7F4F11'>" . $rij3[2] . "</font></i></b></a></td>");
    			echo("<td width='30%'><div align='right'>" . $rij3[1] . "</div></td>");
  				echo("</tr>");
				echo("</table>");

			}
		?>
</div> 


<div ID="weblog-indeling3" class="weblog-indeling3"> 
        <?PHP
  $weblogid = $_GET[weblogid];
?>
		<?
			$result3 = mysql_query("SELECT * FROM weblog WHERE weblogid = '$weblogid' " ) or die (mysql_error());
			{
				echo("<table width='100%' border='0'>");
  				echo("<tr>");
    			echo("<td width='70%'><b><i><font color='#7F4F11'>" . $rij3[2] . "</font></i></b></td>");
    			echo("<td width='30%'><div align='right'>" . $rij3[1] . "</div></td>");
  				echo("</tr>");
  				echo("<tr>");
				echo("<td colspan='2'><div align='justify'>" . $rij3[3] . "</div></td>");
  				echo("</tr>");
				echo("</table>");
				echo("<br /><br />");

			}
		?>
</div> 


(zie www.frank-raterink.nl/2 (LET OP! 2 hoort erachter!)

achter elkaar zie je 3 div's, indeling2, indeling1, indeling3. Van indeling2 en indeling1 wil ik naar indeling3 linken. En dus het liefst zonder reflesh (of evt. alleen bij aankomst op die pagina)

Heel de website is overigens op deze manier opgebouwd

ik hoop dat deze info meer inzicht geeft in mn probleem
Lijkt erop dat het al gelukt is?

Je site is echter niet crossbrowser compatible. In Firefox, Konqueror (beide op Linux) en Safari blijft je site hangen bij het laden (Bij "Een moment geduld alstublieft..."). Alleen in Opera werkt hij hier, maar ook niet helemaal naar behoren lijkt het.

Wel supertoffe layout verder!

[edit]En wanneer je de url tussen tags zet, moet hij die 2 wel meepakken.
[url]http://www.frank-raterink.nl/2/[/url]
geeft http://www.frank-raterink.nl/2/[/edit]
Gebeurt niks op die link. Draaiend cirkeltje en 'Een moment geduld alstublieft...'. Duurt nu al enkele minuten.
SanThe schreef op 19.09.2007 16:39
Gebeurt niks op die link. Draaiend cirkeltje en 'Een moment geduld alstublieft...'. Duurt nu al enkele minuten.
Dat zeg ik :) Paar dagen terug deed hij het in Firefox op Windows wel prima. Weet niet of intussen de code veranderd is, of dat ik toen gewoon geluk had :P
Kasper schreef op 19.09.2007 16:33
Lijkt erop dat het al gelukt is?
Het is nog niet gelukt...

Kasper schreef op 19.09.2007 16:33

Je site is echter niet crossbrowser compatible.
Daar moet ik inderdaad nog naar kijken, maar volgens mij was het alleen het laadscherm

Kasper schreef op 19.09.2007 16:33

Wel supertoffe layout verder!
Thanks!

Het probleem is dus nog gaande...
Kan je de info uit een database lezen zonder pagina reload?

(het doel van mijn website is om snel alle informatie te kunnen bekijken, door in 1 keer alles te laden, geen reloads etc..)
Dan moet je misschien AJAX gebruiken? Daarmee kan je informatie binnenhalen zonder dat de gebruiker het doorheeft (dus zonder zichtbare refresh). Op deze site staan wel wat tutorials over AJAX.

Anders moet je alle informatie ophalen en in togglebare div's zetten, zoals je nu ongeveer hebt.

Voordeel van AJAX is dat je informatie pas ophaalt als dat nodig is. Als je eerst alle informatie uit een database gaat ophalen, waar je eigenlijk maar 1/3 van nodig hebt, is dat zonde van de resources.

Reageren