Need help, this may be a stupid question

jday53405 · 01-12-2010, 05:12 PM

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>

gusblake · 01-12-2010, 05:40 PM

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()">

tomws · 01-12-2010, 06:33 PM

@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.

jday53405 · 01-12-2010, 06:37 PM

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);

oesxyl · 01-12-2010, 06:45 PM

Quote:

Originally Posted by gusblake

My advice would be not to use $(document).ready; body onload should be sufficient.

it's not the same thing?

best regards

tomws · 01-12-2010, 06:46 PM

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?"

jday53405 · 01-12-2010, 07:57 PM

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.

jday53405 · 01-12-2010, 08:02 PM

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 >

tomws · 01-12-2010, 08:21 PM

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);
});

Spudhead · 01-13-2010, 10:21 AM

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);

jday53405 · 01-13-2010, 01:05 PM

@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({

tomws · 01-13-2010, 02:16 PM

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.

jday53405 · 01-13-2010, 03:06 PM

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.

tomws · 01-13-2010, 03:18 PM

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.

Fumigator · 01-13-2010, 04:26 PM

Quote:

Originally Posted by oesxyl

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