Here is the code I've been working on:
var callback = function () {
$('.progress-bar').width($('.progress-bar').parent().width() - 190);
$(".mainpart-background").animate({ width: "80%" }, 800 , function(){
var sidepartposition = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5 ;
$(".sidepart").animate({ "margin-right": - sidepartposition }, 100);
});
};
$(document).ready(callback);
$(window).resize(callback);
var sidepartpositionResize = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5 ;
$(window).resize(function(){
$(".sidepart").css( "margin-right", "sidepartpositionResize" );
});
There seems to be a problem with the code:
The span displaying "20%" vanishes when the window is resized. Investigating it using Firebug reveals that jQuery continues to calculate the 80%, showing values like 80.00213, 79.1241, 79.12523, etc. It takes 1-4 seconds for this process to stop and for the span to finally show the correct value of 20%.
It's important to note that this code is meant to work on responsive websites.
As a newcomer to JavaScript, any help or guidance would be greatly appreciated!