0

Recently, I've been trying to work with Prototype & Scriptaculous to have a rather simple SlideDown & ScrollTo effects to fill out a form for their application. It works fine in FF3, FF4, Chrome, Safari, Opera, IE9, and IE8. I knew IE6 would be an issue, but I thought I could get IE7 to work with a couple slight modifications.

The fix of setting the width of the div did not fix the issue.

Currently, it is not working in IE7 and I'm at a loss for why. I'm not a ninja at JavaScript and would appreciate any help given.

XHTML Structure:

<div id="scrollPoint"></div>
<div id="slideForm" style="display:none;">
    <div style="position: relative">
        <div class="separator" style="padding:5px 0"></div>
        <h3 class="fhgroupblue">Apply for this Position:</h3>
        <ucl:ApplicationForm id="WebUserForm" runat="server" />
    </div>
</div>

Javascript:

<script type="text/javascript">
    function hideDetails() {
        if ($('showFormLink').style.visibility != "hidden") {
            $('showFormLink').style.visibility = 'hidden'; Effect.SlideDown($('slideForm'));
        }
        Effect.ScrollTo('scrollPoint'); return false;
    }
</script>

Trigger:

<div style="text-align:center;">
    <a id="showFormLink" onclick="hideDetails();">Apply!</a>
</div>

CSS:

#jobDetails #slideForm {
padding-right: 10px;
width: 400px;}
al3xnull
  • 866
  • 1
  • 13
  • 29
  • I just tested it in ie7 and it works: http://jsfiddle.net/rkMAZ/ – Willem Feb 24 '11 at 14:31
  • @Willem Didn't know about that site. Thanks. It must be something I'm putting into the content then. I'll have to poke around. It is some pretty heavy markup with what I'm trying to SlideDown. – al3xnull Feb 24 '11 at 15:26
  • If it's the content of ucl:ApplicationForm then try the w3c validator to find html-errors. http://validator.w3.org/ – Willem Feb 24 '11 at 16:03

1 Answers1

1

Figured this out -- Posting solution for possible other troubled users. For those that are using SiteCore, don't forget to add:if(!Prototype) to the top of your included Prototype.js file. This is due to SiteCore rolling in it's own Prototype library with the Web Forms for Marketers.

Here's what we did:

  1. Added if(!Prototype) to the top of our included Prototype.js file
  2. In /sitecore/shell/controls/lib/{/prototype, /Scriptaculous}, updated the JavaScript libraries to their newest versions.
  3. Magic happened and everything is back to working in IE6 & 7 the way that it was supposed to.
al3xnull
  • 866
  • 1
  • 13
  • 29