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 );
Related
I'm using Galleria (http://galleria.io/) and generating images to the gallery dynamically, once in a while there's a situation where a gallery includes just one image, at that point I'd like the gallery to appear without the thumbnail container, how could I do this?
Any help greatly appreciated!
My current script for initializing is:
Galleria.loadTheme('assets/js/galleria.classic.min.js');
// Initialize Galleria
Galleria.run('#galleria', {
show: selectedIndex,
showInfo: false,
swipe: true,
imageCrop: false,
responsive:true,
showCounter:true,
thumbnails:true,
lightbox: true,
trueFullscreen:true,
extend: function() {
this.bind(Galleria.IMAGE, function() {
$('#description').html(this.$('info-title').html());
$('.galleria-lightbox-title').html(this.$('info-title').html());
})
}
});
Try thumbnails: $("#galleria img").size()>1
$('#galleria img:only-child').hide();
You need to select the child element of the parent when it is only singular - one thumbnail - the jQuery selector only-child allows this - then chain the statement to hide() to hide it.
I have the next piece of code trying to setup these properties for my bootstrap modal but when I place it into the $(document).ready the modal shows up when the page loads
$(document).ready(function(){
$('#myModalBug').modal({
backdrop: 'static',
keyboard: false
});
});
How can I make to set these properties without the dialog show up on load page?
You need to set show to false. It defaults to true see the options here
$(document).ready(function(){
$('#myModalBug').modal({
backdrop: 'static',
keyboard: false,
show: false
});
});
$(document).ready(function(){
$('#myModalBug').modal({
backdrop: 'static',
keyboard: false,
show:false
});
});
You can also use data attributes like data-backdrop="static".
This way you don't need to write any of your script for modal unless you need explicitly for callbacks.
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
});
});
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
I am using colorbox for quite a while and its working perfectly in all kind of websites.
I have encountered a website that is really really long, and when i open the colorbox, it will open in the middle of it and not in the middle of my page view.
What can affect this???
thank you!!!!
It is most likely conflicting css on the site - not the length of the page.
Problem solved. This site didn't have any DOCTYPE.
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});