Solved

SlideDown function not working onload (Scriptaculous)

Posted on 2008-10-22
4
1,993 Views
Last Modified: 2013-11-19
Hi everyone.

I have a page where I am setting animation orders using an onload function (as seen below). On load, the page fades in, I am then wanting to have "slidedown_demo" slide down in the "header div".

I have tried using the same code I have used for Fade and Appear and had no luck. If I tell the script to slidedown all the content instead of "appear" all the content it slides down however I can not make this one little div slide into it's position. The onclick test button that I have within the main paragraphs work but not when I attempt to use the onload feature that brings the rest of the content into view.

Any assistance would be greatly appreciated. Please ask if further clarification is required.

Richard.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/scriptaculous.js"></script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript">
window.onload = begin;
 
function begin()
{
new Effect.Appear(document.getElementById('DivLayout-Fadewrapper'), { duration: 2.0, delay: 4.0});
new Effect.Fade(document.getElementById('DivLayout-Loadingwrapper'), { duration: 2.0, delay: 2.0});
new Effect.SlideDown(document.getElementById('slidedown_demo'), { duration: 2.0, delay: 2.0});
 
 
}
 </script>
<script type="text/javascript">
function handleClick(elemId,href){
$(elemId).fade(); 
  setTimeout("nav('"+href+"')",1500);
return false;
}
 
function nav(href){
 location.href=href;
}</script>
 
 
</head>
 
<body>
  <div id="DivLayout-Loadingwrapper">
    <img src="images/loading.gif" alt="Loding indicator" class="loadingimage" /><br />
	<span>Now loading website - Please wait</span>
	<p>Note: Your browser must have Javascript enabled to view this website, if page content does not load
	shortly, please check your browsers settings.</p>
  </div>
  <div id="DivLayout-Fadewrapper" style="display:none">
    <div id="DivLayout-Mainwrapper">
      <div id="DivLayout-Headwrapper">
	    <div id="slidedown_demo" style="display:none; width:80px; height:80px; background:#ccc; text-align:center;">
          <div>
            This is some test content. This is some test content.
          </div>
        </div>
	  </div>
	  <div id="DivLayout-Menuwrapper">Content for  id "DivLayout-Menuwrapper" Goes Here</div>
      <div id="DivLayout-Contentwrapper">
        <p>Content for  id "DivLayout-Contentwrapper" Goes Here</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">test link</a></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
        <p>&nbsp;</p>
      </div>	  
      <div id="DivLayout-Basewrapper"><!--Creates base shadow--></div>
    </div>
	<div id="DivLayout-Copyrightwrapper">
	  <span>
		W3C Standards compliant XHTML | CSS by Richard Massey<br />
		Copyright &copy; 2008, -------------, All rights reserved.
	  </span>
	  <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link One</a>|
	  <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Two</a>|
	  <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Three</a>|
	  <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Four</a>|
	  <a href="test.html" style="margin-right:0" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Five</a>
	</div>	
  </div>
</body>
</html>

Open in new window

0
Comment
Question by:RichardMass
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22784062


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://demo.script.aculo.us/scripts/scriptaculous.js"></script>
<script type="text/javascript" src="http://demo.script.aculo.us/scripts/prototype.js"></script>
<script type="text/javascript" src="http://demo.script.aculo.us/scripts/effects.js"></script>
<script type="text/javascript">
window.onload = begin;
 
function begin()
{
new Effect.Appear(document.getElementById('DivLayout-Fadewrapper'), { duration: 2.0, delay: 4.0});
new Effect.Fade(document.getElementById('DivLayout-Loadingwrapper'), { duration: 2.0, delay: 2.0});
new Effect.SlideDown(document.getElementById('slidedown_demo'), { duration: 2.0, delay: 2.0});
 
 
}
 </script>
<script type="text/javascript">
function handleClick(elemId,href){
$(elemId).fade(); 
  setTimeout("nav('"+href+"')",1500);
return false;
}
 
function nav(href){
 location.href=href;
}</script>
 
 
</head>
 
<body>
  <div id="DivLayout-Loadingwrapper" style="position:absolute">
    <img src="images/loading.gif" alt="Loding indicator" class="loadingimage" /><br />
        <span>Now loading website - Please wait</span>
        <p>Note: Your browser must have Javascript enabled to view this website, if page content does not load
        shortly, please check your browsers settings.</p>
  </div>
  <div id="DivLayout-Fadewrapper" style="display:none">
    <div id="DivLayout-Mainwrapper">
      <div id="DivLayout-Headwrapper">
            <div id="slidedown_demo" style="display:none; width:80px; height:80px; background:#ccc; text-align:center;">
          <div>
            This is some test content. This is some test content.
          </div>
        </div>
          </div>
          <div id="DivLayout-Menuwrapper">Content for  id "DivLayout-Menuwrapper" Goes Here</div>
      <div id="DivLayout-Contentwrapper">
        <p>Content for  id "DivLayout-Contentwrapper" Goes Here</p>
        <p> </p>
        <p> </p>
        <p><a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">test link</a></p>
        <p> </p>
        <p> </p>
        <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
        <p> </p>
      </div>      
      <div id="DivLayout-Basewrapper"><!--Creates base shadow--></div>
    </div>
        <div id="DivLayout-Copyrightwrapper">
          <span>
                W3C Standards compliant XHTML | CSS by Richard Massey<br />
                Copyright &copy; 2008, -------------, All rights reserved.
          </span>
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link One</a>|
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Two</a>|
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Three</a>|
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Four</a>|
          <a href="test.html" style="margin-right:0" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Five</a>
        </div>  
  </div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:RichardMass
ID: 22790760
Your version does achieve the SlideDown effect however I am unable to set the delay times and it only seems to work if I link to http://demo.script.aculo.us/, if I link to the scriptaculous files locally it just flashes up the SlideDemo div.

Firstly I am wondering what you changed to make the SlideDemo div slidedown as it appears to be the same markup I posted except for the linking to the scriptaculous files and secondly with your version if you know why I would not be able to set the delay timing?

Any help or clarification on this will be greatly appreciated.

Richard.

I have an example here: http://www.midcompodyssey.com/test7/test.html
This is using the code above and as you can see, everything animates itself in at the same time.
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22798720
Sorry I was testing with an old version of Scriptaculous.  Ignore that one.

Seems Scriptaculous doesn't like nested divs with effects being placed concurrently.
The Appear for the outer div seems to override the SlideDown of the inner div, even when queued.

I'm going to submit a ticket to Scriptaculous bug tracker.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = begin;
 
function begin()
{
new Effect.Appear(document.getElementById('DivLayout-Fadewrapper'), { duration: 2.0, delay: 4.0});
new Effect.Fade(document.getElementById('DivLayout-Loadingwrapper'), { duration: 2.0, delay: 2.0});
new Effect.SlideDown(document.getElementById('slidedown_demo'), { duration: 2.0, delay: 4.0}); 
}
 </script>
<script type="text/javascript">
function handleClick(elemId,href){
$(elemId).fade(); 
  setTimeout("nav('"+href+"')",1500);
return false;
}
 
function nav(href){
 location.href=href;
}</script>
 
 
</head>
 
<body>
      <div id="DivLayout-Headwrapper">
            <div id="slidedown_demo" style="display:none; width:80px; height:80px; background:#ccc; text-align:center;">
<div>
            This is some test content. This is some test content.
</div>
          </div>
        </div>
  <div id="DivLayout-Loadingwrapper" style="position:absolute">
    <img src="images/loading.gif" alt="Loding indicator" class="loadingimage" /><br />
        <span>Now loading website - Please wait</span>
        <p>Note: Your browser must have Javascript enabled to view this website, if page content does not load
        shortly, please check your browsers settings.</p>
  </div>
  <div id="DivLayout-Fadewrapper" style="display:none">
    <div id="DivLayout-Mainwrapper">
          <div id="DivLayout-Menuwrapper">Content for  id "DivLayout-Menuwrapper" Goes Here</div>
      <div id="DivLayout-Contentwrapper">
        <p>Content for  id "DivLayout-Contentwrapper" Goes Here</p>
        <p> </p>
        <p> </p>
        <p><a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">test link</a></p>
        <p> </p>
        <p> </p>
        <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
        <p> </p>
      </div>      
      <div id="DivLayout-Basewrapper"><!--Creates base shadow--></div>
    </div>
        <div id="DivLayout-Copyrightwrapper">
          <span>
                W3C Standards compliant XHTML | CSS by Richard Massey<br />
                Copyright &copy; 2008, -------------, All rights reserved.
          </span>
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link One</a>|
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Two</a>|
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Three</a>|
          <a href="test.html" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Four</a>|
          <a href="test.html" style="margin-right:0" onclick="return handleClick('DivLayout-Fadewrapper',this.href);">Link Five</a>
        </div>  
  </div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:RichardMass
ID: 22804965
Not a problem, I guess until the bug is resolved I will have to use the Appear effect. Not to mater. Thank you very much for your effort and taking the time to report the bug, it's very much appreciated.

Although not resolved, I'm sure it will be sometime in the future and considering you have done all the work it would be unfair not to award you the points regardless of a resolution or not.

Thank you again and keep up the awesome work.

Richard.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question