specifieke div in dialog tonen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Anthony de meulemeester

anthony de meulemeester

16/05/2013 11:03:43
Quote Anchor link
best mensen,

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
 
PHP hulp

PHP hulp

28/03/2024 13:00:46
 
Erwin H

Erwin H

16/05/2013 11:15:54
Quote Anchor link
De functie find() zoekt naar child elementen. Wat jij wil is een parent vinden. Dat kan met de functie parent(), die je twee keer moet aanroepen in jouw geval omdat je twee niveau's omhoog moet. Een alternatief is dan om closest() te gebruiken, omdat je daarmee meerdere niveau's omhoog kan, net zolang totdat het eerste element is gevonden dat voldoet aan de opgegeven selector.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(this).parent().parent().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
 
Anthony de meulemeester

anthony de meulemeester

16/05/2013 11:28:39
Quote Anchor link
wel kijk ik ben heel slecht met jquery en dit is wat er precies gebeurt

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>" ;    

?>


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?
 
Kevin Driessen

Kevin Driessen

16/05/2013 11:39:20
Quote Anchor link
Even een eerste aanmerking: id staat voor 'identifier' en is dus bedoelt om mee te identificeren. Dit hoort dus uniek te zijn. Voor de buitenste div gebruik je correct een class. Voor de inliggende elementen hoor je in dit geval hetzelfde te gebruiken.

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$(function() {  
    $(".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.
 
Anthony de meulemeester

anthony de meulemeester

16/05/2013 11:44:34
Quote Anchor link
ja het werk nu, ik gebruik indd jquery ui

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?
 
Kevin Driessen

Kevin Driessen

16/05/2013 12:03:39
Quote Anchor link
Zie de API bij dialog: http://api.jqueryui.com/dialog/
 
Anthony de meulemeester

anthony de meulemeester

16/05/2013 14:34:22
Quote Anchor link
opgelost
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.