this code works fine on ie 10 but not on chrome and firefox (javascript/ajax portion)

Question

this code works fine on IE10 but on chrome and firefox the slider is not displayed .....everything else works fine

zip link: https://docs.google.com/file/d/0B5TtGpU9w1RVZWpsYzF6YWRmWWc/edit?usp=sharing

 <!DOCTYPE html>
    <!-- Website template by freewebsitetemplates.com -->
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Welcome To India</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="jquery-1.10.2.min.js"></script>
    <script src="jquery.cycle.all.js"></script>
    <script type="text/javascript">
    $('#slider').cycle({ 
    fx:     'turnRight', 
    speed:  'slow', 

    next:   '#next', 
    prev:   '#prev' 
    });
    </script>
    </head>
    <body>
    <div id="background">
    <div id="page">
    <div id="header">
    <div id="logo">
    <a href="index.php"><img src="" alt="LOGO" height="112" width="118"></a>
    </div>
    <div id="navigation">
    <ul>
    <li class="selected">
    <a href="index.php">Home</a>
    </li>
    <li>
    <a href="about.php">Discover India</a>
    </li>
    <li>
    <a href="forum.php">Forum</a>
    </li>
    <li>
    <a href="tripplanner.php">Trip Planner</a>
    </li>
    <li>
    <a href="holidays.php">Holidays</a>
    </li>
    <li>
    <a href="news.php">Cuisines</a>
    </li>
    <li>
    <a href="contact.php">Contact</a>
    </li>
    </ul>
    </div>
    </div>
    <div id="contents">
    <div id="adbox">
    <div id="wrapper">
    <div id="container">
    <div class="controller" id="prev"></div>
    <div id="slider">
    <img src="Best-Heavy-Bike-Image-960x720.jpeg" width="100%" height="100%" alt="bike">
    <img src="Jumping-Cute-Dophin-Image-960x720.jpg" width="100%" height="100%" alt="dolphin">
    <img src="Nikon-D800-Skeleton-Image.jpeg" width="100%" height="100%" alt="nikon">
    </div>
    <div class="controller" id="next"></div>
    </div>
    </div>

    <h1>Enjoy the holidays in India</h1>
    <p>
    <a href="index.php">Welcome To India</a> About India <a href="forum.php">Forum</a>.
    </p>
    </div>
    <div id="main">
    <div class="box">
    <div>
    <div>
    <h3>Latest Blog</h3>
    <ul>
    <li>
    <h4><a href="news.php">Popular Monuments</a></h4>
    <p>
    all popular monuments listed here
    </p>
    </li>
    <li>
    <h4><a href="news.php">Popular Tourists Spots</a></h4>
    <span>May 29, 2023</span>
    <p>
    all popular tourist places are listed here
    </p>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div id="testimonials" class="box">
    <div>
    <div>
    <h3>History</h3>
    <p>
    History of india <span>- <a href="index.php">Welcome To India</a></span>
    </p>
    </div>
    </div>
    </div>
    </div>
    <div id="sidebar">
    <div class="section">
    <a href="rooms.jpg"><img src="images/rooms.jpg" alt="Img"></a>
    </div>
    <div class="section">
    <a href="tripplanner.php"><img src="images/dive-site.jpg" alt="Img"></a>
    </div>
    <div class="section">
    <a href="holidays.php"><img src="images/food.jpg" alt="Img"></a>
    </div>
    </div>
    </div>
    </div>
    <div id="footer">
    <div>
    <ul class="navigation">
    <li class="active">
    <a href="index.php">Home</a>
    </li>
    <li>
    <a href="about.php">Discover India</a>
    </li>
    <li>
    <a href="forum.php">Forum </a>
    </li>
    <li>
    <a href="tripplanner.php">Trip Planner</a>
    </li>
    <li>
    <a href="holidays.php">Holidays</a>
    </li>
    <li>
    <a href="news.php">Cuisines</a>
    </li>
    <li>
    <a href="contact.php">Contact</a>
    </li>
    </ul>
    <div id="connect">
    <a href="http://www.facebook.com/" target="_blank" class="facebook"></a> <a href="http://www.twitter.com/" target="_blank" class="twitter"></a> <a href="http://www.googleplus.com/" target="_blank" class="googleplus"></a>
    </div>
    </div>
    <p>
    © 2013 by Roy
    </p>
    </div>
    </div>
    </body>
    </html>

Answer 1

You need to wrap following code in document.ready()

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'turnRight', 
        speed:  'slow', 

        next:   '#next', 
        prev:   '#prev' 
    });
});

this code works fine on ie 10 but not on chrome and firefox (javascript/ajax portion)

Question

1 answers

solution1
2 ACCPTED 2013-10-02 14:53:21

this code works fine on ie 10 but not on chrome and firefox (javascript/ajax portion)

Question

1 answers

solution1 2 ACCPTED 2013-10-02 14:53:21

solution1
2 ACCPTED 2013-10-02 14:53:21