SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div onclick update value

    Hi,

    I am trying to create a list of color choices that people can click on to enter a value. This value I would like to be passed to a hidden for field. I have seen may color pickers out there, and they all do what I need. However, all seem to have way too many color choices. Maybe a call on a td cell or a div?

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    play around with this:

    Code:
    <html>
    
    <head>
    
    <script type="text/javascript">
    	var jump = 0xFFFFFF / 56;
    	String.prototype.pad = function(l, s, t){
    		return s || (s = " "), (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length)
    			+ 1).join(s)).substr(0, t = !t ? l : t == 1 ? 0 : Math.ceil(l / 2))
    			+ this + s.substr(0, l - t) : this;
    	};
    	function compileColors(){
    		if(div = document.getElementById('colorbox')){
    			for(i=0;i<0xFFFFFF;i=i+jump){
    				nDiv = document.createElement('div');
    				nDiv.style.height="20px";
    				nDiv.style.width="20px";
    				nDiv.style.border='solid 1px #000000';
    				nDiv.style.styleFloat='left';
    				nDiv.style.cursor='hand';
    				nDiv.onclick = Function('colorChosen(\''+'#'+d2h(i).pad(6, '0', 2)+'\')');
    				nDiv.style.backgroundColor='#'+d2h(i).pad(6, '0', 2);
    				nDiv.innerHTML='&nbsp;';
    				div.appendChild(nDiv);
    			}
    		}
    	}
    	function colorChosen(color){
    		document.getElementById('color').value=color;
    		alert('you chose '+color+' and it was set to the hidden input box');
    	}
    	function d2h(d) {
    		var hD="0123456789ABCDEF";
    		var h = hD.substr(d&15,1);
    		while(d>15) {d>>=4;h=hD.substr(d&15,1)+h;}
    		return h;
    	}
    </script>
    </head>
    
    <body onload="compileColors()">
    <input type="hidden" id="color">
    <div id="colorbox" style="height:200px;width:140px;overflow:auto;"></div>
    </body>
    
    </html>
    if you want to see the html it creates get firefox and download the extension: WebDeveloper then select "view source>view generated source".
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •