.messageStackSuccess fade in and fade out?

Hi All,

I was attempting to switch off the redirect to cart when something's added to the basket. I prefer the buyer to stay on the product info page, so I changed it in admin accordingly.

My question then relates to the .messageStackSuccess box that appears at the top of the screen instead. I realise I can style this with CSS and reposition it etc., etc.... I was wondering though, is there some way to make the message just appear for a few moments, then disappear again? A sort of fade in then fade out effect??

You can do this with a little javascript and library such as JQuery. If you're not already familiar with this approach then the term to search on is "easing".

You'll need to think carefully, not just about the technology, but also about you will fill the space left by the message stack. Will you leave it blank, put something in it's place, or slide the page up to fill the empty gap left behind?

Hi, thanks for the reply and the pointer..... Just to reply to your question about positioning. I'd probably just use CSS to position:absolute the .messageStackSuccess box so that the white space left behind is not an issue. I've tried already in Firebug and I'm quietly confident that I can position and style the message stack. My big challenge would be the JavaScript as I am totally unversed in JS.

I took your advice though and searched "easing". Found a great site here...... About 4/5ths down the page is some script for an "opacity tween" that fades to transparent and would be a fantastic effect when something's added to cart.

Would you be able to offer any advice how I can apply the following script to the .messageStackSuccess?? I mean, what file would I have to attache the script to?? Would it be includes/classes/message_stack.php by any chance?

PHP Code:

---

[div id="square33" style="width:50px;height:50px;background-color:#FF0000;filter:Alpha(opacity=100);"][/div]
[input type="button" value="change Opacity (100 - 0)" onClick="
opacityTween = new OpacityTween(document.getElementById('square33'),Tween.bounceEaseOut, 100, 0, 3);
opacityTween.start()"] 


---

There's a line in the message_stack.php file. How would I attach the javascript above to this element:

$this->messages[] = array('params' => 'class="messageStackSuccess larger"', 'class' => $class, 'text' => zen_image($template->get_template_dir(ICON_IMAGE_SUCCESS, DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . ICON_IMAGE_SUCCESS, ICON_SUCCESS_ALT) . ' ' . $message);

I don't know that script and it may be able to do more than you've shown, but that snippet inserts it into your php code and uses the onClick function as a trigger. This would mean that the messagestack wouldn't disappear unless the visitor clicks on it. This type of insertion and the use of onClick as a trigger is very "last year" in javascript terms.

Personally I'd opt for one of the easing function in the jQuery UI library or the jQuery Easing Plugin and in either case use a jQuery selector to attach the behaviour to the messageStack div as the page loads with a delay before the fadeout starts to give the visitor time to see the message.

Hmmm, thanks again for the help so far... but my knowledge of JS is literally zero...

I've downloaded these files:

jquery.easing.1.3.js
jquery.easing.compatibility.js


.........and uploaded them to my /includes/templates/CUSTOM/jscript folder.

Now, where would I go from here? I mean, how would I attach the behaviour to the messageStack div?? Remember I have zero JS knowledge :lookaroun

Sorry, I guess this is turning into a JS tutorial request...

I read on Google that to attach a behaviour I'd have to do something like this:

$('div.product').attach(aBehaviour, { anOption: aThing });

How then would I incorporate this into the relevant line in the message_stack.php file, and what would I change div.product, aBehaviour, anOption and aThing to?

$this->messages[] = array('params' => 'class="messageStackSuccess larger"', 'class' => $class, 'text' => zen_image($template->get_template_dir(ICON_IMAGE_SUCCESS, DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . ICON_IMAGE_SUCCESS, ICON_SUCCESS_ALT) . ' ' . $message);

Did you guys give up on this topic? I would like to know how this would work also.