JavaScript - Assign Active Class To Link

I would like top use this excellent script on my website, but I am not sure how to enhance the function of it. I mean I would like to use it for more than just one navigation menu. The script assigns the "current" id for the active link on the page through the "nav" menu.
What needs to be added to, or modify if I would like to use it also for "nav2" on the same page?

Thank you, Peter


window.onload=function()
{
setPage();
}

function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
for (var i=0; i < arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}

function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("nav") !=null )
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}

I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

Thanks.

Code:

/* designImages[x][0] = the image source on the page;
 * designImages[x][1] = the destination url on clicking the image;
*/

		var designImages = new Array();
		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );

		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );

		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );

		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );

		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );

		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );

		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
		
window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (x in designImages)
			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
			};
	}

function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out.

Basically we need to find a word which is inside a class and display a link.

So something like this

find a word equal to "1 line custom"

then

display this <a href="/1-line-custom.htm">click here</a>

I'm not sure if this is really simple or not.

Any help would be much appreciated.

Thanks

Will

Hey all,

Hoping someone could help me out with some javascript coding as I am a complete novice to this!

I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below).

The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on.

Can anyone help me out with how I can get this to work correctly?

javascript:

Code:

<script language="JavaScript" type="text/javascript">

var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='On';
 Lst=obj;
}

</script>

HTML:

Code:

<div id="navWrapper">

			<div id="globalNav">
				<ul>
				<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
				</ul>
			</div>
            
            <div id="localNav"></div>
        
		</div>

Hey guys,

This is my first time ever posting in a programming forum so please be nice! :)

I'll admit right away that this is for a homework assignment, but I really did try to solve it myself before I decided to post here. The instructions are to have a confirm box pop up when links with the HTML class value "external" are clicked. If the user clicks "OK" they should be directed to the linked page. If they click "Cancel" they should not be directed anywhere.

Here's my code:

Code:

function checkClass() {
	var links = document.getElementsByTagName("a");
	for ( var i = 0 ; i < links.length ; i++ ) {
		var link = links[i];
		if (link.className == "external") {
			link.onclick = clickHandler();
		}
	}
}

window.onload = checkClass;

function clickHandler() {
	if (confirm("You clicked an external link. Do you really want to leave this site?")) {
		return true;
	}
	return false;
}

The problem is that the confirm box is triggered on page load and not on link click. I know I wrote Code:

window.onload = checkClass;

but how else should I call the function? I thought Code:

if (link.className == "external")

would keep it from going as far as to the confirm box until an external link was clicked.

Thanks for pointing me in the right direction,

Johanna

Hello again eveyone it is the new guy with yet again asilly question.
OK here goes....

..... is it posable to have JS assign a sequental value as the ID for rows in a table.

As some of you might know I have an MS Excel spread sheet with data in it that I am wanting to load into a web page. I have worked out how to get the data from Excel but I want to create a JS Function that will read the file then create a table using a template like Clone table but I will need each row entered from the Excel file to have a different ID from the prev entry and different than the next entry.

Here is an example of what I'm talking about so that I am as clear as I can be.

Quote:
Function read () { Reads row 1 from Excel file}
Function filltemplatetable (){ Take the data from Function read and placed it in a template table that I have created}
Function fillmaintable() {Takes the newly created table object and inplant it in the maintable as a row}
Function assignrowid () {assign the newly added row to the maintable as ID 1}
Loop back to Function read () untill the last row in the Excel file is copied over to the web page.
I was hopeing that the loop could creat a sequenchal numbering system that I could use later on for collaps/expand not to mention filtering but I need to make this an onload so that when I update teh Excel spreadsheet this web page will update the changes.

I KNOW I KNOW I just droped a chunk on ya'll and I'm not asking for you guys to do the work for me but I am begging for some direction.

I wish I had some CODE to show you guys but I don't have any that pertains to this stage in my work because i'm not even sure it is posable if it isn't then I will need to rethink my creation steps.

THANKS AGIN in advance

hey man,i write this code ,
Code:

<html>
<head>

<script type="text/javascript">
function Do()
{
winow.location.assign("http://www.google.com");
}
</script>
<script type="text/javascript">
function replaceDoc()
  {
  window.location.replace("http://www.w3schools.com")
  }
</script>
</head>
<body>
<input type="button" value="Google" onclick="Do()" />
<input type="button" value="Replace document" onclick="replaceDoc()" />

</body>
</html>

i want to see if i click Google button

I have a randomly generated Language file that corresponds to keys, the reason Ii say randomly generated is that the letter to key values used are not standard assignments.

It seems the language coding is DEC in sets of 3 values by 5 .i.e.

"248 036 034 036 248" = A
"036 084 084 084 120" = a
(See attached : ENGLISH-1.txt)
How would I assign these values to a sentence lets say:
All great : 248 036 034 036 248 ll gre 036 084 084 084 120 t
but convert all characters to their correspondnig sets of 5 ?

This then needs to get sent to a database where it is interpreted into sets of Binary to turn on and off LEDs' ...
I have never worked with Javascript or LED's before, so any help is so appreciated.

Hi all,

I have a table with two columns, first is a text field (quantity) and second is product description. Then I have a JavaScript code in the header section that calculates total based on quantity X price. Right now, user has to input quantity in the text field in first column. I would like to change the first column to checkboxes, which I know how to do...problem is I don't know how to adjust the JavaScript so that it knows a checked box is equivalent to a value of 1. Here is a sample of the table code which gives me 2 cells (a blank text field, and a description cell of "A"), and the totals field at the bottom of the table:
Code:

<TR>
<TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_A_4.99" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></TD><TD>A</TD>
</TR>
<TR><TD>TOTAL</TD><TD ALIGN="RIGHT"><INPUT TYPE=TEXT NAME=TOTAL SIZE=10 onFocus="this.form.elements[0].focus()"></TD>

And here is the bit of JavaScript that calculates the table:
Code:

<script language="JavaScript" type="text/javascript">
<!--

function CalculateTotal(frm) {
    var order_total = 0

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {

            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price

Any ideas on how to change the item_quantity to always=1 so that I can change the input type from 'text' to 'checkbox'? Then, with this example, if the user were to check the box for "A" the "total" field would say 4.99
Thanks in advance!

If I assign an array to another variable, any changes to the array change both variables. Is it a pointer instead of a copy? Try this:

Code:

<script type="text/javascript">
Arr=['a','b','c'];
Arr2=Arr;
Arr[1]='_';
alert('Array 1: '+Arr);
alert('Array 2: '+Arr2);
// Both arrays become 'a','_','c'
</script>

Why's this happen? Is it to be expected? Variables don't do this but it's happening for arrays in IE and FireFox, maybe all others.

I'm having problems with selecting values from array.

I have a dropdown box where you choose what fruit you want to buy.
When selected the array should assign 2 values to that fruit.

I don't know how to do that.
Here's what I have.. I added comments.

Javascript part:

Code:

<script type="text/javascript">
function Fruits() {


var selectfruit = newArray( //assigning values to fruit selected from dropdown box
			newArray("Banana", 1, 1),
			newArray("Apple", 1.2, 0.5),
			newArray("Mango", 1.1, 0.9),
			newArray("Orange", 0.1, 9.99)); 
var howmanyfruits = Number(document.getElementById("howmanyfruits").value); // how many fruits are you buying
var totalfruitsowned = Number(document.getElementById("totalfruitowned").value); // How many fruits do you already have

/* cash and coupons needed to buy fruits.
   cash is cpst for 1 fruit.
   coupons is cost for 1 fruit
   cash_all is cost for all fruits you're buying
   coupons_all is cost for all fruits you're buying
   
   each fruits requires cash AND coupons to be bought. Cash and coupons are tied to the first values in Array. 
   Eg. If you choose Apple that value would be 1.2  
   
   The 'fruitsmaxtobuy' variable is not tied to the first value, but the second one in array.
   If you choose Apple that value would be 0.5.
*/
   
var cash = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 700)*10)/10;
var coupons = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 850)*10)/10;
var cash_all = Math.round((howmanyfruits * cash)*10)/10; 
var coupons_all = Math.round((howmanyfruits * coupons)*10)/10; 

var fruitsmaxtobuy = Math.round((totalfruitsowned * 0.12 * selectfruit)*10)/10;

/*
Display Error if nothing is entered or if you forget to enter total fruits 
*/

if (((howmanyfruits=="" || howmanyfruits==null) && (totalfruitsowned=="" || totalfruitsowned==null)) || ((howmanyfruits==Number(document.getElementById("howmanyfruits").value)) && (totalfruitsowned=="" || totalfruitsowned==null)))
{document.getElementById("cash").innerHTML = "Error";
document.getElementById("coupons").innerHTML = "Error";
document.getElementById("cash_all").innerHTML = "Error";
document.getElementById("coupons_all").innerHTML = "Error";
document.getElementById("fruitsmaxtobuy").innerHTML ="Error"}
else {
document.getElementById("cash").innerHTML = cash;
document.getElementById("coupons").innerHTML = coupons;	
document.getElementById("cash_all").innerHTML = cash_all;
document.getElementById("coupons_all").innerHTML = coupons_all;
document.getElementById("fruitsmaxtobuy").innerHTML =fruitsmaxtobuy}
}
</script>

HTML part:

Code:

<form action="" id="fruitcost">
<table align="center" width="37.5%" cellpadding="0" cellspacing="0">
	<tbody>
    	<tr>
        	<th colspan="2" align="center">Fruit cost calcultor</th>
        </tr>    
   		<tr>
			<td>Select Fruit:</td>
            <td align="center"><select id="selectfruit">
      		 		<option>Banana</option>
        	    	<option selected>Apple</option>
        			<option>Mango</option>
        			<option>Orange</option>
   				</select>  
            </td>   
        </tr>
        <tr>
			<td>Total Fruits Owned:</td>
            <td align="center"><input id="totalfruitsowned" type="text" /></td>
		</tr>
        <tr>
			<td>How many fruits are you buying:</td>
            <td align="center"><input id="howmanyfruits" type="text" /></td>
		</tr> 
        <tr>
        	<td>Money Needed to buy 1 fruit:</td><td><font id="cash"></font></td>
        </tr>
        <tr>
        	<td>Coupons Needed to buy 1 fruit:</td><td><font id="coupons"></font></td>
        </tr>                              
        <tr>
        	<td>Money Needed:</td><td><font id="cash_all"></font></td>
        </tr>
        <tr>
        	<td>Coupons Needed:</td><td><font id="coupons_all"></font></td>
        </tr>
                <tr>
        	<td>Nr. of fruits you can buy:</td><td><font id="fruitsmaxtobuy"></font></td>
        </tr>
        <tr>
        	<td align="center" colspan="2"><input type="button" value="Submit" onclick="Fruits()" /></td>
        </tr>    
    </tbody>
</table>
    </form>

Hello,
I am new with Javascript and running into this problem that I don't understand.

I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity):

Code:

  function baseClass() {
     this.elements = new Array;
  }

  function derivedClass() {
  }
  derivedClass.prototype = new baseClass;

Then I create two instances of the derived class, and add two elements in each:

Code:

   a = new derivedClass();
   a.elements.push("A");
   a.elements.push("B");

   b = new derivedClass();
   b.elements.push("C");
   b.elements.push("D");

When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays.

Note that if instead I use the base class:

Code:

   a = new baseClass();
   a.elements.push("A");
   a.elements.push("B");

   b = new baseClass();
   b.elements.push("C");
   b.elements.push("D");

then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect.

Could someone explain to me the problem with using the derived class?

Thank you,
Stephanos

Hey.

I have a string and I can return say, the fourth letter with output[3], but i can't assign a value to it for some reason:

I am trying to make hang man

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				var word, output, wordLength, stringLength, newLetter, letters;
				var i, n, k, health, wcheck;
				
				word = "word";
				output = "";
				letters = "";
				
				wordLength = word.length;
				
				for(i = 0; i < wordLength; i++){
					output += "_";
				}
				
				$("#inputLetters").keyup(function(){
				
					newLetter = $("#inputLetters").val();
					$("#inputLetters").val("");
					
					letters += newLetter;
					
					wcheck = false;
					
					for(i = 0; i < wordLength; i++){
						if(word[i] == newLetter){
							wcheck = true;
							output[i] = newLetter;
						}
					}
					
					if(wcheck = false){
						health++;
					}
					
					$("#letters").html(output + "<br />" + letters);
					
					
					
				});
			});
		</script>
	</head>
	<body>
		<span id="letters">
			
		</span>
		<br />
		<br />
		<input id="inputLetters" type="text" />
	</body>
</html>

I am trying to pass data from one form to another form using the url
i can get it to come up on the next pages url but how do i get it to go to a text box on the new form. is there a way of assigning text boxes.
being trying it in javascript and asp even php
would like to keep it to javascript but am open minded to just get it to work

i want to assign content of textarea to a div .. like in twitter when you type something and press "Tweet" a div is created and has the content of textarea..
how can i implement it , i know something about getElementById() but not sure how it can help me here