18 replies [Last post]
acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Was this information Helpful?

Dear UbercartGeniuses,

I have a little problem, which has an answer which as yet has stymied me:

I have seen the "image-submit" contrib, but the issue is that I have a customer who is looking to create individual images for each different button Ubercart creates, complete with a ROLLOVER state.

I basically css'ed it but, of course, IE does not behave well with no text in the submit buttons... (it renders the text OVER the images, and nor will it render a rollover state on a submit). And you can't get rid of the text values on those images (update cart, for example) because the form won't submit without it... right?

So, what I need to do, I think, is alter the cart and checkout module form generation to somehow change the submit button behavior, and I simply don't know how to begin.... or, I need to have someone here point me into the right direction and show me what an idiot I yet again have been.

Ideas, anyone?

Thanks as ever,

ACB

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: Buttons turned into images... no rollover state possible?

(edit: added more descriptive title in the hopes someone has tackled this problem. Also have tried various permutations of the form in the shopping cart module but still none seem to accept rollover states in IE.... Arrgh!

digitalfrontiersmedia's picture
Offline
Getting busy with the Ubercode.
Joined: 11/08/2008
Juice: 283
Re: Re: Buttons turned into images... no rollover state possible

Have you got a URL so we can see the behaviors described, or lack thereof? And what version of IE?

CSS rollovers don't work?

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: Re: Re: Buttons turned into images... no rollover state poss

Thanks for the answer & interest. To clarify:

The text appearing over the submit buttons (when defined as having image-backgrounds) happens in IE 6,7 and 8. Currently there is a css "IF IE" hack in place in the page header which turns the submits into text over backgrounds--with no hover state. (Hovers apparently ONLY work in IE for a: elements.

(NB: the IE text buttons look very similar to the image-buttons, but the client wishes to use the image buttons.)

I have a hunch that this will have to be done with either hook-form-alter or something of the sort, but I am at a loss as to which direction to go, as I think with ANY form, IE will not support image-based hovers on a submit.... right? Could alter the form in the cart module with a

#prefix=>'<a class="blah">'
and
#suffix=>'</a>'

to include the "a" in them?

In any case, herewith the link:GO HERE. Put an item in your cart from the "gifts" section (note also that the "Add to cart" button suffers from the same problem).

========

the other issue was that if I removed the 'value' from the cart-module code (e.g. removed "update" and replaced it with nothing (so that IE would not render the text over the buttons), the form did not update the cart.)

In any case, any and all insights appreciated.

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: Re: Re: Re: Buttons turned into images... no rollover state

Well, the #prefix trick doesn't work. Nor does enclosing thebuttons in a div.

Does anyone else have any ideas? Can one submit a form with a regular link? Can one alter the drupal forms there to make the update cart, checkout, add to cart links, etc. an

jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Re: Re: Re: Re: Buttons turned into images... no rollover st

To get rid of the text on the submit button just use this style:

text-indent:-900px;
overflow:hidden;

To get rollovers working in IE, the only way I know is with jQuery.hover(), which is really easy to add. IE only recognizes :hover for anchors Sad.

digitalfrontiersmedia's picture
Offline
Getting busy with the Ubercode.
Joined: 11/08/2008
Juice: 283
Re: Re: Re: Re: Buttons turned into images... no rollover state

Supposedly you can also add hover states in IE for non-anchor elements through the use of .htc (html component) behaviors (an IE-only thing), but I have never done so myself. More here:

http://msdn.microsoft.com/en-us/library/ms531871(VS.85).aspx
http://www.xs4all.nl/~peterned/csshover.html

Scott M. Sanders's picture
Offline
Joined: 04/24/2009
Juice: 324
Cart Links

I've found that editing the display of pretty much anything in Drupal or Ubercart is annoying as all hell.

Thankfully someone developed cart links, so you can create your entire site however you please and just use Drupal/Ubercart as simply the shopping backend as it does best.

You need only some rudimentary JavaScript skills to edit the cart link URIs to meet your dynamic needs, such as editing quantities and whatnot.

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: Cart Links

Thank you all for the help.

A couple of questions (of course):

---"To get rollovers working in IE, the only way I know is with jQuery.hover(), which is really easy to add. IE only recognizes :hover for anchors ."

How would one do that? Use the #prefix, etc? If so... could you point me into this way which is "really easy to add?" I would be happy to take a stab at it (before, of course, I come whimpering back for more help).

---"Supposedly you can also add hover states in IE for non-anchor elements through the use of .htc (html component) behaviors (an IE-only thing), "

Now, if one does that, does it screw up FF and all other browsers?

----"Thankfully someone developed cart links,"

Is there a way to make that apply to the update cart buttons/checkout buttons as well, or only the "add to cart buttons" as it appears?

You guys are the best, thanks!

digitalfrontiersmedia's picture
Offline
Getting busy with the Ubercode.
Joined: 11/08/2008
Juice: 283
Quote:---"Supposedly you can
Quote:

---"Supposedly you can also add hover states in IE for non-anchor elements through the use of .htc (html component) behaviors (an IE-only thing), "

Now, if one does that, does it screw up FF and all other browsers?

Not that I know of. However, might not pass standards compliance.

jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
acb wrote: How would one do
acb wrote:

How would one do that? Use the #prefix, etc? If so... could you point me into this way which is "really easy to add?" I would be happy to take a stab at it (before, of course, I come whimpering back for more help).

So jQuery uses selectors like CSS does. Since each button has an ID already, it's simple. I assume you know how to do background sprites with CSS. If not, look that up. Basically the idea is you put the hover state and regular in the same image and then use background positoin to fixit.

#some-button{background:url(images/buttons.png) no-repeat transparent; text-indent:-900px;  overflow:hidden;width:100px;height:24px; cursor:pointer;}

This style takes the button, gets rid of the text, sets the size etc. Now make the hover style, by moving the background position. NOTE THAT THE CLASS!

#some-button.magicalHoverAction {background-position:-100px 0px}

All I did was change the background position. Now to hover? That's where jquery comes in.

$(document).ready(function(){
   $('#some-bottom').hover(function(){ $(this).addClass('magicalHoverAction') },function(){ $(this).removeClass('magicalHoverAction'); });
})

Pretty cool eh? You can put that javascript just about anywhere, as long as jquery is loaded . I DIDN'T TEST THIS!

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: acb wrote: How would one do

This (jrowney's solution) works perfectly, but it still has a small problem:

As soon as you put this:

text-indent:-900px;  overflow:hidden;

into the CSS for the button, IE moves the entire button off the page! (This is true for IE 6, 7 and 8.)

So, clever me, I tried to kill the value="blah" (changing it to value="") on the submit button and remove the text-indent from the css. IE finally works, but believe it or not, Ubercart then won't work!! (Ubercart seemingly needs a value for those buttons to submit the update cart or checkout buttons when clicked).

See THIS PAGE for code/example behavior (or the source of this page below)....

SO thankful to all of you for ideas/help....Any ideas how to fix this last issue?

==================

Here's the source:

<?php ?>

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   $('#bingo-submit-id').hover(function(){ $(this).addClass('magicalHoverAction') },function(){ $(this).removeClass('magicalHoverAction'); });
})

$(document).ready(function(){
   $('#bingo-submit-id-two').hover(function(){ $(this).addClass('magicalHoverAction') },function(){ $(this).removeClass('magicalHoverAction'); });
})

$(document).ready(function(){
   $('#bingo-submit-id-three').hover(function(){ $(this).addClass('magicalHoverAction') },function(){ $(this).removeClass('magicalHoverAction'); });
})
</script>

<style type="text/css">

body {font-family:Verdana;  font-size:12px; }

#bingo-submit-id {
color:blue;
background: transparent url(buttonbutton.jpg) no-repeat -100px;
width:100px;
height:20px;
border:1px solid white;
font-weight:bold;
cursor:pointer;
text-indent:-900px;
overflow:hidden;
}

#bingo-submit-id-two {
color:blue;
background: transparent url(buttonbutton.jpg) no-repeat -100px;
width:100px;
height:20px;
font-weight:bold;
border:1px solid white;
cursor:pointer;
}

#bingo-submit-id-three {
color:blue;
background: transparent url(buttonbutton.jpg) no-repeat -100px;
width:100px;
height:20px;
font-weight:bold;
border:1px solid white;
cursor:pointer;
}

#bingo-submit-id.magicalHoverAction,
#bingo-submit-id-two.magicalHoverAction,
#bingo-submit-id-three.magicalHoverAction  {
background-position:0px 0px;}

</style>

</head>

<body>

<?php
if ($HTTP_GET_VARS['name']) {echo '<div style="background-color:green; padding:20px;">submitted value=' . $HTTP_GET_VARS['name'] . '</div>';}
?>

<form action="test.php"  accept-charset="UTF-8" method="get" id="form">
<div style="background-color:gray; padding:10px;">
IE DOES NOT DISPLAY THE SUBMIT-BUTTON HERE<br>(other browsers do)
<div class="form-item" id="edit-name-wrapper">
<label for="edit-name">input: </label>
<input type="text" maxlength="60" name="name" id="bingo-id" size="60" value="" class="bingo-class" />
</div>
<input type="submit" name="op" id="bingo-submit-id" value="helloworld"   class="bingo-submit-class" />
</div>
</form>

<form action="test.php"  accept-charset="UTF-8" method="get" id="form-two">
<div style="background-color:#bbbbbb; padding:10px;">
IE <b>DOES</b> DISPLAY THE SUBMIT BUTTON HERE<br>but submit value text shows (value="helloworld")
<div class="form-item" id="edit-name-wrapper">
<label for="edit-name">input: </label>
<input type="text" maxlength="60" name="name" id="bingo-id-two" size="60" value="" class="bingo-class-two" />
</div>
<input type="submit" name="op2" id="bingo-submit-id-two" value="helloworld"  class="bingo-submit-class-two" />
</div>
</form>

<form action="test.php"  accept-charset="UTF-8" method="get" id="form-three">
<div style="background-color:#dddddd; padding:10px;">
IE <b>DOES</b> DISPLAY THE SUBMIT BUTTON HERE<br>but there is no value on the submit  (value="")<br>this will make ubercart not work on the<br>update cart or checkout buttons.
<div class="form-item" id="edit-name-wrapper">
<label for="edit-name">input: </label>
<input type="text" maxlength="60" name="name" id="bingo-id-three" size="60" value="" class="bingo-class-three" />
</div>
<input type="submit" name="op2" id="bingo-submit-id-three" value=""  class="bingo-submit-class-three" />
</div>
</form>

<div><a href="test.php">clear form</a></div>

</body>

</html>

jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Re: acb wrote: How would one do

Hmm... take a look at this page: http://www.kratemotors.com/ronicart2/store/product/auto-wash

The button there is working fine for me in IE7, and that's using this style

.node-add-to-cart {
background:transparent url(images/purchase.png) no-repeat scroll 0 0;
border:0 none;
color:transparent;
cursor:pointer;
height:38px;
overflow:hidden;
text-indent:-9000px;
text-transform:capitalize;
width:133px;
}

I forgot to add, that in IE, it's important to do

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
in IE.... it's important to

in IE.... it's important to do..... ?

did you not finish the sentence?

I just replaced the css with the exact css you use above, and the rendering doesn't work in IE 6,7, or 8. (Follow the link above or just go here: http://www.painter-hill.com/test.php and you will see).

Do you have a float somewhere that could be bringing it back onto the page?

jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: in IE.... it's important to

SORRY! That's some classic ADD right there! It's important to do color:transparent... and in your case, display:block. Your code also had a typo for the first button, it was missing the px on 100. Here is the style that works in IE.

#bingo-submit-id {
background:transparent url(buttonbutton.jpg) no-repeat -100px 0;
color:transparent;
border:0;
display:block;
cursor:pointer;
height:20px;
overflow:hidden;
text-indent:-9000px;
text-transform:capitalize;
width:100px;
}
jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Re: in IE.... it's important to

btw, text-transform is not necesarry, lol. Also, consider getting FireBug and IETab for Firefox. They work wonders when debugging tricky CSS.

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: Re: Re: in IE.... it's important to

I have firebug, which, I agree, is an incredible tool; I will look up ietab.

It was the display:block that did it... I should have thought of that. Thank you SO much!

acb
acb's picture
Offline
Joined: 12/06/2008
Juice: 161
Re: Re: Re: Re: in IE.... it's important to

Also: one needn't do the sprite: one can use distinct images (or presumably anything one needs to do). I suppose the single image avoids any flash in IE as the new image loads, however...

jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Re: Re: Re: Re: in IE.... it's important to

Glad you got it working! I love CSS sprites because if you think about it, it's only ONE http request per page all of your buttons! It saves a TON of traffic and it's faster. No need for "preload" javascript etc.