CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cwg
cwg

Reputation: 87

jQuery is not work in other page

Jquery is not working. when, have not add it js in other page. Here, I present small example. I have 2 pages(index.html and about.html). Slideshow banner add in index page. but, banner is not available in about page. So, if, I have not add banner js(owl.carousel.min.js) in about page. So, Other jquery(back to top function) is not work in about page.

Here, I know, I can add slideshow jquery function in index page & remove from custom.js file. So, It is working fine. but, I don't want. because, this is small example. Our site is big(lots of page & js).

what can i do?

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="image/favicon.png" rel="icon" />
    <title>HomePage</title>
    <!-- CSS Part Start-->
    <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    <!-- CSS Part End-->
    </head>
    <body>
    <div id="content" class="col-sm-12">
      <!-- Slideshow Start-->
      <div class="owl-carousel">
        <div class="item"> <a href="#"><img src="image/image1.jpg" alt="" /></a></div>
        <div class="item"> <a href="#"><img src="image/image2.jpg" alt="" /></a></div>
      </div>
      <!-- Slideshow End-->
    </div>
    <div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
    <!-- JS Part Start-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!-- JS Part End-->
    </body>
    </html>

about.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="image/favicon.png" rel="icon" />
    <title>About Us</title>
    <!-- CSS Part Start-->
    <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    <!-- CSS Part End-->
    </head>
    <body>
    <div id="content" class="col-sm-12">
      <!-- Slideshow Start-->
      <h1>About US</h1>
      Content Here
      <!-- Slideshow End-->
    </div>
    <div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
    <!-- JS Part Start-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!-- JS Part End-->
    </body>
    </html>

custom.js

$(document).ready(function(){

//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
    items: 6,
    autoPlay: 3000,
    singleItem: true,
    navigation: true,
    navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    pagination: true
});

//====== Scroll to top ======//

$(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 180) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        });
jQuery('.backtotop').click(function(){
    jQuery('html, body').animate({scrollTop:0}, 'slow');
});

//
});

Upvotes: 1

Views: 382

Answers (2)

rramakrishnaa
rramakrishnaa

Reputation: 827

Include the owl.carousel.min.js file in the about page as well.

--About Page--

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="image/favicon.png" rel="icon" />
    <title>About Us</title>
    <!-- CSS Part Start-->
    <link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    <!-- CSS Part End-->
    </head>
    <body>
    <div id="content" class="col-sm-12">
      <!-- Slideshow Start-->
      <h1>About US</h1>
      Content Here
      <!-- Slideshow End-->
    </div>
    <div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
    <!-- JS Part Start-->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!-- JS Part End-->
    </body>
    </html>

Upvotes: 2

Sandeep J Patel
Sandeep J Patel

Reputation: 950

Edit the custom js with the following

$(document).ready(function () {
    //====== Slideshow ======//
    if($('.owl-carousel').length > 0){
        $('.owl-carousel').owlCarousel({
            items: 6,
            autoPlay: 3000,
            singleItem: true,
            navigation: true,
            navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
            pagination: true
        });
   }
    //====== Scroll to top ======//
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 180) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
    });
    jQuery('.backtotop').click(function () {
        jQuery('html, body').animate({
            scrollTop: 0
        }, 'slow');
    });

});

keeping the owl slider script inside the condition will solve your issue.

Upvotes: 0

Related Questions