jQuery Accordion Closed at Load - javascript

How can I get the accordion widget to be closed when the page loads? This is the code I'm using:
//Accordion
$( ".accordion" ).accordion({
autoHeight: false,
navigation: true,
collapsible: true,
active: false
});
Also, it may be unimportant but the accordion divs are inside dialog divs.

The active option being set to false should (according to the docs) cause the menu to be collapsed on page-load (though it specifically requires collapsible: true (which you already have).
If this isn't already in a $(window).load() or $(document).ready() then it needs to be wrapped in one of those; if it is so wrapped then without a demo (perhaps JS Fiddle, or JS Bin?) it's difficult to suggest what might be happening, or going wrong.
Is the remainder of the JavaScript (beyond the call to .accordion() being executed? If not there might be a JS error, somewhere. It might be worth running it through JS Lint to be sure.

The index value can be boolean or integer
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=AccordionIndexHidden.ClientID %>').val());
if (activeIndex < 0)
activeIndex = false;
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=AccordionIndexHidden.ClientID %>').val(index);
}
});
});
</script>
Remember to start with index less than 0
<asp:HiddenField ID="AccordionIndexHidden" runat="server" Value="-1" />
FYI, the hidden field is to keep save the accordions open between postbacks

Related

Datatables not correctly working through JQuery-UI Tabs

I seem to have a problem with the way jQuery-UI tabs and Datatables work together. I want to create a table that is scrollable and has information from a database.
When I enter the page for the first time it looks like this.
As you can see it looks like a normal table instead of one from Datatables.
When I reload the page again it looks like this.
This is roughly how I want it to look upon first load.
It also seems that it only works for the first table on the page.
I tested this multiple times on multiple pages with the same results.
I'm assuming this problem is because of jQuery-UI seeing as on another page it work perfectly and when I load in the page without jQuery-UI it works aswell.
This is the code:
//jQuery-UI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//DataTables
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
});
</script>
The HTML is just a standard table loaded in through a while loop from a database.
To decrease loading times I've set up jQuery-UI in a way that it loads seperate files when a tab is clicked so that no unnecessary things are loaded at the start.
Any piece of help would be much appreciated thanks!
EDIT: Wanted to make a JSFiddle showcasing my problems but it basically works perfect there so I'm guessing the problem comes from the fact that I load it as seperate pages.
JSFiddle
I would advise the following code, expanding upon my comment.
$(function() {
$("#loading-voertuigen").show();
if ($(window).width() <= 1600) {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
} else {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollCollapse": true,
"paging": false
});
}
$(window).resize(function() {
location.reload();
});
});
You were using $(document).ready() and it is not needed. The use of $(function(){}) already causes the jQuery to execute after the page is ready.
If need further help, please edit your post and include a more complete example.

JscrollPane not loading into div properly

I'm having an issue with jscrollpane loading into a div using the following function:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
The above code is on the index page and I'm calling up the "shopping page" as you can see above.
I have four other links that call up pages, one page has a slideshow and I managed to load that one into the div simply by eliminating the Jquery repository link, but this page doesn't want to know.
On the "shopping" page I have the following script, I've searched most of the web and also on here, without success, but nobody else's solutions have worked for me.
What am I doing wrong?:
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />
<script>
$(function()
{
$('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
});
Ok...
After some digging and trial and error, I've found the solution to my problem, hunting on the web and stack, I found something that worked and I thought for all those that are complete noobs, like me, in javascript and Jquery I'd post my findings.
Current call up on index page:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
I added the following to my index page (this is the page that is calling up the other pages)
to the link of a specific page add:
$.ajaxSetup({async:false});
then add the jScrollPane function after your call up e.g:
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
So altogether it looks like this:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
//--added the async code here--//
$.ajaxSetup({async:false});
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
//--moved the jscrollPane from the page I was calling to the index page code here--//
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
This seems to be working for me at the moment, now I just need to re-edit some css and it's good to go.
I've found another workaround:
I've added the following code to the index.html:
$(function()
{
var api = $('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
).data('jsp');
$('#shopping').bind(
'click',
function()
{
api.getContentPane().load(
'pages/shopping.html',
function()
{
api.reinitialise();
}
);
return false;
}
);
});
I also made the jsp load in a separate div layer, as it was causing some styling conflicts and i can't determine where the issue is but this works.
What I also had to do is hide the new div layer from the other calls
so basically:
$(#scroller).hide();
Thanks, I'm sure this isn't the best way, but as i've only had one reply on this issue, which was a question, think I've done rather well for a noob.

SlideTabs for Wordpress autoheight

IF anyone is familiar with slidetbas for wordpress can you please help me out.
It there a way to autoheight the content viewer based on the active tab?
I tried to add something like this:
jQuery(document).ready(function () {
jQuery("#slidetabs_983").setContentHeight();
});
to the javascript for my particular slidetab (ID 983) but that didn't work.
http://www.slidetabs.com/ is their website and you can see a demo on there.
thanks
use autoHeight: true to slider tab setting
jQuery(document).ready(function () {
jQuery("#slidetabs_983").slidetabs({
// Define any options below
autoHeight: true
});
});

jquery accordion collapsed by default on page load

I am using JQuery UI accordion in my page. I have following Javascript code on my page load:
$(function() {
$("#accordion").accordion({
active: false,
autoHeight: false,
navigation: true,
collapsible: true
});
});
When the page loads all tabs are open for few seconds and then collapse. May be its loading effect. How can I make Jquery UI accordion collapsed on page load. Please suggest
Although not a direct answer, maybe you can render it hidden and then show it when its created:
$("#accordion").accordion({
active: false,
autoHeight: false,
navigation: true,
collapsible: true,
create: function(event, ui) { $("#accordion").show(); }
});
Update: This fiddle works for me: http://jsfiddle.net/47aSC/6/
For me this works:
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: true,
active: false
});
});
It's probably loading something near the end of the page slowly. If you can't fix that, you could try declaring the element having display:none applied to it in css, then:
$("#accordion").show().accordion({
active: false,
autoHeight: false,
navigation: true,
collapsible: true
});
There could be a cleaner way of doing that (as #Mrchief suggests), but I don't think .accordion() formats hidden elements nicely. You'll have to test.
The best solution is:
open jquery.ui.accordion.js and edit lines 29 and 31 (by the way I'm using 1.10.4).
Edit line 29 to Active: 100,
Edit line 31 to collapsible: true,
This way you don't need to write any script or function in the header of the page. By setting Active to a high number (for example 100) you are saying that 100th h3 tag is active (which basically doesn't exist).
The collapsible: true says that all open h3 tags are collapsible.
It solves the problem completely.
$(document).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
This will set all .collapse classes in DOM to close, but only once the DOM has finished loading.
// We can also use the below code to collapse accordian on the page load and it should use when we are using bootstrap 2.0
$(document).ready(function () {
if ($("#accordianId").length>0) {
$("#accordianId").trigger("click");
}
});
Other wise we should use below code for bootstrap 3.0
$( "#accordianId" ).accordion( "option", "active", 0 );

jQuery Accordion - open specific section on pageload

I have a rather basic implementation of a jQuery Accordion on a page (using 1.3.2, jQuery UI Core 1.72 and jQuery UI Accordion 1.7.2), and I wish to open the 2nd section when the page loads. i've tried numerous methods but nothing seems to work...
HEAD SCRIPT:
<script type="text/javascript"> $(function() {
$("#accordion").accordion({
event: "mouseover"
});
});
BODY ACCORDION:
<div id="accordion">
<h3>Headline 001</h3>
<div>
<ul>
<li>Link 001</li>
<li>Link 002</li>
</ul>
</div>
<h3>Headline 002</h3>
<div>
<ul>
<li>Link 003</li>
<li>Link 004</li>
</ul>
</div>
Any help would be greatly appreciated!
$("#accordion").accordion({ active: 2, event: "mouseover" });
Should do the trick!
UPDATE
if that doesn't work, try
$("#accordion").accordion({ event: "mouseover" }).activate(2);
(N.B. this is updated to be a bit faster, thanks for the comments. To be honest, it should work with the 'active: 2' parameter, don't know why it didn't.)
proper way to open a specific tab:
$("#accordion").accordion({
collapsible : true,
active : false,
heightStyle : "content",
navigation : true
});
Set the option:
//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);
or you could work with a hash like this:
if(location.hash){
var tabIndex = parseInt(window.location.hash.substring(1));
$("#accordion").accordion('option', 'active' , tabIndex);
}
Vote if you use ;)
Thanks
Does the following work?
$(function() {
$("#accordion").accordion({
event: "mouseover",
collapsible: true,
active: 2
});
});
Try
$("#accordion").activate(index);
I have resolved this question a little different since I had to create a menu.php which we include I have included every single page. In our project there was 1 accordion (a menu element with 2 submenus). So when the visitor is on the submenus, the accordion is open and the selected link (which are highlighted using CSS, not jQuery) active. But when the visitor is on a different page, the accordion works normally.
Here's the javascript:
var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global
accordion.accordion({ //accordion setup on every page
animated : !containsParams,
active : containsParams,
collapsible : true,
event : "click",
header : "h2"
});
//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
if (containsParams) accordion.accordion("activate", 0);
})();
Hope you like it. =]
Best regards! =]
You should write active: 1 instead of 2, because Accordion indexes sections from 0, not from one. Working code will look like that:
$("#accordion").accordion({ active: 1, event: "mouseover" });
Hope it will help a bit.
As others have mentioned, the following will make it active on opening:
$("#accordion").accordion({ active: 1 });
It is active:1 since it is the 2nd of the accordion's index {0,1,2,...}; There seems to be some confusion in other answers as the element's contents contain the character "2"...

Categories

Resources