[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Javascript array and loop issue.

Posted on 2009-06-28
10
Medium Priority
?
201 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 1500 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

649 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