自定义dnn皮肤无法检测到底部滚动但它的工作方式相反(7.1.1)

时间:2013-09-08 16:00:55

标签: javascript html css dotnetnuke dotnetnuke-module

首先我认为这是JS问题,但这是皮肤问题。
并且提到这个问题发生在Chome和FF,但在IE中它出于某种原因。

我是第一次为 DNN 设计皮肤,直到我发现我做错了之后一切正常:(。

我创建了一个内容窗格上的简单皮肤。在该内容窗格中,我添加了自定义模块,当用户滚动到页面底部时,动态加载元素(我将新元素附加到div)。

我的模块在“DarkKnightSkin”上正常工作,但在我的自定义皮肤上,我认为我错过了一些东西,所以欢迎任何帮助:)

问题当我滚动到底部时没有任何反应。但是当我滚动到顶部时,它会触发动作并执行它需要做的事情。我在这里做错了什么?

这是skin.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>

这是skin.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.asmxskin.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;}

2 个答案:

答案 0 :(得分:1)

我首先看看DarkKnight加载了哪些JS资源(查看ASCX,或查看应用了外观的页面的HTML源代码),看看哪些资源加载了,哪些资源没有加载你的皮肤文件。

答案 1 :(得分:0)

对于其他遇到此类问题的人,请尝试将form {height: 100%;}放入CSS中。这解决了我的页面高度问题。 DNN将所有内容包装在表单标记内,很容易忘记它在那里。