Need advice on submit buttons for layout with multiple theme

JavaScript and client side scripting.

Moderator: General Moderators

matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

The Ninja Space Goat wrote:
matthijs wrote:Ninja, one thing I don't understand is, why have both an anchor tag and a button/input element? isn't it one or the other? Something is either a link to something else or it is a form element. In your case it seems like you're building a form, so you should use a valid form element, button or input.
I think you are all misunderstanding me. I'm fine with using an input element... SHOW me how I could do that... the whole reason behind me posting the question here was to get an answer on HOW to do it... silly geese!
Sorry about the misunderstanding then. I just saw the 2 elements and didn't understand. I'll go back to my hen house now.

have you also tried using a background image on a normal input element?

Code: Select all

#button {background:url(img/button.gif);width:100px;height:20px;border:none;text-indent:-900px;}

Code: Select all

<input type="submit" id="button" />
In Firefox this works. Not sure about all other browsers..
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

If he replaces the inputs with 'a' elements he can use the :hover pseudo classes to add rollovers (cross browser).
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You could as easily add the background image to the anchor tag without the need for the submit button. And you could use javascript to submit the form, but that is unreliable.

The hover class does not work in IE for input elements. I've tried. But they work in Firefox and Opera.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I apologize, I thought I mentioned that the buttons need a mouseover effect. Let me restate what I need:

I need to be able to define images in my css files to act as submit buttons, and these submit buttons need to have the ability to do mouseover.

matthijs, I appreciate your help, I apologize if I came off as rude. :oops:
User avatar
jyhm
Forum Contributor
Posts: 228
Joined: Tue Dec 19, 2006 10:08 pm
Location: Connecticut, USA
Contact:

Post by jyhm »

TheMoose wrote:

Code: Select all

#transparentblock {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}
Takes care of all browsers. Ranges from 0-1 (0-100 for filter), 0 being normal, 1(100) being invisible (but still the box is still rendered so as not to screw up positioning).

That way you can set transparency of the input button itself, but it still remains clickable as long as your background image for the button is visible (the background still displays, the button itself does not).
So how would you set that up?,... in the div tag? And then have a bg image for the div container? Like so:

Code: Select all

<div id="bgimagediv">
<input class="transparentblock" type="submit" name="submit" />
</div>
Or am I misunderstanding?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Everah wrote:You could as easily add the background image to the anchor tag without the need for the submit button. And you could use javascript to submit the form, but that is unreliable.
This relies on the user having javascript turned on. He needs a fall-back.
Everah wrote:The hover class does not work in IE for input elements. I've tried. But they work in Firefox and Opera.
IE and Firefox both support the :hover pseudo element on anchor tags. Firefox supports it on all other tags as well (as per the w3c spec)

@NSG: have you tried the code I posted? As far as I can tell it's exactly what you're looking for.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

If you are going to be relying on the user having javascript enabled, then you should be able to get away with this:

Code: Select all

input.button {
  border; 1px solid #000000; /* Black border for trials */
  background-image: url(image-to-use.jpg);
  background-repeat: no-repeat; /* or repeat-x or whatever */
  background-position: center center;
  background-color: transparent;
}

input.button_over {
  border; 1px solid #ff0000; /* Red border for trials */
  background-image: url(roll-image-to-use.jpg);
  background-repeat: no-repeat; /* or repeat-x or whatever */
  background-position: center center;
  background-color: transparent;
}

Code: Select all

<input type="button" value="Submit" class="button" onmouseover="this.className='button over'" onmouseout="this.className='button'"/>
No?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I'm not relying on the user having javascript enabled. Alright... one more time: I have 10-15 buttons that need to be onmouseovered and they need to be changeable from within the css document... that's it. It's ok to rely on the user having javascript for the mouseover effect, but not to submit the form.

Kieran, I think that's CLOSE to what I need, but the problem is that I'd need 10-15 of those jquery functions you posted in order to serve up the correct image for each button. Like I said, there are 10-15 different things the buttons need to say. They don't all say "Submit".

I'm going to try and use jquery... thanks kieran.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

OK, this is EXACTLY what I was looking for... thanks kieran:

Code: Select all

form .button:hover
{
	background-position: 0px 0px;
}
.button
{
	cursor: pointer;
}
form .save
{
	width: 60px;
	height: 20px;
	background: url(../images/buttons/save.gif) no-repeat 0px -20px;
	display: block;
}

Code: Select all

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

Code: Select all

                <div class="float_right" style="padding: 10px;"><input type="submit" class="replace" value="Save"></div>
OOPS! - this doesn't work in IE!!
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

The hover pseudo class only works on anchors (and like two other things) in IE. That is why I am saying that if you have Javascript reliance, use the Javascript to change the style on the button so that onMouseOver the style changes to the style that you want on the hover effect.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Everah, I know that... that's why I was using anchor tags to begin with.

Anybody have any insight on why the jquery code doesn't work in IE%AC When I click on the button nothing happens in ie.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Sorry bro, I must not be understanding you correctly or I am not communicating properly...

You want:
A button (or form input element in the shape of a button) that when mousedover, changes background imagery to something else, using CSS. Is that right?
TNSG wrote:I need to be able to define images in my css files to act as submit buttons, and these submit buttons need to have the ability to do mouseover.
I am also assuming that these submit buttons must actually perform as a submit button and process the form. Am I on the money so far?

That being said, can you not make a CSS class for a button, then make a hover class for that button (not a pseudo class, but a whole new class called hover or something to that effect), then, using javascript, when the mouse goes over the button, change the class from class to class_hover? Is that not possible? That way you have a real live button that when pressed, will do what an unstyled button does.

Or am I totally off in my assessment of what you need?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

You are right on the money, but it's much easier said than done, apparently. Kieran's method using jquery works PERFECT except in IE. His method does EXACTLY what you just said, except it doesn't work in Internet Explorer.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

oops :oops: I should learn to read the docs a little more carefully!
the jquery documentation wrote:Note: This does not execute the submit method of the form element! If you need to submit the form via code, you have to use the DOM method, eg. $("form")[0].submit();
so replace:

Code: Select all

$(this).parents('form').submit();
with:

Code: Select all

$(this).parents('form')[0].submit();
Works, tested ;-)

What the change is actually doing is grabbing the first result (there will only be one) out of the jquery object as a regular node. Thus, the submit() method being called is that element's own submit(), not the jquery method by the same name. (talk about confusing!)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

This works in IE, Opera and Firefox.

Code: Select all

<html>
<head>
<style>
input.button {
  border: 1px solid #000000; /* Black border for trials */
  background-image: url(images/click-me-test.jpg);
  background-repeat: no-repeat; /* or repeat-x or whatever */
  background-position: center center;
  background-color: transparent;
  width: 150px;
  height: 28px;
}

input.button_over {
  border: 1px solid #ff0000; /* Red border for trials */
  background-image: url(images/click-me-test-over.jpg);
  background-repeat: no-repeat; /* or repeat-x or whatever */
  background-position: center center;
  width: 150px;
  height: 28px;
}
</style>
</head>

<body>
<form>
<input type="button" value="" class="button" onmouseover="this.className='button_over'" onmouseout="this.className='button'"/>
</form>
</body>
</html>
Test it out
Post Reply