Page 4 of 4
Posted: Mon Feb 05, 2007 9:45 am
by Luke
Kieran Huggins wrote:you could use my example...

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.
Posted: Mon Feb 05, 2007 2:58 pm
by Luke
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:
Code: Select all
<a class="replace"><input type="submit" value="Login" class="login" /></a>
into this:
Code: Select all
<span class="button"><a href="javascript:;" class="replace login"></a></span>
with this:
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();
});;
});
and it works GREAT in firefox, but not IE. This is the CSS:
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;
}
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???
Posted: Mon Feb 05, 2007 6:16 pm
by RobertGonzalez
To answer your question: Microsoft.
Now on to more information... are you getting any Javascript errors?
Posted: Mon Feb 05, 2007 6:34 pm
by Luke
nope
Posted: Tue Feb 06, 2007 2:13 am
by Kieran Huggins
The Ninja Space Goat wrote:Kieran Huggins wrote:you could use my example...

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.
nope - it should work for all forms and all buttons at once:
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>
add CSS rules for each class of 'button':
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);
}
Not tested, let me know if it's broken and I'll take a closer look.
Posted: Tue Feb 06, 2007 2:19 am
by Kieran Huggins
also - maybe you need some content for the <a> to show up in IE - try putting a inside the tag and see if that helps.