IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Uprava farby textu pomocu - Bootstrap Colorpicker

Aktivity
Avatar
MichalOškera
Člen
Avatar
MichalOškera:15.1.2021 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.1.2021 15:32
 
Odpovědět
15.1.2021 15:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:15.1.2021 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.1.2021 19:54
Avatar
MichalOškera
Člen
Avatar
Odpovídá na Peter Mlich
MichalOškera:15.1.2021 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.1.2021 20:22
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18.1.2021 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.1.2021 9:33
 
Nahoru Odpovědět
18.1.2021 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.