SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question problem running two scripts on one page

    HI, '
    I don't really know javascript, and I am trying to add two different jquery scripts I downloaded to the same page. Here's the javascript at the top of the page for one of them,


    <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>


    <script type="text/javascript" src="../js/mootools-1.2.1-core-nc.js"></script>
    <script type="text/javascript" src="../js/smoothmenu.js"></script>
    <script type="text/javascript">

    window.addEvent('domready', function(){
    var mySmoothMenu = new SmoothMenu("navigation");
    });

    </script>



    Then I have the javascript for the other right under it......


    <script language="javascript" type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="../scripts/jquery.slidingGallery-1.2.js"></script>
    <script language="javascript" type="text/javascript">







    $(function() {
    var zoomFunc = function(dimension) {
    return dimension * 1.5;
    }
    var shrinkFunc = function(dimension) {
    return dimension * 0.5;
    }
    $('div.gallery img').slidingGallery({
    'slideSpeed':'normal',
    'Lzoom':zoomFunc,
    'Pzoom':zoomFunc,
    'Lshrink':shrinkFunc,
    'Pshrink':shrinkFunc
    });
    });


    </script>

    The Problem is whichever one I place first in order doesn't work on the web page, only the one placed beneath the other one works. So I can't get them both to work. Anyone know how I can get them to both work? I'd really appreciate it, thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Kingdom of Saudi Arabia
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just use jQuery instead of $...and any call that uses "$"
    jQuery(function() {
    jQuery('div.gallery img').slidingGallery({

    });
    });

  3. #3
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thanks a lot it worked!!!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Kingdom of Saudi Arabia
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thanks a lot it worked!!!
    No prob...can't stop myself looking at your avatar, lol.

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having the same problem. I changed all the "$" to jQuery but I still have the same problem. Whichever javascript I put underneath is the only one that will work.

    Here's the code

    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

    <script type="text/javascript">
    jQuery(function() {
    jQuery('#gallery1 a').lightBox();
    jQuery('#gallery2 a').lightBox();
    jQuery('#gallery3 a').lightBox();

    });
    </script>

    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="custom-nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).load(function() {
    jQuery('#slider').nivoSlider({
    effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,
    animSpeed:700, //Slide transition speed
    pauseTime:6000,
    startSlide:0, //Set starting Slide (0 index)
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, //1,2,3...
    controlNavThumbs:false, //Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, //Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', //Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:false, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){} //Triggers after all slides have been shown
    });
    });
    </script>
    <script type="text/javascript">
    var total = jQuery('#slider img').length;
    var rand = Math.floor(Math.random()*total);
    jQuery('#slider').nivoSlider({
    startSlide:rand
    });
    </script>

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Order matters.
    Code:
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    
    <script type="text/javascript">
    jQuery(function() {
    jQuery('#gallery1 a').lightBox();
    jQuery('#gallery2 a').lightBox();
    jQuery('#gallery3 a').lightBox();
    
    });
    </script>
    
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="custom-nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    Before using any jQuery, FIRST you must call the main library itself. You have stuff up above the main library.

    Second, here:
    Code:
    <script type="text/javascript">
    jQuery(function() {
    jQuery('#gallery1 a').lightBox();
    jQuery('#gallery2 a').lightBox();
    jQuery('#gallery3 a').lightBox();
    
    });
    </script>
    Those inner jqueries can likely go back to $ because they are protected inside your main jquery(function()), so they won't conflict either way.

    wuzzup with this?
    jQuery(window).load(function() {

    Doesn't jquery have a pre-built loader that doesn't call on window.load? The point of jQuery's $(document.ready()) function is like any main page loading script: it can call all the other scripts on page load.

  7. #7
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.........I am trying to put two jquery in a single page but only one jquery which is below the first one is working. I read this thread and I replaced the $ with Jquery ..But nouse. Please help me...........

    Here is the code..



    <script language="javascript" type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script type="text/javascript" language="javascript">

    jQuery(document).ready(function() {

    //Speed of the slideshow
    var speed = 5000;

    //You have to specify width and height in #slider CSS properties
    //After that, the following script will set the width and height accordingly
    jQuery('#mask-gallery, #gallery li').width(jQuery('#slider').width());
    jQuery('#gallery').width(jQuery('#slider').width() * jQuery('#gallery li').length);
    jQuery('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height(jQuery('#slider').height());

    //Assign a timer, so it will run periodically
    var run = setInterval('newsscoller(0)', speed);

    jQuery('#gallery li:first, #excerpt li:first').addClass('selected');

    //Pause the slidershow with clearInterval
    jQuery('#btn-pause').click(function () {
    clearInterval(run);
    return false;
    });

    //Continue the slideshow with setInterval
    jQuery('#btn-play').click(function () {
    run = setInterval('newsscoller(0)', speed);
    return false;
    });

    //Next Slide by calling the function
    jQuery('#btn-next').click(function () {
    newsscoller(0);
    return false;
    });

    //Previous slide by passing prev=1
    jQuery('#btn-prev').click(function () {
    newsscoller(1);
    return false;
    });

    //Mouse over, pause it, on mouse out, resume the slider show
    jQuery('#slider').hover(

    function() {
    clearInterval(run);
    },
    function() {
    run = setInterval('newsscoller(0)', speed);
    }
    );

    });


    function newsscoller(prev) {

    //Get the current selected item (with selected class), if none was found, get the first item
    var current_image = jQuery('#gallery li.selected').length ? jQuery('#gallery li.selected') : jQuery('#gallery li:first');
    var current_excerpt = jQuery('#excerpt li.selected').length ? jQuery('#excerpt li.selected') : jQuery('#excerpt li:first');

    //if prev is set to 1 (previous item)
    if (prev) {

    //Get previous sibling
    var next_image = (current_image.prev().length) ? current_image.prev() : jQuery('#gallery li:last');
    var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : jQuery('#excerpt li:last');

    //if prev is set to 0 (next item)
    } else {

    //Get next sibling
    var next_image = (current_image.next().length) ? current_image.next() : jQuery('#gallery li:first');
    var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : jQuery('#excerpt li:first');
    }

    //clear the selected class
    jQuery('#excerpt li, #gallery li').removeClass('selected');

    //reassign the selected class to current items
    next_image.addClass('selected');
    next_excerpt.addClass('selected');

    //Scroll the items
    jQuery('#mask-gallery').scrollTo(next_image, 800);
    jQuery('#mask-excerpt').scrollTo(next_excerpt, 800);

    }

    </script>

    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery-bp.js" ></script>
    <script type="text/javascript" >

    var site_url = '';
    var nav = [ '#home', '#about', '#services', '#solutions', '#contact' ];

    jQuery(document).ready(function(){
    setBkgPos();

    for ( i = 0; i < nav.length; i++ ) {
    jQuery(nav[i]).bind( 'mouseover', mMouseOver );
    jQuery(nav[i]).bind( 'mouseout', mMouseOut );
    jQuery(nav[i]).bind( 'click', mClick );
    }

    for ( i = 0; i < nav.length; i++ ) {
    // element with ‘active’ class will start animation
    if ( jQuery(nav[i]).get(0).className.indexOf('active') >= 0 ){
    jQuery(nav[i])
    .animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
    function(){
    jQuery(this)
    .children()
    .animate({backgroundPosition:'(0px -40px)'},20)
    .animate({backgroundPosition:'(0px -20px)'},"fast");
    jQuery(this)
    .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
    .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
    var parent = this;
    jQuery(this)
    .children()
    .animate( {backgroundPosition:'(0px -45px)'},"fast",function(){
    jQuery(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
    jQuery(parent).css({backgroundImage: 'url(img/nav.png)'});
    });
    });
    break;
    }
    }
    });

    function _getHPos( id )
    {
    for ( i = 0; i < nav.length; i++ ){
    if ( '#' + id == nav[i] ){
    return i*(-98);
    }
    }

    return 0;
    }

    function setBkgPos()
    {
    for ( i = 0; i < nav.length; i++ ){
    jQuery(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
    jQuery(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
    }
    }

    function mMouseOver(e)
    {
    // element with ‘active’ class will ignore this event and do nothing
    if ( this.className.indexOf('active') >= 0 ){
    return;
    }

    jQuery(this)
    // stop any animation that took place before this
    .stop()
    // step 1. change the image file
    .css({backgroundImage: 'url(img/nav-over.png)',cursor: 'pointer'})
    // step.2 move up the navigation item a bit
    .animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
    // this section will be executed after the step.2 is done
    function(){
    jQuery(this)
    .children()
    // step. 3 move the white box down
    .animate({backgroundPosition:'(0px -40px)'},20)
    // step 4. move the white box down
    .animate({backgroundPosition:'(0px -20px)'},"fast");
    jQuery(this)
    // step 4. move the navigation item down
    .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
    // step 5. move the navigation item to its final position
    .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
    // store the parent element id for later usage
    var parent = this;
    jQuery(this)
    .children()
    // step 5. move the white box to its final position
    .animate( {backgroundPosition:'(0px -45px)'},"fast",
    // this section will be executed after the step.5 is done
    function(){
    // step.6 change the image to its original image
    jQuery(parent).css({backgroundImage: 'url(img/nav.png)'});
    });

    });
    }

    function mMouseOut(e)
    {
    // element with ‘active’ class will ignore this event and do nothing
    if ( this.className.indexOf('active') >= 0 ){
    return;
    }

    jQuery(this)
    // stop any animation that took place before this
    .stop()
    // step.1 move down navigation item
    .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast",
    // this section will be executed after the step.1 is done
    function(){
    // step.2 white box move really fast
    jQuery(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
    // step 3. move navigation item up
    jQuery(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast",
    // this section will be executed after the step.3 is done
    function(){
    // step 4. move navigation item ot its original position
    jQuery(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
    // this section will be executed after the step.4 is done
    function(){
    // move white box to its original position, ready for next animation
    jQuery(this).children().css({ backgroundPosition:'0px -60px'});
    })
    })
    })
    .css({backgroundImage: 'url(img/nav.png)', cursor: ''});
    }

    function mClick(e)
    {
    location.href = this.id;
    }


    </script>


Bookmarks

Posting Permissions

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