JavaScript - Slide In Id When Document Ready

Hi Guys,

I've written the below code which submits to a servlet, does a bit of processing and returns a JSON object. I'm reaching the servlet, but I never reach the alert("ready()") in the JavaScript.

It looks as though the readyState never actually reaches state 4. Any ideas what is wrong ??

Thanks

Code:

function fetchhits() { 	
	var httpRequest = null;
	var url = "http://localhost:8080/Json/FetchTopHit?amount=1";
	
	try {
		httpRequest = new XMLHttpRequest(); /* e.g. Firefox */
		} catch(e) {
		  try {
			  httpRequest = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
		  } catch (e) {
		    try {
		    	httpRequest = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
		    } catch (E) {
		    	httpRequest = false;
		    }
		  }
		}	
	
	httpRequest.open("GET", url, true);
    httpRequest.onreadystatechange = handler;
    httpRequest.send(null);
} 

function handler() {
	alert("hander() start");
    if (httpRequest.readyState == 4) {
    	alert("ready...");
        if (httpRequest.status == 200) {
            processJson (httpRequest.responseText);
        }
    }
}

function processJson(jsonObjectString) {
	alert ("Process the Json Object");
}

I'm trying to diagnose the javascript part of an ajax script:
Code:

<form>
<ul id='May120128AM' name='apt_time' value='May120128AM'>
<input type="hidden" id='May120128AMhidden'  name="user_id" value='May120128AM'>
</form>

<script type="text/javascript">
<!--
var request;
request = new XMLHttpRequest();

function checkData()
{
   alert(request.readyState);
}

var apt_time = encodeURIComponent(document.getElementById(May120128AM').value);

var userid = encodeURIComponent(document.getElementById(May120128AMhidden').value);

 var parameters = "apt_time"+apt_time  //+"&"+"user_id"+userid; 
request.open("POST", "/cgi-bin/my_script.php", true);
request.onreadystatechange = checkData;
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(parameters);
//-->
</script>

The checkData script puts each readyState in an alert box, so I know the javascript is firing.

If I change the red line of code to this, the alert boxes no longer pop up, so I assume the javascript is not firing:
Code:

 var parameters = "apt_time"+apt_time+"&"+"user_id"+userid; 

I thought name/value pairs were written like this:
Code:

name1=value1&name2=value2

I though that was exactly what the red line of code was doing. Does anyone know why it isn't firing?

UPDATE:
This works:
Code:

var parameters = "apt_time=+apt_time+&user_id=+userid";

I don't know why the above works and the other doesn't. They both look like they do the same thing - this:
Code:

apt_time=value1&user_id=value2

Hi,
I used this link fader script on my website: http://www.javascriptkit.com/script/...inkfader.shtml.

The browser activates this script when I move my mouse over the link - that's understood. But unlikely the browser needs 1 or 2 seconds to activated it (to read it) so the whole effect is delayed - it happens every first time I use the links after loading the page.

Question: is there a way to make the browser "read and remember" the script before I use the link so no delays appear? Any onLoad formula?

Thanks

I have a website which includes stories with multiple chapters. These chapters have a set of clickable arrows at top and bottom to take you forwards and back through the chapters, including a "last chapter" arrow.

When a story is in progress, the URL of the last chapter changes with each chapter added. Rather than having to go back into every previous chapter and change the URL of the last chapter by hand, I set them up so that the "last chapter" arrow is actually in an inline frame. That way, I only have to change the URL once, in the file go_end.htm which is the source for the frame. So both the picture of the arrow and its hyperlink are being accessed from outside.

My web pages are also set up to run on all major browsers and to detect the window width and resize all the artwork to fit, regardless of the browser and whether or not it accepts percentage sizes. Go_end.htm is no exception - it contains Javascript code which resizes the arrow so it is the same size as the ones which are actually in the parent page, outside the frame.

This setup works perfectly in IE and Netscape, but Google Chrome either fails to display the arrow or makes it huge so it doesn't fit the frame. This seems to be because their superfast new Javascript editor is *too* fast. If I bung an alert command into go_end.htm, asking it to say the value of picWidth (the variable which sets the width of the arrow) as it loadfs, what happens is this.

Google Chrome displays an alert saying that picWidth is zero, then loads the first instance of the inline frame with no got-to-end arrow. Then it displays an alert giving a proper value for picWidth and loads the second inline frame with the arrow correctly displayed and sized. If I take out the alerts, it doesn't load the arrow in *either* frame. It's obvious that inserting the alert command somehow forces it to recognise the value of the variable which it then retains for long enough to load the arrow on the second pass.

Any ideas for some command other than alert which would trick it into not loading the image until it's recognised the variable? If I put a time delay on loading the frame I can't see that that would help - the problem is that from the point at which it starts actually loading the frame it needs to wait for the variable to be set.

My code is here and it works ...
However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ...

What am i missing ?

Regards,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
	
   

	function createTable(){
	var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));

	document.write("<table border=\"1\">");
	for (var i=0; i<Etudiant.length; i++) {
	Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
	alert("Nice to see you "+Etudiant[i]);
	
	document.write("<td>"+Etudiant[i]+"</td>");
	j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
	for (h=0;h<j;h++){ 
	notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
	document.write("<td>"+notes[h]+"</td>");
	}
	
	
	document.write("<tr>");
	}


	
	document.write("</tr>");
	document.write("</table>");
	document.getElementById('monTab').innerHTML=Etudiant;
}


	</script>
<BODY>

<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>

<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>

I found this line in one of the scripts on javascript.kit

<code>
if(document.layers|| document.getElementById|| document.all)
</code>

Could someone give me an idea on why this line would be used in a code?

Thank you very much

I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes:

1. There will be a title bar placed within a right and left arrow on either side.
2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list).
3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out.

I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated..

Hello guys! :-)
So, this is my first post so bare with me

I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made.
It has to be javascript, and as simple as possible :-)

I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result.
So:

Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed?

Ty in advance! :-)

I am using ASP.NET and AJAX here.

basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example:

<< prev [image1] [image2] [image3] [image4] Next >>

<< prev [image5] [image6] [image7] [image8] Next >>


so when the user presses next or previous, it will SLIDE to the left/right.

the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev.

how can I go about doing this type of effect?

I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this?

<div style="padding-left:45px;width:852px;">
<a href=".html" class="Button">
<div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 1</span><br />

</div>
</a>

<a href="" class="Button">
<div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 2</span><br />
</div>
</a>
<a href="" class="Button">
<div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat">
<span id="homeButtonText">Question 3</span><br />
</div>
</a>
</div>

i am trying to slide multiple elements in my page at the same time.
I wrote a script that can do one element at a time:
Code:

	var count;
	var obj;
	function slide(elem,endy,endx,time){
		obj=elem;
		count=time;
		currenty=obj.style.top.split('p')[0];
		currentx=obj.style.left.split('p')[0];
		deltay=endy-currenty;
		deltax=endx-currentx;
		yrate=deltay/time;
		xrate=deltax/time;
		framey=0;
		framex=0;
		fooy=setInterval("movey(obj)",1);
		foox=setInterval("movex(obj)",1);
		
		
		
	}
	
	function movex(obj){
		framex++;
		currentx=currentx*1+xrate;
		obj.style.left=Math.floor(currentx);
		if(framex==count){
			clearInterval(foox);
		}
	}	
	
	function movey(obj){
		framey++;
		currenty=currenty*1+yrate;
		obj.style.top=Math.floor(currenty);
		if(framey==count){
			clearInterval(fooy);
		}
	}

is their anyway to modify this code so it does not use global variables and can run multiple instances simulatnuasly.

Good Day:
I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site.
Thanks very much in advance.

My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong?
here is my js
Code:

var interval = 1500; //1.5 secs
 var random_display = 0; //goes in order
 //defines where the images are stored
 var imageDir = "../image/slideshow1/";
 
 //set images here
 var imageNum = 0;
 imageArray = new Array();
 imageArray[imageNum++] = new imageItem(imageDir + "01.jpg"); 
 imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
 imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
 imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");
 
 //find total amount of images using .length
 var totalImages = imageArray.length;
 
function imageItem(image_location){
	this.image_item = new Image();
	this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
	return(imageObj.image_item.src)
}

//This is used if random is set to 1
function randNum(x, y){
	var range = y - x + 1;
	return Math.floor(Math.random() * range) + x;
}

//get next image
function getNextImage(){
	if(random_display){
		imageNum = randNum(0, totalImages-1);
	} else{
		imageNum = (imageNum+1) % totalImages;
	}
	//return the value now.
	var new_image = get_ImageItemLocation(imageArray[imageNum]);
	return (new_image);
}

function getPrevImage() {
	imageNum = (imageNum-1) % totalImages;
	var new_image = get_ImageItemLocation(imageArray[imageNum]);
	return (new_image);
}

function prevImage(place) {
	var new_image = getPrevImage();
	document[place].src = new_image;
}

//function to switch images
function switchImage(place){
	var new_image = getNextImage();
	document[place].src = new_image;
	var recur_call = "switchImage('"+place+"')";
	timerID = setTimeout(recur_call, interval);
}

Here is the html with buttons to control the slideshow
Code:

<div id = "articles">
    	<div class= "new_article">
    		<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
			<a href="#" onClick="switchImage('slideImg')">play slide show</a>
			<a href="#" onClick="clearTimeout(timerID)"> pause</a>
			<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
			<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
    	</div>
	</div>

hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!.
Example of how it works here Link
Code:

<head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;

function myback()
{
t += 786;

with(document.getElementById("contents"))
{
if (t > 0)
t = 0;

if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}

function myforward()
{
t -= 786;

with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;

if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
  <tr>
    <td rowspan="2">
      <div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
    <td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
  </tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>

Hope this is clear. Thanks.