Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help, this may be a stupid question

    Hey guys,

    First, thank you for any help with this. I am a designer and not a programmer and this is driving me crazy.

    I have added a content slider and also a tabbed script to my site. The problem is only one or the other works.

    I have read that you need to have 2 onload functions added to the body of the page to make this work. My problem is I don't know what functions to call these? Also, they both need to be in the head tags. The scripts are below. Can anyone tell me what 2 functions <body onload="dothat();dothis()"> to put here???

    ---------------------------------------------------------------------------
    <script type="text/javascript" >

    $('document').ready(function(){
    $('#flip-container').quickFlip();

    $('#flip-navigation li a').each(function(){
    $(this).click(function(){
    $('#flip-navigation li').each(function(){
    $(this).removeClass('selected');
    });
    $(this).parent().addClass('selected');
    var flipid=$(this).attr('id').substr(4);
    $('#flip-container').quickFlipper({ }, flipid, 1);

    return false;
    });
    });
    });
    </script>


    ------------------------------------------------------------------------

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

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    My advice would be not to use $(document).ready; body onload should be sufficient.

    Code:
    function initSlider() {
    $('#flip-container').quickFlip();
    
    $('#flip-navigation li a').each(function(){
    $(this).click(function(){
    $('#flip-navigation li').each(function(){
    $(this).removeClass('selected');
    });
    $(this).parent().addClass('selected');
    var flipid=$(this).attr('id').substr(4);
    $('#flip-container').quickFlipper({ }, flipid, 1);
    
    return false;
    });
    });
    }
    
    function initTabs() {
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
    }
    Code:
    <body onload="initSlider(); initTabs()">

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    @gusblake: Consult the jquery documentation.

    @jday: Just put everything in one document.ready. That's why it's there.
    Code:
    $('document').ready(function(){
    	$('#flip-container').quickFlip();
    
    	$('#flip-navigation li a').each(function(){
    		$(this).click(function(){
    			$('#flip-navigation li').each(function(){
    				$(this).removeClass('selected');
    			});
    			$(this).parent().addClass('selected');
    			var flipid=$(this).attr('id').substr(4);
    			$('#flip-container').quickFlipper({ }, flipid, 1);
    
    			return false;
    		});
    	});
    	
    	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
    });
    I think you can even simplify that just a little:
    Code:
    $('document').ready(function(){
    	$('#flip-container').quickFlip();
    
    	$('#flip-navigation li a').click(function(){
    		$('#flip-navigation li').removeClass('selected');
    		$(this).parent().addClass('selected');
    		var flipid=$(this).attr('id').substr(4);
    		$('#flip-container').quickFlipper({ }, flipid, 1);
    
    		return false;
    	});
    	
    	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
    });
    If you have more problems, provide a link to a sample, at least. You're more likely to get better help if people can see exactly what's going on.
    Are you a Help Vampire?

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your comment. Still only one works and I get this error.

    Error #1 : Line 16 object doesn't support this method

    Line 16
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by gusblake View Post
    My advice would be not to use $(document).ready; body onload should be sufficient.
    it's not the same thing?

    best regards

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    A javascript error will kill subsequent javascript in some browsers, so you will only get one effect working.

    A link to the project would be helpful for debugging. Several questions could be quickly answered just by looking, like "Did you actually include jquery ui?"
    Are you a Help Vampire?

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This page is actually an intranet page so unfortunitly I can not post a link you can get to for it. These are both premade scripts though and work alright when they are apart. Just not together.


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

    Adding both of the scripts together made them both not work. Any other suggestions?

    Thanks again guys.

  • #8
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I take it back. The first one still works, the second one doesn't

    Line 35 Object does not support this property or method

    Line 35 is the code for the content slider script

    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="int.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="/lib/HPHeadFuncs.js"></script>
    <script language="JavaScript" src="/header/ECHeader.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
    <script type="text/javascript" src="js/jquery.quickflip.js" ></script>




    <script type="text/javascript" >

    $('document').ready(function(){
    $('#flip-container').quickFlip();

    $('#flip-navigation li a').each(function(){
    $(this).click(function(){
    $('#flip-navigation li').each(function(){
    $(this).removeClass('selected');
    });
    $(this).parent().addClass('selected');
    var flipid=$(this).attr('id').substr(4);
    $('#flip-container').quickFlipper({ }, flipid, 1);

    return false;
    });
    });

    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
    });

    </script>







    </head>

    <body >

  • #9
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Please wrap your code in appropriate code tags. Makes it much easier to read.

    So, if you comment out everything except the tabs line in that same page (like this), the tabs load up and work correctly?
    Code:
    $(document).ready(function(){
    	/*
    	$('#flip-container').quickFlip();
    
    	$('#flip-navigation li a').each(function(){
    		$(this).click(function(){
    			$('#flip-navigation li').each(function(){
    				$(this).removeClass('selected');
    			});
    			$(this).parent().addClass('selected');
    			var flipid=$(this).attr('id').substr(4);
    			$('#flip-container').quickFlipper({ }, flipid, 1);
    
    			return false;
    		});
    	});
    	*/
    	$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
    });
    Last edited by tomws; 01-12-2010 at 08:23 PM. Reason: fixed 'document'
    Are you a Help Vampire?

  • #10
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    If you swap the tabs line for this, which line is the error on?

    Code:
    var $tabs = $('#featured > ul').tabs({
    	fx: { opacity: 'toggle' }
    });
    $tabs.tabs("rotate", 8000, true);

  • #11
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Tomws

    Yes, the content slider than works fine when I comment everything else out. Sorry, I am a complete mess at java. If it isn't prewritten cut and paste it is greek to me. On the bright side java class starts next quarter (although it doesn't help me now)

    @Spudhead

    It errors out on linevar 35 char 2 (object doesn't support this method) $tabs = $('#featured > ul').tabs({

  • #12
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Java won't help you then, either. This is Javascript. They are different languages.

    I don't know why you're getting inconsistent behavior, but I did check out the page for quickflip2 and found a link to what I suspect you're trying to do. View the source. They're not using the tabs() code at all. And the first argument to the quickFlipper() function is an empty string, not an empty object.
    Are you a Help Vampire?

  • #13
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I ment JS.

    Here is the link to the other script I am using as well


    This is how I started off, just copy and paste from each script. I guess they will just not run together. Thanks for all your help.

  • #14
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I wouldn't expect them to. But you should notice that the content "slider" does, in fact, use jquery ui. I don't know how you've been able to get that to work at all since you're not linking the jquery ui code.
    Are you a Help Vampire?

  • #15
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Quote Originally Posted by oesxyl View Post
    it's not the same thing?

    best regards
    No it's not. jQuery's document.ready detects when the DOM has loaded and fires off at that point. This means it doesn't wait for things like images to load. The onload function doesn't begin until everything on the page is loaded.

    document.ready has other benefits as well over onload, such as it's easy to call many functions.

    http://docs.jquery.com/How_jQuery_Wo...Document_Ready


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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