I have a form that has a few checkboxes and when the boxes are checked, a corresponding tab with a section underneath is unhidden. Unfortunately, when I check the 2nd or 3rd box, the correct tab appears, but the section that belongs to the first tab us unhidden with it. I have an example in JSFiddle: http://jsfiddle.net/j08691/HyMBD/2/. If you check the box that says Extranet Access, the section for Use Agreement (US 531) appears. Here is the code I am using to unhide my tabs and sections:
//hide/show UA Section
$("#use-agreement-required").click(function() {
if ($("#use-agreement-required").is(":checked"))
{
$(".UASection").show("fast");
} else {
//otherwise hide it
$(".UASection").hide("fast");
}
});
//hide/show Extranet Section
$("#extranet-access").click(function() {
if ($("#extranet-access").is(":checked"))
{
//show hidden class
$(".extranetSection").show("fast");
} else {
//otherwise hide it
$(".extranetSection").hide("fast");
}
});
//hide/show Move It Section
$("#move-it-access").click(function() {
if ($("#move-it-access").is(":checked"))
{
//show hidden class
$(".moveItSection").show("fast");
} else {
//otherwise hide it
$(".moveItSection").hide("fast");
}
});
//Refresh tabs
$("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
$("#contractTypes").tabs("refresh");
});
Are you sure that tabs are what you want to do there? From a UI perspective, I think you're heading down a messy path.
That being said, showing the tab isn't enough, you need to tell the tabs control that you are activating a new tab:
$( "#contractTypes" ).tabs({ active: 1 });
Bear in mind, the index is 0 based.
This messes up your code ..deleted, all fine
//Refresh tabs
$("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
$("#contractTypes").tabs("refresh");
});
http://jsfiddle.net/HyMBD/5/
Related
I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV
UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});
I'm trying to create an accordion able to expand multiple panels at once. I have tried to find it in the jQuery UI API, but I haven't yet found the proper way.
Please let me know if there is a way of doing this using jQuery UI accordion.
As others have noted, the Accordion widget does not have an API option to do this directly. However, if you must use the widget, it is possible to achieve this by using the beforeActivate event handler option to subvert and emulate the default behavior of the widget.
For example:
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
See a jsFiddle demo
You could write multiple accordions that are stacked and each accordion have only one panel. This way the panels could be individually toggled.
An accordion is, by definition, a set of expanding elements that toggle in a certain way. You don't want that. You just want a set of expanding elements. It's extremely easy to build that with jQuery. It often needs nothing more than this:
$('.my-heading-class').on('click', function() {
$(this).next('.my-content-class').slideToggle();
});
<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>
I am trying to create a slideUp, slideDown effect with a div. Basically the div contains the contents of a cart. When the user is looking at items the cart should be tucked away but when they tap on an img it should pop up and toggle. It looks like this ...
I have got all sorts of crazy effects and most just about always completely hide the cart when it is toggled. It should just return to the position shown in the image above.
My code at the moment.
$( ".cart" ).on( "click", function() {
if ($('.tabBox').height() > 91)
{
$('.tabBox').height('90px').slideUp();
console.log('slide up');
}
else
{
$('.tabBox').height('150px').slideDown();
console.log('slide Down');
}
});
Codepen here (no images) If you click on an item the cart will popup. You will notice also the cart does not slide up but pops up. I would like it to slide up and slide down gracefully But return to it's original position (not off the screen).
you should use the animate function instead. Also, I'm not quite sure if I got this correct, but it looks like the cart has 3 possible states:
hidden: nicely tucked away, untill somebody clicks an image
minimized: just visible, but only the cart, clicking the cart => maximize
maximized: completely visible, cart + order(?), clicking the
cart => minimize
I'd simply remove the first state, which makes the solution a bit easier, but as you can see, adjusting to accomodate for this 3rd state will not be that hard:
cartMaximized = false;
$( ".cart" ).on( "click", function() {
$('.tabBox').stop( true );
if( cartMaximized ) {
$('.tabBox').animate({ height: '90px' });
}
else
{
// You can play around with outerHeight() and so on, but that's out of scope
// $('.tabBox').animate({ height: $('.content').outerHeight()+45+'px' });
$('.tabBox').animate({ height: '150px' });
}
cartMaximized = !cartMaximized;
});
--- tested and working
But this might be "brittle" due to resizing and so on, but I bet you can figure something out :-)
I'm using this jQuery UI Multiselect Widget script: http://runnable.com/UgMdJqspu4chAAAP/how-to-create-jquery-ui-multiselect-widget in asp.net.I have one child page with master page.While i am applying this control by default its applying to all dropdownlist.I want to apply for a single Dropdownlist. Can anybody help me out?
<script type="text/javascript">
$(function () {
/*
define global variable,
and store message container element.
*/
var warning = $(".message");
$('select').multiselect(
{
/*
The name of the effect to use when the menu opens.
To control the speed as well, pass in an array
*/
show: ["slide", 1000],
/*
The name of the effect to use when the menu closes.
To control the speed as well, pass in an array
*/
hide: ["slide", 1000],
/*
Either a boolean value denoting whether or not to display the header,
or a string value.
If you pass a string,
the default "check all", "uncheck all", and "close"
links will be replaced with the specified text.
*/
header: "Choose only TEN items!",
/*
Fires when a checkbox is checked or unchecked,
we are using this option to restrict,
user to select no more than 3 option
*/
click: function (e) {
if ($(this).multiselect("widget").find("input:checked").length > 10) {
warning.addClass("error").removeClass("success").html("You can only check three checkboxes!");
return false;
}
else {
warning.addClass("success").removeClass("error").html("Check a few boxes.");
}
}
/*
.multiselectfilter()
Initialize filtering on any of your multiselects
by calling multiselectfilter() on the widget.
*/
}).multiselectfilter();
});
</script>
In $('select').multiselect() while i am passing my dropdown-list Id then this control is not working.Only its working while giving 'select'and simultaneously its applying to all dropdown-list. but i want to apply in one dropdown-list.Can anyone suggest me?
With ID it should work
$(document).ready(function(){
$("#example").multiselect();
});
Reference link below is using the same plugin, Can you check your browser console for any javascript errors ?
http://www.erichynds.com/blog/jquery-ui-multiselect-widget
I'm using the jQuery-ui accordion widget, which among other things displays an image depending on which panel is activated. The widget is collapsible, and I want to remove the image when all panels are collapsed.
So far my code finds the index of the active panel when it is changed, and calls a function to display the corresponding image. I think the problem is that my declaration of index will return 0 when the widget is collapsed, but also when the first panel is active due to the way the options-active method is set up. Is there a way to distinguish between those two states?
$( "#sidebar" ).accordion({ heightStyle: "content",
active: false,
collapsible: true,
activate: function( event, ui ) {
var index = $(this).accordion("option", "active");
if (index != false) {
requestImage(index);
} else {
removeImage();
}
}
});
If I need to create a condition that tests each panel individually like below, how would I test the state of a specific panel?
if ( panel 1 active || panel 2 active || panel 3 active ) {
show image
} else {
remove image
}
Any help is appreciated.