1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Color Picker (HELP)

Discussion in 'Programming' started by fiz, Nov 1, 2008.

  1. #1
    Sorry if this is the wrong place to post. Apologies.

    Currently, I'm only able to display the popup in just one place. What can I do so that everytime I click a button, the popup appears next to it?

    Here's an example.

    Currently:
    http://img217.imageshack.us/img217/6158/a1zy2.png
    [​IMG]

    I'd like it to be something like this"
    http://img142.imageshack.us/img142/4301/a2vm6.jpg
    [​IMG]
    So lets say I click on other button, it aligns next to it.

    Any idea how I can go about this?

    //*******************************************************************************
    //Title:      FCP Combo-Chromatic Color Picker
    //URL:        http://www.free-color-picker.com
    //Product No. FCP201a
    //Version:    1.2
    //Date:       10/01/2006
    //NOTE:       Permission given to use this script in ANY kind of applications IF
    //            script code remains UNCHANGED and the anchor tag "powered by FCP"
    //            remains valid and visible to the user.
    //
    //  Call:     showColorGrid2("input_field_id","span_id")
    //  Add:      <DIV ID="COLORPICKER201" CLASS="COLORPICKER201"></DIV> anywhere in body
    //*******************************************************************************
    function getScrollY(){var scrOfX = 0,scrOfY=0;
    	if(typeof(window.pageYOffset)=='number'){scrOfY=window.pageYOffset;
    	scrOfX=window.pageXOffset;
    	}
    	else if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){scrOfY=document.body.scrollTop;scrOfX=document.body.scrollLeft;
    	}
    	else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){scrOfY=document.documentElement.scrollTop;
    	scrOfX=document.documentElement.scrollLeft;
    	}
    	return scrOfY;
    	}
    	document.write("<style type='text/css'>.colorpicker201{visibility:hidden;display:none;position:absolute;background:#FFF;border:solid 1px #CCC;padding:4px;z-index:999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#D0D0D0,direction=135);}.o5582brd{padding:0;width:12px;height:14px;border-bottom:solid 1px #DFDFDF;border-right:solid 1px #DFDFDF;}a.o5582n66,.o5582n66,.o5582n66a{font-family:arial,tahoma,sans-serif;text-decoration:underline;font-size:9px;color:#666;border:none;}.o5582n66,.o5582n66a{text-align:center;text-decoration:none;}a:hover.o5582n66{text-decoration:none;color:#FFA500;cursor:pointer;}.a01p3{padding:1px 4px 1px 2px;background:whitesmoke;border:solid 1px #DFDFDF;}</style>");function getTop2(){csBrHt=0;if(typeof(window.innerWidth)=='number'){csBrHt=window.innerHeight;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrHt=document.documentElement.clientHeight;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrHt=document.body.clientHeight;}ctop=((csBrHt/2)-115)+getScrollY(); ctop = 552; return ctop;}var nocol1="NO COLOR",clos1="CLOSE",tt2="FREE-COLOR-PICKER.COM",hm2="http://www.";hm2+=tt2;tt2="POWERED by FCP";
    function getLeft2(){
    	var csBrWt=0;
    	if(typeof(window.innerWidth)=='number'){
    		csBrWt=window.innerWidth;
    	}
    	else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){
    		csBrWt=document.documentElement.clientWidth;
    	}
    	else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){
    		csBrWt=document.body.clientWidth;
    	}
    	cleft=(csBrWt/2)-125;
    	cleft = 335;
    	return cleft;
    }
    function setCCbldID2(objID,val){document.getElementById(objID).value=val;
    }
    function setCCbldSty2(objID,prop,val) {
    	switch ( prop ) {
    		case "bc":
    			if ( objID != 'none' ) {
    				document.getElementById ( objID ).style.backgroundColor = val;
    			};
    			break;
    		case "vs":
    			document.getElementById ( objID ).style.visibility = val;
    			break;
    	case "ds":document.getElementById(objID).style.display=val;break;
    	case "tp":document.getElementById(objID).style.top=val;break;
    	case "lf":document.getElementById(objID).style.left=val;break;
    	}
    	}
    function putOBJxColor2(OBjElem,Samp,pigMent){if(pigMent!='x'){setCCbldID2(OBjElem,pigMent);
    	setCCbldSty2(Samp,'bc',pigMent);
    	}
    	setCCbldSty2('colorpicker201','vs','hidden');setCCbldSty2('colorpicker201','ds','none');
    	}
    function showColorGrid2(OBjElem,Sam){
    	var objX=new Array('00','33','66','99','CC','FF');
    	var c=0;
    	var z='"'+OBjElem+'","'+Sam+'",""';
    	var xl='"'+OBjElem+'","'+Sam+'","x"';
    	var mid='';
    	mid+='<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border:solid 0px #F0F0F0;padding:2px;"><tr>';
    	mid+="<td colspan='18' align='left' style='font-size:10px;background:#6666CC;color:#FFF;font-family:arial;'>&nbsp;Chromatic Selection Palette</td></tr><tr><td colspan='18' align='center' style='margin:0;padding:2px;height:12px;' ><input class='o5582n66' type='text' size='12' id='o5582n66' value='#FFFFFF'><input class='o5582n66a' type='text' size='2' style='width:14px;' id='o5582n66a' onclick='javascript:alert(\"click on selected swatch below...\");' value='' style='border:solid 1px #666;'>&nbsp;|&nbsp;<a class='o5582n66' href='javascript:onclick=putOBJxColor2("+z+")'><span class='a01p3'>"+nocol1+"</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a class='o5582n66' href='javascript:onclick=putOBJxColor2("+xl+")'><span class='a01p3'>"+clos1+"</span></a></td></tr><tr>";var br=1;for(o=0;o<6;o++){mid+='</tr><tr>';for(y=0;y<6;y++){if(y==3){mid+='</tr><tr>';}for(x=0;x<6;x++){var grid='';grid=objX[o]+objX[y]+objX[x];var b="'"+OBjElem+"', '"+Sam+"','#"+grid+"'";mid+='<td class="o5582brd" style="background-color:#'+grid+'"><a class="o5582n66"  href="javascript:onclick=putOBJxColor2('+b+');" onmouseover=javascript:document.getElementById("o5582n66").value="#'+grid+'";javascript:document.getElementById("o5582n66a").style.backgroundColor="#'+grid+'";  title="#'+grid+'"><div style="width:12px;height:14px;"></div></a></td>';c++;}}}mid+="</tr><tr><td colspan='18' align='right' style='padding:2px;border:solid 1px #FFF;background:#FFF;'><a href='"+hm2+"' style='color:#666;font-size:8px;font-family:arial;text-decoration:none;letter-spacing:1px;'>"+tt2+"</a></td></tr></table>";
    	var ttop=getTop2();
    	setCCbldSty2('colorpicker201','tp',ttop);
    	document.getElementById('colorpicker201').style.left=getLeft2();
    	setCCbldSty2('colorpicker201','vs','visible');
    	setCCbldSty2('colorpicker201','ds','block');
    	document.getElementById('colorpicker201').innerHTML=mid;
    }
    
    Code (markup):
     
    fiz, Nov 1, 2008 IP
  2. happpy

    happpy Well-Known Member

    Messages:
    926
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    120
    #2
    put a <div id=cgrid name=cgrid> around the grid itself,
    then make on each button an onclick event which does an css repositioning to the cgrid-div.
     
    happpy, Nov 3, 2008 IP
    fiz likes this.
  3. fiz

    fiz Peon

    Messages:
    112
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Where exactly do I put the div code? I tried but it didn't work? (Thanks for the reply btw :))
     
    fiz, Nov 5, 2008 IP