Just a little tip, as the syntax of less (less css) is so similar to css, just add a new file type in Netbeans > Tools > Options > Miscellaneous > Files like so:
Btw, setting an image size in Bilbo after adding the image crashes Bilbo, but only after the post was saved locally. So add your images first, then “Save Locally” before this bug is fixed.
=-=-=-=-=
Powered by Bilbo Blogger
Having recently dug into css-frameworks, I’ve found Dirk Jesse’s YAML to be in a league of its own. While I think that support for IE5.5 could be dropped, YAML makes many right choices regarding abstraction and accommodating browser quirks.
And while YAML has two basic navigation bars out of the box (named sliding-door and shiny-buttons), I wanted a drop down menu on hover over the navigation items, with as much CSS and as little JavaScript as possible.
After some searching I found the Drop-Down-Menu Framework (DDMF), and it looks like it makes many right choices. It uses css for non-IE browsers javascript-frameworks for IE6 and 7 so it can avoid some of the ugly conditional HTML needed to get a drop-down to work with only css in these IE versions. One thing that’s missing is tab-navigation so there is no drop-down when the users navigates to a menu item containing a drop-down menu with the keyboard.
In its original form DDMF will work with its own HTML templates, but to integrate it with the YAML navigation menus some changes are needed.
The first step is of course to include the css and javascript of the framework in the head tag of your pages your pages as outlined in the examples.
Then, starting with the DDMF files, the included JavaScript (jquery.dropdown.js) might let IE6 display the drop-down behind the page content. This well known z-index issue with IE6 can be fixed, so the original file
//jquery.dropdown.js
$(document).ready(function(){
$(”ul.dropdown li”).dropdown();
});
$.fn.dropdown = function() {
$(this).hover(function(){
$(this).addClass(”hover”);
$(’> .dir’,this).addClass(”open”);
$(’ul:first’,this).css(’visibility’, ‘visible’);
},function(){
$(this).removeClass(”hover”);
$(’.open’,this).removeClass(”open”);
$(’ul:first’,this).css(’visibility’, ‘hidden’);
});}
will become
$(document).ready(function(){
$(”ul.dropdown li”).dropdown();
if (jQuery.browser.msie) {
var zIndexNumber = 1000;
$(’div’).each(function() {
$(this).css(’zIndex’, zIndexNumber);
zIndexNumber -= 10;
});
}});
$.fn.dropdown = function() {
$(this).hover(function(){
$(this).addClass(”hover”);
$(’> .dir’,this).addClass(”open”);
$(’ul:first’,this).css(’visibility’, ‘visible’);
},
function(){
$(this).removeClass(”hover”);
$(’.open’,this).removeClass(”open”);
$(’ul:first’,this).css(’visibility’, ‘hidden’);
});}
Please don’t mind me dealing only with jQuery, but you should find similar fixes for the other two js-frameworks supported by DDMF, i.e. mootools and scriptaculous.
Moving on to the HTML, the YAML plain vanilla
<div id=”nav”>
<!– skiplink anchor: navigation –>
<a id=”navigation” name=”navigation”></a><div class=”hlist”>
<ul>
<li><a href=”#”>Table Of Contents</a></li>
<li><a href=”#”>Vehicles</a></li>
<li><a href=”#”>Next Example</a></li>
<li><a href=”#”>Previous Example</a></li>
</ul>
</div></div>
becomes
<div id=”nav”>
<!– skiplink anchor: navigation –>
<a id=”navigation” name=”navigation”></a><div class=”hlist”>
<ul class=”dropdown”>
<li><a href=”#”>Table Of Contents</a></li>
<li><a href=”#”>Vehicles</a>
<ul class=”dir”><!— this list will drop down—>
<li><a href=”#”>Planes</a></li>
<li><a href=”#”>Trains</a></li>
<li><a href=”#”>Automobiles</a></li>
<li><a href=”#”>Bicycles</a></li>
<li><a href=”#”>Motorcycles</a></li>
</ul>
</li>
<li><a href=”#”>Next Example</a></li>
<li><a href=”#”>Previous Example</a></li>
</ul>
</div></div>
As you see, the changes are very minor, just add the two class declarations to the <ul>s.
Moving on to the css, the sliding-door navigation might actually already look pretty good now, perhaps you’d want to add some styling to the ul.dropdown ul li element. I had far more trouble getting the shiny buttons to display correctly, and here are some important changes which you should include in your own custom css file at the bottom of all the css-includes (so that this custom file will be included last and override any YAML specific styling). Essential changes are bold:
/* your.css */
.hlist{overflow:visible;}
ul.dropdown ul li {position:relative;border:0;}
ul.dropdown li.hover ul {background:#d3d3d3 url(’/images/my_fashionable_gradient.gif’) repeat-x scroll; }
ul.dropdown ul li a {width:100%;border-bottom:1px solid #a3a3a3;height:auto;background:#d3d3d3 url(’/images/my_fashionable_gradient.gif’) repeat-x scroll;}
As I’m on Linux I don’t have access to IE7 but I’ll try in the next few days if it might be possible to achieve the drop-down in IE7 with only css as seems to be the case with IE8. Then I’ll update the post with the results.
As always, working with css is can be tedious and frustrating so YMMV. Please share your experiences with this approach in the comments. Also a live example at http://chiangmai.net with an include structure adapted for Ruby on Rails.
Note: this article uses jQuery, Ruby on Rails and CSS. It might be useful for other combinations.
You have a list of products and don’t want to force users to search for the link to the details page. Rather, give him some hover effect for each list item and let him click anywhere on the item. The list here is displayed as an unordered list (UL), but a similar technique should work with table rows (TR), divs or other block elements.
Several techniques are applied here:
Step 1: Turn the cursor into a pointer:
.list_item {cursor:pointer}; (believe it or not, WORKS in IE6!)
Step 2: Re-style the list item when the cursor is over it:
Civilized browsers, use the :hover pseudo element:
.list_item:hover {background-color:#a1a1a1}
That abomination from hell, IE666, use JavaScript, here’s a snippet for jQuery, note the syntax of the css function:
$(document).ready(function(){
$(’.list_item’).mouseover(function(){
$(this).css({’background-color’:'#a1a1a1′})
}
)
.mouseout(function(){
$(this).css({’background-color’:'#1a1a1a’})
}
);
});
Or even better, get the prior color and reset on mouseout:
$(document).ready(function(){
var orig_bg;
$(’.list_item’).mouseover(function(){
orig_bg = $(this).css(’background-color’);
$(this).css({’background-color’:'#a1a1a1′})
}
)
.mouseout(function(){
$(this).css({’background-color’:orig_bg})
}
);
});
Step 3: Bind the click event to every list item:
As every list item likely has a link to the details page, pilfer the url from there, no need to dig into the Rails routes. Here’s the jQuery code:
$(document).ready(function(){
$(’.list_item’)
.click(function(){
//now $(this) refers to the current list_item element, dig deeper with .find() to get the link:
var details_link = $(this).find(’a#details_link’)[0].href;
//do the ‘redirect’:
parent.location.href = details_link;
}
)
});
Summing up, this is all pretty easy thanks to the power of jQuery. There was no need to use Rails’ div_for to get to the product links or generate them, just get everything out of the DOM. There might be a leaner, DRYer or easier way to do this, if you know better, please post a comment.
Recent Comments