首先我认为这是 JS 问题,但这是皮肤问题。
并且提到这个问题发生在 Chome 和 FF 上,但在 IE 中它出于某种原因工作。
我是第一次为DNN设计皮肤,它一直很好,直到我发现我做错了什么:(。
我创建了一个简单的皮肤,在内容窗格中。在该内容窗格中,我添加了自定义模块,当用户滚动到页面底部时动态加载元素(我将新元素附加到 div)。
而且我的模块在“ DarkKnightSkin
”上运行良好,但在我的自定义皮肤上,我认为我错过了一些东西,所以欢迎任何帮助:)
问题是当我滚动到底部时没有任何反应。但是当我滚动到顶部时,它会触发动作并做它需要做的事情。我在这里做错了什么?
这是皮肤.ascx
<div id="wrapper">
<header>
<div id="top-bar-menu">
<div id="top-bar-menu-logo-holder">
<dnn:LOGO runat="server" ID="dnnLOGO" />
</div>
<div id="user-account-box" style="position: absolute; top: 5px; right: 5px;">
<dnn:USER runat="server" ID="dnnUSER" />
<dnn:LOGIN runat="server" ID="dnnLOGIN" />
</div>
</div>
</header>
<nav>
<div id="main-navigation-menu">
<ddr:MENU ID="MENU1" MenuStyle="Superfish" runat="server">
<ClientOptions>
<ddr:ClientString Name="speed" Value="fast" />
</ClientOptions>
</ddr:MENU>
</div>
<div class="clear"></div>
</nav>
<div id="main-content-holder">
<div runat="server" id="ContentPane"></div>
</div>
</div>
这是皮肤.css
body {
background:#fff;
font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
font-size:62.5%; /* Sets default font size to 10px */
color:#222222;
}
* {
margin:0;
padding:0;
}
img {
border:0;
}
p {
margin-bottom:1.75em;
}
a {
text-decoration:none;
color:#B4C835;
}
a:hover {
text-decoration:none;
color:#6CC7DC;
}
header, footer, nav, section
{
display: block;
}
.clear {
clear: both;
}
#wrapper {
background:#ffffff;
font-size:1.20em;
}
#top-bar-menu{
height: 52px;
color: #000;
width: 100%;
position: relative;
}
#user-account-box a{color:#000 !important;}
#top-bar-menu-logo-holder{
width: 150px;
}
#top-bar-menu-logo-holder img{
max-width: 50px;
}
#main-navigation-menu{
color:#000;
width:450px;
margin: auto;
position: relative;
z-index:10000;
}
nav
{
margin: 0;
width: 100%;
z-index: 9;
background-color: #ECECEC;
border-top: 1px solid #CFCACA;
}
在我的模块中:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !($('#imgLoad').is(':visible'))) {
loadMore();
}
});
更新
我创建了一个新的skin.asmx
(skin.css
空文件)并且只放了这个:
<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<div runat="server" id="ContentPane"></div>
我的模块仍然可以正常渲染,但在滚动底部不起作用并且返回顶部工作(仍然反转)。
更新 2
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {margin:0;padding:0;}
img, fieldset {border:0;} img {max-width:100%;height:auto;} .ie8 img {width:auto;height:auto;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
html {height:100%;}
body {background:#eeeeee url(images/mbg.jpg);font: 100%/1.2 Droid Sans, Helvetica, Arial, sans-serif;color:#333;min-height:100%;overflow-x:hidden;}
p {margin: 0 0 1.6em;padding:0;text-shadow:1px 1px 1px #fff;}
table{}
a {text-decoration:none;outline:none;color:#834202;}
a:hover {color:#000;text-decoration:underline;}
big {font-size: 16px;} small {font-size: 87%;} strong, b {color: #41322a;} em, i {font: italic 115% Baskerville, Georgia, "Times New Roman", Times, serif;}
em strong {color: #8e3d17;font: bold 70% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif; text-transform: uppercase;letter-spacing: .1em;}
ul, ol {margin:1.2em 0 1.4em 3em;padding:0;} li{margin:0 0 .3em 0;padding:0;text-shadow:1px 1px 1px #fff;}
code {font-family: Consolata, monospace;font-size: 100%;color: #72008a;word-spacing: -.25em;}
pre code {background: #f3efc3 url(images/line-bg.png) 0 7px;overflow-x: auto;display: block;width: 95%;padding: 2% 2.5%;margin: 30px 0;clear: both;color: #585535;font-size: 85%;line-height: 140%;border: solid 1px #e8e3b8;border-bottom: solid 1px #d9d4a8;}
blockquote {font: italic 130%/140% Baskerville, "Times New Roman", Times, serif;background: url(images/quote.png) no-repeat 5px 0;padding: 0 30px 15px;}
h1, h2, h3, h4, h5, h6 {font-family:Droid Sans, Helvetica, Arial, sans-serif;line-height:130%;font-weight:bold;color:#453630;margin:1.4em 0 .6em;text-shadow:1px 1px 1px #fff;}
h2{font-size:1.6em;font-weight:bold;color:#2a353c;clear:both;letter-spacing:-0.035em;margin:1em 0;line-height:1;}
h2.dnnPEMContTitle .Head, h2 .Head{font-size:1em;}
h3 {font-size:125%;margin:0.5em 0 .3em;letter-spacing:-.04em;}
h3 em {color: #8f0206;font: italic normal 100% "Times New Roman", Times, serif;}
h4 {margin: 1em 0 .2em;font: italic 155% Baskerville, "Times New Roman", Times, serif;}
form p {margin:0;padding:6px 0;}
/*form label {font-size:0.825em;}*/
form label small, form label em {text-transform: none;color: #8c8c86;font: italic 90% "Times New Roman", Times, serif;}
/*input, textarea, select {font-size:100%;font-family:inherit;}*/
input[type=text] {width:240px;max-width:96%;}
textarea {line-height:150%;width:96%;}
textarea:focus, input[type=password]:focus, input[type=text]:focus {outline: none;background: #faf7dd;}
input[type=reset], input[type=submit] {background: #68584c;text-transform: uppercase;color: #fff;border: none;padding: 7px 20px;border-bottom: solid 1px #55473b;cursor: pointer;-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.1);-moz-box-shadow: 0 2px 0 rgba(0,0,0,.1);box-shadow: 0 2px 0 rgba(0,0,0,.1);-webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;-webkit-appearance: none;}
input[type=reset]:hover, input[type=submit]:hover {background: #3f332a;color: #fff;}
.clear{clear:both;overflow:hidden;}