dropdown menu

gaya · March 19, 2013

<div>Really sorry to say.</div><div> </div><div>

With your image you should assign a id ref to it, and reference this id with current function getColor(block) to hide this image using style display none, or visibility hidden.

</div><div> </div><div>This line i cann't able to understand.Please explain me again.</div>

dsonesuk · March 19, 2013

(1) remove reference to function getColor1()(2) give pallete.gif img a id ref.(3) when function getColor() is triggered and after the hex color text is added to span with id ref colorPalDemo, use document.getElementById() to reference pallete.gif img id ref given in (2), to apply a css style that would hide it .style.display='none' OR .style.visibility='hidden', either one should hide the palette.gif img tag.

gaya · March 20, 2013

Thanks dsonesuk. Then please tell me whether what i understand was correct or not.As you said i removed the function getColor1().I gave an id for the pallete.gif image.

<html><head><script type="text/javascript">function getColor1() { alert("hai");	  var img = document.createElement("img");	  img.src = "img/palette.gif";	  //img.height = 75;	  //img.width = 113;	  //img.style.top=800;	  //img.style.right=100;	  document.body.appendChild(img);getColor();	}function getColor(block){alert("hai1");var s_url=block.href;var pColor=s_url.substr(s_url.indexOf("#"));document.getElementById("colorPalDemo").style.color=pColor;document.getElementById("clr").style.display=hidden;//getColor1();}</script></head><body><td>   Statement1<font color="#0000FF">*</font>   </td>	   <td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>   </td><img  src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" />	   <!-- <img  src="img/palette.gif" id="clr" usemap="#color_pallete" />--><map name="color_pallete" id="color_pallete">	<area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />	<area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />	<area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />	<area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />	<area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>	<area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />	<area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />	<area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />	<area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />	<area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />	<area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />	<area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />	<area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />	<area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />	<area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />	<area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />   </map><span id="colorPalDemo"></span> </body></html>

The code i have pasted is changed.But i don't know whether what i understand and changedis correct or not. If not please tell me where i have to change in my code.

Edited March 20, 2013 by gaya

dsonesuk · March 20, 2013

Look up display in css, is there a value 'hidden'? i don't think so, so why use it, use one of the value that will cause the image to not show.

gaya · March 20, 2013

Sorry to ask you again and again dsonesuk. Please tell where i have to use the value 'hidden'.Also my actual problem is by clicking the supst img the palette is get opened. But i cann't able to select the colors.

gaya · March 20, 2013

<html><head><script type="text/javascript">function getColor1(id) {   var clr = document.getElementById(id);   if (clr.style.visibility=="visible") {		  clr.style.visibility="hidden";	 }	 else {		  clr.style.visibility="visible";	 }}function getColor(block){//alert("hai1");alert(block);var s_url=block.href;var pColor=s_url.substr(s_url.indexOf("#"));document.getElementById("colorPalDemo").style.color=pColor;//document.getElementById("clr").style.display=hidden;//getColor1();} </script></head><body><img src="img/supst.png" id="color" onclick="getColor1('imgclr');" /><br/><img id="imgclr" src="img/palette.gif" usemap="#color_pallete" style="visibility:hidden"/><map name="color_pallete" id="color_pallete">    <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />    <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />    <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />    <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />    <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>    <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />    <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />    <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />    <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />    <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />    <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />    <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />    <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />    <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />    <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />    <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />   </map><span id="colorPalDemo">gayu</span> </body></html>

I hope the above code like is what you ask me to do. But another doubt is the span tag is to change the color for values seen inbetween the tag. But this i don't want. I want to change the color in all my textarea. How to do that. Please tell me.

dsonesuk · March 20, 2013

??? well something like targeting textarea id ref, instead of span id, might be the obvious solution wouldn't you think. also don't place table cells and rows on the page, without enclosing them in there parent element table, it will really, really s#%@w.. i mean, mess everything up. to put it politely.

gaya · March 20, 2013

But more than one textarea i am having. How to make the color for all textarea.

dsonesuk · March 20, 2013

http://stackoverflow.com/questions/15236049/javascript-loop-through-all-elements-with-tagname-alert

gaya · March 21, 2013

Thanks dsonesuk. Instead of span tag

function getColor(block){var s_url=block.href;var pColor=s_url.substr(s_url.indexOf("#"));document.getElementById("colorPalDemo").style.color=pColor;}  <span id="colorPalDemo">gayu</span>

I have to use like

var all = document.getElementsByTagName("a");for(var i = 0, max = all.length; i < max; i++){    alert(all[i].innerHTML);}

gaya · March 21, 2013

<script type="text/javascript">function getColor1(id) {   var clr = document.getElementById(id);   if (clr.style.visibility=="visible") {		  clr.style.visibility="hidden";	 }	 else {		  clr.style.visibility="visible";	 }}var x = [ "ques1", "ques2", "opt1", "opt2", "opt3", "opt4" ];function getColor(block){//alert(block);for(var t = 0; t <= x.length; ++t){	    document.getElementById( x[t] ).style.Color = block;alert(document.getElementById( x[t] ).style.Color);    }}function changeSize(size){document.getElementById("ss").value;}function updateh1family(name) {document.getElementById("aa").value;}function font(elems,tag,size,name,block){//alert(size);alert(block);var i=0, el, selectedText, newText;while(el=elems[i++]){selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Mozif(selectedText!=''){newText='<'+tag+' size='+size+' face='+name+' color='+block+'>'+selectedText+'</'+tag+'>';  if(document.selection){//IE  document.selection.createRange().text=newText;  return;//prevents the double replacement  }  else{//Moz  el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);  }}}}</script><form accept-charset="utf-8" action="b.html" method="post" name="fillup" enctype="multipart/form-data" onSubmit="return validate();"><tr><td><table align="center" bgcolor="">  <tr><td align="center" colspan="10"><img src="img/laugh.gif" alt="Smiley" /></td></tr>  <tr><td align="center" style="color:#FF0000; text-decoration:blink;" colspan="10" ><b><?php echo $qtype1;?></b></td></tr>  <tr><td colspan="10"> </td></tr>  <tr><td align="center" colspan="10"><img src="img/subst.png" title="substring" onclick="formatText ([ques1,ques2,opt1,opt2,opt3,opt4],'sub');">  <img src="img/supst.png" title="superstring" onclick="formatText1 ([ques1,ques2,opt1,opt2,opt3,opt4],'sup');"><!--<input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font');">-->  <img src="img/mover.png" title="mover,mout" onclick="mover ([ques1,ques2,opt1,opt2,opt3,opt4],'mover','mout');"></td></tr><img src="img/supst.png" id="color" onclick="getColor1('imgclr');" /><br/><img id="imgclr" src="img/palette.gif" usemap="#color_pallete" style="visibility:hidden"/><map name="color_pallete" id="color_pallete">    <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />    <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />    <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />    <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />    <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>    <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />    <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />    <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />    <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />    <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />    <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />    <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />    <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />    <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />    <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />    <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />   </map><span id="colorPalDemo"></span>Font size:<select name="sizeselect" id="ss" onchange="changeSize(this.value)"><option value="10">10</option><option value="13">13</option><option value="15">15</option><option value="17">17</option></select><input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font',document.getElementById('ss').value,document.getElementById('aa').value,document.getElementById( x[t] ).style.Color);"><select name="selectFontFamily" id="aa" onchange="updateh1family(this.value)">    <option value="Serif">Serif</option>    <option value="Arial">Arial</option>    <option value="Sans-Serif">Sans-Serif</option>    <option value="Tahoma">Tahoma</option>    </select><td>   Statement1<font color="#0000FF">*</font>   </td>   <td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>   </td><td>   Statement2<font color="#0000FF">*</font>   </td>   <td><textarea name="ques2" id="ques2" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>   </td><td>   Option1<font color="red">*</font>   </td>   <td>   <textarea name="opt1" id="opt1" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>   </td>

The above is my code. When clicking the fonr button the tag didn't get open. I don't know why. Please tell me what i am doing wrong here.

gaya · March 21, 2013

I found out but still having some problems. In the above code i changed in the function getColor(block)Instead of this code

function getColor(block){//alert(block);for(var t = 0; t <= x.length; ++t){		    document.getElementById( x[t] ).style.Color = block;alert(document.getElementById( x[t] ).style.Color);    }}

I changed

function getColor(block){document.getElementsByTagName('textarea').value=block;}  <input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font',document.getElementById('ss').value,document.getElementById('aa').value,document.getElementsByTagName('textarea').value);">

Now my problem is in mytextarea i get the full web address,as i've to get only the color code. Please tell me what can i change there.

dsonesuk · March 21, 2013

Look! i'm sure if you keep looking on the internet, and inserting code you think might help, eventually you WILL find that code, OR you could concentrate on the examples, links giving, and then understand how they work, and then achieve the required result.

gaya · March 21, 2013

Thanks dsonesuk. I did exactly what i need.I missed to include

var s_url=block1.href;var pColor=s_url.substr(s_url.indexOf("#"));

Now i got it. Thank again for you both.The problem is completely solved.

Edited March 21, 2013 by gaya

gaya · March 21, 2013

Sorry for asking again. By clicking the image the palette get open, and i want to do is after selecting the color i want to hide the palette automatically. Please tell me how to do that.

dsonesuk · March 21, 2013

Already discussed post# 27, (2), (3)

gaya · March 22, 2013

Thanks dsonesuk. Thanks for the help.

Edited March 22, 2013 by gaya

dropdown menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in