A site I worked on recently had an international link, and when the user clicked on it, the whole page was supposed to slide down and reveal a language picker. I found some jQuery to slide the page down, but it relied on the language picker being the first div on the page. For SEO reasons, I didn’t want that, so I put the language picker code into the normal site navigation, and then used jQuery to move everything into position. Here’s how it works:
HTML
<body>
<div id="placeholder-regions"></div>
<div id="container">
<h1>Page Title</h1>
<ul id="utilities">
<li><a href="#">Utility Link One</a></li>
<li><a href="#">Utility Link Two</a></li>
<li id="util-int"><a href="#">International</a>
<div id="util-regions">
<h4>Select Regional Site</h4>
<ul>
<li><a href="#">Europe</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Deutchland</a></li>
</ul>
</div>
</li>
</ul>
...
<p>Page content...</p>
</div>
</body>
Two things to notice here. First, there’s a blank placeholder div, which is the first bit of markup inside the BODY element. Second, the International code is all included in the regular navigation as an LI element. That way, users without javascript still get a functional site, and the search engine spiders can see the most important content, like the headlines, at the top of the page.
Note these two IDs, as well. #util-int is the list item that contains the link to show and hide the internation section. #util-regions is the div that contains the international section, which we want to show and hide.
jQuery
// scroll the page to display the international section
$('#util-int').toggle(function() {
$("#util-regions").remove().prependTo("#placeholder-regions").slideToggle('swing');
}, function() {
$("#util-regions").slideToggle('swing');
});
This jQuery is pretty compact, but in plain english, what this says is when util-int is toggled (clicked), then move #util-regions from the navigation into the placeholder DIV at the very top of the page, and also show and hide it. The slideToggle() code is what shows and hides the international section, and the remove() and prependTo() code is what moves the code into the placeholder DIV.
CSS
#util-int {
z-index: 1000;
}
#util-regions {
display: none; /* hidden by default, will be shown by jQuery */
width: 948px;
margin: 0 auto;
height: 60px;
position: relative;
}
#placeholder-regions {
background: #666;
}
Some important things to note: #util-int has a very high z-index value to make sure it appears on top of anything else. #util-regions has a width and height, and is position: relative so that its contents can be absolutely positioned within, and is also hidden by default (the jQuery will show it later on). #placeholder-regions has a background, but no height, padding or margins, so that when we show and hide #util-regions, it will collapse gracefully.
You can see a version of this code in action over here.
Couln’t make it work :( … The menu ins mounted, importing plugins, all looks fine. The click on “International” results nothing. Some tip?
Hard to say without seeing your site. Do you have a URL that I can see the problem on?
Scott
Today I upload a test environment that you can access through the URL http://www.sedisoft.com.br/cafemonsenhor/pt. All help is welcome. Tanks a lot.
Scott
I was able to identify the problem: two frameworks had imported at the same time, the JQuery and Prototype to run the Lightbox. I tried another plugin to open files, and I’m only importing the latest version of JQuery, everything is working perfectly now. Sorry I wasted your time with it, and next week I upload the corrected version and warn you if you want to look.
No problem. For what it’s worth, there’s a jQuery version of Lightbox that I frequently use.
Scott
Scott
After a few days of hard work, the new test version is online at the same link above. I changed the Lightbox by PrettyPhoto, taking advantage of the latter also open flash files, videos and HTML code. The selector language was perfect, now I’m fighting to improve the functioning of the contact form, which uses jqtransform and FormValidator.
I put a link here in the library’s general website, if you indicate otherwise assign the credits to you, please let me know.
Thank you for all the attention he gave me, and come back to see how you’re getting the recoding of your site in HTML5.