Cerere script Colorpicker

Aici adaugati Cererile sau Ofertele dv. de script-uri, proiecte website sau Traduceri.
adrian_ady
Mesaje: 80

Cerere script Colorpicker

Am in site acest modul pentru alegerea culorii de fundal. In loc de arrayul cu 7 culori as dori sa existe un colorpicker avand practic posibilitati infinite de alegere culori. Cineva poate sa-mi rezolve problema? Merci!

Cod: Selectaţi tot

<table align="right" height="40" align="right" border="0" outline="0" cellpadding="0" cellspacing="0">
   <tr>
    <td align="right" valign="top">
	  <table border="0" outline="0" cellpadding="2" cellspacing="0" style="margin-right: 6px;">
	     <tr>
		<td><h0>Alege culoarea de fundal</h0>&nbsp;</td>
		<?
	    $colors = array('FFFFFF','EBEBEB','DCD8D4','FFE6F0','E0EBCC','D6F5F5','FFEFD7'); /* setare culoare implicita in "/config/includes.php" */
	    foreach($colors as $color)
	    {
	    	?>
	    	<td onclick="callAjaxChangeBodyBg('<?=$color?>');" style="cursor: pointer">
	    	<div style="background-color: #<?=$color?>; border: #999999 solid 1px; height: 15px; width: 25px;" ></div> 	
	    	</td><?	
	    }
	    ?>
	    </tr>
	 </table>
MarPlo Mesaje: 4343
Salut
Vezi script-ul de la pagina: FlexiColorPicker.
Sau poti sa gasesti si altele la cautare pe internet: " javascript color picker ".
adrian_ady Mesaje: 80
Multumesc, am vazut deja cateva si le-am incercat insa nu stiu sa inlocuiesc datele afisate mai sus asa incat sa lucreze cu functia deja implementata in sistem. Scriptul pe care mi l-ai recomandat ar fi super!
MarPlo Mesaje: 4343
Nici eu nu stiu, nu am folosit un astfel de script.
Trebuie studiata documentatia lui, sa intelegi cum se preia culoarea, apoi sa o transferi la functia callAjaxChangeBodyBg() din codul tau.
Presupun ca e facut pentru cine stie cat de cat javascript.
adrian_ady Mesaje: 80
Am gasit cea mai buna varianta aici:
codepen.io/shaun/pen/kqFLE

este un buton customizabil (culoare si radius). Ar trebui sa iau numai functia de schimb culoare si sa o aplic scriptului meu dar, fir-ar sa fie, nu stiu.
MarPlo Mesaje: 4343
Testeaza acest cod. Daca il intelegi, il poti aplica /adapta la codul tau, dupa cum stii.

Cod: Selectaţi tot

<input type="color" name="get_color" id="get_color" value="#bbdafe" />
<button id="get_clr">Click</button>

<script type="text/javascript">
// la click pe buton
document.getElementById('get_clr').onclick = function() {
  // preia valoarea de culoare din <input>
  var color = document.getElementById('get_color').value;
  alert(color);     // afiseaza valoarea
};
</script>
adrian_ady Mesaje: 80
Este OK ceeace-mi spui, de dimineata tot incerc variante insa nu nimeresc ce valoare din scriptul tau sa-i dau lui $color... sa functioneze

Cod: Selectaţi tot

onclick="callAjaxChangeBodyBg('<?=$color?>');"
Valoarea trebuie sa nu contina simbolul '#' care se adauga automat(din scriptul existent). Ai dat o prajitura unui bolnav de diabet...

Cod: Selectaţi tot

<?
$color = ('?????');
?>
De exemplu daca dau valoarea $color = ('color'); , la verificarea codului de pagina apare < body bgcolor="#color">
MarPlo Mesaje: 4343
Nu e nevoie sa mai adaugi din php, ci scrii apelarea functiei callAjaxChangeBodyBg() direct in codul javascript.
Cam asa:

Cod: Selectaţi tot

<input type="color" name="get_color" id="get_color" value="#bbdafe" />
<button id="get_clr">Click</button>

<script type="text/javascript">
// la click pe buton
document.getElementById('get_clr').onclick = function() {
  // preia codul de culoare din <input>, fara #
  var color = document.getElementById('get_color').value.replace('#', '');
  callAjaxChangeBodyBg()(color);     // transmite codul
};
adrian_ady Mesaje: 80
Salut,
am completat asa cum ai spus dar undeva este o eroare. Rezultatul este : <body bgcolor="#undefined"> Ma gandesc, s-ar putea ca fiind Ajax la mijloc scriptul sa arate gen :

Cod: Selectaţi tot

 $(document).ready(function(){
  $("button").click(function(){
    $.ajax(----------------------
Cautand in site am gasit in Scripturi urmatorul care poate ajuta:

Cod: Selectaţi tot

function callAjaxChangeBodyBg(color) 
{
	// declare a variable to hold some information
	// to pass to the server
	// build the URL of the server script we wish to call
	var url = "change-body-bg.php?color="+color;
	// ask our XMLHTTPRequest object to open a
	// server connection
	myRequest.open("GET", url, true);
	// prepare a function responseAjax() to run when
	// the response has arrived
	myRequest.onreadystatechange = responseAjax;
	// and finally send the request
	myRequest.send(null);
}
function responseAjax() 
{ 
   if(myRequest.readyState == 4) 
	{
        // if server HTTP response is "OK"				 
		 results = myRequest.responseText;		 
		 document.body.bgColor = results;
		
			}	
}
Pagina change-body-bg.php este:

Cod: Selectaţi tot

<?
require_once('config/includes.php');
if($login->checkLogin()) 
{ 
    $db->update("UPDATE membri SET bgcolor = '".$_GET['color']."' WHERE id = ".$login->getMemberId()."");
}

echo '#'.$_GET['color'];
?>
Cod pagina html:

Cod: Selectaţi tot

  <table align="right" height="40" align="right" border="0" outline="0" cellpadding="0" cellspacing="0">
   <tr>
    <td align="right">Alege culoarea de fundal: <input type="color" name="get_color" id="get_color" value="#bbdafe" />&nbsp;<button id="get_clr">Schimba</button>

<script type="text/javascript">
// la click pe buton
document.getElementById('get_clr').onclick = function() {
  // preia codul de culoare din <input>, fara #
  var color = document.getElementById('get_color').value.replace('#', '');
  callAjaxChangeBodyBg()(color);     // transmite codul
};
</script>

    </td>    	  
   </tr>
  </table>
MarPlo Mesaje: 4343
Incearca functia callAjaxChangeBodyBg() asa:

Cod: Selectaţi tot

function callAjaxChangeBodyBg(color) {
  var cerere_http =  window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

  // Creaza adresa URL cu perechea de date indice=valoare
  var  url = 'change-body-bg.php?color='+ color;

  cerere_http.open("GET", url, true);			// Creaza cererea
  cerere_http.send(null);		// Efectueaza trimiterea datelor

  // Verifica starea cererii
  cerere_http.onreadystatechange = function() {
    if (cerere_http.readyState == 4) {
      document.body.bgColor = cerere_http.responseText;
    }
  }
}
Mai departe nu stiu.
adrian_ady Mesaje: 80
Ulterior am vazut ca numai Opera si Chrome au implementat acest ColorPicker deci a trebuit sa pastrez si vechiul modul. Acum arata asa:
Imagine

Subiecte similare