Page 3 of 4

Posted: Mon Jan 29, 2007 6:50 pm
by Luke
thanks, kieran!

Posted: Mon Jan 29, 2007 6:51 pm
by RobertGonzalez
Did you look at my example? There is a link to atest page for demo purposes.

Posted: Mon Jan 29, 2007 6:52 pm
by Luke
I'm sorry Everah, I totally missed that post. :oops:

Posted: Mon Jan 29, 2007 6:54 pm
by Kieran Huggins
I have to admit - Everah's is much cleaner!

Posted: Mon Jan 29, 2007 7:03 pm
by RobertGonzalez
It just seems to achieve the most like what you want with the least amount of workable, usable, less obtrusive and difficult to maintain code. But I could be wrong? I have not used JQuery before and cannot speak about its uses and such.

Posted: Mon Jan 29, 2007 9:59 pm
by jyhm
Hey NSG! Why so complicated? No javascript required.

Check it Out!

FF and IE6
Work arounds for others maybe.

Posted: Tue Jan 30, 2007 9:25 am
by RobertGonzalez
That is pretty neat. I never thought to put a transparent button over a div that contains the image, then :hover the div.

Posted: Tue Jan 30, 2007 12:00 pm
by jyhm
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: Tue Jan 30, 2007 2:40 pm
by TheMoose
My apologies for not responding, work gets the better of me quite often, and I don't do much surfing from home. I wasn't too sure where to head with transparency, but I figured that it seemed like it might give a working solution.

Glad my idea sparked some other thought, though :)

Posted: Thu Feb 01, 2007 1:25 pm
by Luke
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:

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>
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:
error console wrote:$(".replace").children().applyClass is not a function
my_rollover.js Line 29
but even though that error is coming up, it seems to be working other than the submit value thing.

Posted: Thu Feb 01, 2007 5:08 pm
by Kieran Huggins
why are you starting with wrapped inputs? you can just use the code I posted to wrap them at the beginning:

Code: Select all

$(function(){
        $('form input.replace').wrap('<a class="save button"></a>').hide().parent().click(function(){
                $(this).parents('form').submit();
        });
});
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

Posted: Thu Feb 01, 2007 5:24 pm
by nickvd
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.

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>

Posted: Fri Feb 02, 2007 6:50 pm
by Luke
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. :-D

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;
}
EDIT: DARN! I forgot about Internet explorer! That freakin thing. :evil: Back to the drawing board

Posted: Fri Feb 02, 2007 9:37 pm
by Kieran Huggins
you could use my example... :twisted:

Posted: Sat Feb 03, 2007 9:57 am
by RobertGonzalez
The Ninja Space Goat wrote:EDIT: DARN! I forgot about Internet explorer! That freakin thing. :evil: Back to the drawing board
How can you forget about IE. It is the ^%@#^%*! broken browser that is used by about 80% of the world. :twisted: