Question

I am making a custom page in Facebook, using FBML and JavaScript on a canvas tab.

I want to make a slider like you usually do with jQuery, unfortunately Facebook has no jQuery support (yet), so I figured I will make the slide with plain old JavaScript.

After using the slide() function once, I get “slide() is not a function” error in the Firebug console.

Here’s the code:

<script>
    <!--
        function slide(reqPos){
            desSlideState = reqPos;
            curSlideState = getCurSlideState();
            toSlide = desSlideState - curSlideState;
            pxToSlide = toSlide * (-520);

            movCount = 0;
            timer = setInterval(function(){eSlide(slide, pxToSlide);},100);
        }
        function getCurSlideState(){
            slide = document.getElementById("slider");
            var slideLeft = slide.getStyle("left");
            var slideLeft = parseFloat(slideLeft);
            var slideState = slideLeft/-520;
            return slideState;
        }
        function eSlide(elemToMove, lengthToMove){
            curLeft = elemToMove.getStyle("left");
            curLeft = parseFloat(curLeft);

            newLeft = curLeft + (lengthToMove/10);
            elemToMove.setStyle("left", newLeft + "px");

            movCount++;

            if(movCount == 10){
                clearInterval(timer);
                return false;
            }
        }
    //-->
</script>

<div id="fb-wrapper">
    <h1>Loads Solutions LTD</h1>

    <div class="loads-nav-wrap">

      <div class="fb-nav" id="nav1"><a href="http://www.loads.co.il/hosting.php" onclick="slide(0); return false;">Server<br />Hosting</a><div></div></div>

      <div class="fb-nav" id="nav2"><a href="http://www.loads.co.il/dedicated.php" onclick="slide(1); return false;">Dedicated<br />Servers</a><div></div></div>

      <div class="fb-nav" id="nav3"><a href="http://www.vcp.co.il/" onclick="slide(2); return false;">Web Design<br />&Development</a><div></div></div>

      <div class="fb-nav" id="nav4"><a href="http://www.loads.co.il/vps.php" onclick="slide(3); return false;">VPS</a><div></div></div>

      <div class="fb-nav" id="nav5"><a href="http://www.loads.co.il/exchange.php" onclick="slide(4); return false;">Exchange MailBoxes</a><div></div></div>
</div>

<div id="content-slide">
    <div id="slider" style="left:0">
        <div class="slide-content">
            <h3 id="test-id">content1</h3>
        </div>
        <div class="slide-content">
            <h3>content2</h3>
        </div>
        <div class="slide-content">
            <h3>content3</h3>
        </div>
        <div class="slide-content">
            <h3>content4</h3>
        </div>
        <div class="slide-content">
            <h3>content5</h3>
        </div>
    </div>
</div>

Don’t worry about HTML not being valid, Facebook canvas wouldn’t work otherwise.

Answer 1

This line here is overwriting your slide function:

slide = document.getElementById("slider");

You need a var to make it local, like this:

var slide = document.getElementById("slider");

Without the var it’s setting it as a global variable…overwriting your slide function from earlier. Always put var when declaring a local variable, otherwise it may cause global conflicts like it did here.