JavaScript - Difficulty Getting 2 Different Javascripts To Call On The Same Id

Hi All,

I know this has been covered many times on this site, but I just cannot figure out what I'm doing wrong. I've got a jquery slideshow and some lightbox galley images that I'm trying to get to work together. I thought I had taken out the parts that were conflicting but I apparently haven't. Any help would be much appreciated.

Here's the page I'm working on: oneeightyone.com/new/index.html

So I am not great at Javascript, but i have 2 scripts that i want to work with each other. When i use one by itself, they each work fine, but when i add them together it does not work.

I have a user form with a bunch of fields on it. If they choose an option on the drop down menu, some fields either show or disappear. Those fields have an "On Change" event that subtracts one field form another and gives us a total.
////////////////////////////////////// Drop Down Menu ///// rel sets to show the Code:

<tr>
<select name="checkout_by" class="textLeft" id="checkout_by" value="<?php if($cont == 'no') { echo $checkout_by; } ?>" >				<option value="serial" selected rel="show">Item Series / Serial Number</option>
			        <option value="isbn" rel="none">Barcode / ISBN Number</option>

//////////////////////////////////// Fields used to subtract

Code:

<input name="serial_start" onChange="updatesum()" type="text" class="textLeft" id="serial_start" value="<?php if($cont == 'no') { echo $serial_start; } ?>" size="15">

Code:

<input name="serial_end" onChange="updatesum()" type="text" class="textLeft" id="serial_end"  value="<?php if($cont == 'no') { echo $serial_end; } ?>" size="15">

//////////////////////////////////// Field used to add the total up from above

Code:

<input name="org_quantity" type="text"  id="org_quantity"  value="<?php if($cont == 'no') { echo $orig_quantity; } ?>" size="10">

///////////////////////////////////////Update total script
Code:

<script type="text/javascript">
function updatesum() {
document.form1.org_quantity.value = (document.form1.serial_end.value -0) - (document.form1.serial_start.value -0);
}
</script>

//////////////////////////////////// Hide Filed Script
Code:

var containerTag = 'TR';

var compatible = (
	document.getElementById && document.getElementsByTagName && document.createElement
	&&
	!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
	);

if (compatible)
{
	document.write('<style>.accessibility{display: none}</style>');
	var waitingRoom = document.createElement('div');
}

var hiddenFormFieldsPointers = new Object();

function prepareForm()
{
	if (!compatible) return;
	var marker = document.createElement(containerTag);
	marker.style.display = 'none';

	var x = document.getElementsByTagName('select');
	for (var i=0;i<x.length;i++)
		addEvent(x[i],'change',showHideFields)

	var x = document.getElementsByTagName(containerTag);
	var hiddenFields = new Array;
	for (var i=0;i<x.length;i++)
	{
		if (x[i].getAttribute('rel'))
		{
			var y = getAllFormFields(x[i]);
			x[i].nestedRels = new Array();
			for (var j=0;j<y.length;j++)
			{
				var rel = y[j].getAttribute('rel');
				if (!rel || rel == 'none') continue;
				x[i].nestedRels.push(rel);
			}
			if (!x[i].nestedRels.length) x[i].nestedRels = null;
			hiddenFields.push(x[i]);
		}
	}

	while (hiddenFields.length)
	{
		var rel = hiddenFields[0].getAttribute('rel');
		if (!hiddenFormFieldsPointers[rel])
			hiddenFormFieldsPointers[rel] = new Array();
		var relIndex = hiddenFormFieldsPointers[rel].length;
		hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
		var newMarker = marker.cloneNode(true);
		newMarker.id = rel + relIndex;
		hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
		waitingRoom.appendChild(hiddenFields.shift());
	}
	
	setDefaults();
	addEvent(document,'click',showHideFields);
}

function setDefaults()
{
	var y = document.getElementsByTagName('input');
	for (var i=0;i<y.length;i++)
	{
		if (y[i].checked && y[i].getAttribute('rel'))
			intoMainForm(y[i].getAttribute('rel'))
	}

	var z = document.getElementsByTagName('select');
	for (var i=0;i<z.length;i++)
	{
		if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
			intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
	}

}

function showHideFields(e)
{
	if (!e) var e = window.event;
	var tg = e.target || e.srcElement;

	if (tg.nodeName == 'LABEL')
	{
		var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
		tg = document.getElementById(relatedFieldName);
	}
		
	if (
		!(tg.nodeName == 'SELECT' && e.type == 'change')
		&&
		!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
	   ) return;

	var fieldsToBeInserted = tg.getAttribute('rel');

	if (tg.type == 'checkbox')
	{
		if (tg.checked)
			intoMainForm(fieldsToBeInserted);
		else
			intoWaitingRoom(fieldsToBeInserted);
	}
	else if (tg.type == 'radio')
	{
		removeOthers(tg.form[tg.name],fieldsToBeInserted)
		intoMainForm(fieldsToBeInserted);
	}
	else if (tg.type == 'select-one')
	{
		fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
		removeOthers(tg.options,fieldsToBeInserted);
		intoMainForm(fieldsToBeInserted);
	}
}

function removeOthers(others,fieldsToBeInserted)
{
	for (var i=0;i<others.length;i++)
	{
		var show = others[i].getAttribute('rel');
		if (show == fieldsToBeInserted) continue;
		intoWaitingRoom(show);
	}
}

function intoWaitingRoom(relation)
{
	if (relation == 'none') return;
	var Elements = hiddenFormFieldsPointers[relation];
	for (var i=0;i<Elements.length;i++)
	{
		waitingRoom.appendChild(Elements[i]);
		if (Elements[i].nestedRels)
			for (var j=0;j<Elements[i].nestedRels.length;j++)
				intoWaitingRoom(Elements[i].nestedRels[j]);
	}
}

function intoMainForm(relation)
{
	if (relation == 'none') return;
	var Elements = hiddenFormFieldsPointers[relation];
	for (var i=0;i<Elements.length;i++)
	{
		var insertPoint = document.getElementById(relation+i);
		insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
		if (Elements[i].nestedRels)
		{
			var fields = getAllFormFields(Elements[i]);
			for (var j=0;j<fields.length;j++)
			{
				if (!fields[j].getAttribute('rel')) continue;
				if (fields[j].checked || fields[j].selected) 
					intoMainForm(fields[j].getAttribute('rel'));
			}
		}
	}
}

function getAllFormFields(node)
{
	var allFormFields = new Array;
	var x = node.getElementsByTagName('input');
	for (var i=0;i<x.length;i++)
		allFormFields.push(x[i]);
	var y = node.getElementsByTagName('option');
	for (var i=0;i<y.length;i++)
		allFormFields.push(y[i]);
	return allFormFields;
}

/** ULTRA-SIMPLE EVENT ADDING **/

function addEvent(obj,type,fn)
{
	if (obj.addEventListener)
		obj.addEventListener(type,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent("on"+type,fn);
}

addEvent(window,"load",prepareForm);


/** PUSH AND SHIFT FOR IE5 **/

function Array_push() {
	var A_p = 0
	for (A_p = 0; A_p < arguments.length; A_p++) {
		this[this.length] = arguments[A_p]
	}
	return this.length
}

if (typeof Array.prototype.push == "undefined") {
	Array.prototype.push = Array_push
}

function Array_shift() {
	var A_s = 0
	var response = this[0]
	for (A_s = 0; A_s < this.length-1; A_s++) {
		this[A_s] = this[A_s + 1]
	}
	this.length--
	return response
}

if (typeof Array.prototype.shift == "undefined") {
	Array.prototype.shift = Array_shift
}

So i have this one problem and its been a major pain for a while. I have both a light box function and a fade into page intro on my website. The issue i have is when i put in the lightbox, lightbox seems to not work whats so ever. So i made another page and first put in the lightbox...that worked like a charm but once i put in the fade in intro it basically gets me back to lightbox not working...So...any way to solve this?

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() 
{
		// fade in content.
		$( '#wrapper' ).fadeIn("slow");		
});
</script>






</head>
<body>


<div id="wrapper">
<table><tr><td><a href="air_pollution copy.jpg" rel="lightbox" ><img src="air_pollution.jpg"  /></a></td></tr></table></div>
</body>
</html>

I have a page with several javascript (.js files) in the header, is it possible to preload all of these before the actual page content is loaded? I want to hide the javascript execution from taking place after the page has loaded.

Any ideas? Thanks!

Hey,

I've been trying to make two javascript files kiss and make up in my web site code. I tried the "noconflict" function, but either I did it wrong, or it didn't work out.

Here is the page with the conflict.

Help?

Hi,

I am using several Javascripts into a html file. Individually all scripts working fine, however when I put them on the onclick event someof them not works.

Example:

<html>
<head>
<script>
function one;
</script>

<script>
function two;
</script>

<script>
function three;
</script>
</head>

<body>

<form type=post action=newfile.asp>
....................
...................
...................
<input type=submit onclick="one(); two(); three();">
</form>
</body>
</html


The schema is right? How is the best way to force many scripts working fine?

Bob

I've recently picked up HTML and CSS, and am getting to grips really quickly. The principles are really straight forward, you just need to understand a few key principles and then with practice you can remember most tags/elements/attributes etc, although I would rather have the understanding rather then not have the understanding and remember all the tags (I can remember most tags I need anyway.

So PHP and Javascript are obviously the next ports of call once I feel I am proficient with HTML and CSS.

How hard is it to understand the principles of Javascript and become effective in it?

I'm making a form for my rural neighbors' electricity calculations.
My main problem is getting the Previous and Current reading to subtract each other and post in the "kwh Used" column.

My plan is to continue doing the calculations after I find that value.

Here is the code thus far:
Code:

<head>

<title>Untitled Document</title>
<script language="javascript">

function calc()
	{
	preR= Number(document.Bill_cal.PrRe.value);
	curR= Number(document.Bill_cal.CuRe.value);
	diff=preR-curR;
	document.getElementByID("kwhu").innerHTML=diff;
	
		
	}
</script>
</head>

<body><center>
<form name="Bill_cal" method="post" />
<input type="checkbox" value="Residential Account" name="Residential_Account"  />Residential Account


<input type="checkbox" value="GSS/Business Account" name="GSS_Business Account" />GSS/Business Account


<br />
<br/> 

<input type="checkbox" value="Winter_Rate" name="Winter_Rate" onchange="" />Winter Rate
<input type="checkbox" value="Summer_Rate" name="Summer_Rate" onchange="" />Summer Rate


<br />
<br/> 


<input type="checkbox" value="Butler" name="Butler" onchange="" />Butler

<input type="checkbox" value="Chautauqua"  name="Chautauqua" onchange="" />Chautauqua


<input type="checkbox" value="Cowley" name="Cowley" onchange="" />Cowley

<input type="checkbox" value="Elk"  name="Elk" onchange="" />Elk


<input type="checkbox" value="Montgomery"  name="Montgomery" onchange="" />Montgomery


<br/> 
<br/> 


<input type="checkbox" value="Security Light" name="Security" />
Security Light
(Check if Yes)


<br/>
<br/> 

</center>
<center>

<table width="600" border="1"><center>
  <tr>
    <th width="254" scope="col">&nbsp;</th>
    <th width="168" scope="col">&nbsp;</th>
    <th width="156" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">Previous Reading</th>
    <td><input type="text" name="PrRe" value="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Current Reading</th>
    <td><input type="text" name="CuRe" value="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">kwh Used</th>
    <td>
    <p id="kwhu"></p>
    
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">kwh Charge</th>
    <td></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Subtotal</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Tax</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">PCA Charge from card:</th>
    <td><input type="text" name="PCA" value="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Any Additional amount from card:</th>
    <td><input type="text" name="PCA" value="" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Total:</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
</center></table>

<input type="submit" value="Click here" onclick="calc()"> 
</form>



</center></body>
</html>

One other issue I will probably run into and while I am on here posting.
Can I preform a if statement within a if statement? Example:

Code:

	if (Business is checked)
	{
		if (Winter is Checked)
			{
			}
		else if (Summer is Checked)
			{
			}
	}

Hello again;

I am testing in Firefox( two versions ), Chrome, Opera (two versions), Safari
on Mac OSX and am seeing a peculiarity.
Code:

<div id="dialog" style="position:absolute;top:50px;left:600px;">
<div id="head"><p id="panelTitle">Item Info:</p></div>
<p>Drag this panel to move </p>
<pre id="target1"><img id="srcImg" src="windows/img/front_window.jpg" alt="test" /></pre>
<pre id="target2"> </pre>
<div id="closer"><p class="dialog"><a id="dClose" href="javascript:">Close</a></p></div>

event listener assigned to a separate anchor tag makes this markup visible and drag-able.
The mousemove event listener for dragging is assigned to the parent div, id='dialog'

In Firefox and Google's Chrome browser, if I mousedown on the image
and try to drag, the system tries to move and copy the image. When I
release the mouse, the whole panel sticks to the pointer and moves with
the pointer until I click on it.

The Question:
What event would I do preventDefault, cancelbubble, or return false
to get around this?
(perhaps for a separate post, how would I prevent the client form copying
content?)

Safari will do the same accept that it will not stick to the mouse pointer position on mouseup.

In Opera, it works fine (accept the earlier verison, v9x leaves a trail of ghost lines where the panel was moved from)

I have a pc with I.E. and have not yet tested this specific issue.

Thank you for your time and attention
JK

Originally I had the following code. What it does is for a user to type the folder name of their choice and then after clicking submit a window will pop open and they will be taken to "C:\folder" (assuming the user typed "folder" and such a folder existed). Here is the code in case I wasn't clear.

Code:

<html>
<head>
<script type="text/javascript">
function goTo()
{
	var drive = document.forms[0].drive.value;
	var folder = document.forms[0].folder.value;
	window.location = drive+folder;
	return false;
}
</script>
</head>
<body>
<center>
<b><u>Folder Search</u></b>
<form action="" method="get" onsubmit="return goTo()">
	Choose drive:
	<input type="hidden" name="drive" id="drive" value="C:\">
	<br>
	Enter folder name:
	<input type="text" name="folder" id="folder">
	
<p>
	<input type="submit" value="Submit">
</form>
</center>
</body>
</html>

However, what I want to do now is change it so that the user can click on radio buttons to choose the drive they want. I realize I could use the code above and have the user type in the drive they want but I would rather have radio buttons for them to choose. Here is what I have so far.

Code:

<html>
<head>
<script type="text/javascript">
function goTo()
{
	var drive = document.forms[0].drive[i].value;
	var file = document.forms[0].file.value;
	
	window.location = drive+folder;
	return false;
}
</script>
</head>
<body>
<form  method="get" action="" onsubmit="return goTo()">
	Choose Drive:
	<input type="radio" name="drive" id="C Drive" value="C:\">C Drive
	<input type="radio" name="drive" id="D Drive" value="D:\">D Drive
	<input type="radio" name="drive" id="F Drive" value="F:\">F Drive
	<br>
	Enter Folder Name:
	<input type="text" name="folder" id="folder">
	
<p>
	<input type="submit" value="Submit">
</form>
</body>
</html>

Now after the user clicks submit nothing really happens. I'm a real n00b at this. I could use some help. Thanks in advance.

Hey guys, well first of all i'm new at the forum and very, very new to javascript so pleas go easy on me for asking dumb questions.
Second of all i'm Rutger, from the netherlands, hi folks!

So, here's my problem. I'm rebuilding my portfolio webpage and i'm doing it all by my self to learn html and css. Thats going great so far but i'm having problems using javascripts.

In all pages i use a javascript for a dropdown menu, this works great exept for the homepage.
There i also use a javascript for a slideshow to show recent work. The slideshow works but because i add the slideshow the dropdown stops working comepletely and i can't figure out why...

I've been searching google and i keep finding the window.onload solution but both scripts don't use that command....

Anyone's got a clue? Please help cause i'm about to pull my hair out!
Haha, just kidding but it's pretty frustrading!

Rutger

P.S. Here are both codes:
Here is the slideshow:
Code:

Object.prototype.addEvent = function(evtType, func) {
   if (this.addEventListener) {
      this.addEventListener(evtType, func, true);
   } else if (this.attachEvent) {
      this.attachEvent('on' + evtType, func);
   } else {
      this['on' + evtType] = func;
   }
}



function slideshow(slideel, faddingSpeed, stopTime, stopOnMouseOver) { 
        var mouseIsOver = false;
       
        if (stopOnMouseOver) {
                slideel.addEvent('mouseover', function() {
                        mouseIsOver = true;
                });

                slideel.addEvent('mouseout', function() {
                        mouseIsOver = false;
                        self.next();
                });
        }
               
        this.next = function() {
                if (mouseIsOver)
                        return;

                this.current.fadeOut();
                this.current = this.current.nextSlide;
                this.current.fadeIn();
        }
       
        function createSlides() {
                var imgs = slideel.getElementsByTagName('img');
                var slides = [];
               
                for (var i = 0; i < imgs.length; i++) {  
                        slides[i] = new slideshowImage(imgs[i], self);
                }
               
                for (var i = 0; i < slides.length; i++) {
                        if (i == slides.length - 1)
                                slides[i].nextSlide = slides[0];
                        else
                                slides[i].nextSlide = slides[i + 1];
                }
               
                self.current =  slides[0];
                slides[0].fadeIn();
               
                function slideshowImage(img, slideshow) {
                        img.style.opacity = '0';
       
                        this.fadeIn = function() {
                                var i = 0;
                                while (++i <= 40) {
                                        window.setTimeout(function() {
                                                img.style.opacity = parseFloat(img.style.opacity) + 0.025;
                                        }, i * faddingSpeed);
                                }
                               
                                window.setTimeout(function() {
                                        slideshow.next();
                                }, 150 * faddingSpeed + stopTime);
                        }
       
                        this.fadeOut = function() {
                                var i = 0;
                                while (++i <= 40) {
                                        window.setTimeout(function() {
                                                img.style.opacity = parseFloat(img.style.opacity) - 0.025;
                                        }, i * faddingSpeed);
                                }
                        }
                }
        }
       
        var self = this;
        createSlides(slideel);
}

The dropdown:
Code:

$(document).ready(function(){

	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
	
	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});
	
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
});

Object.prototype.addEvent = function(evtType, func) {
   if (this.addEventListener) {
      this.addEventListener(evtType, func, true);
   } else if (this.attachEvent) {
      this.attachEvent('on' + evtType, func);
   } else {
      this['on' + evtType] = func;
   }
}

And these are files that came with the dropdown that need to be included:
- jquery.js
- jquery-1.txt
This is just a library right?

Hi .. I should start off saying I dont know the first thing about java script programming. I have 3 scripts on one of my pages, the first script is for a slide animation, the second is a hover intent script and the third is a headline animation script.

I know if I comment out the hover intent script, the first and third script work. So my question is how to get the hover intent script to work correctly and behave with the other 2 scripts on the page. I read your post on "on body load" or "runscripts" calls with 2 scripts but I could not find such calls in these 3 javascripts.

The hover intent script does not do what I want it to do on any of the pages that I have installed it on. When you first load the page the menu items are sitting above the slideshow and when you hover your mouse over the navigation from left to right they sort of jump and its not until you get to the contact image at the end that the slideshow moves into the correct position and then if you go back and hover over the home image the slideshow jumps up and down.

The three script page is http://www.kimberleywebdesign.com.au/test/reviews.html

Thanks in advance for your valuable time.

Hey! I'm working on a website that has the bubble navigation jquery script in it, but every time I combine it with another jquery script, it kind of goes bonkers. Right now, I'm trying to combine it with this circular image slider, here are the tutorials from the two scripts I'm using:

http://tympanus.net/codrops/2010/04/...n-with-jquery/

http://www.baijs.nl/tinycircleslider/

And here's my script so far:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>


	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Tiny Carousel: A lightweight jQuery plugin</title>
	<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

	<!--[if lte IE 6]>
		<style type="text/css">
		/* Internet Explorer 6 PNG transparency fix */
		#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
		#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
		</style>
	<![endif]-->
	
	<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
		});
	</script>











        <title>Awesome Bubble Navigation with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Awesome Bubble Navigation with jQuery" />
        <meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Arial;
                background:#fff url(images/bg_scoot1.png) no-repeat top left;
            }
            .title{
                width:548px;
                height:119px;
                position:absolute;
                top:300px;
                left:250px;
                background:transparent url(title.png) no-repeat top left;
            }
            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
                margin:0 auto;
            }


        </style>
    </head>

    <body>







	<div id="rotatescroll">
		<div class="viewport">
			<ul class="overview">
				<li><a href="http://www.baijs.nl"><img src="example/images/hdr3.jpg" /></a></li>
				<li><a href="http://www.baijs.nl"><img src="example/images/hdr2.jpg" /></a></li>
				<li><a href="http://www.baijs.nl"><img src="example/images/hdr1.jpg" /></a></li>
				<li><a href="http://www.baijs.nl"><img src="example/images/hdr4.jpg" /></a></li>
				<li><a href="http://www.baijs.nl"><img src="example/images/hdr5.jpg" /></a></li>															
			</ul>
		</div>
		
		<div class="dot"></div>
		<div class="overlay"></div>
		<div class="thumb"></div>
	</div>

















        <div id="content">
            <a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery"></a>
            <div class="title"></div>

            <div class="navigation" id="nav">
                <div class="item user">
                    <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>User</h2>
                    <ul>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Properties</a></li>
                        <li><a href="#">Privacy</a></li>
                    </ul>
                </div>
                <div class="item home">
                    <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Home</h2>
                    <ul>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="item shop">
                    <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Shop</h2>
                    <ul>
                        <li><a href="#">Catalogue</a></li>
                        <li><a href="#">Orders</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div>
                <div class="item camera">
                    <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Photos</h2>
                    <ul>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Prints</a></li>
                        <li><a href="#">Submit</a></li>
                    </ul>
                </div>
                <div class="item fav">
                    <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Love</h2>
                    <ul>
                        <li><a href="#">Social</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Comments</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width'     :'199px',
                        'height'    :'199px',
                        'top'       :'-25px',
                        'left'      :'-25px',
                        'opacity'   :'1.0'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(700);
                    });

                    $this.find('a:first,h2').addClass('active');
                },
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width'     :'52px',
                        'height'    :'52px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },5000,'easeOutBack');

                    $this.find('a:first,h2').removeClass('active');
                }
            );
            });
        </script>
    </body>
</html>

I'm trying to run two javascript files on a web page and there appears to be a conflict.

Im using InnerFade with JQuery which can be seen at:
http://medienfreunde.com/lab/innerfade/

And Im using Lightbox2 which is at http://www.huddletogether.com/projec...box2/#download

If I use them individually they work fine but as soon as I call them together the one won't work.

I'm not fluent in javascript so I would really appreciate any help with this.

Thanks.