hoe link die jquery dialog box opent op class active te zetten?

[peps03]

Hoi.

Ik gebruikt 5 jquery dialog boxen op 1 pagina. die worden geopent door 5 links(images) met een hover effect. hoe kan ik die link (image) op class= "active" zetten voor zolang de dialogbox is geopend?

alvast bedankt!

 

[Tha Devil]

Ben je bekend met de jQuery API-documentatie?
[js]
$( ".selector" ).dialog({
open: function(event, ui) { ... }
});
[/js]
http://jqueryui.com/demos/dialog/#event-open

Zo kun je dus in die functie aangeven dat hij een "addClass('active')" op een selector moet doen

De close-functie is uiteraard het omgekeerde proces

 

[peps03]

Thanks voor de reactie devil,

als ik het goed begrijp zou de opener er dan zo uit moeten zien:

// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					$('#dialog').dialog({ dialogClass: 'active' });
					return false;
				});

toch? maar hij werkt niet.

 

[Tha Devil]

Hangt redelijk van de code af.
Ik neem aan dat ze niet allemaal #dialog heten, aangezien ID's uniek op een pagina horen te zijn.

Voor zover ik de documentatie nu begrijp stelt "dialogClass" meteen een class in voor de dialog ongeacht de status (open/gesloten)

Ik vermoed dat dit beter werkt:
[js]
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
$(this).addClass('active');
return false;
});
[/js]
Voor het terugdraaien zul je even de volledige HTML-code moeten plaatsen zodat inzichtelijk is hoe de structuur is

 

[peps03]

nee, ze heten idd #dialog t/m #dialog4. maar het werkt nog steeds niet ;(

ik heb ook 5x een class active, nl active t/m active4

dit is de gehele code om de dialog op te roepen:


[JS]<script type="text/javascript">
$(function(){


// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
height: 500,
modal: true,
show: 'clip',
hide: 'explode',
buttons: {
"Contact >>": function() {
$(this).dialog("close")
$('#dialog1').dialog('open');
},
"Close": function() {
$(this).dialog("close")
}
}
});

// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});

//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);

});
</script>[/JS]

die wordt opgeroepen door:

<li><a href="#" onClick="menuBand();" class="menu-band"></a></li>

en

[JS]<script type="text/javascript">
function menuBand() {
$('.anythingSlider').anythingSlider(1);
$('#dialog').dialog('open');
}
</script>[/JS]

 

[Tha Devil]

Hmm doen al die active-classes wat anders dan?
Zo niet is het beter om het bij 1 te houden.

Zou je de HTML-code van je pagina kunnen plaatsen, ik denk dat er namelijk wel wat te optimaliseren valt
Of heb je het online staat zodat het daar te bekijken valt?

 

[peps03]

//..

 

[peps03]

dit is alleen de head trouwens..

 

[Tha Devil]

Wat is?