JavaScript - Ie Browser Select Box Issue (mootools)

I have the following script on my page:
<![if !IE]>
<div id='logowrapper'>
<span class='siteLogo'><img src='logo2.png' align=abstop /></span>
<span class='findUs'><img src='fLogo.png' border=0 title='Follow us on Facebook' align=abstop /><span class='topdvr'><img src='top_nav_dvr.png' alt=' - ' /></span><a href='www.twitter.com/' rel="nofollow" target='_blank'><img border=0 title='Follow us on Twitter' src='tLogo.png' align=abstop /></a></span>
</div>
<![endif]>
<!--[if IE]>
***** APPLY SAME DIV SO IE RECOGNIZES SAME WAY AS OTHER BROWSER
<![endif]-->

And i use the following CSS to style the NOT IE browser above:
#logowrapper{
margin:15px auto;
padding:0px 22px 0px 75px;
width:1049px;
}
.siteLogo {
width:45%;
}
.findUs {
padding: 0px 0px 0px 400px;
width:45%;
}

+++++++++++++++++++++++++++

Now my question is how do I achieve the same effect when the user in Internet Explorer browser, either thru DIV or TABLE style?

Thank you

Hi i have a php file that contain below content and it works great on firefox but not in IE8

actually IE8 doesnt reload the div

Code:

<?php
print <<<HERE
<script type="text/javascript">
$(document).ready(function() {
$("#loader").load("content.php?uname=$uname");
var refreshId = setInterval(function() {
$("#loader").load("content.php?uname=$uname");
}, 5000);
});
</script>
HERE;
?>

<div id="loader"></div>

also i tried like this and same thing happens

Code:

<?php
print <<<HERE
<script type="text/javascript">

setInterval("calldiv()", 5000);
function calldiv(){
$("#loader").load("content.php?uname=$uname");
}

</script>
HERE;
?>
<div id="loader"></div>

any help would be great

Thanks.

I'm trying to use SmoothGallery 2.1 on my website as a featured box. I tried opening the demos provided with the code in all browsers to make sure it was compatible and it showed fine in them all.

I copied the javascript onto my site and I'm able to show the gallery. However in Chrome and Internet Explorer it shows fine, but Firefox the images are spread vertically down my site and the javascript gallery box doesn't show.

I don't understand why this is an issue because it shows fine opening the demo pages and the javascript code and css is a straight copy from the folder :S

Can anyone help me out? Website I'm having the issue on is www.deewon.com

-Thanks

Hello all,

I've got a cross browser issue with two javascript codes I'm using within a website: http://www.thewursteditions.com

Someone just pointed out today that they don't see my gallery (galleria javascript) nor my rollover on the size guide.

The site works great on the iphone, firefox, and safari, but not in Internet Explorer.

I really have no idea what the issue could be as I don't do this too often but I would greatly appreciate any of your help!

Thanks

ok, so i am working on a type of Option Box that is heavily formatted with CSS and animated using JS $fx()

The $fx framework works fine on all browsers, and i have only used fairly simple code, and yet my page functions perfectly on Chrome and Safari.
but will not work in Firefox or IE

(Firefox does nothing, and IE has a couple of css issues and doesnt work either...)

http://calumk.com/else/blogpoststuff...ng_Option_Box/

if anyone could help me i would really appreciate it.

(obviously view in Chrome or safari to see how it is meant to respond)

Dear All,
I have downloaded some code from a javascript programmers website but having trouble making it work!

I have some javascript:

[CODE]

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>

[CODE]

Within the main body, my code reads:
[CODE]

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Please select your event...
<OPTION VALUE="http://www.yahoo.co.uk"> preview yahoo UK</option>
<OPTION VALUE="http://www.yahoo.com"> preview yahoo US</option>
<OPTION VALUE="http://www.yahoo.fr"> preview yahoo FR</option>
<OPTION VALUE="http://www.expedia.co.uk"> preview Expedia</option>
<OPTION VALUE="http://www.travelocity.co.uk"> preview Travelocity</option>
<OPTION VALUE="http://www.onlinepictureproof.com"> preview online pics</option>
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

[CODE]

On selection of "preview yahoo UK" from drop-down box, it takes me to the correct webpage (www.yahoo.co.uk), so no issue there. However, it opens this page up in a new window. I'm pretty sure this is because the javascript code is telling it to. However, I want the www.yahoo.co.uk page to be displayed in the same window from where the request came from? (i.e. I don't want it to open a new browser window)!

What do I have to change in the javascript to make this happen? I tried using the TARGET functionality taught to me many many moons ago, but it still fires up a new window: <OPTION VALUE="http://www.yahoo.co.uk" TARGET="_top"> preview yahoo UK</option>

I am testing this on my PC, so perhaps it could be that redirect.pl isn't held locally on my home pc, i.e. it would work once we upload the web pages to the web server?!

any help/guidance would be greatly appreciated.

I have a dropdown menu and some buttons below in my HTML:

Code:

<p>
    <select name="numberDrop" id="numberDropId" onClick="getButtons()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </p>

    <p>
    <input class="answerBtns" name="answerA" type="button" value="A" />
    <input class="answerBtns" name="answerB" type="button" value="B" />
    <input class="answerBtns" name="answerC" type="button" value="C" />
    <input class="answerBtns" name="answerD" type="button" value="D" />
    <input class="answerBtns" name="answerE" type="button" value="E" />
    </p>

What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu?


For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert.

Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected?

Thank You

Hi,

I'm trying to build this site that has an accordion styled navigation but there's one little issue. As each div is resizing, they're jittering (take a look at the site: http://balancehair.matcamp.com/)

The code I'm using to achieve it is as follows:

Code:

var all_fields = new Array('home','about','services','gallery','promos','contact');
function hoverRun(fieldName)  {
	for(var t=0;t<all_fields.length;t++) {
		if(all_fields[t]!=fieldName) {
			$('box_'+all_fields[t]).style.backgroundImage = 'url(/images/img_'+all_fields[t]+'_inactive.jpg)';	
			$('tab_'+all_fields[t]).src = '/images/tab_inactive.png';
			$('text_'+all_fields[t]).src = '/images/tab_'+all_fields[t]+'_inactive.png';
			$('box_'+all_fields[t]).set('morph', {duration: 500, transition: 'linear'});
			$('box_'+all_fields[t]).morph({width: 144});
		}
	}
	$('box_'+fieldName).style.backgroundImage = 'url(/images/img_'+fieldName+'_active.jpg)';	
	$('tab_'+fieldName).src = '/images/tab_active.png';
	$('text_'+fieldName).src = '/images/tab_'+fieldName+'_active.png';
	$('box_'+fieldName).set('morph', {duration: 500, transition: 'linear'});
	$('box_'+fieldName).morph({width: 240});
}

Possibly I'm going about it the wrong way? Any suggestions would be greatly appreciated! I only dabble in a little bit of MooTools so I'm not the greatest at it

Thanks!
mb89

Hello to all and thank you for any help beforehand.

I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct.

I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script.

Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select

Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js

test.html
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" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>
<body>
<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
</table>
</form>

</body>
</html>

Here's the content of getCities.php
Code:

<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>

im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help!
Code:

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */
/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
	initialize: function(wrapper, options){
	    this.scrolling  = false;
	    this.wrapper    = $(wrapper);
	    this.scroller   = this.wrapper.down('div.scroller');
	    this.sections   = this.wrapper.getElementsBySelector('div.section');
	    this.options    = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
	    this.sections.each( function(section, index) {
	      section._index = index;
	    });    
	    this.events = {
	      click: this.click.bind(this)
	    };
	    this.addObservers();
			if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration });  // initialSection should be the id of the section you want to show up on load
			if(this.options.autoGlide) this.start();
	  },
  addObservers: function() {
    var controls = this.wrapper.getElementsBySelector('div.controls a');
    controls.invoke('observe', 'click', this.events.click);
  },	

  click: function(event) {
		this.stop();
    var element = Event.findElement(event, 'a');
    if (this.scrolling) this.scrolling.cancel();
    this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });     
    Event.stop(event);
  },

	moveTo: function(element, container, options){
			this.current = $(element);
			Position.prepare();
	    var containerOffset = Position.cumulativeOffset(container),
	     elementOffset = Position.cumulativeOffset($(element));
		  this.scrolling 	= new Effect.SmoothScroll(container, 
				{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
		  return false;
		},

  next: function(){
    if (this.current) {
      var currentIndex = this.current._index;
      var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;      
    } else var nextIndex = 1;
    this.moveTo(this.sections[nextIndex], this.scroller, { 
      duration: this.options.duration
    });
  },

  previous: function(){
    if (this.current) {
      var currentIndex = this.current._index;
      var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : 
       currentIndex - 1;
    } else var prevIndex = this.sections.length - 1;
    this.moveTo(this.sections[prevIndex], this.scroller, { 
      duration: this.options.duration
    });
  },

	stop: function()
	{
		clearTimeout(this.timer);
	},

	start: function()
	{
		this.periodicallyUpdate();
	},

	periodicallyUpdate: function()
	{ 
		if (this.timer != null) {
			clearTimeout(this.timer);
			this.next();
		}
		this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
	}
});

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'absolute'
    } , arguments[1] || {}  );
    this.start(options);
  },
  setup: function() {
    if (this.options.continuous && !this.element._ext ) {
      this.element.cleanWhitespace();
      this.element._ext=true;
      this.element.appendChild(this.element.firstChild);
    }
    this.originalLeft=this.element.scrollLeft;
    this.originalTop=this.element.scrollTop;
    if(this.options.mode == 'absolute') {
      this.options.x -= this.originalLeft;
      this.options.y -= this.originalTop;
    } 
  },

  update: function(position) {   
    this.element.scrollLeft = this.options.x * position + this.originalLeft;
    this.element.scrollTop  = this.options.y * position + this.originalTop;
  }
});

I am trying to get these Mootool Tooltips to work:
http://demos111.mootools.net/Tips

Nothing on the internet seems up to date or valid. I can NOT get these to work. I have been consistently trying for two days. I'm not an expert at coding, but I'm good enough to produce something like this: http://www.starforge.us/apply/

Okay, so what I need this for is a module. When you hover over the image, a description will come up. It needs to follow the mouse, as long as it is inside the image. I need the style to look just like what is provided.

It gives you the JS code, the HTML code, and a CSS code. They have a webpage that tells you what things do, but I've tried. I've called their core framework, and nothing happens, added the JS code to the framework, nothing, added css framework, nothing. I can NOT get this to work.

If anyone knows ANYTHING or has a functioning download of that, ALL FILES INCLUDED. So I can just switch the cow to my stupid image and change the text, it would be most appreciated. I need this for a website my boyfriend is doing. I've looked at buying other tooltips but NONE of them have the functionality that Mootools has.

Complete list of the codes would be great. All I need is one image with descriptive text, please. We have standards, so I will accept nothing of less quality than what is above. It doesn't have to be mootools, it just has to look like it and function like it. I can't get ANYTHING to work, protools, etc. etc. People only link code EXAMPLES. I need a file I can sift through that actually WORKS. Something I can play around with, and if it works, I can THEN FIGURE OUT WHY. For some reason, when it comes to tooltips, I'm handed a bunch of crap files that DON'T WORK and at that point, I don't know how to fix them...

Thank you VERY much for ANY help.

If you have a link to the code that I can BUY it with I will. Willing to pay $5.00 for them if you can produce one that looks EXACTLY like the mootools or whatever. (that's what they're going for on codecanyon.net). Please help. I'm really sick of these stupid tooltips. :P

Hi All,

I had to switch to Mootools, because the current company I am working for uses MooTools. Till thus far I haven't had any problems with MooTools until about 10min ago.

I am using a plug in called noobSlide, You can check it out here http://www.efectorelativo.net/laboratory/noobSlide/

My problem is that for some or other reason it displays 5 images instead of 4 images(the amount I am using), leaving the lastly displayed image blank.

Code:

Head:

<link rel="stylesheet" type="text/css" href="./css/liquidstyle.css" />
		<link rel="stylesheet" type="text/css" href="./css/screen.menumatic.css" />
		<link rel="stylesheet" type="text/css" href="./css/jd.gallery.css" />
		<script src="../root/scripts/core.js" type="text/javascript"></script>
		<script src="../root/scripts/mootools-1.2.1-core.js" type="text/javascript"></script>
		<script src="../root/scripts/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="../root/scripts/menumatic.js" type="text/javascript"></script>
		<script src="../root/scripts/com_form.js" type="text/javascript"></script>
		<script src="../root/scripts/com_list.js" type="text/javascript"></script>
		<script src="../root/scripts/com_panel.js" type="text/javascript"></script>
		<script src="../root/scripts/com_tab.js" type="text/javascript"></script>
		<script src="../root/scripts/roar.js" type="text/javascript"></script>
		<script src="../root/scripts/jd.gallery.js" type="text/javascript"></script>
		<script src="../root/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
		<script src="../root/scripts/_class.noobSlide.packed.js" type="text/javascript"></script>

Code:

page:

<script type="text/javascript">
window.addEvent('domready',function(){
		var nS2 = new noobSlide({
			box: $('box2'),
			size: 945,
			items: [0,1,2,3,4],
			interval: 3000,
			fxOptions: {
				duration: 2500,
				transition: Fx.Transitions.Bounce.easeOut,
				wait: false
			},
			addButtons: {
				previous: $('prev1'),
				next: $('next1')
			}
		});
	});	
</script>

Code:

HTML:

<div class="mask2">
	<div id="box2">
		<span class="sShow"><img src="images/branding_your_website/img_1.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_2.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_3.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_4.jpg" alt="Photo" /></span>
	</div>
</div>

<p class="buttons">
	<span id="prev1">&lt;&lt; Previous</span>
	<span id="next1">Next &gt;&gt;</span>
</p>

Thanks in advance

Hi,

I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/

Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript?

Any sample codes or assistance would be greatly appreciated. Thanks in advance!

Hello,

I have a problem with my code which only appears in ie (more specifically on ie8, I haven't tested it on any other versions yet). I have absolutely no problems with firefox (v4) or Chrome (v10). I am trying to use the standalone version of the RokBox plugin (http://www.rockettheme.com/extensions-joomla/rokbox), which uses mootools-release-1.11.js.
The use of rokbox in my application is necessary for me in order to easily display some linked files with a fancy pop-up box and more importantly to use the "gallery" property so that my links can be grouped together and shown in order by just clicking some "next" button... To explain this (I 'll try to be as thorough as possible so that you get what happens):
1)I am using an index.php file which is as you can guess of course the "index".
2)I am calling some functions to compose a query for my database.
3)I am using AJAX to send those queries in another file called values.php.
4)This file takes the data from my database and echoes them.
5)The echoed values are returned and echoed in index.php as options (dropdown list).
6)When the user selects a value on a field some new queries are composed and AJAX is called again but this time it sends data to another file called results.php which echoes back the found matches to a specified div on index.php. (And also calls values.php again to pass new queries).
7) The data returned from the results contain a link to another file called details.php.
8)I am using RokBox to make these links open in a fancy pop-up box with arrows that point to the next or previous link based on the gallery that was generated by RokBox.

Now here's some parts of my code:

index.php header section (attention:some of this code is commented):
[HTML]
<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>
<!--<script type="text/javascript" src="../rokbox/mootools-core-1.3.1-full-compat.js"></script>-->
<!--<script type="text/javascript" src="../rokbox/mootools-1.2.5-core-nc.js"></script>-->
<script type="text/javascript" src="../rokbox/rokbox.js"></script>
<link href="../rokbox/themes/mynxx/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../rokbox/themes/mynxx/rokbox-config.js"></script>

<script type="text/javascript" src="myscript.js"></script>
<script type="text/javascript" src="allfields.js"></script>
[/HTML]myscript.js (part of it):
Code:

function AJAX(i,query){
    /* Establish AJAX connection */
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        try{
          xmlhttp[i]=new XMLHttpRequest();
        }catch(err){ alert("ERROR IN AJAX["+i+"]: "+err)}
      }
    else
      {// code for IE6, IE5
          xmlhttp[i]=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp[i].onreadystatechange=function()          //line 21
      {//alert("check");
          if (xmlhttp[i].readyState==4 && xmlhttp[i].status==200)
        {
            document.getElementById("opt"+i).innerHTML=xmlhttp[i].responseText;
            if(i==-1) mybox();                    //I'm re-calling RokBox here so that it can recognize the new items
        }
      }
    /* Send data to php file */
//    alert("Field: "+obj[i].field+" \n Query: "+query);
    if(i!=-1){
        xmlhttp[i].open("POST","values.php",true);
        xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp[i].send('query='+query+'&field='+obj[i].field+'&i='+i);
    }else{
        xmlhttp[i].open("POST","../results.php",true);
        xmlhttp[i].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp[i].send('query='+query);
    }
    
}

Now the problem:
On every first run of this webpage using ie I get the following error generated by the try-catch commands:
Code:

ERROR IN AJAX[0]: TypeError: Object doesn't support this property or method

Then everything freezes... IE itself throws me the following error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64;  Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR  3.0.30729; Media Center PC 6.0; .NET4.0C)  
Timestamp: Sat, 2 Apr 2011 12:34:07 UTC


Message: 'xmlhttp[...]' is null or not an object    
Line: 21
Char: 4
Code: 0
URI: http://.............../advanced/myscript.js

Line 21 is marked on the script code with comments. These errors do not reoccur when the page is reloaded (and as I already said it only happens with ie). So, by this error (and after some debugging) I get that for some reason the AJAX methods are not called as ought to be when I use the tag:
[HTML]<script type="text/javascript" src="../rokbox/mootools-release-1.11.js"></script>[/HTML]on my index's head section. So... AJAX cannot work with using mootools?

After some research, I found that mootools which uses the $ sign to start it's operations, conflicts with other libraries (such as jQuery) using the same sign ($) for their own reasons. Now I found that the way to fix this is by using jQuery.noconflict() after your jQuery script. There's only one little thing: I DON'T use jQuery, so where is the conflict?
I also tried updating mootools to a newer release (as you can see from the comments in head section) but I realized that RokBox can't work with other versions.

I am pretty desperate with this, and I would really appreciate any solutions you can offer with your experience or any suggestions you think would help. You can check the issue your self by visiting my link:

http://e-tech.ath.cx/ares/project%20...nced/index.php

HELP PLEASE!! Really need to get this working tonight!! I am applying for a design job and must be able to show my portfolio electronically!!
**If there is a reason no one is answering, please tell me**
I dont think it is that far off, but clearly something is stopping the rollover effectst for all projects EXCEPT "annual report" which is what i want the others to be like. Please, please, please help me!!

Visit link: http://twentyfourdesigns.com/portfolio2.asp to see example of what i have and what isnt working. PLEASE HELP!!
(Visit link: http://twentyfourdesigns.com/portfolio.asp to see how the code worked BEFORE separating out into jumps/anchors

(only works in ff and safari at the moment...i'll worry about ie later as i only need it to work on a mac at the moment)

**page code**
Code:

< <head>
	<title>Welcome to Twenty-Four Designs</title>
    <link rel="favicon" HREF="http://twentyfourdesigns.com/favicon.ico" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script src="js/mootools.js" type="text/javascript"></script>
	<script src="js/noobslide.js" type="text/javascript"></script>
	<script src="js/portfolio.js" type="text/javascript"></script>
    
</head>

<body>

<div id="wrap">

<div id="header"><img src="Images/24designsLogo.png" alt="Twenty-four Designs Logo" width="264" height="92" class="photo" /><a href="mailto:deb@twentyfourdesigns.com"><img src="Images/DebSmithContact.png" width="279" height="92" class="photo2" alt="Deborah Smith's Portfolio" /></a></div>

<div id="slide-mask">
<div id="slide-images">
	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" />
    
	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
    <img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
    <img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" />
    
    <img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" />
    
    <img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" />
    
    <img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" />
    
	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div>
</div></div>

<div id="slider">    
            <ul class="navigation">

                <li><a href="#AnnualReport">Annual Report&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Verizon">Verizon Wireless&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#PressKit">Press Kit&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Perfco">Perfco&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Century">Century Windows&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#UCC">United Church of Christ</a></li>
            </ul>

<div class="scroll">
				<div class="panel" id="AnnualReport"><p class="text"><strong>Middlefield Banc. 2008 Annual Report</strong> : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" /></div></div>
    
                <div class="panel" id="Verizon"><p class="text"><strong>Verizon Wireless</strong> : Slide One - Motorola Droid Box Sleeve : Slide Two - Cleveland Cavaliers' VIP Invite : Slide Three - Small Business Guide (Internal Website)</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
	<img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
	<img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" /></div></div>
    
    <div class="panel" id="PressKit"><p class="text"><strong>Rock. Ride. Remember. Press Kit</strong>  : Printed Four Color Process on Coated Paper : All Over Dull with Spot Varnish : Custom Die Cut </p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" /></div></div>
    
    <div class="panel" id="Perfco"><p class="text"><strong>Perfco Bill Insert and Postcards</strong>  : Printed Digital on Coated Paper : Variable Printed with Target Company's Name</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" /></div></div>
    
    <div class="panel" id="Century"><p class="text"><strong>Century Windows' Catalog Pages</strong>  : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" /></div></div>
    
    <div class="panel" id="UCC"><p class="text"><strong>United Church of Christ Coffee Table Book Concepts</strong>  : Concept 1 - Vellum Wrap on Cover with Spot UV : Concept 2 - Spot UV on Cover</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div></div>

</div>
</div>
</body>

**css**
Code:

* {
   
	margin-left: auto ;
	margin-right: auto ;;
   padding: 0;
   outline: none;
   /*outline: 0;*/

	
}

p.text{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000
}

p.text2{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: bolder;
	color: #3c2639;
}

/* ********************************** */

#slide-mask {
	position:relative;
	left:0;
	margin:0;
	padding:0;
	width:920px;
	height:650px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}
#slide-images {
	position:relative;
	left:0;
	width:9000px;
	height:650px;
	margin-left:auto;
	margin-right:auto;
}
#slide-images img {
	width:920px;
	height:650px;
}

#slide-thumbs {
	background-color:none;
	width:880px;
	height:75px;
	left:0;
	margin-left:auto;
	margin-right:auto;
}
#slide-thumbs img {
	width:106px;
	height:75px;
	cursor:pointer;
}

/* ********************************** */

#slider {
	position:relative;
	left:0;
    width: 900px;
    overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

.scroll {
	position:relative;
	height: 105px;
	width: 900px;
	overflow-y: hidden;
	background: none;
	margin-left:auto;
	margin-right:auto;
	
}

#scrollContainer div.panel {
	height: 105px;
	width: 900px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
    margin-right: 10px;
}

ul.navigation a {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a:hover {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #5a447a;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a.selected {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a:focus {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

/* ********************************** */

body {
	width: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(Images/bckgrnd.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}

#wrap {
	float: none;
	width: 1000px;
	height: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#header {
	width: 1000px;
	height: 100px;
	margin-left: auto ;
	margin-right: auto ;
	padding-top: 7px;
}

.photo {
	float: left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.photo2 {
	float: right;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.photo3 {
	margin-left: auto ;
	margin-right: auto ;	
}

a:link {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:visited {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:active {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:hover {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #5a447a;
	font-weight: bolder;
	text-transform:uppercase;}

**portfolio.js **
Code:

// JavaScript Document
window.addEvent("domready", function ()
  {
	var effect = {property:'left',duration:700, transition:Fx.Transitions.Linear, wait:false};
	var nS = new noobSlide({
		box: $('slide-images'),
		items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
		size:925,
		handles: $$('#slide-thumbs img'),			handle_event: 'mouseenter',

		fxOptions: effect,
	  	onWalk: function(currentItem,currentHandle){
		  $each($$(this.handles), function(handle,index){
				handle.get('tween', {property: 'opacity', duration: 'short'}).start(1);
		});
	      currentHandle.get('tween', {property: 'opacity', duration: 'short'}).start(0.5);
	 	},
	});
	
  });

I also use the mootools.js and noobslide.js...