your example requires that I write a js function for each button. I want the javascript to grab the css class dynamically. I will try and modify yours to do this, but I'm terrible with javascript. I really need to work on that.Kieran Huggins wrote:you could use my example...
Need advice on submit buttons for layout with multiple theme
Moderator: General Moderators
This is really beginning to irritate me. Nothing works in IE. It is such a stupid browser it's incomprehendable... anyway, I'm trying to turn this:
into this:
with this:
and it works GREAT in firefox, but not IE. This is the CSS:
I don't understand why this doesn't work in IE. JQuery is supposed to be cross-browser compatible, correct? In Firefox, my image is rendered, in Internet Explorer, just the regular login button is rendered. WHY???
Code: Select all
<a class="replace"><input type="submit" value="Login" class="login" /></a>Code: Select all
<span class="button"><a href="javascript:;" class="replace login"></a></span>Code: Select all
$(function(){
$('.replace').each(function(){
var class = $(this).children('input').attr('class');
$(this).addClass(class);
})
.empty()
.wrap('<span class="button"></span>')
.attr('href', 'javascript:;')
.click(function(){
$(this).parents('form')[0].submit();
});;
});Code: Select all
.button
{
}
.button a:hover
{
background-position: 0px 0px;
}
.button .login
{
background: url(../images/buttons/login.gif) no-repeat 0px -20px;
width: 61px;
height: 20px;
display: block;
}
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
nope - it should work for all forms and all buttons at once:The Ninja Space Goat wrote:your example requires that I write a js function for each button. I want the javascript to grab the css class dynamically. I will try and modify yours to do this, but I'm terrible with javascript. I really need to work on that.Kieran Huggins wrote:you could use my example...
Code: Select all
$(function(){
$('form input:image').wrap('<a class="submit"></a>').hide().parent().click(function(){
$(this).parents('form')[0].submit();
// either re-assign the classname from the original form control
$(this).addClass($('input:image')[0].attr('class'));
// or assign the css property based on naming conventions
$(this).css('background','red url(default/'+$('input:image')[0].attr('class')+'.jpg)');
});
});Code: Select all
<form method="post" action="?">
<input type="image" class="sendForm" src="/default/image.jpg" />
</form>
<form method="post" action="?">
<input type="image" class="signUp" src="/default/image.jpg" />
</form>
<form method="post" action="?">
<input type="image" class="actNow" src="/default/image.jpg" />
</form>Code: Select all
form a.submit {
background: red url(default/image.jpg);
display: block;
width: 100px;
height: 20px;
}
form a.sendForm{
background: red url(default/sendForm.jpg);
}
form a.signUp{
background: red url(default/signUp.jpg);
}
form a.actNow{
background: red url(default/actNow.jpg);
}- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact: