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
});
});
Related
I'm using the following to control my accordion:
$(function() {
$( "#accordion" ).accordion({
autoHeight: false, collapsible: true, active: false
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
It works well unless I open the same section twice. Then, the accordion freezes and I get the following error:
ui.newHeader.offset() is undefined
The accordionchange event appears to be the jQuery event that corresponds to the accordion's activate event; yes, this is a bit confusing but that's what the source tells me:
// change events
(function( $, prototype ) {
//...
} else if ( type === "activate" ) {
ret = _trigger.call( this, "change", event, {
The activate documentation has this to say:
activate( event, ui )
Triggered after a panel has been activated (after animation completes). [...] If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
So your ui.newHeader is an empty jQuery object and empty jQuery objects don't have offset()s. A quick length check on ui.newHeader will probably sort you out:
$('#accordion').bind('accordionchange', function(event, ui) {
if(ui.newHeader.length)
$(window).scrollTop(ui.newHeader.offset().top);
});
Demo: http://jsfiddle.net/ambiguous/e3gUW/
I have a partial view named xyz and I have a lot of buttons on it which implements different functionality.
$('#dialog').dialog({
autoOpen: false,
width: 700,
resizable: false,
modal: true,
open: function (event, ui) { $(this).load('<%=Url.Action("PushButton","Body",new {Parm="text",Parm1="Value"}) %>'); },
position: 'top'
});
I'm opening this partial view XYZ in a jQuery modal dialog box. I have some buttons in the partialview XYZ. I'm not getting how to fire the event explicitly. Like if I want to close the dialog box by click of the button created in Partialview.
You will need to wire the button events once the load is complete. You can add a callback to the load to notify you: http://api.jquery.com/load/
I had the same problem. I want my partial view to be independent and submit using Ajax. It's similar to creating a user control.
I am now planning to use a publisher/subscriber mechanism to listen to an event from my partial view. The parent can listen to this event and close the dialog box.
I came across Ben Alman's Pub/Sub gist.
Another good article for the observer pattern in JavaScript is Learning JavaScript Design Patterns, The Observer Pattern.
Here is the code for the callback on the load event:
$('#dialog').dialog({
autoOpen: false,
width: 700,
resizable: false,
modal: true,
open: function (event, ui) { $(this).load('<%=Url.Action("PushButton","Body",new {Parm="text",Parm1="Value"}) %>', function(){
$("#buttonId").click(function(){
//Stuff you want to do with the button here
});
}); },
position: 'top'
});
You can do this inside document.ready as well:
$(document).on('click', '#idOfControlInsideDialog', function() {
//Stuff you want to do here
});
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.
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");
How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?
Could create a DisableDrag(myObject) and a EnableDrag(myObject) function
myObject.draggable( 'disable' )
Then
myObject.draggable( 'enable' )
To temporarily disable the draggable behavior use:
$('#item-id').draggable( "disable" )
To remove the draggable behavior permanently use:
$('#item-id').draggable( "destroy" )
To enable/disable draggable in jQuery I used:
$("#draggable").draggable({ disabled: true });
$("#draggable").draggable({ disabled: false });
#Calciphus answer didn't work for me with the opacity problem, so I used:
div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}
Worked on mobile devices either.
Here is the code: http://jsfiddle.net/nn5aL/1/
enabledisabledraggablejqueryopacityproblemhtml
It took me a little while to figure out how to disable draggable on drop—use ui.draggable to reference the object being dragged from inside the drop function:
$("#drop-target").droppable({
drop: function(event, ui) {
ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
…
}
});
HTH someone
Seems like no one looked at the original documentation. May be there was no it at that time))
Initialize a draggable with the disabled option specified.
$( ".selector" ).draggable({ disabled: true });
Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );
In the case of a dialog, it has a property called draggable, set it to false.
$("#yourDialog").dialog({
draggable: false
});
Eventhough the question is old, i tried the proposed solution and it did not work for the dialog. Hope this may help others like me.
The following is what this would look like inside of .draggable({});
$("#yourDraggable").draggable({
revert: "invalid" ,
start: function(){
$(this).css("opacity",0.3);
},
stop: function(){
$(this).draggable( 'disable' )
},
opacity: 0.7,
helper: function () {
$copy = $(this).clone();
$copy.css({
"list-style":"none",
"width":$(this).outerWidth()
});
return $copy;
},
appendTo: 'body',
scroll: false
});
I have a simpler and elegant solution that doesn't mess up with classes, styles, opacities and stuff.
For the draggable element - you add 'start' event which will execute every time you try to move the element somewhere. You will have a condition which move is not legal. For the moves that are illegal - prevent them with 'e.preventDefault();' like in the code below.
$(".disc").draggable({
revert: "invalid",
cursor: "move",
start: function(e, ui){
console.log("element is moving");
if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
console.log("illegal move");
//This will prevent moving the element from it's position
e.preventDefault();
}
}
});
You are welcome :)
Change draggable attribute from
<span draggable="true">Label</span>
to
<span draggable="false">Label</span>