IE6 Hover The jQuery Way
Posted on: 23 June 2008
Drupal includes the jQuery framework by default, which gives you easy access to a bunch of neat javascript eye-candy. I've been meaning to look into this properly for a while now, but I have at least figured out how to resolve a fairly common Drupal requirement - displaying submit buttons as text links.
We have a few forms on the site which have quite a few text links on them. However, when the user clicks on these links, we want the form to be validated and saved using the normal Drupal Forms API. The easiest way to hook into this process is to create these links as submit buttons, then use the form submit function to detect which button was pressed, and redirect accordingly:
function mynode_submit(&$node) {
switch($node->op) {
case $node->property1['add_link']:
$node->redirect = 'mynode/'.$node->nid.'/add_property1';
break;
case $node->property2['add_link']:
$node->redirect = 'mynode/'.$node->nid.'/add_property2;
break;
}
function mynode_update($node) {
// save changes
if($node->redirect) {
drupal_goto($node->redirect);
}
}
The only remaining challenge is to get these submit buttons to look like text links. A bit of CSS should help - give the submit buttons a class:
$form['property1']['add_link'] = array(
'#type' => 'submit',
'#prefix' => '<div>',
'#value' => t('Add property 1'),
'#suffix' => '<div>',
'#attributes' => array('class'=>'submit-link'),
);
then add some CSS to style it nicely:
.submit-link {
border-top: 0;
border-right: 0;
border-bottom: 1px #ffffff solid;
border-left: 0;
background: transparent;
padding: 0;
margin: 0;
color: #005a8c;
display: inline;
font-family: "Lucida Grande","Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
font-size:8pt;/*set regular font size*/
text-align: left;
}
.submit-link:hover {
border-bottom: 1px #005a8c solid;
cursor: pointer;
}
The only missing link now is that IE6 doesn't understand the hover pseudo-class. IE7 should understand it, but only if your page has a STRICT document type. Unfortunately, my pages do have this, but IE7 still won't register the hover.
I had a good go at implementing CSSHover, but couldn't get IE6 or IE7 to register the hover there either.
In the end, I settled on a bit of jQuery (mostly copied from the Drupal Nice Menus module):
// We only do the javascript in IE thanks to drupal_set_html_head in .module.
if (document.all) {
function DHIEHover() {
$(".submit-link").hover(function(){
$(this).css("text-decoration", "underline");
$(this).css("cursor", "pointer");
},function(){
$(this).css("text-decoration", "none");
}
);
}
// This is the jquery method of adding a function
// to the BODY onload event. (See jquery.com)
$(document).ready(function(){ DHIEHover() });
}
This now makes the submit buttons look exactly like text links in all major browsers. OK - it only works as long as the user has JavaScript enabled, but at least there's graceful degradation to showing regular submit buttons with the appropriate titles, so they can still use the site OK.
I'm starting to understand why professional web designers feel such antipathy towards Internet Explorer of all persuasions.