Databases
StackOverflow2013
Postsdbo
POHow can I auto size this HTML Menu to fit parent width?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I auto size this HTML Menu to fit parent width?
    text
    copied!<p>I am converting a Drupal 6 theme to Drupal 7, and cant figure this part out. I have the following HTML:</p> <pre><code>&lt;ul id="nav" class=" scaling-active scaling-ready"&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/12" title=""&gt;Design&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/13" title=""&gt;Inspiration&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/14" title=""&gt;Nature&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/15" title=""&gt;Photography&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/16" title=""&gt;Technology&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/20" title=""&gt;Travel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/17" title=""&gt;Tutorials&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/18" title=""&gt;Urban&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/demos/pro/taxonomy/term/19" title=""&gt;Video Games&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>In Drupal 6 this theme was using jquery v1.3.2, but in Drupal 7 jquery 1.4.4 is built in, so the functions don't seem to be working. Here is the jquery function:</p> <pre><code>$(function(){ clearFormFields({ clearInputs: true, clearTextareas: false, passwordFieldText: true, addClassFocus: "focus", filterClass: "form-text" }); initAutoScalingNav({ menuId: "nav", sideClasses: true }); ieHover('#nav li'); $('div.gallery-block').fadeGallery({ slideElements:'ul.gallery &gt; li', pagerLinks:'ul.switcher li' }); $('div.pictures-box').fadeGallery({ slideElements:'ul.fade-gallery &gt; li', pagerLinks:'ul.pictures-list li', title: true }); }); function initAutoScalingNav(o) { if (!o.menuId) o.menuId = "nav"; if (!o.tag) o.tag = "a"; if (!o.spacing) o.spacing = 0; if (!o.constant) o.constant = 0; if (!o.minPaddings) o.minPaddings = 0; if (!o.liHovering) o.liHovering = false; if (!o.sideClasses) o.sideClasses = false; if (!o.equalLinks) o.equalLinks = false; if (!o.flexible) o.flexible = false; var nav = document.getElementById(o.menuId); if(nav) { nav.className += " scaling-active"; var lis = nav.getElementsByTagName("li"); var asFl = []; var lisFl = []; var width = 0; for (var i=0, j=0; i&lt;lis.length; i++) { if(lis[i].parentNode == nav) { var t = lis[i].getElementsByTagName(o.tag).item(0); asFl.push(t); asFl[j++].width = t.offsetWidth; lisFl.push(lis[i]); if(width &lt; t.offsetWidth) width = t.offsetWidth; } if(o.liHovering) { lis[i].onmouseover = function() { this.className += " hover"; } lis[i].onmouseout = function() { this.className = this.className.replace("hover", ""); } } } var menuWidth = nav.clientWidth - asFl.length*o.spacing - o.constant; if(o.equalLinks &amp;&amp; width * asFl.length &lt; menuWidth) { for (var i=0; i&lt;asFl.length; i++) { asFl[i].width = width; } } width = getItemsWidth(asFl); if(width &lt; menuWidth) { var version = navigator.userAgent.toLowerCase(); for (var i=0; getItemsWidth(asFl) &lt; menuWidth; i++) { asFl[i].width++; if(!o.flexible) { asFl[i].style.width = asFl[i].width + "px"; } if(i &gt;= asFl.length-1) i=-1; } if(o.flexible) { for (var i=0; i&lt;asFl.length; i++) { width = (asFl[i].width - o.spacing - o.constant/asFl.length)/menuWidth*100; if(i != asFl.length-1) { lisFl[i].style.width = width + "%"; } else { if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1 || version.indexOf("msie 8") != -1 || version.indexOf("msie 9") != -1) lisFl[i].style.width = width + "%"; } } } } else if(o.minPaddings &gt; 0) { for (var i=0; i&lt;asFl.length; i++) { asFl[i].style.paddingLeft = o.minPaddings + "px"; asFl[i].style.paddingRight = o.minPaddings + "px"; } } if(o.sideClasses) { lisFl[0].className += " first-child"; lisFl[0].getElementsByTagName(o.tag).item(0).className += " first-child-a"; lisFl[lisFl.length-1].className += " last-child"; lisFl[lisFl.length-1].getElementsByTagName(o.tag).item(0).className += " last-child-a"; } nav.className += " scaling-ready"; } function getItemsWidth(a) { var w = 0; for(var q=0; q&lt;a.length; q++) { w += a[q].width; } return w; } } </code></pre> <p>In the Drupal 6 version the above code automatically adds the style="width: xx" tags to the hyperlinks, which causes the menu to grow the menu buttons to fill the width of its container.</p> <p>Thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload