JavaScript - Error: Running Two Javascripts At Once

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

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?

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

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

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.

Hello,

A client asked me to create this site with modals that each contain a small gallery. I used Colorbox to create the windows and Highslide for the galleries. See link;

http://www.garrigan.net/Furryteeth/

Then he saw an example of a script named Mosaic and wanted it incorporated into the original design. Mosaic creates sliding boxes that pop up with captions when you rollover an image. Working from the base html file I got everything to work perfectly locally on my machine. After I uploaded everything to my site to test it out things went very wrong. See link;

http://www.garrigan.net/Nakata/

Everything works until you click on one of the images to launch a gallery. Then the entire site seems to fall to pieces. Any idea what I did wrong or where I can correct my mistake? I am assuming there is a server issue since it works on my machine.

Thanks for any help you can offer.

These are the JQuery scripts I used;
http://buildinternet.com/project/mosaic/
http://highslide.com/
http://colorpowered.com/colorbox/

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 sure people have answered this question multiple times but I have done all the research and tried everything but nothing works.

My problem: I'm building a website for my gaming clan and I want a Javascript news ticker/date & time and a Javascript navigation bar. However, when I put these codes in, they don't run with each other on the same page. Possibly an onload issue but like I said, I tried all the solutions. Note: they use jquery.

I'll post the html and javascript files as txt files since I can't attach them in their normal form.

Index.txt is my HTML

Sliding_effect.txt is the Javascript for the menubar

Newsticker.txt is the Javascript for the ticker that goes at the bottom of the <body>

The actual ticker.js code that runs with newsticker.js was too large to attach. It's 7000 lines long.

Any help is appreciated

I need a simple handy utility of some sort to test out the scripts while I am studying, any referrals please?

Hi All,

I have been fighting with an issue with milkbox for the past 6 hours, at this point I am just plain frustrated. What I am trying to do is implement Milkbox. Integrating it is not the problem since I have done this plenty of times. When you first come to the page and click the first thumbnail image it works fine. however it only works when you first come to the page and then when you click the next portfolio item and then click the thumb nail image that is displayed it does not show the image in lightbox, it just shows it in a blank page. I am setting the new image using the .innerHTML method. I am doing this because I am changing the div contents to something that looks along the lines of

<a href="portfolio/tiresfortreatment.jpg" rel="milkbox" title="Tires for Treatment"><img src="slices/portfolio/thumbs/tires-for-treatment.png" alt="Tires for Treatment" /></a>


I read that innerHTML removes event listeners from html elements. So then I tried to call the milkbox constructor directly by changing the text of my .innerHTML property to directly call the constructor of milkbox on click like this:

<a href="portfolio/tiresfortreatment.jpg" rel="milkbox" title="Tires for Treatment" onclick="Milkbox.initialize()"><img src="slices/portfolio/thumbs/tires-for-treatment.png" alt="Tires for Treatment" /></a>



To get a clear understanding of what's going on the page can be viewed at :

www.cspsolutions.ca/camrin

The custom javascript file (part of the issue) is located at:

www.cspsolutions.ca/camrin/portfolio.js

The milkbox class can be viewed at:

www.cspsolutions.ca/camrin/js/milkbox.js

Any help would be more than appreciated.

Thanks for your time,
Cam

Can someone help me figure out why these two scripts conflict in Firefox and Safari? They work fine in Internet Explorer, and they work fine in ALL browsers when they don't have to work together on the same page. When they both need to work on the same page, it's the div/column resize script that is acting up in Safari and Firefox (again, it works fine in IE). What's really strange is that when I click on my firebug icon (in the lower righthand corner) in Firefox the divs/columns resize like they should and everything looks fine. It's almost as if it's not resizing in real time like it should be, and something about me clicking that icon is making it refresh or update or something. Any help given with this matter would be greatly appreciated!


Resize two Divs (columns) to be the same height:
Code:

// Replace 'center' 'right' and 'left' with the ID names of the columns you want to balance.
// The last one is there to show how you can add more columns.  Just delete the ones you're not using.
var divs = new Array('col1, 'col2');

// Initialize Scripts - is this a browser that understands DOM?
function scriptInit() { if (!document.getElementById) { return; } }

// Set up Event Listener
function addEvent(elm, evType, fn, useCapture) { 
	if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } 
	else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; }
	else { elm['on' + evType] = fn; }
}

// Start Column Script
function setTall() {
	if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
			if (document.getElementById(divs[i]) != null)
			{ var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
		}
	for (var i = 0; i < divs.length; i++) {
			if (document.getElementById(divs[i]) != null)
			{ var div = document.getElementById(divs[i]); div.style.height = maxHeight + 'px'; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight - (div.offsetHeight - maxHeight)) + 'px'; } }
		}
	}
}

// Assign one of the columns to the TextResizeDetector.
function initTall() {
	if (document.getElementById) { for (var i = 0; i < divs.length; i++)
		{ if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
	setTall(); } 
}

// Fire Events
addEvent(window, 'load', initTall, false);
addEvent(window, 'resize', setTall, false);

/*	Detects changes to font sizes when user changes browser settings
	Fires a custom event with the following data:
	iBase  : base font size
	iDelta : difference in pixels from previous setting
	iSize  : size in pixel of text
	author Lawrence Carvalho carvalho@uk.yahoo-inc.com */

// @constructor
TextResizeDetector = function() {
    var el  = null;
	var iIntervalDelay  = 200;
	var iInterval = null;
	var iCurrSize = -1;
	var iBase = -1;
 	var aListeners = [];
 	var createControlElement = function() {
	 	el = document.createElement('span');
		el.id='textResizeControl';
		el.innerHTML='&nbsp;';
		el.style.position="absolute";
		el.style.left="-9999px";
		var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
		// insert before firstChild
		if (elC)
			elC.insertBefore(el,elC.firstChild);
		iBase = iCurrSize = TextResizeDetector.getSize();
 	};

 	function _stopDetector() {
		window.clearInterval(iInterval);
		iInterval=null;
	};
	function _startDetector() {
		if (!iInterval) {
			iInterval = window.setInterval('TextResizeDetector.detect()',iIntervalDelay);
		}
	};

 	 function _detect() {
 		var iNewSize = TextResizeDetector.getSize();

 		if(iNewSize!== iCurrSize) {
			for (var 	i=0;i <aListeners.length;i++) {
				aListnr = aListeners[i];
				var oArgs = {  iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize - iCurrSize + 'px' : "0px"),iSize:iCurrSize = iNewSize};
				if (!aListnr.obj) {
					aListnr.fn('textSizeChanged',[oArgs]);
				}
				else  {
					aListnr.fn.apply(aListnr.obj,['textSizeChanged',[oArgs]]);
				}
			}

 		}
 		return iCurrSize;
 	};
	var onAvailable = function() {
		if (!TextResizeDetector.onAvailableCount_i ) {
			TextResizeDetector.onAvailableCount_i =0;
		}

		if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
			TextResizeDetector.init();
			if (TextResizeDetector.USER_INIT_FUNC){
				TextResizeDetector.USER_INIT_FUNC();
			}
			TextResizeDetector.onAvailableCount_i = null;
		}
		else {
			if (TextResizeDetector.onAvailableCount_i<600) {
	  	 	    TextResizeDetector.onAvailableCount_i++;
				setTimeout(onAvailable,200)
			}
		}
	};
	setTimeout(onAvailable,500);

 	return {
		 	/*
		 	 * Initializes the detector
		 	 *
		 	 * @param {String} sId The id of the element in which to create the control element
		 	 */
		 	init: function() {

		 		createControlElement();
				_startDetector();
 			},
			/**
			 * Adds listeners to the ontextsizechange event.
			 * Returns the base font size
			 *
			 */
 			addEventListener:function(fn,obj,bScope) {
				aListeners[aListeners.length] = {
					fn: fn,
					obj: obj
				}
				return iBase;
			},
			/**
			 * performs the detection and fires textSizeChanged event
			 * @return the current font size
			 * @type {integer}
			 */
 			detect:function() {
 				return _detect();
 			},
 			/**
 			 * Returns the height of the control element
 			 *
			 * @return the current height of control element
			 * @type {integer}
 			 */
 			getSize:function() {
	 				var iSize;
			 		return el.offsetHeight;


 			},
 			/**
 			 * Stops the detector
 			 */
 			stopDetector:function() {
				return _stopDetector();
			},
			/*
			 * Starts the detector
			 */
 			startDetector:function() {
				return _startDetector();
			}
 	}
 }();

/*** end TextResizeDetector */

TextResizeDetector.TARGET_ELEMENT_ID = 'doc';
TextResizeDetector.USER_INIT_FUNC = function() {
	var iBase = TextResizeDetector.addEventListener(setTall, null);
};

Click link to show hidden text:
Code:

function expand(ele) {	
	if (document.getElementById('answer'+ele).style.display == '') 
		document.getElementById('answer'+ele).style.display='none';
	else
		document.getElementById('answer'+ele).style.display='';
	
	for (i=0;i <= 75;i++) {
		if (document.getElementById('answer'+i) != null && i != ele) document.getElementById('answer'+i).style.display='none';
	}
}
function collapse(ele) {
	document.getElementById('answer'+ele).style.display='none';	
}