JavaScript - I'm Building Navigation Using Javascript

Hi guys! I'm having trouble deciphering the javascript on my webpage

www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads.

Here is the code:

Code:

jQuery.noConflict(); jQuery(document).ready(function(){

	//VAR SETUP
	var rightBg = jQuery('#rightBg'),
		boxStuff = jQuery('.boxStuff'),
		bgControls = jQuery("#bgControls"),
		nextImg = jQuery('#nextImg'),
		prevImg = jQuery('#prevImg'),
		blogNav = jQuery('#blogNav'),
		navBox = jQuery("#navBox"),
		navBoxa = jQuery("#navBox a"),
		navHeight = navBox.height(),
		firstImg = jQuery('.wrapperli:first-child'),
		lastImg = jQuery('.wrapperli:last-child'),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPhone = deviceAgent.match(/(iphone|ipod)/);
	
	//CLOSE FUNCTION
	function closeSesame(){
		jQuery('.activeBox').fadeOut(600,function(){
			navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
			jQuery(".activeNav").removeClass('activeNav');
			rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
			bgControls.fadeIn(600);
		}).removeClass('activeBox');
	}
	
	//OPEN FUNCTION
	function openSesame(){
		navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
		rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
			jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
			navBox.fadeIn(600);
		});
		bgControls.fadeOut(300);
	}
	
	//OPACITY STUFF
	rightBg.css({opacity:".85"});
	
	//REMOVE TITLE ATTRIBUTE
	jQuery("#dropmenu a").removeAttr("title");

	//MENU
	jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
	jQuery("#dropmenu li").hover(function(){
		jQuery(this).find('ul:first').show();
	},function(){
		jQuery(this).find('ul:first').hide();
	});
	jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>&rsaquo;</span>");
		
	//PRETTY PHOTO
	jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
	jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed: 'normal', // fast/slow/normal 
		opacity: 0.35, // Value betwee 0 and 1 
		show_title: false, // true/false 
		allow_resize: true, // true/false 
		overlay_gallery: false,
		counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2 
		//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square 
		hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto 
		modal: false // If set to true, only the close button will close the window 
	});	
		
	//WINDOW LOAD
	jQuery(window).load(function(){
		//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
		jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
		
		//LOAD MESH BG
		jQuery('#mesh').fadeIn(600);
		
		jQuery('#loading').fadeOut(600);
		
		//IF GALLERY PAGE
		if(jQuery('body').hasClass('page-template-page_gallery-php')){
			navBox.fadeIn(600);
			bgControls.fadeIn(600);
			jQuery(".wrapperli:first-child a").click();
		//IF NOT GALLERY PAGE
		} else { 
			openSesame();			
		}
	});
	
	//FADE CRUMBS IN/OUT ON SCROLL
	jQuery('#pageContent').scroll(function(){
		if(jQuery('#pageContent').scrollTop()>150){
			blogNav.fadeOut(300);
		} else {	
			blogNav.fadeIn(300);
		}
	});	

	//NAV BOX STUFF
	navBox.css({marginTop:"-"+navHeight/2+"px"});
	boxStuff.css({marginTop:"-"+navHeight/2+"px"});

	//NAV BUTTON CLICK
	navBoxa.click(function(){
		
		//VAR SETUP
		var thisBox = jQuery(this).attr('href');
			
		//IF ACTIVE LINK, CLOSE STUFF
		if(jQuery(this).hasClass('activeNav')){
			closeSesame();
			return false;
		
		//IF NOT ACTIVE LINK
		}else{
			
			//IF CONTENT OPEN
			if(navBox.hasClass("openNav")){
				navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
				jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
				jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
					jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
				});
			
			//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});
	
	//CLICKING GALLERY IMG
	jQuery(".wrapperli a").click(function(){
		
	if(iPhone){
		return false;	
	}else{
		//GET HREF
		var galleryHref = jQuery(this).attr('href'),
			galleryTitle = jQuery(this).attr('title'),
			imageInfo = jQuery('#imgInfo'),
			itemNumber = jQuery(this).parent().index() + 1;
			numberItems = jQuery('.wrapperli').length;
				
		//CHANGE TITLE INFO	
		if(galleryTitle){
			imageInfo.hide().html(galleryTitle + "&nbsp / &nbsp"+ itemNumber + " of " + numberItems).fadeIn(150);
		} else {
			imageInfo.hide();
		}
		
		//CHANGE CLASSES
		jQuery(".wrapperli").not(this).removeClass('activeImg');
		jQuery(this).parent().addClass('activeImg');
		
		//IF MENU OPEN, CLOSE IT
		if(navBox.hasClass("openNav")){ closeSesame(); }
		
		//CHANGE BACKGROUND
		jQuery.backstretch(galleryHref, {speed: 300});

		return false;
	}
	});
	
	//NEXT CONTROLS
	nextImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.next().length > 0){
				activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				firstImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	//PREV CONTROLS
	prevImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.prev().length > 0){
				activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				lastImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	// Keyboard shortcuts
    jQuery(document).keydown(function(e) {
    	var unicode = e.charCode ? e.charCode : e.keyCode;    	
        if (unicode == 39) { nextImg.click();} // right arrow
        else if (unicode == 37) {prevImg.click();} // left arrow
    });
    
});

and I changed the open sesame to closed sesame here in the code

Code:

//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});

but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated!

Can someone explain to me as to why the "New Art" button in the navigation doesn't have the "on" function as the others where you hover over the button and the text turns orange?

Keep in mind, I didn't design/develop this site...I'm merely just trying to insert a button in the nav for a friend of mine. Thanks for your help it is greatly appreciated!

Here's the website: http://www.thejam2.com/two/

And the code:

Code:

}

menuImage = {};
function makeMenu(){
	var imgs = ["thejam", "newart", "theartist","viewit","orderit","theCollage","theBorder","detailedImages","theMusicians"];
	for(i in imgs){
		menuImage[imgs[i]+"off"] = new Image();
		menuImage[imgs[i]+"off"].src = "pics/menu_"+imgs[i]+".gif";
		menuImage[imgs[i]+"on"] = new Image();
		menuImage[imgs[i]+"on"].src = "pics/menu_"+imgs[i]+"_on.gif";
	}
	document.write('<div id="menu"><table width="'+((ns4) ? 794 : '100%')+'" cellpadding=0 cellspacing=0 border=0>');
	if(ns4) document.write('<tr><td><img src="pics/spacer.gif" width="418" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td><td><img src="pics/spacer.gif" width="94" height="1"></td></tr>');
	document.write('<tr><td width="100%">&nbsp;</td>');
	document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=about','thejam','jamMenu') + '<br></td>');
	document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('newart.php','newart','newart') + '<br></td>');
	document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('bios.php?artist=mike_keirstead','theartist') + '<br></td>');
	document.write('<td width="94" background="pics/button_starBig.gif" width="75">' + makeButton('jam2.php','viewit','viewMenu') + '</td>');
	document.write('<td width="94" background="pics/button_guitarBig.gif" width="75">' + makeButton('jam2.php?loc=order','orderit') + '</td></tr>');
	document.write('<tr><td>&nbsp;</td><td>');
	makeJamMenu();
	document.write('</td><td colspan="4" align="center">');
	makeViewMenu();
	document.write('</td></tr></table></div>');
}

Hi
I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question.

The code is in Jquery and Javascript and i'm still learning.

I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too....


Code:

//Next Page Function
	$('.next').click(function() {
		if (current_page == no_pages){
			//do nothing
		}
		else{

			if (flag==false)
			{
				try {
					checkAnswer(document.getElementById('quizForm'))
					flag=true;
					return false;
				}
				catch(err)
				{
					if (err.number !=-2146823281)
					{
						alert(err.description);
					}
				}
			}
			next_page = (current_page + 1);
			$("#content").fadeOut("slow",function(){
				$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}		  
			);
			current_page ++;
			$("#current_page").html(current_page);
			progress_bar();
		}
	
	});

This is what the code looks like now without the changes....

Code:

//Next Page Function
	$('.next').click(function() {
		if (current_page == no_pages){
			//do nothing
		}
		else{
			next_page = (parseInt (current_page) + 1);
			$("#content").fadeOut("slow",function(){
				$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}		  
			);
			current_page ++;
			$("#current_page").html(current_page);
			progress_bar();
		}
	
	});

I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing.

I put this bit together but it doesn't do anything....


Code:

else{    

                        

        if (document.getElementById('quizForm')){

 

            if (document.quizForm.cc.disabled==true)

                      document.quizForm.cc.disabled=false

 

else

 

{return true;}

Any advise? Thanks.

I am trying to figure out how to code this type of horizontal navigation like this site. http://www.maxdesign.com.au/

When you click on, say, "News", the CSS button turns red and white. I am thinking that this is done with JavaScript and a basic CSS list menu. But I cannot seem to find an example of this the of menu anywhere. The Max Design site is based on WordPress and apparently this navigation uses an API built into the WP framework.

I need this type of horizontal menu for a custom coded CSS and PHP site.

Any and all help would be appreciated. Either code or point me to a tutorial.

Thanks,

WiLd

Hello all!

I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more.

It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca).

My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time.

Here is my Javascript:

Code:

		

		var categoryLink=new Array(); 
		var counter;
		var link = "";
		categoryLink[0] = "";   
		categoryLink[1] = "";   
		categoryLink[2] = "";   
		counter = "0";

$(document).ready(function() {
        $(".atonal").live('click', function() { {
          alert("sometext");
          		if (categoryLink[0]=="") {
					categoryLink[0] = "atonal";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[0] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".tonal").live('click', function() {
          alert("sometext");
          		if (categoryLink[0]=="") {
					categoryLink[0] = "tonal";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[0] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});


$(document).ready(function() {
        $(".being").live('click', function() {
          alert("sometext");
         categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
          
          		if (categoryLink[1]=="") {
					categoryLink[1] = "being";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[1] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".doing").live('click', function() {
          alert("sometext");
          		if (categoryLink[1]=="") {
					categoryLink[1] = "doing";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[1] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});


$(document).ready(function() {
        $(".abstract").live('click', function() {
                 alert("sometext");
          		if (categoryLink[2]=="") {
					categoryLink[2] = "abstract";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[2] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

$(document).ready(function() {
        $(".documentary").live('click', function() {
                 alert("sometext");
          		if (categoryLink[2]=="") {
					categoryLink[2] = "documentary";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
					
				
				else {
					categoryLink[2] = "";
					$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
				}
          
        });
});

and the HTML in question:

Code:

<table>
<tr>
<td height="35" width="210" valign="top">choose your sound</td>
<td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td>
<td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your text</td>
<td width="165" valign="top"><a href="#" id="being">being words</a></td>
<td width="165" valign="top"><a href="#" id="doing">doing words</td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your image</td>
<td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td>
<td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td>
</tr>
</table>

I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great!

Hello,

I'm trying to build a simple API - it's running fine in Safari and Firefox but failing in IE and Opera. In order to isolate the problem I've stripped it right back 'til all the methods are just alerting their own name. Safari and Firefox give me loads of alerts, but in Opera and IE I just get one, LMSInitialize() when the page first loads - at least I know the browser is finding the API properly.

IE also runs LMSCommit() and LMSFinish() when you close the browser window; that's good, but not enough. Opera doesn't even do that. The trigger for all this is a Flash movie created in Adobe Captivate, and published with a whole lot of its own JS which I can't touch - it's running in an iframe, and it's the parent window which includes the API. I need to work out whether there's an issue in my code, or if it's to do with the movie or the publication settings - that side of things is out of my control.

Here's the full code of my test version of the API. I'd really appreciate any comments!

Thanks,
Ben

Code:

function SIScormAPI(){
	this.version = '1.2';

	this.LMSInitialize = LMSInitialize;
	this.LMSFinish = LMSFinish;
	this.LMSGetValue = LMSGetValue;
	this.LMSSetValue = LMSSetValue;
	this.LMSCommit = LMSCommit;
	this.LMSGetLastError = LMSGetLastError;
	this.LMSGetErrorString = LMSGetErrorString;
	this.LMSGetDiagnostic = LMSGetDiagnostic;
}

function LMSInitialize(){

	var alertStr1 = 'LMSInitialize() - v.'+this.version;
	alert(alertStr1);
}

function LMSFinish(){

	var alertStr2 = 'LMSFinish()';
	alert(alertStr2);
}

function LMSGetValue(){

	var alertStr3 = 'LMSGetValue()';
	alert(alertStr3);
}

function LMSSetValue(){

	var alertStr4 = 'LMSSetValue()';
	alert(alertStr4);
}

function LMSCommit(){

	var alertStr5 = 'LMSCommit()!!!!!';
	alert(alertStr5);
}

function LMSGetLastError(){

	var alertStr6 = 'LMSGetLastError()';
	alert(alertStr6);
}

function LMSGetErrorString(){

	var alertStr7 = 'LMSGetErrorString()';
	alert(alertStr7);
}

function LMSGetDiagnostic(){

	var alertStr8 = 'LMSGetDiagnostic()';
	alert(alertStr8);
}

API = new SIScormAPI();

Hey all,

I have an issue building a query string. Basically, I have this:
/sites?order=site_numper_page=20&
But I would like to convert it to this:
/sites?order=site_num&per_page=20

I have tried this to check if the current iterator is less than the length of the object and if so, then add the "&", otherwise, don't. But it doesn't seem to work:
Code:

		$.each(query_string, function(key,value){
			params += key + '=' + value;
			if((value + 1) != query_string.length){
				params += "&";
			} 
		})

Thanks for any response.

I work for a university in Texas, and recently my boss indicated he wanted me to build a "help button" widget for our computers. We run both Mac and Windows, and will be upgrading to Windows 7 soon, as I understand it supports widgets. According to the guide I'm working my way through, Widgets can built using a combination of HTML and Javascript. While I know HTML, I know next to nothing about Javascript, hence, my question. Here's what I need the script to do: Pull the logged in username, pull the machine name, pull the time and date, then throw up a dialogue box which will send everything to an e-mail address/server. Does anyone know a spot for me to begin? I must confess, I'm a little befuddled by Javascript.

Thanks

Hi,

I have an array but I'm not exactly sure how to finish the build using an if statement. I have 6 elements and need the build to load a different top image for each array that loads that matches the specific element. Here is what I have but it only shows the first top image no matter what:
PHP Code:
<LINK REL=StyleSheet HREF="scrolling_popup/scrolling_popup.css" TYPE="text/css">
    <script type="text/javascript" language="javascript" src="scrolling_popup/scrolling_popup.js"></script>
    <script type="text/javascript" >
        var array = new Array();
        array[0]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/1.jpg" border="0" alt=""></a>';
        array[1]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/2.jpg" border="0" alt=""></a>';
        array[2]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/3.jpg" border="0" alt=""></a>';        
        array[3]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/4.jpg" border="0" alt=""></a>';
        array[4]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/5.jpg" border="0" alt=""></a>';        
        array[5]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/6.jpg" border="0" alt=""></a>';
        var num=Math.floor(Math.random()*(array.length) );      
        var html_code = array[num];
        if (array[0]) {
buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop1.png">', html_code);
}
        else if (array[1]) {
buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop2.png">', html_code);
}
        else if (array[2]) {
buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop3.png">', html_code);
}
        else if (array[3]) {
buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop4.png">', html_code);
}
        else if (array[4]) {
buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop5.png">', html_code);
}
        else {
buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop6.png">', html_code);
}

    </script> 


Any ideas?

Hi Peers,

i am trying to build a template for my work.
1- it consists of 3 rows of data pulled from a databse based on 3 parameters entered in a form.
those 2 rows includes 60 cells each ( 60 columns : 60 months)
2- i will have another 2 empty rows where i have to call another data from another table or enter it manually..
3- i ll have the last row that will hold calculation results based on the above rows..

Any idea on how to build that ?


\please let me know if you need more details or mock up .. it almost like an excel web spreadsheet except that sopme data is pulled directly from a database..


thank you

I'm looking at building an interactive desktop gadget for our company computers that functions similar to Clippy (less annoying though).

The idea is for users to be able to type in keywords or questions and have the gadget present links to pages on our intranet. So similar to a search engine but more focused on answering questions as opposed to just returning a hundred results.

I've got a moderate understanding of java so I know I could do something like IF "Textbox" EQUALS "Keyword" THEN DO "THAT". Need a little more sophistication though, it should be able to accept multiple keywords and weigh the search results accordingly. I'm sort of picturing an updatable XML table like this:

KEYWORD This is the result
KEYWORD This is the result

Or an array in a separate .js file.

Maybe there's a better way than that actually but it's what I know. Has anyone got some advice on this? Thanks.

hello,

I have a text input box where users can input values separated by a line break. What I need to do is to take those values and put them all into an array once they hit "submit".

I can do this one line at a time, but I would like to be able to do it all in one hit.

Can it be done in javascript?

thanks in advance...

Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed.

However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior.

What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown.

Here is the code I am using..

PHP Code:
function searchCats(text) {
    
    // Set URL for ajax request
    var url = 'search_cats.php?search_text='+text;
    
    // Set up element we're modifying
    var results = document.getElementById('cat_list');
    
    // Trim string
    text.replace(/^ss*/, '').replace(/ss*$/, '');
    
    if (text.length < 3) {
        alert('Please enter a search string more than 2 characters.');
        return;
    }
    
    // Send the request, giving it an anonymous function that acts as the oncomplete event
    
    ajaxRequest(url, (function(ajaxResponse) {

        /* Deal with results */
    
        // First we remove all current childs
    
        while(results.hasChildNodes()) {
            while (results.childNodes.length >= 1) {
                results.removeChild(results.firstChild);  
            } 
        }
    
        if (ajaxResponse == '') {    
        
            // Display no results text
            document.getElementById('no_results').style.display='block';
        
        } else {
        
            // Hide no results text
            document.getElementById('no_results').style.display='none';
        
            // Display loading text
            document.getElementById('loading_results').style.display='block';        
        
            // Check for occurence of cat seperator (if not there then we know we only have one results)
            var sep_found = ajaxResponse.indexOf('!@!');
        
            if (sep_found === -1) { // One result only
            
                // Seperate ID & cat name
                var parts = ajaxResponse.split('^@^');
            
                // Create option element
                var option = document.createElement('option');
            
                // Add attribute
                option.setAttribute('value', parts[0]);
            
                // Create text node
                var textNode = document.createTextNode(parts[1]);
            
                // Append text node to option element
                option.appendChild(textNode);
            
                // Now append option element to select list
                results.appendChild(option);
            
            } else {
            
                // Seperate cat data
                var cats = ajaxResponse.split('!@!');
                
                // Loop through cat data
            
                for(i = 0; i < cats.length; i++) {
                
                    // Seperate ID & cat name
                    var parts = cats[i].split('^@^');
            
                    // Create option element
                    var option = document.createElement('option');
            
                    // Add attribute
                    option.setAttribute('value', parts[0]);
            
                    // Create text node
                    var textNode = document.createTextNode(parts[1]);
            
                    // Append text node to option element
                    option.appendChild(textNode);
            
                    // Now append option element to select list
                    results.appendChild(option);                
                
                }
            
            }          
        
        }

    })); 

    // Hide loading text
    document.getElementById('loading_results').style.display='none';

} 


Thanks guys!