specifieke div in dialog tonen
stel ik heb dit
<body>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span></div</div>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span></div</div>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span></div</div>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span></div</div>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span></div</div>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span>/div</div>
<div class="thediv"><div id="inhoud"><span id="openeendialog">klik hier</span></div</div>
</body>
telkens ik over "thediv" hover toont hij een linkje <span id="openeendialog">klik hier</span>
nu wil ik dat als er op 'klikhier' word geduwd hij enkel "thediv" opent waar men heeft op klikhier duwd
dialog openen is simpel maar dit krijg ik nie tvoor elkaar
iemand die mee kan helpen ik dacht aan jQuery(this).find('.thediv').dialog(open);
maar ik weet niet goed hoe dat te implementeren
Code (php)
1
2
3
2
3
$(this).parent().parent().dialog(open);
//of
$(this).closest('.thediv').dialog(open);
//of
$(this).closest('.thediv').dialog(open);
Merk op dat ik je dialog code 1-op-1 heb overgenomen. Dat zal vast van een plugin komen die ik verder niet ken, dus geen idee hoe dat deel van de code eruit moet zien.
Gewijzigd op 16/05/2013 11:16:34 door Erwin H
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
echo "<div class='profile_shoutbox595'>";
echo "<div class='profile_shout_minipic'><a href='user_profile?username=".$row['username']."'><img id='fotoprev' src='profielfotos/".$thepic['profielfoto']."' width='60' height='60'/></a></div>";
echo "<div class='profile_shouttext_xl'><span style='color: #000; font-weight: bold;'>" . $row['username'] . "</span> <span style='color: #09F'>@" . $row['vakgebied'] . "</span><span style='float:right; color:#ccc'>" . $row['datum'] . "</span><br />" . $row['shouts'] . "</div>";
echo "<br /><br /><div class='profile_shout_options'><span class='reshout'><img src='images/reshout.png' width='12' height='12' /><a href='#?id=".$row['id']."'>ddd</a></span></div>";
echo "</div>" ;
?>
echo "<div class='profile_shoutbox595'>";
echo "<div class='profile_shout_minipic'><a href='user_profile?username=".$row['username']."'><img id='fotoprev' src='profielfotos/".$thepic['profielfoto']."' width='60' height='60'/></a></div>";
echo "<div class='profile_shouttext_xl'><span style='color: #000; font-weight: bold;'>" . $row['username'] . "</span> <span style='color: #09F'>@" . $row['vakgebied'] . "</span><span style='float:right; color:#ccc'>" . $row['datum'] . "</span><br />" . $row['shouts'] . "</div>";
echo "<br /><br /><div class='profile_shout_options'><span class='reshout'><img src='images/reshout.png' width='12' height='12' /><a href='#?id=".$row['id']."'>ddd</a></span></div>";
echo "</div>" ;
?>
de div die moet getoont worden is <div class='profile_shoutbox595'>
$(document).ready(function() {
$('.profile_shoutbox595').dialog({
autoOpen: false,
width: 510,
hide: 'fold',
show: 'blind',
modal: true
});
$('.reshout').click(function() {
$('.profile_shoutbox595').dialog('open');
});
});
hoe implementeer ik u code hierin?
Verder is mij niet bekend dat jquery zelf een dialog-functie heeft. Als je gebruik wil maken van dialog, dan zul je gebruik moeten maken van jquery-ui. Meer over dialog: http://jqueryui.com/dialog/#animated
Het is vrij merkwaardig dat je een dialog wil openen nadat je klikt op een element dat binnenin dat dialog staat. Hoe wil je iets openen door te klikken op iets dat binnenin dat element staat nog voordat het geöpend is? Dit lijkt me een vreemde wens.
Even uitgaande dat je een heel specifieke bedoeling hebt, dan is dit mogelijk door ervoor te zorgen dat de divs met de class 'thediv' in eerste instantie normale elementen zijn. Nadat je klikt op 'klik hier' moet 'thediv' gewijzigd worden naar een dialog.
Als je jquery-ui gebruikt, dan kan zoiets met de volgende code:
Code (php)
1
2
3
4
5
2
3
4
5
$(function() {
$(".openeendialog" ).click(function() {
$(this).closest(".thediv").dialog();
});
});
$(".openeendialog" ).click(function() {
$(this).closest(".thediv").dialog();
});
});
Let wel: ik ga hier even vanuit dat je de id-attributen wijzigt naar class.
In feite zat jouw code er niet ver naast. Wil je echter een parent-element 'zoeken', dan dien je gebruik te maken van 'closest' in plaats van 'find'. find zoekt namelijk elementen binnenin het element dat je als uitgangspunt neemt. closest doet het tegengestelde.
Toevoeging op 16/05/2013 11:47:45:
$('.reshout').click(function() {
$(this).closest('.profile_shoutbox595').dialog(open);
});
});
hoe zet ik daar nu de afmetingen in? dat de dialoog bv 300w en 200h is?