SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple spry blind effects not releasing var

    Hello,

    I am using the SpryEffects library for a blind effect onmouseover within a defined list. It works perfectly when I have only one dt listening. When I try to scale up to 2 or more, the var is not released so the blind effect does not work for anyother dt.

    Code HTML4Strict:
     <dt onmouseover="blind_effect.start(); return false;"><a href="cabinets.html" class="product_name">Cabinets</a></dt>
     
            <dd id="menuCabinets" class="hideInitially">HuntWood, HERTCO, Wood-Mode, Mid Continent, DeWils, Strasser, Founders Choice</dd>
     
      <script type="text/javascript">
    	var blind_effect = new Spry.Effect.Blind('menuCabinets', {duration:500, from: '0%', to: '100%', toggle:true});
    </script>     
           <dt onmouseover="blind_effect.start(); return false;"><a href="acrylic_counter_tops.html" class="product_name">Acrylic Counter Tops</a></dt>
            <dd id="menuACRcount" class="hideInitially">Corian, HI-MACS LG, Staron, Avonite, SileStone, Cambria, Mystera</dd>
            <script type="text/javascript">
    	var blind_effect2 = new Spry.Effect.Blind('menuACRcount', {duration:500, from: '0%', to: '100%', toggle:true});
     
    </script>

    I am sure there is a better way to call this rather than inline script tags, but currently I am just prototyping this. In the code, I have blind_effect, and blind_effect2. This makes only the cabinet <dd> effect work. If I change them both to blind_effect, only the Counter Top effect works.

    Any ideas on what I am doing wrong?

    Thank you

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The following code is provided by adobe from http://labs.adobe.com/technologies/s...ffects_coding/

    Presumably if you use two different variables for the blind effect, you need to have separate code to add the observer and start things off.

    Code javascript:
    var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
     
    var myObserver = new Object();
    myObserver.onPreEffect = function(eff)
    {
    	alert('onPreEffect called! The effect is running in '+(eff.direction == Spry.forwards?'forward':'backward')+' direction');
    };
    myObserver.onStep = function(eff)
    {
    	alert('onStep called!');
    };
    effect.addObserver(myObserver);
     
    effect.start();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will give it a try. I scanned that web page but did not see that nugget. Thanks again.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks again pmw57 for pointing me in the right direction. I added the observer code, to the head of my document and commented out the alerts. Then I moved the effect.start() to the onmouseover within the <dt> tag.

    Code JavaScript:
         var myObserver = new Object();
                    myObserver.onPreEffect = function(eff)
                    {
                        //alert('onPreEffect called! The effect is running in '+(eff.direction == Spry.forwards?'forward':'backward')+' direction');
                    };
                    myObserver.onStep = function(eff)
                    {
                        //alert('onStep called!');
                    };
                    blind_effect0.addObserver(myObserver);

    HTML Code:
       <dt onmouseover="blind_effect0.start();  return false;"><a href="cabinets.html" class="product_name">Cabinets</a></dt>
          
            <dd id="menuCabinets" class="hideInitially">HuntWood, HERTCO, Wood-Mode, Mid Continent, DeWils, Strasser, Founders Choice</dd>
    Finally I created the corresponding vars at the foot of the document.
    Code JavaScript:
    var blind_effect0 = new Spry.Effect.Blind('menuCabinets', {from: '0%', to: '100%', toggle:true});

    Thanks


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
  •