Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [inne][jquery] Zmiana kolorów na stronie

Napisany przez: Impact 31.10.2019, 13:26:20

Witam, mam problem z kodem. Chodzi mi o zmianę kolorów strony i ich elementów po przyciśnięciu przycisku. Ogólnie zmiana działa do jednej strony ale jak np wciskam menu to kolor znika a chciałbym żeby po naciskaniu menu kolor strony zostawał taki jak był wciskany przyciskami na górze strony. Nie znam za za bardzo (jquery/javascript) i nie wiem jak to ugryźć.
kod html:

  1. <http://december.com/html/4/element/body.html>
  2. <http://december.com/html/4/element/div.html class="contrast">
  3.  
  4.  
  5. <http://december.com/html/4/element/span.html class="spcz">Kontrast:</http://december.com/html/4/element/span.html>
  6. <http://december.com/html/4/element/button.html class="button bialy"><http://december.com/html/4/element/i.html class="fa fa-sun"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html>
  7. <http://december.com/html/4/element/button.html class="button nocny"><http://december.com/html/4/element/i.html class="fa fa-moon"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html>
  8. <http://december.com/html/4/element/button.html class="button kontrast"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html>
  9. <http://december.com/html/4/element/button.html class="button kontrast_c_z"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html>
  10. <http://december.com/html/4/element/button.html class="button kontrast_z_c"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html>
  11.  
  12. </http://december.com/html/4/element/div.html>
  13.  
  14. <http://december.com/html/4/element/div.html class="toChange">
  15. <http://december.com/html/4/element/center.html>
  16.  
  17.  
  18. <http://december.com/html/4/element/div.html class="col-2">
  19. <http://december.com/html/4/element/div.html>
  20. <http://december.com/html/4/element/ul.html class="menu2">
  21. <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="menu" href="index.php?page=1"><http://december.com/html/4/element/i.html class="fas fa-caret-right"></http://december.com/html/4/element/i.html> STRONA 1</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
  22. <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="menu" href="index.php?page=2"><http://december.com/html/4/element/i.html class="fas fa-caret-right"></http://december.com/html/4/element/i.html> STRONA 2</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
  23. </http://december.com/html/4/element/ul.html>
  24. </http://december.com/html/4/element/div.html>
  25. <?php
  26.  
  27. $strona = isset($_GET['page']) ? $_GET['page'] : '';
  28. switch($strona) {
  29.  
  30. case '1':
  31. include('1.php'); // strona 1
  32. break;
  33.  
  34. case '2':
  35. include('2.php'); // strona 2
  36. break;
  37.  
  38.  
  39. default:
  40. include('1.php');
  41. break;
  42. }
  43.  
  44. ?>
  45.  
  46. </http://december.com/html/4/element/div.html>
  47. </http://december.com/html/4/element/center.html>
  48.  
  49. </http://december.com/html/4/element/body.html>


plik js
  1. $(document).ready(function(){
  2. $('.nocny').on('click', function() {
  3.  
  4. $('.toChange').css({background : '#CCCCCC', color: 'black' });
  5. $('.tytul_2').css({background : '#CCCCCC', color: 'black' });
  6. $('.paragraf_2').css({background : '#CCCCCC', color: 'black' });
  7. });
  8.  
  9. $('.bialy').on('click', function() {
  10.  
  11. $('.toChange').css({background : '#FFFFFF', color: 'black' });
  12. $('.tytul_2').css({background : '#FFFFFF', color: 'black' });
  13. $('.paragraf_2').css({background : '#FFFFFF', color: 'black' });
  14. });
  15.  
  16. $('.kontrast').on('click', function() {
  17.  
  18. $('.toChange').css({background : '#000000', color: 'white' });
  19. $('.tytul_2').css({background : '#000000', color: 'white' });
  20. $('.paragraf_2').css({background : '#000000', color: 'white' });
  21. });
  22.  
  23. $('.kontrast_c_z').on('click', function() {
  24.  
  25. $('.toChange').css({background : '#000000', color: 'yellow' });
  26. $('.tytul_2').css({background : '#000000', color: 'yellow' });
  27. $('.paragraf_2').css({background : '#000000', color: 'yellow' });
  28. });
  29.  
  30. $('.kontrast_z_c').on('click', function() {
  31.  
  32. $('.toChange').css({background : 'yellow', color: '#000000' });
  33. $('.tytul_2').css({background : 'yellow', color: '#000000' });
  34. $('.paragraf_2').css({background : 'yellow', color: '#000000' });
  35. });
  36. });


Napisany przez: olszam 31.10.2019, 13:49:25

W ciastku zapisz sobie co ma na wstępie ładować do strony.

Napisany przez: Impact 31.10.2019, 14:22:56

mozesz dac jakis przyklad ?

Napisany przez: viking 31.10.2019, 15:07:21

https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage

Napisany przez: Impact 4.11.2019, 08:49:53

Dla potomnych... Działa ale pewne można jakoś zrobić prościej...

  1. $(document).ready(function(){
  2.  
  3. if (typeof (localStorage) == 'undefined') {
  4. alert('Twoja przeglądarka nie obsługuje localStorage. Spróbuj zaktualizować...');
  5. } else {
  6. if ((localStorage.getItem("background") != null) && (localStorage.getItem("color") != null)) {
  7. getColour = localStorage.background;
  8. $('.toChange').css('background', getColour);
  9. getFontColor = localStorage.color;
  10. $('.toChange').css('color', getFontColor);
  11. }
  12. }
  13.  
  14. $('.nocny').on('click', function() {
  15. setColour = '#CCCCCC';
  16. setFontColor = '#000000';
  17. if ((setColour == "") && (setFontColor == "")) {
  18. alert('');
  19. return;
  20. }
  21. localStorage.removeItem('background');
  22. $('.toChange').css('background', setColour);
  23. localStorage.setItem("background", setColour);
  24.  
  25. localStorage.removeItem('color');
  26. $('.toChange').css('color', setFontColor);
  27. localStorage.setItem("color", setFontColor);
  28.  
  29. });
  30. });
  31.  

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)