SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript conflicts

    OK I am a novice at best when it comes to javascript and I am trying to use two on a page - the page isnt live but I can upload if needed. I am trying to use two javascripts on a page - one for a slider and one for an image gallery. They work if they are added on their own but ass soon as I add them both thats when one or the other stops working. I hope someone can help I must have been sat looking at the screen and searching around for about 8 hrs lol.

    thanks in advance

    Here are the two that are causing issues.

    Code:
        <script type="text/javascript">
    		$(document).ready(	
    			function() {
    				//initialize scroller
    				$(".container").wtScroller({
    					num_display:3,
    					slide_width:234,
    					slide_height:120,
    					slide_margin:1,
    					button_width:35,
    					ctrl_height:25,
    					margin:10,	
    					auto_scroll:true,
    					delay:4000,
    					scroll_speed:1000,
    					easing:"",
    					auto_scale:true,
    					move_one:false,
    					ctrl_type:"scrollbar",
    					display_buttons:true,
    					display_caption:true,
    					mouseover_caption:false,
    					caption_align:"bottom",
    					caption_position:"inside",					
    					cont_nav:true,
    					shuffle:false
    				});
    				
    				//initialize lightbox for scroller
    				$("a[rel='scroller']").wtLightBox({
    					rotate:true,
    					delay:4000,
    					transition_speed:600,
    					display_number:true,
    					display_dbuttons:true,
    					display_timer:true,
    					display_caption:true,
    					caption_align:"bottom",					
    					cont_nav:true,
    					auto_fit:true,
    					easing:""
    				});
    			}
    			
    		);
    	</script>

    Code:
    <script type="text/javascript">
    	$(document).ready(function(){
    		//$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	});
    </script>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it seems to be a case of accidental function clobbering

    code 1:
    $(document).ready(function().....

    code 2:
    $(document).ready(function().....

    -----
    so it rewrites the 'on document ready function' and cause to conflict
    ====

    try this instead:

    <script type="text/javascript">
    $(document).ready(
    function()
    {

    //initialize scroller
    $(".container").wtScroller({
    num_display:3,
    slide_width:234,
    slide_height:120,
    slide_margin:1,
    button_width:35,
    ctrl_height:25,
    margin:10,
    auto_scroll:true,
    delay:4000,
    scroll_speed:1000,
    easing:"",
    auto_scale:true,
    move_one:false,
    ctrl_type:"scrollbar",
    display_buttons:true,
    display_caption:true,
    mouseover_caption:false,
    caption_align:"bottom",
    caption_position:"inside",
    cont_nav:true,
    shuffle:false
    });//end of $(".container").wtScroller({

    //initialize lightbox for scroller
    $("a[rel='scroller']").wtLightBox({
    rotate:true,
    delay:4000,
    transition_speed:600,
    display_number:true,
    display_dbuttons:true,
    display_timer:true,
    display_caption:true,
    caption_align:"bottom",
    cont_nav:true,
    auto_fit:true,
    easing:""
    });//end of $("a[rel='scroller']").wtLightBox({

    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    };//end of function()
    );//end of $(document).ready(
    </script>

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you move the script tags to just before the </body> tag then you can get rid of the need for the $(document).ready test and just run the code it contained directly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies - I have tried to find a neater scroller but I am still having the same trouble. I thought with it having less code it may be a bit neater and less cumbersome but still getting errors when bith used together - the updated code is

    Code:
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery-ui.min.js" ></script>
    
    <script type="text/javascript" src="js/jqueryslidemenu.js"></script>
    
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		//$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	});
    </script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> 
    </script>
    <!--<script type="text/javascript" src="/js/common.js"></script>-->
    <script type="text/javascript" src="http://simplyscroll.googlecode.com/files/jquery.simplyscroll-1.0.4.min.js"></script>
    <link rel="stylesheet" href="jquery.simplyscroll-1.0.4.css" media="all" type="text/css">
    <script type="text/javascript"> 
    (function($) {
    	$(function() {
    		$("#scroller").simplyScroll({
    			autoMode: 'loop'
    		});
    		
    	});
    })(jQuery);
    </script>

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That looks like it uses a lot more code than the previous one rather than less. Just because JavaScript is in a separate file (as it all should be) doesn't mean that it isn't a part of the script.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it just seems neater than the other but is it simple for me to fix or is there not enough info there - its strange because again they both work if they are used on their own but Im not sure even what I need to look for to solve the error (tutorial wise)

    In your post above you mentioned getting rid of the need for the $(document).ready - do I just delete this from each one?

    Thanks


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
  •