I am using a jQuery accordion and with some help I managed to figure out most of my issues but now I have one that I could not figure out.
My accordion looks like this
$("#accordion").accordion({
active: true,
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
and I have 2 icons defined for opened and closed sections.
I also have in my accordion some disabled sections that are closed and cannot be expanded. As far as I can see it's either all icons for all sections or none at all.
Is there any way of removing the icon for just the disabled sections ?
Related
I am using a jQuery Accordion but I have a small problem: Based on some conditions, my accordion could have the first enabled H3 to be the second or third one. The first ones I am disabling by adding this class to them
"ui-state-disabled".
My accordion looks like this:
$("#accordion").accordion({
active: true,
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
Is there a way so that the accordion will only expand the first enabled section? Right now, if I put active: 0 and the first element is disabled, it will expand it nonetheless.
Any suggestions ?
This may not be the most elegant of solutions, but it'll work. You need to find the index of the first H3 inside the #accordion element that does not have the class .ui-state-disabled... so here's that.
You may also realize this already, but you'll want to remove the ability to click to open disabled sections, so I threw that in.
$("#accordion").accordion({
active: $('h3:not(.ui-state-disabled):first').index('#accordion h3'),
animate: false,
collapsible: true,
heightStyle: "content",
icons: icons
});
$(".ui-state-disabled").unbind("click");
Demo on Codepen
edited to add back in your icons: icons
Im following the sidr documentation because Im trying to do a slider responsive menu.
Im importing the light css that the creator of this provided:
<link rel="stylesheet" href="jquery.sidr.light.css" type="text/css" />
And then I have my html, and the script to initialize the plugin.
And its working fine on destktop when I click in the link to open the menu the menu opens with my menu and submenu items, and with a scroll vertical bar because I have a menu with many items.
But on mobile, the scroll its not working, I have a horizontal bar and not vertical and when I scroll my menu dont goes down, I only move my other html content.
Somebody thery already tried to use this script and now how I can solve this situation?
This is my jQuery to start the script:
$(document).ready(function() {
$('#simple-menu').sidr({
name: 'sidr',
speed: 200,
side: 'left',
source: null,
renaming: true,
body: 'body'
});
});
Please help because I'm stuck from hours. I have multiple count of text areas in one page. Each text area has different content inside which makes it with different height. When I init TinyMCE like this:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
width: "870",
readonly: true,
theme_advanced_path: false,
theme_advanced_resizing: true,
theme_advanced_resize_horizontal: false,
auto_resize: true
});
All text areas are with same height and those of them which have more content has scroll inside. Any ideas how to rid of the scrolls and make the text area height as much as the content inside ?
Have a look at the function resizeIframe in this SO thread. You will need to issue this code after the readonly editors have been initialized.
I have a simple Jquery UI accordion with 3 sections. All 3 sections are collapsed in the beginning. When I click on a section header, the section content should show (slide) up. The special thing is now that the section content divs are positioned absolutely over each other.
To make it look good I want that the current opened section toggles completely before the animation of showing the next section begins.
This is what I have made to toggle the section it right now:
$(function () {
$("#accordion").accordion({
create: function (event, ui) {
ui.oldPanel.slideToggle("slow");
},
collapsible: true,
active:false
});
});
You can see how it looks like on:
http://jsfiddle.net/kqMAR/
It appears that the toggle and show up animation start at the same time. But what I want is to toggle it completely before starting the next slide up.
New Answer :
Try this
http://jsfiddle.net/6QJJp/1/
This is what you exactly need
you will need to fix CSS according to you requirement.
$(function () {
$("#accordion").accordion({
animate:{duration:5000},
collapsible: true,
active:false
});
});
Use above function to understand what is happening actually, new section starts opening as soon as the old section starts closing that's why its giving an illusion of incomplete animation. for complete animation place the buttons one below another then you will be able to see proper animation. If you require horizontal arrangement then you can possibly use fading effect that also looks cool.
How I can hide View text and page navigation in a jQuery grid navigator?
Thanks a lot!
You can use the viewrecords option to hide the view text:
viewrecords: false
You can set the following pager options to false to disable page navigation:
pgbuttons: false,
pginput: false,