CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
expenguin
expenguin

Reputation: 1124

Javascript works locally, will not work on webserver

So I have a banner which has eight links that remain static on the banner. When you click one, the background is supposed to slide to the left or right to goto the corresponding picture. This all works great on my local machine, but when I upload it to my webserver, the javascript doesn't seem to do anything. As far as I can tell, it's loaded. but the links, when clicked, don't respond.

I should note that I'm moving HTML I've created over to a PHP page, and I've heard that PHP doesn't interact with JS initially, but that shouldn't affect just HTML, right?

Here is a JSFiddle link.

HTML

<div id='main-banner-space'>
    <div class="slider-wrapper">

        <div id="slide1" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide1 -->

        <div id="slide2" class="main-slide">
             <div id="slidetext">
                text
            </div>
        </div><!-- end of slide2 -->

        <div id="slide3" class="main-slide">
            <div id="slidetextb">
                text
            </div>
        </div><!-- end of slide3 -->

        <div id="slide4" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide4 -->

        <div id="slide5" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide5 -->

        <div id="slide6" class="main-slide">
            <div id="slidetextb">
                text
            </div>
        </div><!-- end of slide6 -->

        <div id="slide7" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide7 -->

        <div id="slide8" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide8 -->

    </div> <!-- end of slider-wrapper -->  

    <div id='menu'>
        <div id='link1'>link</div>
        <div id='link2'>link</div>
        <div id='link3'>link</div>
        <div id='link4'>link</div>
        <div id='link5'>link</div>
        <div id='link6'>link</div>
        <div id='link7'>link</div>
        <div id='link8'>link</div>
    </div>
</div><!--end of main-banner-space-->

CSS

a#banner { text-decoration:none; }

#main-banner-space {
    position:relative;
    overflow:hidden;
    width:930px;
    height:320px;
    top: 10px;
    left:-5px;
    border: 1px solid #dad8d8;
}

#menu {
    position:absolute;
    height:320px;
    width:260px;
    background-repeat:no-repeat;
    z-index:100;
    top:0px;
    left:-5px;
}

.slider-wrapper {
    position:relative;
    left:0;
    width:9000px;
    height:100%;
}

.main-slide {
    position:relative;
    width:930px;
    height:100%;
    float:left;
}

#slide1 {width:930px; background-image:url(../_Images/1.png);}
#slide2 {width:930px; background-image:url(../_Images/2.png);}
#slide3 {width:930px; background-image:url(../_Images/3.png);}
#slide4 {width:930px; background-image:url(../_Images/4.png);}
#slide5 {width:930px; background-image:url(../_Images/5.png);}
#slide6 {width:930px; background-image:url(../_Images/6.png);}
#slide7 {width:930px; background-image:url(../_Images/7.png);}
#slide8 {width:930px; background-image:url(../_Images/8.png);}

#link1 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link2 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link3 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link4 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link5 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link6 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link7 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link8 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}

#link1:hover { cursor:pointer; background-position: 0 -40px; }
#link2:hover { cursor:pointer; background-position: 0 -40px; }
#link3:hover { cursor:pointer; background-position: 0 -40px; }
#link4:hover { cursor:pointer; background-position: 0 -40px; }
#link5:hover { cursor:pointer; background-position: 0 -40px; }
#link6:hover { cursor:pointer; background-position: 0 -40px; }
#link7:hover { cursor:pointer; background-position: 0 -40px; }
#link8:hover { cursor:pointer; background-position: 0 -40px; }

#slidetext {
    display:inline-block;
    position:relative;
    width:660px;
    left:270px;
    top:220px;
    font-size:16px;
    font-weight:bolder;
    font-style:italic;
}

#slidetextb {
    display:inline-block;
    position:relative;
    width:660px;
    left:270px;
    top:220px;
    font-size:15px;
    font-weight:bolder;
    font-style:italic;
}

JS

(function ($) {
    // find all slides
    var slides = $('.main-slide');
    // starting index
    // click listener
    $('#link1').click(function(){
        // index
        i = 1;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(0).position().left)},
            800
        );
    });
    $('#link2').click(function(){
        // index
        i = 2;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(1).position().left)},
            800
        );
    });
    $('#link3').click(function(){
        //index
        i = 3;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(2).position().left)},
            800
        );
    });
    $('#link4').click(function(){
        // index
        i = 4;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(3).position().left)},
            800
        );
    });
    $('#link5').click(function(){
        //index
        i=5;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(4).position().left)},
            800
        );
    });
    $('#link6').click(function(){
        // index
        i=6;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(5).position().left)},
            800
        );
    });
    $('#link7').click(function(){
        // index
        i=7;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(6).position().left)},
            800
        );
    });
    $('#link8').click(function(){
        // index 
        i=8;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(7).position().left)},
            800
        );
    });
});

Upvotes: 0

Views: 152

Answers (4)

Andy
Andy

Reputation: 63524

Just to add to what Nathan Harkenrider wrote, it's possible you were confusing two similar looking things.

1) This an immediately-invoked function expression that allows you to set up a module scope for your code as well as allowing you to pass parameters in from "the outside". In this example we're passing in jQuery as $.

(function ($) {
  // code here
}(jQuery));

2) The second, as was mentioned, was jQuery's alternative document.ready function which looks similar but is different.

You can use either this:

$(document).ready(function () {
  // code here
});

Or this:

$(function () {
  // code here
});

Upvotes: 1

ins0
ins0

Reputation: 3928

Don't use 

(function ($) {

instead use

$(function() {

which is shorthand for

$(document).ready(function() {

Upvotes: 0

Meko Perez Estevez
Meko Perez Estevez

Reputation: 922

You have to wait to load the DOM

$(document).ready(function(){
        //Your Code goes here
});

http://jsfiddle.net/Fc4y7/2/

Upvotes: 1

Nathan Harkenrider
Nathan Harkenrider

Reputation: 566

I don't think your syntax for the jQuery ready event (if that's your intent) is correct. Changing your JavaScript to the following fixes your fiddle.

$(function() {
...
});

See: http://api.jquery.com/ready/

Upvotes: 4

Related Questions