JavaScript - Swapping Out Tag Info With Javascript Onclick Dynamically Inside A Php Loop

Hello All! First I would like to say that I have attempted to find an answer to my issue and there is obviously an enormous amount of help across this and other forums regarding how to use Javascript to modify your CSS styles including changing the z-Index property.

I am to the point where I believe maybe it just needs an extra set of eyes to help me understand what I am doing wrong here!

My dilemma is that I have a table on my site which has four images, one for different areas of the site. Below that table area, I have a space where I plan to display the text describing those sections upon mouse rollover.

My goal is to have an outer div tag with position relative and then contain 4 div tags inside of that with position absolute so that I can stack them under the background all with negative z-Indexes.

I have a javascript that is called on mouse over and mouse out to raise the z-Index of each div text area, but it is not working.

See the code below:

Javascript for the z-Index change:

Code:

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

//function to change zIndex

function swapMyImages(obj,z){
var theObj;
	//ie4
	if(document.all){
		theObj=document.all(obj);
		theObj.style.zIndex=z;
	}
	//ie5,6, Mozilla 1.0 and Opera 6
	if(document.getElementById){
		theObj=document.getElementById(obj);
		theObj.style.zIndex=z;
	}
	//nn4x
	if(document.layers){
	theObj=document.layers[obj];
	theObj.zIndex=z;
	}
}
//-->
</script>        
</head>

Anchor for one of the images with mouse overs attached:

Code:

<a class="thumb" href="..." title="Visit Our Shop" onmouseover="swapMyImages('shoptext','10')" onmouseout="swapMyImages('shoptext','-10')"><img src="images/hometable_back.jpg" width="190" alt="Tee Shirt Shop" longdesc="..." /></a>

my Div section with the text areas set to negative z-Index:

Code:

   <div id="hometext">
      	<div id="servicetext">service text here</div>
        <div id="shoptext">shop text here</div>
        <div id="portfoliotext">[portfolio text here</div>
        <div id="contacttext">contact text here</div>
     </div>

my style sheet items for the divs:

Code:

.hometext {
	position:relative;
	float: none;
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
}

#servicetext {
	position:absolute;
	float: none;
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;
}

#shoptext {
	position:absolute;
	float: none;	
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;	
}

#portfoliotext {
	position:absolute;
	float: none;	
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;	
}

#contacttext {
	position:absolute;
	float: none;	
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;	
}

How does one go about swapping the Javascript Source file for another on when a checkbox is clicked, obviously the sources have to revert to their normal state on reload or unchecking the checkbox:

this would be the original source:
<script type="text/javascript" src="Includes/eng_chars.js"></script>

it would be swapped for this souce file on checkbox checked:

<script type="text/javascript" src="Includes/heb_chars.js"></script>

and then returned to
<script type="text/javascript" src="Includes/eng_chars.js"></script>
when the checkbox is unchecked, page is reloaded or the the reset (clear form) button is pushed

Thanks

Hi all,

I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code

Code:

function updateStatusIcons(retText) {
	updatingStatuses = true;
	var updates = retText.split("|");

	for (z=0; z<updates.length; z++) {
		var sysId = trim(updates[z].split(":")[0]);
		var projectId = trim(updates[z].split(":")[1]);

		if (projectId != "") {
			var statusImg = getSysidsImg(sysId);
			statusImg.src = "images/tick.gif";
			statusImg.className = "hand";
			statusImg.title = "Project "+ projectId +" created, Click here to find in project search";
			statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; };

			// Remove sysid from csv
			removeSysidfFromCSL(sysId);
		}
	}


	if (pollingOn) {
		pollingupdate = setTimeout("checkForProjectComplete()", 5000);
	}
	updatingStatuses = false;

	if (runErrorFunction) {
		markErrors();
	}
}

Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to?

TIA,
Dale

Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea).

Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?!

This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this?
Code:

<tr>
	<td>
		<input type="text" id="rejectName" />
	</td>
	<td>
		<select id="divSelectReason">
			<option value="" selected="true">Enter Rejection Reason</option>
			<cfoutput query="queryReasonReturn"> 
				<option>#codeAndReason#</option>
			</cfoutput>
		</select>
	</td>
	<td>
		<textarea id="editReason" cols="30"></textarea>
	</td>
</tr>

Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element.

Hi Guys,
I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this...
Here i tried like this,
<html>
<head>
<script>
function copy_data(val,id,textareaValue){
var enteredText = val;
alert("enteredText -----------"+enteredText);
var boxId= id;
alert("boxId-----------"+boxId);
var textValue= textareaValue;
alert("textValue-----------"+textValue);
var beforeBrac = textValue.substring(0,textValue.indexOf("<"));
alert("beforeBrac -----------"+beforeBrac );
var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">"));
alert("inbracket -----------"+inbracket);
if(boxId = "1"){
inbracket = val;
}
alert("inbracket -----------"+inbracket);
var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length);
alert("afterBrac -----------"+afterBrac );

var fstr = beforeBrac +"<"+inbracket +afterBrac ;
if(boxId == "1"){
document.getElementById('txtArea').value = fstr;
alert("final str value is"+fstr);

}
}
</script>
</head>
<body>
<input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/>
<input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/>
<textarea rows="2" cols="20" id="txtArea">
At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP.
</textarea>
</body>
</html>

three text boxes with some value [ value1 ] [value2] [value3 ]
this is the text area content:-
At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP.

the output should be :-
At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP...
But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ...

So i have this weird problem that only occurs in IE, in combination with Adsense. I also tried FF and Chrome and it does not occur in those browsers. I use javascript to swap around divs, since css 'order' is not supported in every browser (at least not working for my iphone 4). The swapping is working fine in IE when you resize from a screen larger than 1024 to a screen smaller than 1024 and then to a screen larger than 1024. However it does not work well when you open the page/script in a screen smaller than 1024 and then make it larger (in IE). The sidebar 'aside' stays on the right side after 'article' instead of moving to the left. This only happens when i use adsense in the sidebar.. Otherwise it all works fine... Very weird to me.. Anyone who can help out?

See this weird problem he JS Bin

Here is the code:

Code:

<html>
    <head>
<style>
    html,
    body {
        padding: 0;
        margin: 0;
        background: #eee;
    }
    body {
        padding: 0 3%
    }
    header,
    footer,
    .slogan,
    .page-wrapper,
    .headline-wrapper,
    aside,
    article {
        box-sizing: border-box
    }
    .slogan,
    aside,
    article {
        background: #fff
    }
    aside,
    article {
        padding: 20px;
        border-radius: 10px;
        margin: 10px 0 0 0;
        -webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
        box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
    }
    header,
    footer {
        padding: 20px
    }
    @media (min-width:1024px) { 
        .page-wrapper,
        header,
        footer {
            width: 100%;
            margin: 0 auto;
            max-width: 1200px;
        }
        .page-wrapper {
            display: table;
            width: 100%;
            padding-top: 50px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .page-wrapper > aside,
        .page-wrapper > article {
            display: table-cell;
            padding: 20px;
        }
        .page-wrapper aside {
            width: 30%
        }
        article {
            position: relative
        }
        .slogan {
            padding: 0 20px;
            border-bottom: 0px;
            width: 100%;
            margin: 0;
            line-height: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: -50px;
        }
        .slogan {
            border-radius: 10px 10px 0 0;
            -webkit-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
            -moz-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
            box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
            background: #ddd;
        }
        article {
            border-radius: 0 0 10px 0
        }
        aside {
            border-radius: 10px 0 0 10px
        }
    }

    </style>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script type='text/javascript'>
    function handleMargins() {
         var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        if(width < 1024) {
            $(".page-wrapper").each(function() {
            var detach = $(this).find("aside").detach();
            $(detach).insertAfter($(this).find("article"));
            })
        }
         if(width >= 1024) {
            $(".page-wrapper").each(function() {
            var detach = $(this).find("article").detach();
            $(detach).insertAfter($(this).find("aside"));
            })
        }

    }  
    jQuery(document).ready(handleMargins);
    $(window).resize(handleMargins);
    </script>
    </head>
    <body>

      <header>header</header>


      <div class="page-wrapper">

        <aside> sidebar <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- N_Responsief_Alle_CTR_AlleAdsenseSites -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-3961745091197220"
         data-ad-slot="3968514626"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></aside>


      <article>

            <h3 class="slogan">One line slogan only

            </h3>





        <p>This is the articlediv</p>
      </article>
      </div>

      <footer>footer</footer>

    </body>
    </html>

Reply With Quote




12-23-2014, 03:35 PM #2
sunfighter View Profile View Forum Posts

Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts

You need a doctype! maybe add <!DOCTYPE html> at the top of this code. IE needs a doctype or it is screwy.

ok so I am trying to create a function that creates an array comprised of filenames based on a given range. I.E if 2-8 is selected and a foldername of UMCP/ and a common name of college is also given, the function should return and array such as [UMCP/college2.jpg,UMCP/college3.jpg.....UMCP/college8.jpg]. Here is what I've got but the alert that should tell me the filename of the first image says it is undefined, how can i fix this?

Code:

function getArrayPhotosNames (total,count,first,last) {
				/*window.alert("get Array Photo Names");*/
				
				var folderName = document.getElementById("photofold").value;
				var Alias = document.getElementById("commonName").value;
				
				for (var i=0; i>=total; i+=1) {
					var imageNum = i+first;
					var filename = folderName + Alias + imageNum + ".jpg";
					window.alert("image will be stored as"+filename);
					photosArrayGlobal[i]= filename;
				}
				
				
				window.alert("the first photo is" +photosArrayGlobal[0]);
				var countnum = count.value;
				if (count === 0) {
					window.alert("randomize time")
					var randomArray = photosArrayGlobal.sort( randomize() );
					var randomPhoto= document.getElementById("myImage");
					randomPhoto.setAttribute("src", randomArray[photoIndexGlobal]);
				}
				else {
					var firstPhoto=document.getElementById("myImage");
					firstPhoto.setAttribute("src", photosArrayGlobal[photoIndexGlobal])
				}
				
				
			}

Beginner JavaScripter here. I'm wanting to run a piece of code (add rows) a specified amount of times based upon the number selected. Also, rows can be added after initial number has been specified.

Example:
User1 selects 2 -> 2 rows are added
User1 goes back and selects 3 -> 1 row is added, making 3 rows total

I've tried the following, but it seems to not take into account the number of rows already added. Any help is appreciated.

Code:

 	if (numSelected > 0) {
 		var counter = 0;
		while (rowsAdded < numSelected ) {
			function.addRow();
			counter++;
		}
	}

Hello everyone!

First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old.

Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one.

Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked?

Thanks alot for any help,
Regards,
Tom.

Hi...
I just want to know if it is possible to have an autocalculate in a textboxes inside while loop?and if it is possible how?..

here is my code:

Code:

<html>
<head>
<style type="text/css">
#fieldset_PS{
    position: relative;
    width: 20%;
}
</style>
<link rel="stylesheet" type="text/css" href="kanban.css" /> 
<script type="text/javascript">
  
function display_PS(){
    document.loading_kanban.action="ParameterSettings.php";
    document.loading_kanban.submit();
}
function display_Kanban(){
    document.loading_kanban.action="kanban_report.php";
    document.loading_kanban.submit();
}
</script>
</head>
 <?php
  error_reporting(0);
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}

mysql_select_db("mes", $con);



?>
<form name="loading_kanban">
<div id="main_button">
<center>
<!--<label style="margin-left: .9em; font-family: Arial, Helvetica, sans-serif; font-size: .7em;">Display Details:</label><input  onclick='showDetails(this);' id='chkDetail'   type='checkbox' checked='checked' value='wip'/>     -->
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
<input type="button" name="parameter_settings" value="Stock Requisition"> 
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
</div>
<div id="fieldset_PS">
<fieldset>
<legend>Parameter Settings</legend>
</center>  
<table border="1">
<th>Compounds</th>
<th>Max</th>
<th>Min</th>
<?php
$sql = "SELECT PCODE FROM parameter_settings ORDER BY PCODE ASC";
$result = mysql_query($sql, $con);
while ($row = mysql_fetch_assoc($result)){
echo "<tr>
        <td>$row[PCODE]</td>
        <td><input type = 'text' name = 'max_pcode' size = '10'></td>
        <td><input type = 'text' name = 'min_pcode' size = '10'></td>
        </tr>";
}   
?>
</fieldset>
</table>
</div>
</form>
</html>

I have table : parameter settings and i have fields: PCODE, max, min

PCODE has data:

PXX
PYY
PZZ
PAA
PBB
Total

I just want to know how can I auto calculate the total max and total min and it will display in the textbox beside Total...

Thank you

Hi,

I have this loop:

Code:

for (var j = 0; j < gmarkers.length; j++) {
	gmarkers[j].hide();
	elabels[j].hide();
	map.closeInfoWindow();
	var str=gmarkers[j].myname.toLowerCase();
	var patt1=inp;
        if (str.match(patt1)) 
        {
            found = true;
            gmarkers[j].show();
			count++;
			var p=j;
        }
    }

which was useful for passing the p variable when it was just one number.

but now I need to get that number every time j gets set (I understand that the j gets overwritten each time the loop goes through).

What would be ideal is if p could become an array, the contents of which match the values that j has passed though during the loop cycle.

I thought var p = new Array (j); minght do the trick, but obviously not...

I hope that I'm explaining it OK, and that it's possible, and that somebody has an idea how to do it...

Hi,
I hope someone can help me figure this out - it's been bugging me for a whole day now, and I can't seem to figure it out, and so far no Google research found this exact problem for me...

Situation:
I have a simple HTML page with one DIV element with the id "rotator". Inside that, JavaScript is supposed to create boxes that react to mouseovers.

The weird thing is: The whole script works, but ONLY on the LAST box I create, no matter what I do. I can manually add the mouseover code to any one of these boxes, but it will only take on the last one.
I can have JavaScript tell me the mouseover status of each box, and they all tell me they have code assigned correctly - but again only the last one works...

Here's the relevant code (yes, highly abbreviated, but it's the part that fails on me):

Code:

var maxBoxes = 10;

function initSite() {
  var rotator = document.getElementById("rotator");
  rotator.innerHTML = "";
  for (x = 0; x < maxBoxes; x++) {
    rotator.innerHTML +='<div id="myBox' + x + '"></div><div id="myDark' + x + '"></div>';
    // various other stuff about myBoxes[x] also in here, but not relevant to the issue I think
    
    applyMouseActions(document.getElementById("myDark" + x);

    debugOutput(document.getElementById("myDark" + x).id+"=" + document.getElementById("myDark" + x).onmouseover + "<br>", 1);
  }
}

function applyMouseActions(item) {
  if (!item) return;
  item.onmouseover = function(ev) {
    alert("does this work?");
    var thisNum = this.id;
    thisNum = thisNum.charAt(this.id.length-1);
    var tempBox = myBoxes[thisNum].boxOb;
    tempBox.style.background = "#fff";
  }
  item.onmouseout = function(ev) {
    var thisNum = this.id;
    thisNum = thisNum.charAt(thisNum.length-1);
    var tempBox = myBoxes[thisNum].boxOb;
    tempBox.style.background = "#aaa";
  }
}

initSite is called in the body onload. All kinds of other animation parts are implemented that work fine, just this mouseover won't work.
I have tried re-writing it in multiple different ways, including "xyz.onmouseover = myMouseCode" and then defining the function separately later - still no dice.

So, the code creates 10 boxes (0-9) and 10 boxes that are on top of them to create a form of shadow effect depending on the position of the original boxes. Since the "myDark" boxes are on top of the "myBox" boxes, I apply the onmouseover onto the "myDark" boxes, but it only works on "myDark9" and no other box.
They are all created the same way, the mouseover assigned the same way...
All I can do is shake my head at it, but that doesn't fix the issue, obviously ;-)

Any idea what else I can try?

Thanks!

I have the following code:

...
var numberoffiles = array();

for (i = 1; $i <= totalNumberOfFiles; i++)
{
numberoffiles[i] = i;
}
...

I get an error saying that numberoffiles is undeclared or something
What am I doing wrong?
Do I need to declare it a global variable or something??

ALSO, why can't I do this:

numberoffiles[] = i;

I've seen code snippets that assign to the end of an array like this
(Or maybe my problem is the scope of the variable??)

Thanks


OM

Hello guys,

Is there any way I can get the number of 'CPBucks' from this piece of HTML, It's currently at 1 but it will change.

Code:

<div class="user-info">
<img src="http://illiweb.com/fa/punbb/online.png" id="i_icon_online" alt="Online" title="Online"><br>
<span style="white-space:nowrap;"><span style="color:##66666;">Posts</span>: </span>2<br>
<span style="white-space:nowrap;"><span style="color:##66666;">CPBucks</span>: </span>1<br>
<span style="white-space:nowrap;"><span style="color:##66666;">Join date</span>: </span>2011-10-11<br>
</div>

Thanks

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]+"'");
	}