[css-d] IE button issues
Well the button looks okay in Firefox and Safari, work in progress. IE does not seem to like the background shift. http://heitzdesign.com/testButton.html If there is an easy reason for this would like to know. Anyone suggest a tutorial, would be great. - Thanks Eric __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE button issues
IE has notorious problems with pseudo-classes attached to classes. If
you want to achieve this effect:
function emulateActive() {
var inputs = document.getElementsByTagName('input');
for(var i=0; i inputs.length; i++) {
var input = inputs[i];
if(input.className == 'button') {
input.onclick = function() {
var img = 'url(button.png)';
this.style.backgroundImage = img;
this.style.backgroundPosition = '0 -30px';
}
}
}
}
Test this script with conditional comments in IE and see if it works.
let me know. bye
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE button issues
Eric Heitz wrote: Well the button looks okay in Firefox and Safari, work in progress. IE does not seem to like the background shift. http://heitzdesign.com/testButton.html If there is an easy reason for this would like to know. Anyone suggest a tutorial, would be great. - Thanks Eric Not sure what you mean unless are taking about IE/6.0? If so, see: http://www.twinhelix.com/css/iepngfix/ Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE button issues
From: David Laakso da...@chelseacreekstudio.com:
Not sure what you mean unless are taking about IE/6.0?
If so, see:
http://www.twinhelix.com/css/iepngfix/
Eric's page uses the :active pseudo-class on an INPUT element. IE7 doesn't
support this. I'm not sure about IE8.
So, in IE7 at least, Eric's page does not have the same visual effect on
mousedown/mouseup that it has in other browsers.
From: Gabriele Romanato gabriele.roman...@gmail.com:
IE has notorious problems with pseudo-classes attached to classes. If
you want to achieve this effect:
function emulateActive() {
var inputs = document.getElementsByTagName('input');
for(var i=0; i inputs.length; i++) {
var input = inputs[i];
if(input.className == 'button') {
input.onclick = function() {
var img = 'url(button.png)';
this.style.backgroundImage = img;
this.style.backgroundPosition = '0 -30px';
}
}
}
}
Test this script with conditional comments in IE and see if it works.
let me know. bye
Unfortunately, that script has multiple problems.
* The necessary behavior has to be attached to the mousedown and mouseup
events, not the click event.
* It does an == test on the className attribute, which will fail if you use
any additional classes on the element.
* It duplicates CSS styles (e.g. '0 -30px') in CSS and JavaScript, making
the code fragile.
* Because it is hand-rolled DOM code, it is rather complicated.
* You need to actually call that function somewhere or it won't do anything.
A better solution is to:
* Use jQuery for simpler code.
* Use the mousedown and mouseup events.
* Add and remove a class instead of directly setting CSS styles.
To implement this solution, do the following:
1) Change this selector in your CSS:
input.button:active { ... }
to:
input.button:active, input.buttonActive { ... }
2) Add these script tags (no IE conditionals needed):
script type=text/javascript src=
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js;',
/script
script type=text/javascript
$(function() {
$('input.button')
.mousedown( function() {
$(this).addClass( 'buttonActive' );
})
.mouseup( function() {
$(this).removeClass( 'buttonActive' );
});
});
/script
I tested this in IE7/8 and it works fine.
-Mike
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE button issues
On Wed, Jun 9, 2010 at 2:41 PM, Michael Geary m...@geary.com wrote: Unfortunately, that script has multiple problems... Ah, Gabriele, I'm sorry, I didn't mean to sound so negative. You were definitely on the right track! Just had a few things to fix up to turn your idea into a working solution - and now you can add those to your bag of tricks. As Ghandi might have put it, Hate the script, love the scripter. [1] Happy hacking, -Mike [1]: http://www.quotationspage.com/quote/36366.html __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE button issues
As long as we're at it, here is a *much* better version of the jQuery script
from my earlier message.
Instead of this:
script type=text/javascript
$(function() {
$('input.button')
.mousedown( function() {
$(this).addClass( 'buttonActive' );
})
.mouseup( function() {
$(this).removeClass( 'buttonActive' );
});
});
/script
Let's make it more general:
script type=text/javascript
// Toggle a classname in response to a pair of events.
// The event names can be in any format that $().bind() accepts,
// including single events, multiple events separated by spaces,
// and namespaced events for easy removal.
$.fn.classToggler = function( className, onEvent, offEvent ) {
this
.bind( onEvent, function() {
$(this).addClass( className );
})
.bind( offEvent, function() {
$(this).removeClass( className );
});
};
$(function() {
$('input.button').classToggler( 'buttonActive', 'mousedown',
'mouseup' );
});
/script
What we've done here is made a mini jQuery plugin - we've added a
$(...).classToggler() method to jQuery and then we call that method.
Why is that better - even though it's a few lines longer? Well, adding and
removing a class in response to a pair of events is a pretty common
operation. In fact, the next thing you'll want to do is a hover effect,
right?
With my first version of the code, you'd have to duplicate the entire block,
changing the mousedown and mouseup to mouseover and mouseout and using a
different classname.
With the new version, you only have to add one line of code. Simply change
the last block to:
$(function() {
$('input.button')
.classToggler( 'buttonHover', 'mouseover', 'mouseout' )
.classToggler( 'buttonActive', 'mousedown', 'mouseup' );
});
Add the corresponding CSS rule:
input.button:hover, input.buttonHover { ... }
and you're all set.
-Mike
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE button issues
On 6/9/10 11:14 AM, Eric Heitz wrote: Well the button looks okay in Firefox and Safari, work in progress. IE does not seem to like the background shift. http://heitzdesign.com/testButton.html If there is an easy reason for this would like to know. Anyone suggest a tutorial, would be great. Yes. Older versions than IE 8 are MIA wrt to pseudo-classes: http://reference.sitepoint.com/css/pseudoclass-active Not a CSS solution, but much smaller than jQuery, is this useful IE expression. Expressions don't work in IE 8, so there's no real need to hide it from any browser... http://www.xs4all.nl/~peterned/csshover.html (FWIW - I did check that this works on your test page.) Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
