Solved

Javascript array and loop issue.

Posted on 2009-06-28
10
192 Views
Last Modified: 2012-05-07
The attached script is from a utility I bought called ColorPickerPro.  It works great in assigning a color to a single DOM object.  However, I want to use one script to assign a single color to multiple objects.  In the attached example I am assigning the color to ElementById('sbArtTitle').  I also want to assign the same color to  ElementById('tocArtTitle'), and ElementById('mainArtTitle').  

I think I can do this by creating an array of the Elements and then use a for loop to loop through each element and assigning the color. I am new to JavaScript. Can someone give me some guidance on how to do this, or some other solution to this problem.
<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>

Open in new window

0
Comment
Question by:edfm
  • 5
  • 5
10 Comments
 
LVL 13

Expert Comment

by:Onthrax
ID: 24732487
First you'll need to set up your array.

var myArray=new Array();
 myArray[0]="sbArtTitle";
 myArray[1]="tocArtTitle";
 myArray[2]="mainArtTitle";

Then we'll loop through it and execute whatever you wish.

for (i=0;i<myArray.length;i++) {
    document.getElementById(myArray[i]).style.borderColor = "#ffffff";
}

That's it.

Hope this helps...
0
 

Author Comment

by:edfm
ID: 24751054
Thanks for your suggestion, however, I am unable to make it work.   Let me give you a little more info.  

First I have attached readme.pdf which has the instructions for the Colorpickerpro program.  

Second, on the www.colorprickerpro.com website FAQs page they state:

Can a single color picker update multiple DOM objects on a page?
Yes. You can have a single color picker update any number of DOM objects when the user selects a color. For example, when a user selects a color from the color picker, the color could be immediately applied to the page background color, text colors, etc.

However, they don't give instructions on how to accomplish this.  Unfortunately, they haven't responded to repeated requests for assistance via email, and don't provide a phone number.  

The statement above leads me to believe that I should be able to assign multiple DOM objects to the "var DOMo" in the following script, and then have it the chosen color applied to the DOMo parameter in the colorpickerpro_v1 script on line three.

Any ideas on how that could be accomplished?


<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>

Open in new window

readme.pdf
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 24752009
Hmm I'm not sure how this actually works and the colorpickerpro website is down.

I have read the pdf you attached, but I do not see how a new collor gets attached to anything, so I cannot explain how to add multiple objects.

Am I correct in assuming the DOMo variable is not only sent but also replaced by the new color?
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

Author Comment

by:edfm
ID: 24758050
I just checked the colorpickerpro website and it seems to be working now at http://www.colorpickerpro.com/.

I hesitate of post the entire colorpickerpro1.js file since is is copyrighted, but I am attaching a couple of functions that seem to be the most pertinent. Maybe this will help you make some sense of this.

I appreciate your assistance.


function colorpickerpro_v1(FormName, TextFieldName, ElementNumber, ShowPoundSign, DefaultColor, AutoHideDropDowns, TextFieldClass, totalCountOnPage, ApplyToDOM) {
	//alert('colorpickerpro_v1');
	if (arguments.length != 9 ) {alert("Sorry, there are not enough parameters being passed.");return false;}
	var cp_formName = FormName;
	var cp_textFieldName = TextFieldName;
	var cp_elementNumber = ElementNumber;
	var cp_showPoundSign = ShowPoundSign;
	var cp_defaultColor = DefaultColor;
	var cp_autoHideDropDowns = AutoHideDropDowns;
	var cp_textFieldClass = TextFieldClass;
	var cp_applyToDOM = ApplyToDOM;
	var cp_totalCountOnPage = totalCountOnPage; // How many total color pickers will be on the page. Helps to speed up loops	
	ezcolorpicker_build(cp_elementNumber, cp_textFieldName, cp_autoHideDropDowns, cp_formName, cp_showPoundSign, cp_defaultColor, cp_applyToDOM, cp_totalCountOnPage, cp_textFieldClass);
}
 
 
function colorPick(oid, color, oInput, autoHide, oForm, showPound, oDOM) {
	if (autoHide == "yes") {
		autoHideDropDowns('show', oForm); // show form other form drop-downs
	}
	if (oDOM.length) {
		oDOM = unescape(oDOM) + '="#' + color + '"' // unescape is necessary because the oDOM was escaped
		eval(oDOM); // apply color to any object: document.myform.myinput.style.backgroundColor
	}
	document.getElementById('ezColorPickerIconArea' + oid).style.backgroundColor = "#" + color;
	document.getElementById('ezColorPickerTransitionArea' + oid).style.backgroundColor = color;
	document.getElementById('ezColorPickerTable' + oid).style.display = 'none';
	document.getElementById('ezColorPickerTable' + oid).style.visibility = 'hidden';
	if (showPound == "yes") {
		document.getElementById(oInput).value = "#" + color;
	} else {
		document.getElementById(oInput).value = color;
	}	
}
function colorChanger(oid, color) {
	document.getElementById('ezColorPickerCodeValueArea' + oid).innerHTML = color;
	document.getElementById('ezColorPickerTransitionArea' + oid).style.backgroundColor = color;
}

Open in new window

0
 
LVL 13

Expert Comment

by:Onthrax
ID: 24761130
Yes this is helpful. Could you post the code where the colorPick function is being called. I need this to asses if the function is just called once, or perhaps part of a loop to change multiple DOM objects.
0
 

Author Comment

by:edfm
ID: 24763568
This colorPick function is called as a part of the colorpickerpro_v1.js which is call in the original code that I posted.


<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>
<script>
var DOMo="document.getElementById('sbArtTitle').style.borderColor";
DOMo=escape(DOMo);
colorpickerpro_v1('form1', 'border_color', 27, 'no', '<cfoutput>#rsnl_styles.border_color#</cfoutput>','no', 'hideinput', 50,DOMo);
</script>

Open in new window

0
 
LVL 13

Expert Comment

by:Onthrax
ID: 24767068
I am referring to the colorPick function not the colorpickerpro_v1 function. (The second function you copy / pasted three posts above)
0
 

Author Comment

by:edfm
ID: 24768560
See Line 26 in the attached code.  I think this is what you're looking for.
function ezcolorpicker_build(oid, oInput, autoHide, oForm, showPound, defaultColor, oDOM, oTotalCount, oClass) {
	//alert("ezcolorpicker_build");
	//alert("oid: " + oid);
	//alert("oInput: " + oInput);
	//alert("autoHide: " +autoHide);
	//alert("oForm: " + oForm);
	//alert("showPound: " + showPound);
	//alert(defaultColor);
	//alert(oDOM);
	//alert(oClass);
	if (showPound == "yes") {pound = '#';} else {pound = '';} // pound: for # sign. showPound: for yes and no stings.
	var cc=0;
	document.write('<div class="ezColorPickerInput" id="ezColorPickerInput' + oid + '"><input name="' + oInput + '" type="text" size="7" maxlength="7" id="' + oInput + '" value="' + pound + defaultColor + '" class="' + oClass + '" /></div>');
	document.write('<div class="ezColorPickerIconArea" id="ezColorPickerIconArea' + oid + '" onclick="javascript:ezColorPickerToggle(' + oid + ', \'' + oInput + '\', \'' + autoHide + '\', \'' + oForm + '\', \'' + oTotalCount + '\')"><img src="ezcolorpickericon.gif" alt="click to select color" width="21" height="20" border="0" align="absmiddle" id="ezColorPickerImage" /></div>');
	document.write('<table class="ezColorPickerTable" id="ezColorPickerTable' + oid + '" border="0" align="center" cellpadding="0" cellspacing="1" style="position:absolute;display:none;visibility:hidden;z-index:0">');
	document.write('<tr><td bgcolor="#ECE9D8" colspan="21" height="24">');
	document.write('<div class="ezColorPickerTransitionArea" id="ezColorPickerTransitionArea' + oid + '">&nbsp;</div>');
	document.write('<div class="ezColorPickerCodeValueArea" id="ezColorPickerCodeValueArea' + oid + '"></div><div class="ezColorPickerCodeValueArea"><font color="#ECE9D8">ezColorPicker</font></div>');
	document.write('<div class="ezColorPickerClose" onclick="javascript:ezColorPickerClose(' + oid + ', \'' + oInput + '\', \'' + autoHide + '\', \'' + oForm + '\', \'' + oDOM + '\');">x</div>');
	document.write('</td></tr>');
	// start table row
	for (var i=0; i < 12; i++) {
	document.write('<tr>');
	// create tale cell
	for (var td=0; td < 21; td++) { 
	document.write('<td class="ezColorPickerTableTD" width="7" height="7" bgcolor=#' + strCode[cc] + ' onclick="javascript:colorPick(' + oid + ', \'' + strCode[cc] + '\', \'' + oInput + '\', \'' + autoHide + '\', \'' + oForm + '\', \'' + showPound + '\', \'' + oDOM + '\')" onmouseover="javascript:colorChanger(' + oid + ', \'#' + strCode[cc] + '\')"><img src="ezcolorpickertrans.gif" width="7" height="7"></td>'); // trans image is for Opera fix 
		cc++;
	}
	document.write('</tr>');
	}
	document.write('</table>');
	// if default value was given change color in icon area to that color
	var stripOut = /#/g; // regEx to strip out any pound signs (#)
	var thisColor = defaultColor
	if (thisColor.length >= 6) { 
		document.getElementById('ezColorPickerIconArea' + oid).style.backgroundColor="#" + thisColor.replace(stripOut, '');
	}
}

Open in new window

0
 
LVL 13

Accepted Solution

by:
Onthrax earned 500 total points
ID: 24771134
Yes that's what I required. As the script shows, the oInput/oDOM variables are not an array but a single variable, so you cannot use this to adjust multiple DOM objects at the same time.

I guess the only thing to do is keep writing the vendor to request a multi-dom feature, or write it yourself (but I guess that is not an option otherwise you would not have opened this thread)..

0
 

Author Closing Comment

by:edfm
ID: 31599585
Thanks for your help on this.  I will attempt to contact the vendor via snail mail.  I will award you points anyway as there doesn't seem to be a viable solution, and I appreciate the time you spent on this.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to use embargo Date/time in php 29 35
Javasctipt 2 24
HTML5 frame 5 25
How do I pull the base url for use in html links 7 22
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now