Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Využij akce až 80 % zdarma při nákupu e-learningu - více informací. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Swift
Avatar
MichalOškera:15. ledna 15:31

Dobrý deň,
prosím Vás o radu
V konzole vidím, ako sa v html kóde mení farba, ale na stránke je to bez zmeny...

Zkusil jsem: HTML:

<div id="cp-component" class="input-group">
  <span class="input-group-addon col-4 m-0 p-0"><i id="color-picker-leftCol"></i></span>
  <input type="text" value="#269faf" class="form-control col-8 text-center p-0 small text-white" id="color-picker-rightCol">
</div>

Javascript

$(function () {
$('#cp-component').colorpicker();
$('#cp-component').colorpicker().on('changeColor', function(e) {
    document.getElementById("textFarba").style.color = e.color.toString('rgba');
        });
});

Chci docílit: Chcem, aby po zmene farby v inpute sa zmenila farba aj na stránke :)

Editováno 15. ledna 15:32
 
Odpovědět
15. ledna 15:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:15. ledna 19:54

https://www.jquery-az.com/boots/demo.php?…

<!DOCTYPE html>
<html>
<head>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-colorpicker/bootstrap-colorpicker.css" rel="stylesheet">


    <script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-colorpicker/bootstrap-colorpicker.js"></script>


</head>

<body>
<div class="container">

<div class="row">
    <div class="col-md-5">
<div class="example">
    <div class="example-title">Working with events</div>

    <div class="example-content well">
        <div class="example-content-widget">
      <a href="#" class="btn btn-default" id="color-picker-background">Change background color of div</a>

        </div>
     </div>

<div id="chgcolor" style="background-color: #eee;heihgt:50px;width:300px;border:solid 1px">
The color will change here

</div>
</div>

  </div>
</div>
</div>
      <script>
          $(function () {
              $('#color-picker-background').colorpicker().on('changeColor', function (e) {
                  $('#chgcolor')[0].style.backgroundColor = e.color.toHex();
              });
          });
      </script>
</body>
</html>

//---
//Si tam misto
document.getElementById("textFarba").style.color = e.color.toString('rgba');
//dej
alert(document.getElementById("textFarba")) // jestli existuje element
alert(e.color.toString('rgba')); .. jakou barvu, string, to vraci
// a jinak, misto e je dobre psat tam slovo event
 
Nahoru Odpovědět
15. ledna 19:54
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Peter Mlich
MichalOškera:15. ledna 20:22

Ďakujem
Toto mi funguje že zmení pozadie ale ako náhle zmením na style.color tak v konzole vidím že mi pridá JavaScript
Do div style=“color:rgb(­......)”
Ale text sa nezmení farbu

 
Nahoru Odpovědět
15. ledna 20:22
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18. ledna 9:31

Tak si zkus alertnout outherHTML toho divu a zkopirovat kod do samostatne stranky. Je mozne, ze tve funkce nepridaji spravny html kod. Firefox to treba umi pres ctrl+a (vybrat vse), prave tlacitko, zobrazit html kod / zobrazit generovany kod.
Pripadne mrkni do js konzoly, jestli to nepise nejakou chybu, kdyz zmenis barvu.

<div id=xxx>aaa</div>
<script>
var color = 'rgba(117, 190, 218, 0.5)';
document.getElementById("xxx").style.color = color;
</script>

Mne to text zmeni na modro zelenou. Jednoduchy priklad na otestovani. klidne to tak podobne prepis do tve funkce.

Ve tvem kodu, treba nic, co ma id=textFarba nevidim. Navic, id jmeno musi byt unikatni pro celou stranku. Nesmis ho tam mit dvakrat. js se s tim vyporada tak, ze zmeni jen prvni nebo posledni. Jquery nevim, mozna vyhodi error.

document.getElementById("textFarba").style.color = e.color.toString('rgba'); // to muzes psat i takhle, kdyz tam mas jquery (nebo ty funkce s $)
$('#textFarba').style.color = e.color.toString('rgba');
Editováno 18. ledna 9:33
 
Nahoru Odpovědět
18. ledna 9:31
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.