Results 1 to 3 of 3
  1. #1
    Join Date
    Apr 2008
    Location
    London
    Posts
    596
    Plugin Contributions
    0

    Default item added - fade out

    I've added a sneaky little effect that shows/ hides an "item added" message.
    Currently the message shows the div then, after a few seconds, hides it again.
    What I want to do is fade out instead of just hide.

    You can see it in action here (click 'add to basket' then message appears top right):
    http://tinyurl.com/sf-effect

    This is the script placed in the head:
    Code:
    <script type="text/javascript">
    function hideIt() {
      document.getElementById("message").style.display = "none";
    }
    setTimeout("hideIt()", 3000); // after 3 sec
    </script>
    Here is the CSS:
    Code:
    .messageStackSuccess {
    	width:100px;
    	float:right;
    	background-color:#b64926;
    	color:#ffff00;
    	text-transform:uppercase;
    	text-align:center;
    	font-size:80%;
    	font-weight:bold;
    	padding-right:20px;
    	}
    Thanks in advance.

  2. #2
    Join Date
    Apr 2008
    Location
    London
    Posts
    596
    Plugin Contributions
    0

    Default Re: item added - fade out

    Forgot to add the code for the actual div that's shown:

    Code:
    <div id="message"><?php
      // Display all header alerts via messageStack:
      if ($messageStack->size('header') > 0) {
        echo $messageStack->output('header');
      }
      if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
      echo htmlspecialchars(urldecode($_GET['error_message']));
      }
      if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
       echo htmlspecialchars($_GET['info_message']);
    } else {
    
    }
    ?></div>

  3. #3
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: item added - fade out

    I've always assumed that kind of thing was done with an animated gif, with increasingly faded layers.

 

 

Similar Threads

  1. .messageStackSuccess fade in and fade out?
    By limelites in forum General Questions
    Replies: 6
    Last Post: 9 Sep 2010, 02:09 PM
  2. Disable Out-of-Stock item to be added to cart
    By g00glethis1 in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 20 Jul 2010, 02:37 AM
  3. 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
  4. Replies: 0
    Last Post: 17 Mar 2009, 03:22 AM
  5. New item added to cart when editing an existing item
    By jds580s in forum General Questions
    Replies: 2
    Last Post: 23 Feb 2009, 08:39 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