jQuery.scroll doesn't work when I use it in a template

Question

I'd like to use jQuery.scroll to display a shadow when user scrolldown in a div (and hide this shadow if scrollbar is on top). It works very well here : http://jsfiddle.net/C4S6s/.

When I put this div in a template it doesn't work :( I'm not so familiar with templates so maybe I miss something.

<script>$(".main-scroll-area").scroll(function () {

           var div = $(this);
           if (div.scrollTop() == 0)
           {
              $('.header-shadow').removeClass('shadow-scrolled');
           } else {
              $('.header-shadow').addClass('shadow-scrolled');
           }

        });

ADDITIONAL INFORMATION

Here is the css for the shadow:

.shadow-scrolled {
   -webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
   -moz-box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
   box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
}

Here is the template code that doesn't work. I use also the jQuery that I wrote above to show or hide the shadow.

<script type="text/template" id="MeetingView">
<section class="middle-column" style="background: none repeat scroll 0 0 white;bottom: 0;left: 239px;overflow: hidden;padding: 20px 0 0;position: absolute;right: 381px;top: 42px;">
    <div class="header-shadow" style="background-color: #FFFFFF;height: 61px;position: relative;width: 100%;z-index: 9;">

    </div>

    <div class="main-scroll-area" style="bottom: 0;left: 0;overflow: auto;padding-left: 20px;position: absolute;right: 0;top: 81px;height: 200px;width: 200px;">
        this is my content<br />
        when scrolldown, shadow appears<br />
        when scrollbar at 0, shadow disappears<br />
        this is my content<br />
        when scrolldown, shadow appears<br />
        when scrollbar at 0, shadow disappears<br />
        this is my content<br />
        when scrolldown, shadow appears<br />
        when scrollbar at 0, shadow disappears<br />
    </div>
</section>

You should show us the template code, other way we can't detect the problem ... — António Almeida, Feb 01 '13 at 01:07

score 0 · Answer 1 · answered Feb 07 '13 at 03:41

0

It doesn't appear that you waited for your DOM to load. Just wrap your code in a $(document).ready(). jsfiddle does that for you (see the dropdown in upper left where you can choose onload, onready, no wrap, etc).

$(document).ready(function () {
    $(".main-scroll-area").scroll(function () {

        var div = $(this);
        if (div.scrollTop() == 0) {
            $('.header-shadow').removeClass('shadow-scrolled');
        } else {
            $('.header-shadow').addClass('shadow-scrolled');
        }

    });
});

answered Feb 07 '13 at 03:41

mrtsherman

37,770
19
83
106

Thanks Thomas. In fact, I found a part of the answer. If the jQuery is into the template it works. If the jQuery is outside, it doesn't work. Now I have to find how to call a jQuery function which is outside a template. – Julien Feb 08 '13 at 16:02
I'm afraid I don't understand what `jQuery is into the template it works. If the jQuery is outside, it doesn't work.` means. jQuery is either loaded or not loaded. Typically you should be loading it in the head section of your page via a script tag. – mrtsherman Feb 08 '13 at 16:27
the jQuery is already loaded in the head section. When I try to add the class "shadow-scrolled" to the
which is in the template it doesn't work. If the div
is outside the template, it works. I don't understand why. – Julien Feb 08 '13 at 17:26
It looks like from your posted code that you are putting html elements INSIDE of a script tag. This doesn't make a lick of sense. Script tags can only contain javascript. Nothing else. – mrtsherman Feb 08 '13 at 17:28
On second look it appears you must be using something like underscore. Is that so? http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – mrtsherman Feb 08 '13 at 17:35
The script tag that I used ( – Julien Feb 08 '13 at 17:46

score 0 · Answer 2 · edited Feb 09 '13 at 21:04

0

If jQuery is put into the template it works fine. If the jQuery is outside, it doesn't work.

edited Feb 09 '13 at 21:04

Dan Blows

19,395
9
60
93

answered Feb 08 '13 at 15:33

Julien

1

Ok I think I found something. If I put the jQuery into the template it works fine. If the jQuery is outside, it doesn't work. – Julien Feb 08 '13 at 15:44
Please edit your original question rather than use an answer to provide more information. – mrtsherman Feb 08 '13 at 16:26

jQuery.scroll doesn't work when I use it in a template

2 Answers2