JavaScript - Multiple Javascripts On One Page

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

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?

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!

hello ..
- I want ask about function in js file , when is it start work ?
after calling in somewhere ? or in sequence

- can I call function in js file from another js file ?


thank you . .

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

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 2 different scripts which works fine by them self, but now I need to combine them, and don't know how...

The first script is populating dependent selectboxes like this:
Code:

function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
			}
			catch(e){
				try{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
    }
	
	function getState(countryId) {		
		
		var strURL="js/searchRoundState.php?ccountry="+countryId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('statediv').innerHTML=req.responseText;	
						document.getElementById('citydiv').innerHTML=req.responseText;
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	function getCity(countryId,stateId) {		
		var strURL="js/searchRoundClub.php?ccountry="+countryId+"&cstate="+stateId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('citydiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}
	
	function getCourse(countryId,stateId,courseId) {		
		var strURL="js/searchRoundCourse.php?ccountry="+countryId+"&cstate="+stateId+"&ccourse="+courseId;
		var req = getXMLHTTP();
		
		document.getElementById('coursediv').innerHTML ='<center><br><br><img src="images/ajax-loader3.gif"><br><br><br></center>';
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {
						document.getElementById('coursediv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}

It gets the data from the selectfiled like this:
Code:

<select id="ccountry" onchange="getState(this.value);getCourse(this.value)" class="input_field">
	<option value="1" selected>Test1</option>
    <option value="2" selected>Test2</option>
</select>

Now the other script is a ajax script which loads the page and gets called like this:
Code:

<select id="ccountry" onchange="ajaxcombo(\'ccountry\', \'contentarea\');" class="input_field">
	<option value="ajax.php?ga=roundsearch&amp;id=1" selected>Test1</option>
    <option value="ajax.php?ga=roundsearch&amp;id=2" selected>Test1</option>
</select>

As you can see, the ajax part is called using a url and the selectpart is called by Value... Is there a way that the slectpart could be using the url instead af an "id"...

Thanks in advance...

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.

i have been tryin for a long time to get both of the javascripts(for the thumbnail to main img swap and the navigational arrow swap) to work in synch

http://***.com/nn.html

it needs to be so that after clicking on a thumbnail then on an arrow, the correct image in the correct order appears. as of now they are running separately and one has no influence on the other. forgive me if im not being clear. i keep trying to replace the id that one script is looking for with the same id from the other but this will not work..why?

please help me...believe me ive tried to help myself by reading all i can understand on the web about this but im in the dark

thanks

Hi,

I need javascript to sort as windows sorts its file. For eg: When the files name contains special characters, number and alphabets(#@!$%.doc, test1.doc,test2.doc, 1.doc) javascript sorts alphabets first and then special characters, but windows sorts special characters first and then alphabets in ascending. I want javascript to sort my array as windows.

Kindly help me out in this case.

Thanks,
Deva.