How Firefox renders links

Question

I just would like to share some of my observation on how Firefox 3.5 on Ubuntu Jaunty Jackalope renders HTML:

I have the following entries in my JSP page:

<a title="myLink" href="[some url]">link 1</a>
<a title="myLink" href="[some url]">link 2</a>
<a title="myLink" href="[some url]">link 3</a>

<a title="myLink"  class="hiddenLink"  href="[some url]">link 4</a>
<a title="myLink"  class="hiddenLink"  href="[some url]">link 5</a>
<a title="myLink"  class="hiddenLink"  href="[some url]">link 6</a>

<button>more links</button>

The above links are shown on Firefox as:

link 4 to link 6 are hidden.

link 1 link2 link3

I attach a javascript on the 'more links button' using jQuery:

$("a[href ^='myLink']:hidden").show();

to show links 4 to 6 on the page. This is how firefox renders the links if I click the 'more links' button:

link 1 link2 link3
link 4
link 5
link 6

Answer 1

Probably because jQuery is setting the display style property to display="block" as opposed to display="inline" when you call show(). Try this:

$("a[href ^='myLink']:hidden").css('display', 'inline');

or:

$("a[href ^='myLink']:hidden").removeClass();

Answer 2

That's because .show() turns them into blocks:

This function shows the matching elements on the page when they are hidden. It actually changes the display style to 'block'. This can cause some problems in your page's layout because it inserts a line break before and after the element, but for general use it is perfect. For a more flexible use please take a look and the .addClass() and .removeClass() function.

I would suggest replacing .show() by .removeClass('hiddenLink').

Or does that "hiddenLink" do more than just hide the links, and do you want them to look different from your other links when they become visible?