• 0

[JS] Center a menu that is floated left.


Question

I found the following snippet of javascript (uses jQuery) that would allow me to centre a menu/nav that is set to float:left. It seems to work in IE and Opera OK. But in FF and Safari, it works sometimes and other times trips out (keep refreshing the page and it will eventually work/fail). In Chrome it doesn't work at all.

Here is the code:

$(function() {
	var menu_width = $('#nav').css('float', 'left').width();
	$('#nav').css({float : 'none', width : menu_width, margin : '0 auto'});
});

I don't know js so I can't figure out what the problem is. If anyone can help it would be much appreciated.

Here is the page running the code:

http://www.islandrobot.com/vanessa/

Cheers,

Jordan

15 answers to this question

Recommended Posts

  • 0

Sorry, yes I am trying to centre the entire navigation on that blue strip. Without the js it would be aligned to the left. With the js it should be centred.

P.s. I made an edit to my above post and then deleted it. If you saw the edit, just ignore it ;)

  • 0

That would be the easy way out, yes. But I would rather have it centre automatically since the client may add/remove/rename items from the menu at any time which would mean manually recalculating and changing the width. Since they don't know CSS I wouldn't expect them to have to do that.

  • 0

It wasn't the easy way out when I looked over your code but rather the logical solution to your problem based only on your initial post (which didn't say that the menu would actually be dynamic versus static.)

That being said the best bet is to replace float: left for display:inline. Then you can have all list items centered under the unordered list without needing any javascript.

  • 0

That being said the best bet is to replace float: left for display:inline. Then you can have all list items centered under the unordered list without needing any javascript.

I tried this method at first but encountered problems with the drop down menus. I couldn't get them to fall directly under their parent li. Instead, the drop-downs always appeared in the far left corner (beginning of the root ul) regardless of which li you were mousing over (if that makes any sense). I played around with it for a while but couldn't get it to behave the way I wanted.

I also tried using inline-blocks which worked nicely except in FF2 which doesn't support it. -moz-inline-box didn't help either because of the drop-down menus.

JS seems like my last and only resort to have a centred, horizontal menu of unknown width and with drop down menus.

  • 0

Hi sweetsam. That seems to have helped a little bit. It at least works in Chrome now sometimes where as it didn't work at all before. However, it is still failing on some page loads. If you keep refreshing the page in FF/Chrome/Safari (Opera and IE seem stable) it will eventually get screwed up. Is this a common problem with javascript? Could it be a jQuery issue?

  • 0

An update:

I've almost got it pegged now. Previously I did not have float:left; applied to #nav (which is the ul). I only had it applied to the li's. As I understood it, the .css('float', 'left') part of the script was trying to add the float to #nav for me??? Well I took that part out and just added float:left; to #nav in the css. This made #nav wrap snug around the li's and allowed for the correct width to be determined. Now everything seems stable in FF.

EDIT: FF is still giving the same problem as Chrome and Safari

Chrome and Safari still seem to be having slight problems getting it perfectly centred though. Sometimes its a bit more to the left and other times it's perfect.

I have also simplified the script down to this:

$(function() {
        var mleft = Math.round(($('#nav-wrap').width() - $('#nav').width()) * 0.5);
        $('#nav').css('margin-left', mleft);
});

  • 0

Ok I am pretty sure now that the problem is a simple matter of the calculations being made before the navigation part of the page has been drawn up (if that makes sense). I realize this as some testing showed that occasionally $('#nav-wrap').width() and $('#nav').width() were returning results like 1407 and 1367 respectively. This would also explain why the browsers with faster javascript engines are having the problem more frequently. How can I make sure that the calculations are only made AFTER the html/css has been drawn up by the browser?

Sorry for all these posts, as I said in the beginning I don't know much about js so figuring this out is a whole learning experience :/

EDIT: HOT DAMN.... I guess it was as simple as moving my stylesheet above the javascript. All good now :)

  • 0

To avoid this kind of problem though you should have done this :


$(document).ready(function() {
$(function() {
 var mleft = Math.round(($('#nav-wrap').width() - $('#nav').width()) * 0.5);
 $('#nav').css('margin-left', mleft);
});});

It ensures any jquery is applied after the dom has been fully parsed, most of the time the effect is instant.

  • 0

I was actually reading up on the .ready() function when I discovered that I could just move the css above the js.

To quote the .ready() page of the jQuery site that tipped me off:

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

Is it still advisable that I also use the .ready any ways?

  • 0

Yes. But you were using it already. Following pieces of code are equivalent. The problem was being caused by the fact that the styles were being applied after the script swung in to action. Scripts should always be the last to run and more importantly should be included after the stylesheets. Sometimes you will see scripts attached to the end of the document for the same reason.


$(function(){

})

and

$(document).ready(function(){

})

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • The quantum search for Time's origin had an equally mind-boggling conclusion by Sayan Sen Image by Steve Johnson via Pexels A theoretical study from researchers at the University of Surrey suggested that the direction of time may not be fundamentally fixed in certain quantum systems. The work, published in Scientific Reports, examined how the “arrow of time” could emerge from microscopic physics and found that time-reversal symmetry can remain intact even in models used to describe processes such as energy loss and thermalisation. The arrow of time refers to the observed one-way direction from past to future in everyday life. In macroscopic processes, this is easy to see. Spilled milk spreads across a table and does not gather back into a glass, and heat flows from hotter objects to colder ones. These processes shape the common sense idea that time moves in a single direction. However, at the level of fundamental physics, many equations do not prefer a direction of time. Time-reversal symmetry means that the same physical laws can describe a system whether time moves forward or backward. This has made it difficult to explain why irreversible behaviour appears in the large-scale world even when the underlying rules do not require it. Dr Andrea Rocco, Associate Professor in Physics and Mathematical Biology at the University of Surrey, described this contrast: "One way to explain this is when you look at a process like spilt milk spreading across a table, it's clear that time is moving forward. But if you were to play that in reverse, like a movie, you'd immediately know something was wrong – it would be hard to believe milk could just gather back into a glass. However, there are processes, such as the motion of a pendulum, that look just as believable in reverse. The puzzle is that, at the most fundamental level, the laws of physics resemble the pendulum; they do not account for irreversible processes. Our findings suggest that while our common experience tells us that time only moves one way, we are just unaware that the opposite direction would have been equally possible." The study focused on open quantum systems, which are quantum systems that interact with a surrounding environment. This environment, often described as a heat bath, can exchange energy and information with the system. The researchers used this framework to study how a direction of time might appear even when the underlying physics does not enforce one. A key part of the analysis involved the Markov approximation. This is a simplification used in many models where the system is assumed not to retain memory of its past states. The idea is that changes depend only on the current state, not on earlier history. This is commonly used when studying thermalisation, which is the process where a system settles into equilibrium with its environment. The study also used concepts such as master equations, including the Lindblad and Pauli equations, which describe how probabilities of different quantum states change over time. Another related model discussed was quantum Brownian motion, which describes the random-like movement of a quantum particle interacting continuously with its environment. In these descriptions, a “memory kernel” can appear, which is a mathematical term that accounts for how past states influence current behaviour. The researchers found that applying the Markov approximation did not break time-reversal symmetry. Even when the system interacted with an effectively infinite heat bath, the resulting equations of motion remained symmetric in time. This meant that the same mathematical description could, in principle, run forward or backward in time without contradiction. The study further showed that standard frameworks used in open quantum systems, including quantum Brownian motion and master equations like the Lindblad and Pauli forms, could be written in a time-symmetric way. These equations are typically used to describe processes that look irreversible, such as dissipation and thermalisation, but the results suggested they can also be interpreted as allowing evolution in both time directions. Thomas Guff, Research Fellow in Quantum Thermodynamics, said: "The surprising part of this project was that even after making the standard simplifying assumption to our equations describing open quantum systems, the equations still behaved the same way whether the system was moving forwards or backwards in time. When we carefully worked through the maths, we found that this behaviour had to be the case because a key part of the equation, the "memory kernel," is symmetrical in time. We also found a small but important detail which is usually overlooked – a time discontinuous factor emerged that kept the time-symmetry property intact. It’s unusual to see such a mathematical mechanism in a physics equation because it's not continuous, and it was very surprising to see it appear so naturally." The researchers also noted that deriving a one-way arrow of time from time-reversal symmetric microscopic dynamics remains an open problem across fields such as thermodynamics, statistical mechanics, particle physics, and cosmology. Their results suggested that some standard descriptions of irreversible behaviour in open quantum systems may be better understood using a time-symmetric formulation of Markovianity. According to the study, processes such as thermalisation, which are usually treated as irreversible, could in theory be described in a way that allows evolution in either time direction under the same rules. This does not imply that time reversal occurs in everyday life, but rather that the underlying equations do not strictly enforce a single direction. Overall, the findings suggested that the perceived direction of time may emerge from how physical systems are modelled and approximated, rather than from a fundamental asymmetry in the laws themselves. The researchers noted that this perspective could have implications for ongoing work in quantum mechanics, thermodynamics, and cosmology on the origin of time’s arrow. Source: University of Surrey, Nature This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing
    • A bit premature... 100% Marketing. Bizarre.
  • Recent Achievements

    • Reacting Well
      BizSAR earned a badge
      Reacting Well
    • First Post
      AndreaB earned a badge
      First Post
    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      581
    2. 2
      +Edouard
      182
    3. 3
      PsYcHoKiLLa
      75
    4. 4
      Michael Scrip
      73
    5. 5
      neufuse
      64
  • Tell a friend

    Love Neowin? Tell a friend!