Resize and Refresh tabs (jQuery UI)

[Andy_Blueman]

Hey.

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?

https://www.ablueman.co.uk

Obviously any help is greatly appreciated.

Thanks

Andy

[Andy_Blueman]

Never mind fixed it, apparently I’m a noob

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

[Mittineague]

@Andy_Blueman

apparently I’m a noob

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

[Andy_Blueman]

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

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" );
});