specifieke div in dialog tonen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java developer met testervaring

Java developer met testervaring Functieomschrijving "De drempel tussen de burger en de Belastingdienst zo laag mogelijk houden: dat is de belangrijke taak van ons team. Dit doen we door het burgerportaal Mijn Belastingdienst continu te verbeteren." René, Java-specialist bij de Belastingdienst. De keten Interactie is een samenwerkingsverband van alle dienstonderdelen binnen de Belastingdienst. Samen zorgen we dat het contact met burgers en bedrijven goed kan plaatsvinden. Onze belangrijkste opgave? Zoveel mogelijk digitaliseren. Dat doen we binnen het onderdeel Informatievoorzieningen (IV), de ICT-organisatie van de Belastingdienst. Denk bij de producten die IV-Interactie ontwikkelt en onderhoudt aan portalen, formulieren en authenticatie- en

Bekijk vacature »

Full Stack Developer Industriële Automatiseri

Raster wordt continu betrokken bij complexe en baanbrekende projecten in industriële automatisering. Ons team is gespecialiseerd in productie automatisering en proces automatisering projecten waarin procesveiligheid een belangrijk aspect is. Ons compact en groeiend OX (Operational Excellence) team ontwikkelt, configureert en levert support op zelfontwikkelde applicaties waarmee onze klanten hun productieprocessen slimmer, sneller, goedkoper en veiliger maken. Operational Excellence wordt zichtbaar gemaakt in resultaten. Bij bedrijven met dezelfde strategie, zal een operationeel excellent bedrijf een lager operationeel risico, lagere operationele kosten hebben en relatief meer winst maken. Het Raster OX team laat haar klanten de resultaten behalen door hun eigen procesdata

Bekijk vacature »

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

20/10/2021 02:54:06
 
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.