JavaScript - Suggestions On How To Make More Simple

I have a search box on my website, that gets users from my database using php. And uses Javascript to display suggestions as the users type. What I'd like to be able to is to use the arrows to toggle down through the different suggestions. Any ideas how I would go about doing this?

Here's the javascript part of the code:
Code:

function createObject() {
	var request_type;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
	request_type = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		request_type = new XMLHttpRequest();
	}
		return request_type;
}

var http = createObject();

/* -------------------------- */
/* SEARCH					 */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
	var response = http.responseText;
	e = document.getElementById('results');
	if(response!=""){
		e.innerHTML=response;
		e.style.display="block";
	} else {
		e.style.display="none";
	}
}
}

An intranet site I've been working on is getting demo'd next week and I'm pretty proud of its functionality. It looks pretty good too but the biggest eyesore are the listboxes.

The navigation column on the left of the page has 3 large listboxes, each one housing between a dozen and several hundred options related to employees, meeting rooms, etc. For that sort of directory functionality a listbox is pretty much the only way to go.

The annoying part is that listboxes haven't really changed in 20 years. I sure wish IE supported listbox background images but since it doesn't I'm left with changing the border or changing the background color.

I don't know if you've played with that but a listbox looks just as cheap with a mono blue, red, or purple background as it does with white Does anyone know some code for livening it up? Thanks.

As it is, I'm using Walter Zorn's JS Graphics Library in an attempt to write a small screensaver-type-thing for jailbroken iPhones/iPod touches. However, on my mom's AMD Athlon 64 3000+, the drawing gets pretty laggy, so you can imagine how utterly choppy it is on my iPod. The look I'm going for is the Windows XP Mystify screen saver, with corners bouncing around the screen. So, my first question is this: are there any alternatives for this sort of thing, short of manually generating a video, gif, or multiple images to switch through, or is there any way to make my code more efficient for the CPU? (Code below)

NOTE: I know I could make it look a lot nicer by making a 'corner' class, and having each corner be an object (and even nicer by using an array of 'corners'). But I'm not sure that would help the CPU's calculations much, and make the code more efficient as a whole.

Code:

<div id="Mystify">
			<script type="text/javascript">
				var mystifyCanvas = new jsGraphics("Mystify");
				
				var tetraCorner1x = Math.floor(Math.random()*300) + 5;
				var tetraCorner1y = Math.floor(Math.random()*460) + 5;
				var tetraCorner2x = Math.floor(Math.random()*300) + 5;
				var tetraCorner2y = Math.floor(Math.random()*460) + 5;
				var tetraCorner3x = Math.floor(Math.random()*300) + 5;
				var tetraCorner3y = Math.floor(Math.random()*460) + 5;
				var tetraCorner4x = Math.floor(Math.random()*300) + 5;
				var tetraCorner4y = Math.floor(Math.random()*460) + 5;
				
				go1x = true;
				go1y = false;
				go2x = true;
				go2y = true;
				go3x = false;
				go3y = true;
				go4x = false;
				go4y = false;
				
				function MystifyJavaScript()
				{
					mystifyCanvas.clear();
					mystifyCanvas.setColor("#ff0000");
					mystifyCanvas.setStroke(2);
					
					if (go1x)
					{
						tetraCorner1x++;
						
						if (tetraCorner1x > 315)
						{
							go1x = false
						}
					}
					else
					{
						tetraCorner1x--;
						
						if (tetraCorner1x < 5)
						{
							go1x = true
						}
					}
					if (go1y)
					{
						tetraCorner1y++;
						
						if (tetraCorner1y > 475)
						{
							go1y = false
						}
					}
					else
					{
						tetraCorner1y--;
						
						if (tetraCorner1y < 5)
						{
							go1y = true
						}
					}
					
					
					
					if (go2x)
					{
						tetraCorner2x++;
						
						if (tetraCorner2x > 315)
						{
							go2x = false
						}
					}
					else
					{
						tetraCorner2x--;
						
						if (tetraCorner2x < 5)
						{
							go2x = true
						}
					}
					if (go2y)
					{
						tetraCorner2y++;
						
						if (tetraCorner2y > 475)
						{
							go2y = false
						}
					}
					else
					{
						tetraCorner2y--;
						
						if (tetraCorner2y < 5)
						{
							go2y = true
						}
					}
					
					
					
					if (go3x)
					{
						tetraCorner3x++;
						
						if (tetraCorner3x > 315)
						{
							go3x = false
						}
					}
					else
					{
						tetraCorner3x--;
						
						if (tetraCorner3x < 5)
						{
							go3x = true
						}
					}
					if (go3y)
					{
						tetraCorner3y++;
						
						if (tetraCorner3y > 475)
						{
							go3y = false
						}
					}
					else
					{
						tetraCorner3y--;
						
						if (tetraCorner3y < 5)
						{
							go3y = true
						}
					}
					
					
					
					if (go4x)
					{
						tetraCorner4x++;
						
						if (tetraCorner4x > 315)
						{
							go4x = false
						}
					}
					else
					{
						tetraCorner4x--;
						
						if (tetraCorner4x < 5)
						{
							go4x = true
						}
					}
					if (go4y)
					{
						tetraCorner4y++;
						
						if (tetraCorner4y > 475)
						{
							go4y = false
						}
					}
					else
					{
						tetraCorner4y--;
						
						if (tetraCorner4y < 5)
						{
							go4y = true
						}
					}
					
					
					
					mystifyCanvas.drawLine(tetraCorner1x, tetraCorner1y, tetraCorner2x, tetraCorner2y);
					mystifyCanvas.drawLine(tetraCorner2x, tetraCorner2y, tetraCorner3x, tetraCorner3y);
					mystifyCanvas.drawLine(tetraCorner3x, tetraCorner3y, tetraCorner4x, tetraCorner4y);
					mystifyCanvas.drawLine(tetraCorner4x, tetraCorner4y, tetraCorner1x, tetraCorner1y);
					
					mystifyCanvas.paint();
					window.setTimeout("MystifyJavaScript()", 10);
				}
				
				MystifyJavaScript();
			</script>
		</div>

Please keep in mind, there's a LOT of repeat code, so you only have to read any one part once. To test/see/use the code, you'll need to download wz_graphics.zip. Then download the attached txt file to the same directory as the unzipped wz_graphics, change it to .html instead of .txt, and open it.

Hello,

I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha.

I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information.

I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation?

If so, which should I be looking into and are there any basic examples of form validation?

I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers.

Any tips and pointers will be very much appreciated!

Thankyou,

Tom

I imagine this would be very simple for someone who knows javascript.

I want to have three fields.

First field is "posted speed limit", second field is "actual speed" and third field will be the output field.

All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however.

So, 5 miles over the speed limit would be $100 (minimum value)
15 miles over the speed limit would be $150 (add a zero)
35 miles over the speed limit would be $350.
etc.

I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean

I found this copy and paste java script for slide shows...
I can only put 1 on the page then the other don't work...
how do i edit it so i can put multiple on 1 page?

http://www.javascriptkit.com/script/.../jsslide.shtml
Code:

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

Code:

<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing:
Code:

    <!-- // another fields here //-->  
    <div id="new_field"--></div>
    <script type="text/javascript">
    var inputs = {
        fields: 0,
        target: "new_field",
        addInput: function() {
            if (this.fields != 5) {
                this.fields++;
                var newElement = document.createElement('div');
                newElement.id = this.target + this.fields;
                newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>";
                document.getElementById(this.target).appendChild(newElement);
            } else {
                alert("Only 5 fields allowed.");
            }
        },
    };</script>

i know it does not appear because the php code

Quote:
newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>";
but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks.

Hello,

I Installed a Javascript on my site but the font is very small


The code
Code:

<script type="text/javascript">
TargetDate = "03/12/2010 12:00 PM";
BackColor = 
ForeColor = 
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat =  "%%D%% يوم, %%H%% ساعة, %%M%% دقيقة, %%S%% ثانية";
FinishMessage = "It is finally here!";
</script>
<script type="text/javascript" src="http://f1zcdn.appspot.com/js/countdown.js"></script>

How can i make the font in "yellow" bigger ?

Thank you

Hi guys, first of all im sorry cause i dont know the javascript name and what should this call.

i wanted to make a Helps and Guides look like this website http://fnatic.com/ Feedback that located on the left side. If can totally make like them then i hope the script can open a new window with custom size and address bar.

I hope someone can help me... i will change my topic tittle if i know what is this call. sorry im a pure newbie in web programming. hopes you all can help me. thanks alot.

I have a Java script chat,

How would I make a scroll bar for it?

Does any one have any code for that? or do you know what I have to do?

thanks,

Yo_papa75

Hello,

Any suggestions for how to make this sort of gallery - http://www.timsimmons.co.uk/index.php ? I am making a website for a friends degree show and really like the minimal aesthetic. I'm not a fan of the usual JS plugin galleries. One thing I can't work out how they have done is link the text caption above to the images. This has been niggling at me for days! I am new to JS so please go easy on me.

Cheers,

Andy

like, for user and password on a site

I'm still pretty new to this

Hey guys, im in need of some more java script help (by the way thanks for all the other times you guys have helped me)

need to create a search box that whatever is in the search box will come up at the end of the URL

https://****/DirectConnect/Getpremie...Chassis|X#####

the last 6 charecters should be replaced with what ever number that in the search box so X##### should be replaced by 123456 for example or any other number

Hey --

Right now, I have a variable that I just make a obj that holds functions, variables etc.. but I think it's not very eloquent. Is there a better/more functional way to do it? Class.create? or new obj etc?

I have access to jquery or prototype.

This is what I have.. it is a pagination builder ..

var paginateB = {
init: function(param){
this.var = param;
this.var1 = somevalue1;
this.var2 = somevalue2;
this.hashval = $H();
buildNumbers(this);
},
buildNumbers: function(){
var var3 = somvaluepresetvalue * this.var1;
//do some stuff
},
buildLinks:function(){
var var4 = somvaluepresetvalue * this.var2;
//do some stuff
}
}

Besides it not completely working (I think I call the functions before they are declared_.. I just feel I am missing out on some eloquence here..

Should I create a class, then initialize those vars at the top?

Then somewhere else in my code, I do this:

paginateB.init(1);

HI evey one

I want to make a vote music web site , some thing like this : http://www.pmctop20.com/

we can drag each of the items in the left panel and drag it to the vote rows .

How can I do so? It's a jquery script

Thanks