Resize and Refresh tabs (jQuery UI)


I have a page which I’m building mostly for my development of knowledge, but I am coming up with a problem which I cant seem to get to grips with.

My page is all height/width by percent and when it works tabs are heightStyle: fill;

This works fine on load, but when you resize, it resizes leaving the tabs the same size.
I have a button at the bottom of the page “resize tabs” which fixes the problem.

Next logical step I figured would be to have an on resize script that fires the same piece of code.

But this appears to break or not run properly. Please understand I am not asking you to code for me. I will add some jquery to this as soon as I get home, but I am wondering if the fault is my layout or whether its just a bug with heightstyle not being dynamic or needing a refresh in the init?

Obviously any help is greatly appreciated.



Never mind fixed it, apparently I’m a noob :smiley:

function readyresize() {
$( "#tabs" ).tabs( "refresh" );
$( "#accordion" ).accordion( "refresh" );

We’re all noobs, just we all don’t admit it.

Part of its still broken … eh I don’t mind being a noob. I don’t really see why people get so offended :slight_smile:

What I don’t get is why I can load the page and it now correctly loads the tabs, and now re-size which corrects the tabs and the accordion. Or press the button and it corrects the accordion.

But the accordion wont load the right size even when I refresh it in document ready function.

$(function() { 
	$("#tabs").tabs({ heightStyle: 'fill' });
$(function() {
$( "#accordion" ).accordion({ heightStyle: 'fill' });
console.log( "accordion create" );

$( document ).ready(function() {
console.log( "console ready!" );

$(document).ready(function () {
$( "#accordion" ).accordion( "refresh" );
console.log( "refresh accordion" );

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.