Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I have created a test HTML page that contains the code for the web part in question. From the test page, I can use the scrolling feature just fine as it works as expected. When I take the same code and put it into a web part, the scrolling quits working. Any Ideas as to why this might be happening and how to solve it would be greatly appreciated as I have fought with this for some time. The goal is to pull the items from a list to populate the content.

<html>
<head>
<style type="text/css">
#slideshow 
{ 
    width: 676px; 
    height: 337px; 
    float: left;
}
.sliderwrapper 
{ 
    width: 676px; 
    height: 337px; 
    float: left;
}

.contentdiv 
{ 
    width: 676px; 
    height: 337px; 
    float: left;
}
.contentdiv .figure 
{ 
    width: 676px; 
    height: 337px; 
    float: left
}
.contentdiv .article 
{ 
    width: 243px; 
    height: 300px; 
    float: right; 
    background: url(images/bg_01.png) repeat; 
    padding: 37px 0px 0px 17px; 
    margin-top: -337px; 
    position: relative; 
    z-index: 50;
}
.contentdiv .article h2
{ 
    font-size: 26px; 
    line-height: 29px; 
    padding-bottom: 24px;
}
.contentdiv .article h2.msize 
{ 
    font-size: 28px; 
    line-height: 1em;
}
.contentdiv .article h2.msize2 
{ 
    font-size: 28px; 
    line-height: 1.1em; 
    letter-spacing: -1px; 
    padding-top: 60px;
}
.contentdiv .article h2 span 
{ 
    color: #000000;
}
.contentdiv .article p 
{ 
    font-size: 11px; 
    color: #000000; 
    text-transform: uppercase; 
    font-family: Arial;
}
.contentdiv .article p a 
{ 
    color: #000000;
}

.contentdiv .article ul 
{
    width: 208px; 
    float: left; 
    border-bottom: 1px solid #000000;
}
.contentdiv .article ul li 
{ 
    width: 208px; 
    float: left; 
    font-size: 11px; 
    color: #000000; 
    text-transform: uppercase; 
    font-family: Arial; 
    border-top: 1px solid #000000; 
    line-height: 1em; 
    padding: 6px 0px;
}
.contentdiv .article ul li a 
{ 
    color: #000000; 
    text-decoration: none;
}
.contentdiv .article ul li a: hover 
{ 
    text-decoration: underline;
}

#paginate-slider 
{ 
    width: 368px; 
    height: 100px; 
    float: left; 
    padding: 0px 0px 0px 25px; 
    margin-top: -110px; 
    position: relative;
}
#slide-scroll.scrollable 
{ 
    width: 368px; 
    height: 100px; 
    position: relative; 
    overflow: hidden; 
    position: relative;
}
#slide-scroll.scrollable .items 
{ 
    width: 20000em; 
    height: 100px; 
    position: absolute; 
    clear: both;
}
#slide-scroll.scrollable .item 
{ 
    width: 302px; 
    height: 40px; 
    float: left; 
    padding: 60px 33px 0px 33px;
}
#slide-scroll.scrollable .item .figure 
{ 
    width: 57px; 
    height: 40px; 
    float: left; 
    margin-right: 4px; 
    position: relative;
}
#slide-scroll.scrollable .item .figure img 
{ 
    width: 56px; 
    height: 38px; 
    float: left; 
    border: 1px solid #FFFFFF;
}
#slide-scroll.scrollable .item .last 
{ 
    margin-right: 0px;
}
#slide-scroll.scrollable .item a 
{ 
    text-decoration: none;
}

#slide-scroll.scrollable .item .hightlight 
{ 
    width: 56px; 
    height: 38px; 
    float: left; 
    border: 1px solid #705117; 
    position:  absolute; 
    top: 0px; 
    left: 0px; 
    display: none;
}
#slide-scroll.scrollable .item a:hover .hightlight,
#slide-scroll.scrollable .item a.selected .hightlight,
#slide-scroll.scrollable .item a:hover .tooltip 
{ 
    display: block; 
    cursor: pointer;
}

#slide-scroll.scrollable .item .tooltip
{ 
    width: 120px; 
    height: 26px; 
    float: left; 
    background: url(images/bg_tooltip.png) no-repeat; 
    font-size: 11px; 
    color: #000000; 
    text-transform: uppercase; 
    font-family: Arial; 
    text-align: center;  
    position: absolute; 
    display: none; 
    top: -38px; 
    left: -28px; 
    z-index: 500; 
    padding-top: 10px;
}


.prevPage, .nextPage 
{ 
    width: 22px; 
    height: 22px; 
    background: url(images/arrow_previous.png) no-repeat; 
    text-indent: -9999px; 
    position:  absolute; 
    left: 26px; 
    top: 68px; 
    outline: 0px;
}
.nextPage 
{ 
    background: url(images/arrow_next.png) no-repeat !important; 
    left: auto !important; 
    right: 0px !important;
}

</style>

<script type="text/javascript" src="js/contentslider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.tools.js"></script>
</head>
<body><div id="slideshow">
    <div id="slider" class="sliderwrapper">

        <div class="contentdiv">
            <div class="figure">
                <img src="images/testslider01.jpg" alt="PHOTO">
            </div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider02.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider03.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider04.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider05.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider01.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider02.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider03.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider04.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider05.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider01.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider02.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider03.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider04.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>

        <div class="contentdiv">
            <div class="figure"><img src="images/testslider05.jpg" alt="PHOTO"></div>
            <div class="article">
            <h2 style="">Header</h2>
            <p><a href="#">Description</a></p>
            </div>
        </div>      
    </div>

    <div id="paginate-slider">
        <div id="slide-scroll" class="scrollable">
            <div class="items"> 
                <div class="item">          
                    <div class="figure">
                        <a href="#" class="toc" rel="1"><img src="images/testthumbnail1.jpg" alt="PHOTO" /> 
                        <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                        <a href="#" class="toc" rel="1"><img src="images/testthumbnail2.jpg" alt="PHOTO" /> 
                        <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                        <a href="#" class="toc" rel="1"><img src="images/testthumbnail3.jpg" alt="PHOTO" /> 
                        <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail4.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure last">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail5.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>         
                    </div>
                </div>

                <div class="item">
                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail1.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>         
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail2.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail3.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>         
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail4.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure last">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail5.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>
                </div>

                <div class="item">
                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail1.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail2.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail3.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>        
                    </div>

                    <div class="figure">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail4.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>         
                    </div>

                    <div class="figure last">
                    <a href="#" class="toc" rel="1"><img src="images/testthumbnail5.jpg" alt="PHOTO" /> 
                    <span class="hightlight"></span>
                        <span class="tooltip">tooltip</span></a>         
                    </div>
                </div>      
            </div>  
        </div>  

        <div id="slide-scroller" class="scroll-wrap">   
            <a href="#" class="prevPage">Previous</a>
            <a href="#" class="nextPage">Next</a>        
        </div>

        <script type="text/javascript">
            featuredcontentslider.init({
                id: "slider",
                contentsource: ["inline", ""],
                toc: "markup",
                nextprev: ["", "Next"],
                enablefade: [false, 0.1],
                autorotate: [false, 3000],
                onChange: function (previndex, curindex) {
                }
            })

            $(document).ready(function () {
                $("#slide-scroll").scrollable({
                    circular: true,
                    prev: ".prevPage",
                    next: ".nextPage"
                }).navigator();

                $( '#slide-scroll .item:nth-child(3)' ).clone().addClass( 'cloned' ).appendTo( '#slide-scroll .items' );

                $( '.prevPage, .nextPage' ).click(function() { return false; } );
            });

        </script>
    </div>
</div>
</body>
</html>
share|improve this question
    
Have you tried replacing all the $( with jQuery(? –  Per Jakobsen May 13 '12 at 19:55
    
@PerJakobsen - I have tried your suggestion with no luck. –  cvanhorn May 13 '12 at 20:03
    
ANSWER - After many trial and errors I finally saw what the problem was. There are divs in there that have classes of 'item'. That name is used for classes created by SharePoint as well, which means there are CSS settings as well. I don't know what was causing the conflict, all I know is that changing the class name of those divs fixed the issue. –  cvanhorn May 14 '12 at 0:02
add comment

1 Answer

It seems the way to load Javascript might not do it (because of location), as moving from the page into a web part, you would probably change the location.

When loading Jscript you have many ways:

  • Standard tag with the scripts loaded into a docLib (e.g. Top level site Style library is you use Publishing template, or a regular Document Library)
  • Store in the Layouts folder it is recomanded to use the (load jquery with the LoadAfterUI=false and Localizable=false)
share|improve this answer
    
Currently, the js files are being pulled from a cdn and are loading into the page. I have tried your suggestion to put the files in the layout folder - deployed trough a WSP - and they are also loaded properly. Unfortunately, the scrolling still does not function. I have verified that the binding of the click even is happening but I don't know where to go from there. –  cvanhorn May 13 '12 at 22:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.