Skip to content

auto adjust horizontal menu bar

November 1, 2013

Note: the adjustments happen after the window loads
  1. window.onload = function(){
  2.     getArrayHorizontalBarLength();
  3. };
Note: strings with ‘#’ is an id name of an element. the code uses jquery functions
  1. function getArrayHorizontalBarLength() {
  2.         var widthHorizontalBar = 820;
  3.         var ctr = 0;
  4.         var widthMenus = 0;
  5.         // get the width of the div containing the horizontal menu links
  6.         // and add everything.
  7.         while (ctr < $(‘#navigation_horizontalbar div’).length) {
  8.             widthMenus += $(‘#navigation_horizontalbar div’)[ctr].clientWidth;
  9.             ctr++;
  10.         }
  11.         var totalWidthSoFar = widthMenus + (ctr + 2) * 2;
  12.         var excessPX = widthHorizontalBar – totalWidthSoFar;
  13.         // we start to do the margin from left and right of the menu links
  14.         // in the horizontal bar to have no excess space.
  15.         if (excessPX > 0) {
  16.             var paddingMenu = excessPX / ($(‘#navigation_horizontalbar div’).length) * 2);
  17.             ctr = 0;
  18.             while (ctr < $(‘#navigation_horizontalbar div’).length) {
  19.                 document.getElementById($(‘#navigation_horizontalbar div’)[ctr]).style.paddingRight = paddingMenu;
  20.                 document.getElementById($(‘#navigation_horizontalbar div’)[ctr]).style.paddingLeft = paddingMenu;
  21.                 ctr++;
  22.             }
  23.         }
  24. }

Simple, Free Image and File Hosting at MediaFire

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.


Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.


A simple guide to programming...


Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans


Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

is under renovation in preparation for our 6th Season


News About Tech, Money and Innovation


The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: