Effect.SlideDown (Scriptaculous) 在 IE7 中损坏
最近,我一直在尝试使用 Prototype & Scriptaculous 有一个相当简单的 SlideDown & ScrollTo 效果可以为其应用程序填写表格。它在 FF3、FF4、Chrome、Safari、Opera、IE9 和 IE8 中运行良好。我知道 IE6 会是一个问题,但我认为只需稍作修改就可以让 IE7 正常工作。
设置 div 宽度的修复并没有解决问题。
目前,它在 IE7 中不起作用,我不知道为什么。我不是 JavaScript 方面的高手,非常感谢您提供的任何帮助。
XHTML 结构:
<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>
触发器:
<div style="text-align:center;">
<a id="showFormLink" onclick="hideDetails();">Apply!</a>
</div>
CSS:
#jobDetails #slideForm {
padding-right: 10px;
width: 400px;}
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;}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
解决了这个问题——为其他可能遇到问题的用户发布解决方案。
对于那些使用 SiteCore 的用户,请不要忘记添加:
if(!Prototype)
到包含的 Prototype.js 文件的顶部。这是由于 SiteCore 将其自己的原型库与营销人员的 Web 表单一起引入。
这就是我们所做的:
if(!Prototype)
添加到顶部我们在 /sitecore/shell/controls/lib/{/prototype, /Scriptaculous} 中包含的 Prototype.js 文件
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:
if(!Prototype)
to the top ofour included Prototype.js file