I have a page where I use accordion widget. I need to be able to open a page and have an accordion expanded on a particular section. jQuery UI is providing an option for it: active, which is what I use. however when I open a page the accordion is collapsed. What am I missing?
My code looks like this when I view page source:
$("#accordion").accordion({
header: "h3",
active: 3,
collapsible: true,
autoHeight: true
});
I'm not sure, but I'll take a shot.
You have to wrap the code in a $(function() { }); block. Like this:
<script>
$(function() {
$("#accordion").accordion({
header: "h3",
active: 3,
collapsible: true,
autoHeight: true
});
});
</script>
I hope this helps.
it'd be great if you could post a jsFiddle... or just the page itself on the web.
i would say do this:
$(document).ready(function(){
$(function() {
$("#accordion").accordion({
header: "h3",
active: 3,
collapsible: true,
autoHeight: true
});
});
});
this makes your code run only when the document is fully loaded. Your problem might be that jQuery is trying to expand something that doesn't exist yet.
Related
For my design it is crucial that all tabs are closed when the page initially loads. The default is, however, to display the first tab.
These two posts tackled the same question and solved the problem by setting
$( "#tabs" ).tabs({collapsible: true, active: false });
Hide all tabs content jQuery UI tabs onload
Initiate jQuery UI Tabs with no tabs active and all panels hidden
(Since jQuery UI 1.10, there is the parameter active instead selected.) However, somehow this setting conflicts with a slider plugin that is in one of my tabs and also uses the parameter active
Consequently, I can't use active: false or need a way to make the option specific to the tabs only.
I appreciate every help.
http://jsfiddle.net/WRn7q/1/ - with active: false enabled, but without the slider plugin
I changed $(window).load() to $(document).ready() and then added active: false to the tabs and it worked.
Working Example
//Load Orbit
$(document).ready(function (e) {
$('#featured').orbit({
directionalNav: true,
animationSpeed: 800,
advanceSpeed: 4000,
pauseOnHover: true,
bullets: false
});
});
$(function () {
$("#tabs").tabs({
hide: {
effect: "fade",
duration: 500
},
show: {
effect: "fade",
duration: 500
},
collapsible: true,
active: false
});
});
I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...
In my web page, here is the head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />
and the body:
<div id="dialog_test" title="Test">
TEST
</div>
GO
<script>
$(function() {
$( "#dialog_test" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Ajax": function() {
$.ajax({
"url" : "http://jquery.malsup.com/block/wait.php",
"success" : function(json) {
$( "#dialog_test" ).dialog( "close" );
}
});
}
}
});
$( "#go" ).click(function(event) {
event.preventDefault();
$( "#dialog_test" ).dialog( "open" );
});
});
$(document)
.ajaxStart(function() {
$.blockUI({
theme: true
})
})
.ajaxStop($.unblockUI);
</script>
Any idea?
You don't specify what you have tried with z-index.
The blockUI plugin has an option to change the z-index of the message it creates (documentation):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO
Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.
I've found two possible ways around this:
'destroy' the dialog when it is closed and recreate it when
it is opened.
rather than blocking the whole UI, just block the
dialog. This can be done using the widget method, like this:
$( ".selector" ).dialog( "widget" ).block({
theme: false,
message: '<h1>Wait for me please...</h1>',
css: { border: '3px solid #a00' }
});
I have a need to show 2 dialog modals at once. Due to the contents of the first dialog needing to use some absolute positioning and z-indexing, the z-index of the overlay is important to me.
The problem I get is if I show a the first modal at z-index of 300, the overlay gets a z-index of 301. If I then show another modal with a z-index of 500, the new overlay gets a z-index of 501. If I close both of the modals and open the first modal again, instead of getting an overlay with z-index of 301, it is 503.
Here is some sample code.
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modal').hide();
$('#success-message').hide();
$('#show-modal-button').click(function(){
$('#modal').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 400
});
});
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
});
</script>
</head>
<body>
<input type="button" id="show-modal-button" value="show modal"/>
<div id="modal">
<input type="button" id="modal-button" value="push"/>
</div>
<div id="success-message"><p>test</p></div>
</body>
</html>
UPDATE
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
Try setting the "stack" option to false:
'stack: false'
That might work for you
'stack: false' worked for me.
It seems setting it false stops the dialog recalculating its z-index when it is opened, or clicked or whatever.
I tried to set Datepicker, like this:
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['nl']);
$(function () {
$("#tbDateDiagnostic").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
ateFormat: 'dd/mm/yy'
});
$("#tbDateSend").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat : 'dd/mm/yy'
});
});
</script>
But all the time, the datepicker is in French and not in Dutch.
Did I do something wrong?
I'm guessing you forgot to include the localisation file:
<script src="https://jquery-ui.googlecode.com/svn-history/r3982/trunk/ui/i18n/jquery.ui.datepicker-nl.js"></script>
You may find other localisation files here:
https://github.com/jquery/jquery-ui/tree/master/ui/i18n
Here's a demo: http://jsfiddle.net/repw4/418/
keith-wood is a good site with detailed examples.
Try this:
$.localise('js/jquery.datepick', 'nl');
$('#tbDateSend').datepick('option', $.datepick.regional['nl']);
$.datepick.setDefaults($.datepick.regional['']);
i am using ui accordion.
i have multiple instances of the same accordion on one page.
because it is the same accordion duplicated,
the links inside it have the same href value,
so every accordion is opened...
but I need only one OPENED accordion, the one were the click came from.
Is this possible?
Can someone help me with this?
thank u.
$('#nav ul li').accordion({
active: 'a.current',
header: '.head',
navigation: true,
event: 'click',
//fillSpace: true,
animated: 'easeslide',
collapsible: true,
autoHeight: false
});
$("#nav ul li").each(function () {
var li = $(this);
var a = li[0].firstChild;
if (a.href == location.href) {
$(a).addClass("current");
}
});
You need to implement a (this) into your jquery code, can you post your current code so we can see
The only thing i can think of is this:
$('#nav ul li', this).accordion({
active: 'a.current',
header: '.head',
navigation: true,
event: 'click',
//fillSpace: true,
animated: 'easeslide',
collapsible: true,
autoHeight: false
});
Maybe try something like this:
$(".ac-menu").accordion({
"header": "a.menuitem"
})
.bind("accordionchangestart", function(e, data)
{
data.newHeader.next().andSelf().addClass("current");
data.oldHeader.next().andSelf().removeClass("current");
})
.find("a.menuitem:first").addClass("current")
.next().addClass("current");