Results 1 to 7 of 7

Hybrid View

  1. #1
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Idea or Suggestion .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??

  2. #2
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: .messageStackSuccess fade in and fade out?

    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?
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  3. #3
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: .messageStackSuccess fade in and fade out?

    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);

  4. #4
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: .messageStackSuccess fade in and fade out?

    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.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  5. #5
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: .messageStackSuccess fade in and fade out?

    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

  6. #6
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: .messageStackSuccess fade in and fade out?

    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);

 

 

Similar Threads

  1. Ultimate Fade-In Slideshow
    By Finna in forum All Other Contributions/Addons
    Replies: 0
    Last Post: 5 Sep 2011, 12:31 PM
  2. Ultimate Fade In Slideshow Problem
    By top hatt in forum All Other Contributions/Addons
    Replies: 3
    Last Post: 21 Aug 2011, 11:54 PM
  3. Ultimate Fade-in slideshow in ezpage
    By perkiekat in forum General Questions
    Replies: 5
    Last Post: 27 Dec 2009, 11:47 PM
  4. 2 backgrounds, vertical fade for the center content, horizontal fade for the sides.
    By jamesdavid in forum Templates, Stylesheets, Page Layout
    Replies: 15
    Last Post: 5 Jun 2009, 05:15 AM
  5. item added - fade out
    By bigbadboy in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Sep 2008, 04:34 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR