Page 4 of 4

Posted: Mon Feb 05, 2007 9:45 am
by Luke
Kieran Huggins wrote:you could use my example... :twisted:
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... :twisted:
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 &nbsp; inside the tag and see if that helps.