Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [inne][jquery] Zmiana kolorów na stronie
Impact
post 31.10.2019, 13:26:20
Post #1





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 11.02.2008

Ostrzeżenie: (0%)
-----


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


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. });

Go to the top of the page
+Quote Post
olszam
post 31.10.2019, 13:49:25
Post #2





Grupa: Zarejestrowani
Postów: 339
Pomógł: 23
Dołączył: 20.01.2011
Skąd: Chełm

Ostrzeżenie: (0%)
-----


W ciastku zapisz sobie co ma na wstępie ładować do strony.
Go to the top of the page
+Quote Post
Impact
post 31.10.2019, 14:22:56
Post #3





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 11.02.2008

Ostrzeżenie: (0%)
-----


mozesz dac jakis przyklad ?
Go to the top of the page
+Quote Post
viking
post 31.10.2019, 15:07:21
Post #4





Grupa: Zarejestrowani
Postów: 5 430
Pomógł: 927
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


https://developer.mozilla.org/pl/docs/Web/A...ow/localStorage


--------------------
Go to the top of the page
+Quote Post
Impact
post 4.11.2019, 08:49:53
Post #5





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 11.02.2008

Ostrzeżenie: (0%)
-----


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.  


Ten post edytował Impact 4.11.2019, 10:31:39
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 15.12.2019 - 12:39