www.webdeveloper.com
Results 1 to 6 of 6

Thread: running two JavaScripts in one html file

  1. #1
    Join Date
    Oct 2012
    Posts
    5

    running two JavaScripts in one html file

    I'm having an issue getting two Javascripts to work on one page. It seems that one disables the other and only one is working when previewed together. I know of a code that can be inserted so that both codes can function on one page, but I just can't lay my hands on it right now. I'm sure people have answered this question before but I have done all the research and tried everything but nothing works. please help and thank you in advance


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Slide Down Box Menu with jQuery and CSS3</title>
    <!--- Nivo Slider --->
    <link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/style.css" type="text/css" media="screen" />
    <!-- The end-->

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
    <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <link href="css/home.css" rel="stylesheet" type="text/css">
    <style>
    body{
    background:#333 url(images/background.jpg) repeat top left;
    font-family:Arial;
    }
    ul.sdt_menu{
    margin-top:50px;
    }
    </style>
    </head>

    <body>
    <div class="top">
    <div class="logo">
    <a href="#"><img src="images/logo.jpg" alt="Zeus Logo"/></a>
    </div>
    </div>

    <div class="nav">
    <ul id="sdt_menu" class="sdt_menu">
    <li>
    <a href="#">
    <!--Home-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Home</span>
    <span class="sdt_descr">Zeus Promotions</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/2.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">About us</span>
    <span class="sdt_descr">Get to know us</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/1.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Portfolio</span>
    <span class="sdt_descr">Our work</span>
    </span>
    </a>
    <div class="sdt_box">
    <a href="#">In Store Promotions</a>
    <a href="#">Events</a>
    <a href="#">Distributions</a>
    <a href="#">Mall Activations</a>
    <a href="#">Campus Activations</a>
    </div>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/3.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Services</span>
    <span class="sdt_descr">Where ideas get born</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/4.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Gallery</span>
    <span class="sdt_descr">I like to photograph</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/5.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Contact Us</span>
    <span class="sdt_descr">Write to us</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/6.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Sign Up</span>
    <span class="sdt_descr">Client Or Promoter</span>
    </span>
    </a>
    <div class="sdt_box">
    <a href="#">Become A Promoter</a>
    <a href="#">Book Promoters</a>
    <a href="#">Interactive Maps</a>
    </div>
    </li>
    </ul>
    </div>
    <div class="social">
    <ul>
    <li><a href="#"><img src="social/facebook.png" title="Facebook" alt="Facebook"/></a></li>
    <li><a href="#"><img src="social/twitter.png" title="Twitter" alt="Twitter"/></a></li>
    <li><a href="#"><img src="social/linkedin.png" title="Linkedin" alt="Linkedin"/></a></li>
    <li><a href="#"><img src="social/google.png" title="Google Plus" alt="Google Plus"/></a></li>
    <li><a href="#"><img src="social/youtube.png" title="Youtube" alt="Youtube"/></a></li>
    <li><a href="#"><img src="social/mail.png" title="Contact Us" alt="Contact Us"/></a></li>
    </ul>
    </div>
    <div class="awesome_wrapper">
    <div class="awesome">
    <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
    <img src="nivo-slider/images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
    <img src="nivo-slider/images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
    <img src="nivo-slider/images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
    <img src="nivo-slider/images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
    </div>


    <h1>We are currently working on a new website.<br/> Stay tuned for more information.</h1>
    <p>
    We provide Top Calibre Promoters that are pre-screened, personality tested and geared to sell.<br><br>We Drive one on one communication between a client’s brand and a client’s target market.<br><br>Our Aim Is to provide the best possible promotional service to clients in South Africa.<br><br>Our Success is driven by our passion, continued dedication and the human touch.<br><br>
    <strong>ZEUS Promotions</strong> has Level 1 BBBEE certification.<br><br>We bring brands to life.
    </p>
    </div>
    </div>

    <div class="end">
    <div class="wrapper">
    <div class="footer">
    <h1> the footer is here </h1>
    </div>
    </div>
    <!-- Nivo Slider javasrcipt-->
    <script type="text/javascript" src="nivo-slider/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    </script>
    <!-- The JavaScript Navigation Menu-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    $(function() {
    /**
    * for each menu element, on mouseenter,
    * we enlarge the image, and show both sdt_active span and
    * sdt_wrap span. If the element has a sub menu (sdt_box),
    * then we slide it - if the element is the last one in the menu
    * we slide it to the left, otherwise to the right
    */
    $('#sdt_menu > li').bind('mouseenter',function(){
    var $elem = $(this);
    $elem.find('img')
    .stop(true)
    .animate({
    'width':'170px',
    'height':'170px',
    'left':'0px'
    },400,'easeOutBack')
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'140px'},500,'easeOutBack')
    .andSelf()
    .find('.sdt_active')
    .stop(true)
    .animate({'height':'170px'},300,function(){
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length){
    var left = '170px';
    if($elem.parent().children().length == $elem.index()+1)
    left = '-170px';
    $sub_menu.show().animate({'left':left},200);
    }
    });
    }).bind('mouseleave',function(){
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length)
    $sub_menu.hide().css('left','0px');

    $elem.find('.sdt_active')
    .stop(true)
    .animate({'height':'0px'},300)
    .andSelf().find('img')
    .stop(true)
    .animate({
    'width':'0px',
    'height':'0px',
    'left':'85px'},400)
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'25px'},500);
    });
    });
    </script>
    <!-- The end JavaScript Navigation Menu-->
    </body>
    </html>

  2. #2
    Join Date
    Oct 2012
    Posts
    4
    You have jQuery conflict. There are several ways to fix this. The most elegant way would be to combine the two into one jQuery.

    There are less elegant ways (quick fix) to resolve the conflict as well.

    http://api.jquery.com/jQuery.noConflict/

  3. #3
    Join Date
    Oct 2012
    Posts
    4
    Well.. I guess you have more fundamental problem as well.

    <script type="text/javascript" src="nivo-slider/scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    which one do you want to use? Pick one. This causes a problem as well.

  4. #4
    Join Date
    Oct 2012
    Posts
    5

    jQuery: running two JavaScripts in one html file

    Thanks man for your help and i did try your the solution on that page but it just made both the java-scripts not work. If you mind, i set-up a temporary link with my files please may you take a look at them and see what you can do. Thank Again

    download here: "http://zeuspromotions.co.za/tmp/"

  5. #5
    Join Date
    Oct 2012
    Posts
    4

    gosh, I am not going to code your page for you but here it is.

    Gosh, you need serious help with your html & css. And I am not even going to touch it. Anyway, you wanted your slider & menu jQuery to work.

    Working code below:



    <!DOCTYPE html>
    <html>
    <head>
    <title>Zeus Welcome</title>
    <!--- Nivo Slider --->
    <link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/style.css" type="text/css" media="screen" />
    <!-- The end-->

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
    <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <link href="css/home.css" rel="stylesheet" type="text/css">
    <style>
    body{
    overflow-x: hidden;
    width: 100%;
    background:#333 url(images/background.jpg) repeat top left;
    font-family:Arial;
    }
    ul.sdt_menu{
    margin-top:50px;
    }
    </style>
    </head>

    <body>
    <div class="top">
    <div class="logo">
    <a href="#"><img src="images/logo.jpg" alt="Zeus Logo"/></a>
    </div>
    </div>

    <div class="nav">
    <ul id="sdt_menu" class="sdt_menu">
    <li>
    <a href="#">
    <!--Home-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Home</span>
    <span class="sdt_descr">Zeus Promotions</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/2.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">About us</span>
    <span class="sdt_descr">Get to know us</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/1.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Portfolio</span>
    <span class="sdt_descr">Our work</span>
    </span>
    </a>
    <div class="sdt_box">
    <a href="#">In Store Promotions</a>
    <a href="#">Events</a>
    <a href="#">Distributions</a>
    <a href="#">Mall Activations</a>
    <a href="#">Campus Activations</a>
    </div>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/3.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Services</span>
    <span class="sdt_descr">Where ideas get born</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/4.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Gallery</span>
    <span class="sdt_descr">I like to photograph</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/5.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Contact Us</span>
    <span class="sdt_descr">Write to us</span>
    </span>
    </a>
    </li>
    <li>
    <a href="#">
    <!--<img src="images/6.jpg" alt=""/>-->
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Sign Up</span>
    <span class="sdt_descr">Client Or Promoter</span>
    </span>
    </a>
    <div class="sdt_box">
    <a href="#">Become A Promoter</a>
    <a href="#">Book Promoters</a>
    <a href="#">Interactive Maps</a>
    </div>
    </li>
    </ul>
    </div>
    <div class="social">
    <ul>
    <li><a href="#"><img src="social/facebook.png" title="Facebook" alt="Facebook"/></a></li>
    <li><a href="#"><img src="social/twitter.png" title="Twitter" alt="Twitter"/></a></li>
    <li><a href="#"><img src="social/linkedin.png" title="Linkedin" alt="Linkedin"/></a></li>
    <li><a href="#"><img src="social/google.png" title="Google Plus" alt="Google Plus"/></a></li>
    <li><a href="#"><img src="social/youtube.png" title="Youtube" alt="Youtube"/></a></li>
    <li><a href="#"><img src="social/mail.png" title="Contact Us" alt="Contact Us"/></a></li>
    </ul>
    </div>
    <div class="awesome_wrapper">
    <div class="awesome">
    <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
    <img src="nivo-slider/images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
    <img src="nivo-slider/images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
    <img src="nivo-slider/images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
    <img src="nivo-slider/images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
    </div>
    </div>
    </div>

    <div class="end">
    <div class="wrapper">
    <div class="footer">
    <h1> the footer is here </h1>
    </div>
    </div>
    <!-- Nivo Slider javasrcipt-->
    <script type="text/javascript" src="nivo-slider/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    //$.noConflict();
    jQuery(document).ready(function() {
    /*$(window).load(function() {*/
    jQuery('#slider').nivoSlider();
    });
    </script>
    <!-- The JavaScript Navigation Menu-->


    <script type="text/javascript">
    jQuery(function() {
    /**
    * for each menu element, on mouseenter,
    * we enlarge the image, and show both sdt_active span and
    * sdt_wrap span. If the element has a sub menu (sdt_box),
    * then we slide it - if the element is the last one in the menu
    * we slide it to the left, otherwise to the right
    */
    jQuery('#sdt_menu > li').bind('mouseenter',function(){
    var $elem = $(this);
    $elem.find('img')
    .stop(true)
    .animate({
    'width':'170px',
    'height':'170px',
    'left':'0px'
    },400,'easeOutBack')
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'140px'},500,'easeOutBack')
    .andSelf()
    .find('.sdt_active')
    .stop(true)
    .animate({'height':'170px'},300,function(){
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length){
    var left = '170px';
    if($elem.parent().children().length == $elem.index()+1)
    left = '-170px';
    $sub_menu.show().animate({'left':left},200);
    }
    });
    }).bind('mouseleave',function(){
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length)
    $sub_menu.hide().css('left','0px');

    $elem.find('.sdt_active')
    .stop(true)
    .animate({'height':'0px'},300)
    .andSelf().find('img')
    .stop(true)
    .animate({
    'width':'0px',
    'height':'0px',
    'left':'85px'},400)
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'25px'},500);
    });
    });
    </script>
    <!-- The JavaScript Navigation Menu-->
    </body>
    </html>

  6. #6
    Join Date
    Oct 2012
    Posts
    5

    Re:

    Thanks Again for all your help. My name is Brian, from South Africa. Thank You

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles