Results 1 to 7 of 7
  1. #1
    Join Date
    Jan 2009
    Posts
    2,124
    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,655
    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?
    See and test drive Zen Cart's free templates at zencarttemplates.info

    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,124
    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,655
    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.
    See and test drive Zen Cart's free templates at zencarttemplates.info

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

  7. #7
    Join Date
    Aug 2010
    Posts
    6
    Plugin Contributions
    0

    Default Re: .messageStackSuccess fade in and fade out?

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

 

 

Similar Threads

  1. 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
  2. item added - fade out
    By bigbadboy in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Sep 2008, 04:34 PM
  3. Strange blue dots using Dynamic Drive Ultimate Fade In Slideshow on my homepage.
    By gingertea in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 3 Aug 2007, 08:02 AM

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
  •