3

I am a student and I am researching all that I can but I have gotten the two jquery functions to work fine separately, but when I try to use them both in the same html page the .pep function does not work. Am I coding this correctly?

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">

    <title>Design Fundamentals</title>
    <link href="css/Shapes.css" rel="stylesheet" type="text/css">
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">



<!-- Load local jQuery.  -->
<script src="jquery.pep.js-master/libs/jquery/jquery.js"></script>
<script src="jquery.pep.js-master/libs/modernizr.min.js"></script>

<!-- Load local lib and tests. -->
<script src="jquery.pep.js-master/src/jquery.pep.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('.square').pep();
    $('.triangle').pep();
    $('.circle').pep();
    <!--$('.peppable2').pep({  constrainTo: 'parent' });-->

  });
</script>

<link type="text/css" rel="stylesheet" href="css/bootstrap-combined.css">
    <link type="text/css" rel="stylesheet" href="css/layout.css">
    <link type="text/css" rel="stylesheet" href="css/jquery_002.css">
    <link type="text/css" rel="stylesheet" href="css/jquery.css" media="all and (min-width: 900px)">
    <link type="text/css" rel="stylesheet" href="css/iconbar.css" media="all and (min-width: 500px) and (max-width: 899px)">

    <script type="text/javascript" src="css/jquery_002.js"></script>
    <script type="text/javascript" src="css/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            var $menu = $('#menu');

            //  Toggle menu 
            $('#open-icon-menu a').click(function( e ) {
                e.stopImmediatePropagation();
                e.preventDefault();
                $menu.trigger( $menu.hasClass( 'mm-opened' ) ? 'close.mm' : 'open.mm' );                    
            });

            //  Create the menu
            $menu.mmenu({
                onClick: {
                    preventDefault  : true,
                    setSelected     : false
                }
            });

            //  Click an anchor, scroll to section
            $menu
                .find( 'a' )
                .on( 'click',
                    function()
                    {
                        var href = $(this).attr( 'href' );
                        if ( $menu.hasClass( 'mm-opened' ) )
                        {
                            $menu
                                .off( 'closed.mm' )
                                .one( 'closed.mm',
                                    function()
                                    {
                                        setTimeout(
                                            function()
                                            {
                                                $('html, body').animate({
                                                    scrollTop: $( href ).offset().top
                                                });
                                            }, 10
                                        );
                                    }
                                );
                        }
                        else
                        {
                            $('html, body').animate({
                                scrollTop: $( href ).offset().top
                            });
                        }
                    }
                );
        });





    </script>
user3116011
  • 31
  • 2
  • 1
    Loading a stylesheet from `css/jquery.js` doesn't seem to make any sense. – SquareCat Dec 18 '13 at 16:35
  • You need to use jquery.noConflict(). Please look up over the internet and you will find many links. – Poornima Dec 18 '13 at 16:37
  • always use only one version of jquery. If you need to support older plugin, migrate them. If you have not really the choice use jquery noConflict method – A. Wolff Dec 18 '13 at 16:37
  • for this website I am trying to use two different functions. The first is .pep which makes the DOM object dragable and the second is mmenu which is a responsive website layout. So I simply cant combine the two functions? I just downloaded their github file and used what was provided – user3116011 Dec 18 '13 at 16:45
  • I have updated my code to show all the head content I have. – user3116011 Dec 18 '13 at 16:50

0 Answers0