Solved

Javascript array and loop issue.

Posted on 2009-06-28
10
188 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:edfm
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:edfm
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

771 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

15 Experts available now in Live!

Get 1:1 Help Now