CODEWITHSUNDEEP
javascriptphpcss
Brgerg30879
Brgerg30879

Reputation: 93

Assign a variable with the color to the background property in CSS

I'm trying to make an app where the user can change the bg color of a button and after that copy the CSS code from the <style> tags with changed background color into the buffer. For the color picker, I use http://jscolor.com/. I think I need to assign a variable with the color to the background property like this: background: <?php echo $valueInput; ?>; but I can't find the value where it's stored and doesn't know how to pass it to the variable. My code does copy the CSS but instead of some background color there is just this: .jscolor{valueElement:'valueInput'}.

 <script>

  function copyToClipboard(element) {
 var $temp = $("<input>");
 $("body").append($temp);
 $temp.val($(element).text()).select();
 document.execCommand("copy");
 $temp.remove();
}

</script> 

<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}" >
   Click here to pick a color
</button>
Value: <input id="valueInput" value="ed3330"> 


<?php $valueInput = ".jscolor{valueElement:'valueInput'}"; ?>

   <style type="text/css">
   #button_cont {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: <?php echo $valueInput; ?>;
padding: 10px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
margin-left: 10px;
}

#button_cont:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

   </style>

<div id="button_cont" >CALL TO ACTION</div>  

<button onclick="copyToClipboard('style')">Copy CSS</button>
</div> ```

Upvotes: 1

Views: 1321

Answers (2)

Kalimah
Kalimah

Reputation: 11447

You can do it using regexp replacement in javascript. I used CSS variable to make the regexp more reliable. 

function copyToClipboard(element) {
  let currentColor = $("#valueInput").val();
  let currentStyle = $(element).text();

  let newStyle = currentStyle.replace('--placeholder', "#"+currentColor);

  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(newStyle).select();
  document.execCommand("copy");
  $temp.remove();
}
#button_cont {
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
  background-color: --placeholder;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
  margin-left: 10px;
}

#button_cont:hover {
  background: #434343;
  letter-spacing: 1px;
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}">
  Click here to pick a color
</button> Value: <input id="valueInput" value="ed3330">


<div id="button_cont">CALL TO ACTION</div>

<button onclick="copyToClipboard('style')">Copy CSS</button>

Upvotes: 1

Kay Angevare
Kay Angevare

Reputation: 667

your code here :

   <?php $valueInput = ".jscolor{valueElement:'valueInput'}"; ?>

..does exactly what you tell it to do; you've set $valueInput to be a string with value .jscolor{valueElement:'valueInput'}.

Later on you echo this variable inside your <style> tags, and since it's value is set to be .jscolor{valueElement:'valueInput'}, your code will actually print out that string without processing it any further.

You can check what value is set for a variable by using var_dump($variable), this function will tell you what type of variable you've set and what its value is. For more info: https://www.php.net/manual/en/function.var-dump.php

colorpicker.js comes with some examples on its website for help you figure out how to use it, more details here: http://jscolor.com/examples/

Furthermore, you cannot pass variables from JavaScript to PHP on the same page. JavaScript is client side code, PHP is server side code. More details on this: https://stackoverflow.com/a/36693727/11787139

Upvotes: 0

Related Questions