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");
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
});
});
Just a little preface... I am fairly new to jQuery so if something looks wrong or redundant please feel free to offer any helpful suggestions.
Now for the issue. I have 2 modals that are initiated from 2 separate links on the page.
The first modal was fairly problem free. It is a simple form that posts back to the same page. If you are wondering what the items in the "close:" section are, they are form fields that I want to clear the values on when the dialog is closed.
Once I added the second one I have had problems. This modal calls a coldfusion page into a modal to display pictures. The problems occur after opening up the second one. I can not close the second modal from the "close" button. I get the following error.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I have to close it from the "x" in the upper right hand corner of the modal. After I close it, I get an error when trying to open up the first on.
Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
Here is the code for it.
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
The next piece of code is where I believe the problems are occurring.
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
Server Side: Coldfusion
The HTML is pretty extensive. If you need to see any part of it please let me know. Thanks for your help!
Upper case?
Close: function() {
You have to initialize your jquery dialog before calling the open function.
<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>
And change your js file to have the dialog code in initializeDialog() function.
function initializeDialog(){
$("#your-dialog-id").dialog({
autoOpen: false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
resizable: false,
width: 600px,
height: 400px
});
}
Thanks #bpjoshi
I using jquery ui dialog with dynamic height. When it opens it’s centered, but when it loads the content it’s expanding toward the bottom of the page.
Here is my function:
$(this.document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("dialog-id"))
.dialog({
autoOpen: false,
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: $(this).attr("dialog-width"),
heith: 'auto',
resizable: false,
draggable: false,
show: 'scale',
hide: 'puff',
position: ['center', 'middle']
})
.load(this.href).dialog("open");
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
I was able to fix this by setting autoOpen:false and creating the dialog content with my ajax call in the create method. Once that returned, and the content created, I called open on the dialog. Works great!
Above ans not work for me.
$(document).live("ajaxStop", function (e) {
$("#myDiagDiv").dialog("option", "position", "center");
});
As I said in a past post, I'm a JavaScript newbie, and now learned some JQuery.
Briefing:
I need to create a dialog box that triggers when someone clicks on Cancel, and has (as text or value)"Are you sure you want to exit?", with two buttons: "Yes, I want to leave" and "No, I want to stay on this page". The redirect part from the "I want to leave" button will figure it out later.
Problem: I want to make the buttons to be autoSizable with the width option (in other words, width:auto and height: (number)px, but I can't figure it out :/
This is my code ->
$(document).ready (function(){
var $dialog = $('<div></div>');
$(".selector").dialog({ modal:true });
var $popUp = $('#btnCancel').one('click', function () {
$dialog
.html('All changes will not be saved')
.dialog({
title: 'Are you sure you want to exit?',
resizable: false,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, I want to leave": function() {
$( this ).dialog( "close" );
},
"No, I want to stay on this page": function() {
$( this ).dialog( "close" );
}
}
});
});
$popUp.click(function () {
$dialog.dialog('open');
return false;
});
});
I tried changing the buttons part for this piece of code ->
buttons: [
{ text: "Exit", 'class':'exit-button', resizable: true, click: function () { $(this).dialog("close"); } },
{ text: "Go back", 'class': 'go-back-button', resizable: true, click: function () { $(this).dialog("close"); } }
]
But in this last case, it creates two buttons with the value of "0" and "1", and have no onclick event.
What should I do?
If you give the buttons an id when you create them you can style them with CSS, including giving them a height and width.
Example - http://jsfiddle.net/tj_vantoll/ckhG6/2/
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.