Need advice on submit buttons for layout with multiple theme
Moderator: General Moderators
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Did you look at my example? There is a link to atest page for demo purposes.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- jyhm
- Forum Contributor
- Posts: 228
- Joined: Tue Dec 19, 2006 10:08 pm
- Location: Connecticut, USA
- Contact:
Hey NSG! Why so complicated? No javascript required.
Check it Out!
FF and IE6
Work arounds for others maybe.
Check it Out!
FF and IE6
Work arounds for others maybe.
Last edited by jyhm on Thu Feb 01, 2007 2:58 pm, edited 1 time in total.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- jyhm
- Forum Contributor
- Posts: 228
- Joined: Tue Dec 19, 2006 10:08 pm
- Location: Connecticut, USA
- Contact:
Hey thanks Everah! The idea came to me after TheMoose
posted in this thread about button transparency but he
didn't elaborate further when I asked him about it, so I
hacked this together. However you have to tweek this
just right because browsers always want to throw their
own text or button image in over top especially if you
don't candidly specify certain attributes. But the most
important aspect is to check that the form actually work's
because other permutations of this same technique that
I used disabled the ability to submit.
This technique here seems to be pretty solid. And if issues
arise you could probably code a plan B scenario. It's funny
because I was just having this problem before NSG posted
this thread. Most of the time a submit button would look
ridiculus because they would not render transparency
properly or some other bug. After reading this thread it
sparked my interest again and I came up with what I think
is a reasonably good foundation to treating this issue. I'm
sure all you GURU's here can improve greatly on this design!
Remember I have made a .zip file containing the .php file in
the same directory as my file. Some alteration of the html
is needed for IE. I hope this helps NSG!
posted in this thread about button transparency but he
didn't elaborate further when I asked him about it, so I
hacked this together. However you have to tweek this
just right because browsers always want to throw their
own text or button image in over top especially if you
don't candidly specify certain attributes. But the most
important aspect is to check that the form actually work's
because other permutations of this same technique that
I used disabled the ability to submit.
This technique here seems to be pretty solid. And if issues
arise you could probably code a plan B scenario. It's funny
because I was just having this problem before NSG posted
this thread. Most of the time a submit button would look
ridiculus because they would not render transparency
properly or some other bug. After reading this thread it
sparked my interest again and I came up with what I think
is a reasonably good foundation to treating this issue. I'm
sure all you GURU's here can improve greatly on this design!
Remember I have made a .zip file containing the .php file in
the same directory as my file. Some alteration of the html
is needed for IE. I hope this helps NSG!
Last edited by jyhm on Thu Feb 01, 2007 3:00 pm, edited 1 time in total.
Alright, I've got a few problems. I've decided to use jquery simply because it's so cool and it's less obtrusive than everah's method, although his is cleaner and probably would be easier. Here is what I'm doing:
My question is how do I make the value of the submit button be an empty string with jquery?? I can't figure it out. my method is not working.
EDIT: Also, I'm getting this error:
Code: Select all
$(function(){
$('.replace').children().applyClass($(this).className).click(function(){
$(this).parents('form')[0].submit();
}).load(function(){
$(this).children('.button').value = '';
});
});
Code: Select all
.replace
{
}
.button
{
border: 0;
cursor: pointer;
}
.button:hover
{
background-position: 0px 0px;
}
.button span
{
display: none;
}
.login
{
background: url(../images/buttons/login.gif) no-repeat 0px -20px;
width: 61px;
height: 20px;
display: block;
}
Code: Select all
<a class="replace" href="javascript:;"><input type="submit" value="Login" class="login button" /></a>EDIT: Also, I'm getting this error:
but even though that error is coming up, it seems to be working other than the submit value thing.error console wrote:$(".replace").children().applyClass is not a function
my_rollover.js Line 29
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
why are you starting with wrapped inputs? you can just use the code I posted to wrap them at the beginning:
You can make the button value a "blank" with $("input").value('') or remove it altogether with $("input").removeAttr("value")
Also, the error is because "applyClass" isn't a function - "addClass" is what you're looking for I think.
Check out this awesome reference: http://www.visualjquery.com/1.1.1.html
Code: Select all
$(function(){
$('form input.replace').wrap('<a class="save button"></a>').hide().parent().click(function(){
$(this).parents('form').submit();
});
});Also, the error is because "applyClass" isn't a function - "addClass" is what you're looking for I think.
Check out this awesome reference: http://www.visualjquery.com/1.1.1.html
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
So very sorry for spitting out yet another example of how you could do it... but this time I believe it will work perfectly.
On mouse over, it adds the elHover class
On mouse out, it removes it.
Nothing more, nothing less, the browser will handle the submitting itself as it always would.
On mouse over, it adds the elHover class
On mouse out, it removes it.
Nothing more, nothing less, the browser will handle the submitting itself as it always would.
Code: Select all
<html>
<head>
<script src="http://jquery.com/src/jquery-latest.pack.js" type="text/javascript"></script>
<style>
input {
border: 1px solid #000000; /* Black border for trials */
width: 150px;
height: 28px;
}
input.elHover {
border: 1px solid #ff0000; /* Red border for trials */
width: 150px;
height: 28px;
}
</style>
<script type="text/javascript">
$(function(){
$('input').hover(function(){
$(this).toggleClass('elHover'); // mouse over function
},function(){
$(this).toggleClass('elHover'); // mouse out function
});
});
</script>
</head>
<body>
<form>
<input type="button" value="" class="button"/>
</form>
</body>
</html>Here's my final solution and I couldn't be happier with it. It allows me to only have one javascript function and then I just change the class on the input button to tell the css what to apply. If you look at how it's done, I feel it's quite clever. Once the button class is added to the anchor tag, that enables the path to the correct css class. Otherwise, it will just render like a standard submit button. 
EDIT: DARN! I forgot about Internet explorer! That freakin thing.
Back to the drawing board
Code: Select all
$(function(){
$('.replace').addClass('button').children('input').val('');
});
Code: Select all
<a class="replace"><input type="submit" value="Login" class="login" /></a>
<a class="replace"><input type="submit" value="Submit" class="submit" /></a>
<a class="replace"><input type="submit" value="Continue" class="continue" /></a>Code: Select all
.button input
{
border: 0;
}
.button input:hover
{
background-position: 0px 0px;
}
.button input.login
{
background: url(../images/buttons/login.gif) no-repeat 0px -20px;
width: 61px;
height: 20px;
display: block;
}
.button input.submit
{
background: url(../images/buttons/submit.gif) no-repeat 0px -20px;
width: 71px;
height: 20px;
display: block;
}
.button input.continue
{
background: url(../images/buttons/continue.gif) no-repeat 0px -20px;
width: 155px;
height: 20px;
display: block;
}- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA