SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Blind down" effect

    I'm working on this project and want to add a "blind down" effect to the translucent content area so that when you click on a link on the left nav, the content portion on the right will roll down and lock into place. I found this script that seems to do what I want but I'm having trouble implementing it. In both IE and FF, it flickers once before it goes down. In IE, it's even worse in that after it finishing scrolling, all of the content disappears. Also, as it scrolls, it sometimes scrolls smoothly but sometimes is jumpy. (To see what I'm talking about, click on 'CSS Zen Garden' -- that's the only one I have hooked up so far.)

    I found some bug fixes on the wiki but they didn't help. Any ideas either about how to fix this script and/or another similar script that might work better?

    Here's a link to the Javascript file with the main functions, or here's the main function written out:

    Code:
    Effect.BlindDown = function(element) {
      element = $(element);
      var elementDimensions = element.getDimensions();
      return new Effect.Scale(element, 100, Object.extend({ 
        scaleContent: false, 
        scaleX: false,
        scaleFrom: 0,
        scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
        restoreAfterFinish: true,
        afterSetup: function(effect) {
          effect.element.makeClipping().setStyle({height: '0px'}).show(); 
        },  
        afterFinishInternal: function(effect) {
          effect.element.undoClipping();
        }
      }, arguments[1] || {}));
    }
    Here's the HTML event handler portion:

    HTML Code:
    <div class="projectHead" onclick="Effect.BlindDown('frogBlind')"><img src="_images/colFrog.jpg" alt="CSS Zen Garden" /><h3><a href="#" onclick="
    	showHide('webDescription', 0); 
    	showHide('gamesDescription', 0); 
    	showHide('appsDescription', 0); 
    	showHide('otherDescription', 0);
    	showHide('description1', 1); 
    	showHide('description2', 0); 
    	showHide('description3', 0); 
    	showHide('description4', 0); 
    	showHide('description5', 0); 
    	showHide('description6', 0); 
    	showHide('logoDefault', 0);
    	showHide('logoFrog', 1);
    	showHide('logoSmoky', 0);
    	showHide('logoBIR', 0);
    	showHide('logoTAL', 0);
    	showHide('logoGrandma', 0);
    	showHide('logoDocTypes', 0);
    	return false; ">CSS Zen Garden</a></h3>
    	<ul class="projectItems">
    		<li>Concept Note (pdf)</li>
    		<li>Change Docs (pdf)</li>	
    		<li><a href="http://www.susanlitton.com/school/ai/css/zen/index.html" title="CSS Zen Garden">LAUNCH</a></li>
    	</ul>
    </div> <!-- end projectHead	 -->		
    And here's the div that's being targeted:

    HTML Code:
    <div class="projectContentWrapper" id="frogBlind">
    	<div class="projectContentHeader"><h1>CSS Zen Garden</h1></div>
    	<div class="projectContentBody">
    		<h2>Goals</h2>
    			<p>The goal of this particular project was to take existing page of HTML and create an entirely new layout and design using only CSS. The HTML was not modified in any way.</p>
    		
    		<h2>Details</h2>
    			<p>I knew I wanted to create a frog pond design. I wanted the layout to be fluid, much the way a stream might meander around through the terrain. I wanted the background to look as if it was on an old sheet of linen parchment with frayed edges. A challenge was to design the background image so that it was small enough to avoid a long download time yet large enough so that the repetition wouldn't be obvious</p>			
    			
    		<h2>Skills</h2>
    			<ul class="projectContentItems">
    				<li>CSS</li>
    				<li>Photoshop</li>
    			</ul>		
    	</div> <!-- end projectContentBody -->
    	<div class="projectContentLaunch"><a href="http://www.susanlitton.com/school/ai/css/zen/index.html"><img src="_images/colFrog.jpg" alt="CSS Zen Garden" /> Launch Site</a></div>
    </div> <!-- end projectContentWrapper -->

  2. #2
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It happened that it display the whole div before start to animate the blind down effect, maybe you can try to hide it, set the height to 0, show it again before start blind animation.

    or combine the effect with alpha transparency transition from 0 to 100, that would be nicer.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Well right on! I was all set to tell you that I had tried the display:none and it didn't work. And I had . . . and it hadn't. But I decided to try it again to make sure and that works fine to stop the flicker. I think I had made the change locally and then refreshed the copy on the server. DUH! LOL

    The content still disappears in IE. Any magic words of wisdom for that?

    The alpha transparency sounds like a nice touch. I want to get this working first but may add that later. Thanks. : )

    As an update, I've made the change above and also now any of the links on the left will call the blind down effect but the content still disappears from IE. If anyone can see what's causing that, I'd love to know. What I've put together so far is that it's the content in the projectContentBody class that's disappearing, although the dotted line under the h2's remains. Here's the style sheet for those two:

    Code:
    .projectContentBody {
    	position: relative;
    	padding: 10px;
    	min-height: 1px;
    	}
    	
    .projectContentBody h2 {
    	font-size: 14px;
    	border-bottom: 1px dotted #000000;
    	}
    Last edited by tryin_to_learn; Apr 14, 2007 at 08:04. Reason: Update


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
  •