自定义dnn皮肤无法检测底部滚动，但它工作相反（7.1.1） [英] Custom dnn skin can't detect bottom scroll but it works reversed (7.1.1)

问题描述

首先我认为这是JS问题，但这是皮肤问题。

提及这个问题发生在Chome和FF，但在IE 第一次为 DNN 设计皮肤，直到我发现我有在内容窗格中我添加了我的自定义模块，当用户滚动到时，动态加载元素

我的模块在上工作得很好DarkKnightSkin 问题是，当我滚动到我的自定义皮肤我想错过的东西，所以任何帮助是欢迎的：

<底部什么也没有发生。但是当我滚动到顶部它会触发动作，做它需要做的。我在这里做错了什么？

这是skin.ascx

  < div id =wrapper> 
< header> 
< div id =top-bar-menu> 
< div id =top-bar-menu-logo-holder> 
< dnn：LOGO runat =serverID =dnnLOGO/> 
< / div> 
< div id =user-account-boxstyle =position：absolute; top：5px; right：5px;> 
< dnn：USER runat =serverID =dnnUSER/> 
< dnn：LOGIN runat =serverID =dnnLOGIN/> 
< / div> 
< / div> 
< / header> 
< nav> 
< div id =main-navigation-menu> 
< ddr：MENU ID =MENU1MenuStyle =Superfishrunat =server> 
< ClientOptions> 
< ddr：ClientString Name =speedValue =fast/> 
< / ClientOptions> 
< / ddr：MENU> 
< / div> 
< div class =clear>< / div> 
< / nav> 
< div id =main-content-holder> 
< div runat =serverid =ContentPane>< / div> 
< / div> 
< / div> 
  

这是skin.css

  body {
 background：#fff; 
 font-family：Trebuchet MSArial，Helvetica，sans-serif; 
 font-size：62.5％; / *将默认字体大小设置为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; 
} 
 
头，页脚，导航，节
 {
 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窗口）.height（）&&！（$（'＃imgLoad'）。is（'：visible'）））{
 loadMore（）; 
} 
} 
  

UPDATE


我创建了一个新的 skin.asmx 和 skin.css （空文件）只有这个：

 <％@ Control Language =vbAutoEventWireup =falseExplicit =TrueInherits = DotNetNuke.UI.Skins.Skin％> 
<％@ Register TagPrefix =dnnTagName =LOGOSrc =〜/ Admin / Skins / Logo.ascx％& 
<％@ Register TagPrefix =dnnTagName =SOLPARTMENUSrc =〜/ Admin / Skins / SolPartMenu.ascx％& 
<％@ Register TagPrefix =dnnTagName =PRIVACYSrc =〜/ Admin / Skins / Privacy.ascx％> 
<％@ Register TagPrefix =dnnTagName =USERSrc =〜/ Admin / Skins / User.ascx％> 
<％@ Register TagPrefix =dnnTagName =LOGINSrc =〜/ Admin / Skins / Login.ascx％> 
 
< div runat =serverid =ContentPane>< / div> 
  

我的模块仍然呈现很好但是在滚动底部不工作， em ）。

UPDATE 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， image 
 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;文本转换：大写;字母间距：.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％ ％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;} 
  

解决方案

我将首先看看DarkKnight加载哪些JS资源（查看ASCX，或者查看应用了皮肤的页面的HTML源代码），并查看加载了哪些资源有，没有加载到你的皮肤文件。

First I thought this is JS issue but this is skin issue.
And to mention that this issue is happening to the Chome and FF but in IE it works for some reason.

I am designing skin for the first time for DNN and it goes fine until I find out that I have made something wrong :(.

I have created a simple skin that have on content pane. In that content pane I added my custom module that load elements dynamically when user scroll to the bottom of the page (I append new elements to the div).

And my module work fine on "DarkKnightSkin" but on my custom skin I think that I have miss something so any help is welcome :)

Problem is that when I scroll to the bottom nothing happens. But when I scroll to the top it fires action and do what it need to do. What I did wrong here?

This is 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>

This is 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;
}

In my module:

 $(window).scroll(function () {        
        if ($(window).scrollTop() == $(document).height() - $(window).height() && !($('#imgLoad').is(':visible'))) {           
            loadMore();
        }
    }); 

UPDATE

I created a new skin.asmx and skin.css (empty file) and put only this:

<%@ 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>

My module still render fine but on scroll bottom doesn't work and on back to top work (still reversed).

UPDATE 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;}

解决方案

I would start by looking at what JS resources are loaded by DarkKnight (either look at the ASCX, or view the HTML source of a page with the skin applied) and see which resources are loaded there, that aren't loaded on your skin file.

这篇关于自定义dnn皮肤无法检测底部滚动，但它工作相反（7.1.1）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！