While adding a basic show/hide feature to a client’s website, I ran across a rather annoying issue. I’m refraining from calling it a bug, as the issue was only replicable on Internet Explorer 6 and 7 on PC. Surprise, surprise.
The show/hide feature is basically the Toggle Effect demonstrated on MooTools’ Fx.Slide Demo. My client wanted to have a link in the footer of their site that, when clicked, would reveal a vertical list of internal site links - for SEO purposes.
Here’s an example of the list
The code on MooTools’ Demo translated to something like this for my client:
The JavaScript:
<script src="mootools.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent(\\'domready\\', function(){ var mySlide = new Fx.Slide(\\'linkMenu\\').hide(); $(\\'toggle\\').addEvent(\\'click\\', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); }); //]]> </script>
The HTML:
<p id="linkMenu"> </p> <ul> <li><a href="http://www.ilovetypography.com/">ilovetypography</a></li> <li><a href="http://www.freelanceswitch.com/">freelance switch</a></li> <li><a href="http://www.cssglobe.com/">css globe</a></li> <li><a href="http://www.stylegala.com/">stylegala</a></li> <li><a href="http://www.alistapart.com/">a list apart</a></li> <li><a href="http://www.underconsideration.com/speakup/">speak up</a></li> <li><a href="http://www.37signals.com/svn/">svn</a></li> <li><a href="http://webtypography.net/">webtypography</a></li> <li><a href="http://www.faveup.com/">faveup</a></li> <li><a href="http://www.logopond.com/">logopond</a></li> <li><a href="http://www.surfshot.com/">surfshot</a></li> <li><a href="http://www.wetsand.com/">wetsand</a></li> <li><a href="http://www.surfline.com/">surfline</a></li> <li><a href="http://www.wannasurf.com/">wannasurf</a></li> </ul>
As I stated before, my client wanted the list of links to be hidden unless the Toggle link was clicked. Simply adding .hide() to the end of the mySlide variable definition hid the list of links on most browsers, but not the initial load on Internet Explorer 6 or 7. However, after one page refresh, both IE 6 and 7 worked as they should.
After spending some time searching Google for a solution, I came up with an idea: use CSS to hide the list, then use JavaScript to make it visible again.
CSS to hide the list
#linkMenu { display: none; }
JavaScript to show the list
// placed directly under window.addEvent('domready', function(){
$('linkMenu').setStyle('display', 'block');The only issue I see from this solution has to do with SEO best practices. 456 Berea St. has a good article and some resource on “Google, SEO and using CSS to hide text.”
SKhan
July 16th, 2008
Just wanted to say thanks!
This last bit to hide it using CSS and load it after using the domready function worked like a charm, i was having the same issue and google brought me to this page!