Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS][JavaScript]Stylizacja graficzna select
stecosik1
post 22.05.2018, 13:36:47
Post #1





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

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

Hej wszystkim. Mam problem, mam napisana sporą część kodu, i wszystko super ciągnie z bazy, porównuje i takie tam. Jest to wszystko w formie list rozwijalnych, no i problem polega na tym jak taką liste obrobić graficznie w java script, bo tylko takie coś wchodzi w gre... proszę o pomoc
[PHP] pobierz, plaintext 
  1. <?php
  2. $kolor = $mysqli->query('SELECT * FROM oslonki WHERE kolor!="null" ORDER BY kolor');
  3. echo '<select name="kolor">';
  4. while($row5 = mysqli_fetch_row($kolor)) {
  5.   echo '<option value="'.$row5[5].'">'.$row5[5].$row5[6].'</option>';
  6. }
  7. echo '</select>' . '<br/>';
  8. ?>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
nospor
post 22.05.2018, 13:42:17
Post #2





Grupa: Moderatorzy
Postów: 36 455
Pomógł: 6292
Dołączył: 27.12.2004
No ale jak obrobic graficznie? Co chcesz osiagnac jako efekt koncowy? Jakis przyklad?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
stecosik1
post 22.05.2018, 13:47:11
Post #3





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

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

chodzi mi o to że chce aby ta lista rozwijalna miała nową strzałkę, suwak inny niż domyślny, a także lepszy wygląd np pomarańczowy wygąd. takie tam bajery.
Go to the top of the page
+Quote Post
nospor
post 22.05.2018, 13:57:27
Post #4





Grupa: Moderatorzy
Postów: 36 455
Pomógł: 6292
Dołączył: 27.12.2004
https://www.w3schools.com/howto/howto_custom_select.asp
https://codepen.io/ericrasch/pen/zjDBx

i cala masa innych przykladow do znalezienia w google.
Sa tez biblioteki js maja jeszcze wiecej bajerow

http://gregfranko.com/jquery.selectBoxIt.js/#Examples

https://www.cssscript.com/tag/select/


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
stecosik1
post 22.05.2018, 14:02:00
Post #5





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

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

[PHP] pobierz, plaintext 
  1.    <!DOCTYPE HTML>
  2.    <html lang="pl"> 
  3.     <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="description" content="" />
  6. <meta name="keywords" content="" />
  7. <meta name="Author" content="Stec Kamil" />
  8. <meta content="text/javascript">
  9. <title>Identyfikacja produktu</title>
  10. <link rel="stylesheet" href="styl.css" type="text/css" />
  11. <center><img src="kill.jpg"/ width="100%" height="20%"></center>
  12. <body marginwidth="30" marginheight="30" bgcolor="white" text="black">
  13.  
  14.     <fieldset>
  15.         <center>
  16.             <font face="Times New Roman">
  17.     <form  method="POST" action="">
  18.  
  19.         <h1>WYBIERZ PRODUKT, KTÓRY CIĘ INTERESUJE</h1>
  20. <div class="text"><h3>Wybierz typ osłonki:</h3> 
  21. <?php
  22. include('oslonki.php');
  23. $typ_oslonki = $mysqli->query('SELECT * FROM oslonki WHERE typ_oslonki!="null" ORDER BY typ_oslonki');
  24. echo '<select name="typ_oslonki"00>';
  25. while($row1 = mysqli_fetch_row($typ_oslonki)) {
  26.   echo '<option value="'.$row1[1].'">'.$row1[1].$row1[2].'</option>';
  27. }
  28. echo '</select>'. '<br/>';
  29. ?>
  30.  
  31.  
  32. <div class="text"><h3>Wybierz dodatek do typu osłonki:</h3>
  33.  
  34. <?php
  35. //echo "Dodatki do typów osłonki:" . '<br/>';
  36. $dod_typ_oslonki = $mysqli->query('SELECT * FROM oslonki WHERE dod_typ_oslonki!="null" ORDER BY dod_typ_oslonki');
  37. echo '<select name="dod_typ_oslonki">';
  38. while($row3 = mysqli_fetch_row($dod_typ_oslonki)) {
  39.   echo '<option value="'.$row3[3].'">'.$row3[3].$row3[4].'</option>';
  40. }
  41. echo '</select>' . '<br/>';
  42. ?>
  43.  
  44.  
  45. <div class="text"><h3>Wybierz kolor osłonki:</h3>
  46.  
  47.  
  48. <?php
  49. $kolor = $mysqli->query('SELECT * FROM oslonki WHERE kolor!="null" ORDER BY kolor');
  50. echo '<select name="kolor">';
  51. while($row5 = mysqli_fetch_row($kolor)) {
  52.   echo '<option value="'.$row5[5].'">'.$row5[5].$row5[6].'</option>';
  53. }
  54. echo '</select>' . '<br/>';
  55. ?>
  56.  
  57.  
  58. <div class="text"><h3>Wybierz kaliber osłonki:</h3>
  59.  
  60.  
  61. <?php
  62. //echo "Kaliber:" . '<br/>';
  63. $kaliber = $mysqli->query('SELECT * FROM oslonki WHERE kaliber!="null" ORDER BY kaliber');
  64. echo '<select name="kaliber">';
  65. while($row7= mysqli_fetch_row($kaliber)) {
  66.   echo '<option value="'.$row7[7].'">'.intval($row7[7]).'</option>';
  67. }
  68. echo '</select>' . '<br/>';
  69. ?>
  70.  
  71.  
  72. <div class="text"><h3>Wybierz rodzaj pakowania osłonki:</h3>
  73.  
  74.  
  75. <?php
  76. //echo "Pakowanie:" . '<br/>';
  77. $pakowanie = $mysqli->query('SELECT * FROM oslonki WHERE pakowanie!="null"');
  78. echo '<select name="pakowanie">';
  79. while($row8 = mysqli_fetch_row($pakowanie)) {
  80.   echo '<option value="'.$row8[8].'">'.$row8[8].$row8[9].'</option>';
  81. }
  82. echo '</select>' . '<br/>';
  83. ?>
  84.  
  85.  
  86. <div class="text"><h3>Wybierz dodatek do osłonki:</h3>
  87.  
  88.  
  89. <?php
  90. //echo "Dodatki:" . '<br/>';
  91. $dodatki = $mysqli->query('SELECT * FROM oslonki WHERE dodatki!="null"');
  92. echo '<select name="dodatki">';
  93. while($row10 = mysqli_fetch_row($dodatki)) {
  94.   echo '<option value="'.$row10[10].'">'.$row10[10].$row10[11].'</option>';
  95. }
  96. echo '</select>' . '<br/>';
  97. ?>
  98.  
  99.  
  100. <div class="text"><h3>Wybierz ilość m.b. osłonki:</h3>
  101.  
  102.  
  103. <?php
  104. //echo "Ilość:" . '<br/>';
  105. $metry = $mysqli->query('SELECT * FROM oslonki WHERE metry!="null" ORDER BY metry');
  106. echo '<select name="metry">';
  107. while($row12 = mysqli_fetch_row($metry)) {
  108.   echo '<option value="'.$row12[12].'">'.intval($row12[12]).$row12[13].'</option>';
  109. }
  110. echo '</select>' . '<br/>';
  111. ?>
  112.  
  113.  
  114. <div class="text"><h3>Wybierz gatunek osłonki:</h3>
  115.  
  116.  
  117. <?php
  118. //echo "Gatunek:" . '<br/>';
  119. $gatunek = $mysqli->query('SELECT * FROM oslonki WHERE gatunek!="null"');
  120. echo '<select name="gatunek">';
  121. while($row14 = mysqli_fetch_row($gatunek)) {
  122.   echo '<option value="'.$row14[14].'">'.$row14[14].$row14[15].'</option>';
  123. }
  124. echo '</select>' . '<br/>';
  125.  
  126. ?>
  127. <br>
  128.     <input type="submit" class="button" value="Wyświetl kod wybranego produktu:">
  129. <br>
  130. <br>
  131.  
  132. <?php 
  133. echo '<font size="6" color="blue">'.'<b>'.@$_POST["typ_oslonki"].'</b>'.'</font>';
  134. echo '<font size="6" color="blue">'.'<b>'.@$_POST["dod_typ_oslonki"] . "-".'</b>'.'</font>';
  135. echo '<font size="6" color="blue">'.'<b>'.@$_POST["kolor"] . "-".'</b>'.'</font>';
  136. echo '<font size="6" color="blue">'.'<b>'.@$_POST["kaliber"] . "-".'</b>'.'</font>';
  137. echo '<font size="6" color="blue">'.'<b>'.@$_POST["pakowanie"];
  138. echo '<font size="6" color="blue">'.'<b>'.@$_POST["dodatki"] . "-".'</b>'.'</font>';
  139. echo '<font size="6" color="blue">'.'<b>'.@$_POST["metry"] . "-".'</b>'.'</font>';
  140. echo '<font size="6" color="blue">'.'<b>'.@$_POST["gatunek"] . '<br/>'.'</b>'.'</font>';
  141. @$p = $_POST["typ_oslonki"] . $_POST["dod_typ_oslonki"] . "-".$_POST["kolor"] . "-".$_POST["kaliber"] . "-".$_POST["pakowanie"].$_POST["dodatki"] . "-".$_POST["metry"] . "-".$_POST["gatunek"];
  142.  
  143.  
  144. $z = $mysqli->query('SELECT * FROM katalogg WHERE pozycja = "'.$p.'"');
  145. $x = $z->num_rows;
  146. if ($x) {
  147.     echo '<font size="6" color="green">'.'<b>'."Skontaktuj się z działem sprzedaży".'</b>'.'</font>';
  148. }else{
  149.     echo '<font size="6" color="red">'.'<b>'."Skontaktuj się z działem technologi".'</b>'.'</font>';
  150. }
  151. /*if(isset($_POST['typ_oslonki']) || isset($_POST['dod_typ_oslonki']) || isset($_POST['kolor']) || isset($_POST['kaliber']) || isset($_POST['pakowanie']) || isset($_POST['dodatki']) || isset($_POST['metry']) || isset($_POST['gatunek'])){
  152.         echo "Wypełnij wszystkie wymagane pola!";*/    
  153. ?>
  154.  
  155.  
  156. </div>
  157. </select>
  158. </form>
  159. </font>
  160. </center>
  161. </div>
  162. </fieldset>
  163. <div>
  164.     <div class="container -ue">
  165.     <img src="ue1.png"  style="float: left" vertical-align>
  166.     <div class="ue__title">Projekty współfinansowane ze środków Europejskiego Fuduszu Rozwoju Regionalnego</div>
  167.     <img src="eu2.png" style="float: right">
  168. </div>
  169.  
  170. </body>
  171. <footer>
  172.  
  173. <div class="footer">
  174.     <div class="container footer__copyrights" style="margin-bottom:0;">
  175.         <div class="footer__left">
  176.             Wszystkie prawa zastrzeżone Š 2018 <a href="http://www.fabios.com.pl/pl/"> fabios.com.pl</a>
  177.         </div>
  178.  
  179.     </div>
  180. </div>
  181. </footer>
  182. </head>
  183. </html>
  184.  
[PHP] pobierz, plaintext


Kod wygląda tak, wiem że jest on tam wywołany 7 razy jedno i to samo, lecz po jego skrócenium nie działa jak należy.A czy nie brakuje mi tu czegoś, jakiegoś <select> bo jak próbowałem to stylizować to nie działało, a przekopałem te strone i inne i dalej nic. HELP
Go to the top of the page
+Quote Post
nospor
post 22.05.2018, 14:08:07
Post #6





Grupa: Moderatorzy
Postów: 36 455
Pomógł: 6292
Dołączył: 27.12.2004
Cytat
a przekopałem te strone i inne i dalej nic.
Wrozek tu nie ma. Nie mamy pojecia jaka strone kopales i czy byla na lezaco i czy ledwo zywa.
Jak masz problem z jakims kodem css/js to wstaw to nam tutaj bysmy widzieli jak probowales. I zrob to wpierw na jednym przykladzie select. Ciezko sie czyta kod gdzie jest petryliards linii kodu php bo pokazujesz nam cala swoja strone


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
stecosik1
post 22.05.2018, 14:17:05
Post #7





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

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

http://blog.wilgosz.pl/stylizacja-elementu-select/ Z tego wklejałem i próbowałem
Go to the top of the page
+Quote Post
bael
post 22.05.2018, 20:43:35
Post #8





Grupa: Zarejestrowani
Postów: 3
Pomógł: 1
Dołączył: 8.08.2010

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

Generalnie JS nie służy do stylizacji elementów. Rola JS po stronie przeglądarki to wzbogacenie interakcji z użytkownikiem. Do stylizacji wykorzystywany jest CSS. Oczywiście istnieje API, które umożliwia stylizację elementów DOM ale powinno dziać się to dopiero w wyniku interakcji z użytkownikiem (np. zmiana koloru elementu po kliknięciu). Bez sensu jest wysyłać do przeglądarki dokument HTML, czekać aż przeglądarka go wyrenderuje, a na koniec zaaplikować jej skrypt JS tylko po to żeby ustalić wygląd elementów, ponieważ to oznacza że przeglądarka będzie musiała wyrenderować wszystko jeszcze raz.

Stylizacja w wykonaniu JS odbywa się za pomocą własności style, która reprezentuje atrybut style:

Kod
var element = document.querySelector(".myclass"); // zwraca pierwszy element w dokumencie o klasie "myclass"
var elements = document.querySelectorAll(".myclass"); // zwraca wszystkie elementy w dokumencie o klasie "myclass"

// stylowanie kolekcji elementów
elements.forEach( function(element) {
  element.style.color = "red";
  element.style.marginTop = "5px";  // używasz camelCase czyli "margin-top" zmienia się na "marginTop"
});

// stylowanie pojedynczego elementu
element.style.color = "green";
element.style.marginTop = "5px";
Go to the top of the page
+Quote Post
stecosik1
post 23.05.2018, 07:36:33
Post #9





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

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

No dobra, ale do czego mi ten kod, gdzie mam go wstawić?
Go to the top of the page
+Quote Post
bael
post 23.05.2018, 09:54:28
Post #10





Grupa: Zarejestrowani
Postów: 3
Pomógł: 1
Dołączył: 8.08.2010

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

To jest tylko przykład. Chodziło mi tylko o to żeby pokazać Ci jak można zmienić style za pomocą JS. Odnośnie tego gdzie umieszczać skrypty JS, to najlepiej jak zrobisz to na samym końcu dokumentu, zaraz przed </body>. Jeżeli umieścisz skrypt w <head>, to musisz mieć pewność, że DOM już się załadował. Możesz to tego wykorzystać event 'DOMContentLoaded'. Ten event jest odpalany wtedy kiedy kiedy HTML jest już całkowicie załadowany (ale bez czekania na arkusze stylów, obrazy itd.).

Kod
    document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });


Jeżeli chcesz poczekać aż wszystko (HTML, CSS , obrazki) się załaduje, to używasz eventu 'load'.

Kod
    window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });


Ten post edytował bael 23.05.2018, 10:35:46
Go to the top of the page
+Quote Post
stecosik1
post 29.05.2018, 11:03:54
Post #11





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 11.05.2018

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

Ok, udało mi sie, tylko zrobiłem pięknię ładnie moją liste rozwijalną, lecz w niektórych przypadkach takich jak kaliber, jest tam około ich 50 sztuk, i przydał by mi się suwak do tego stylu css co tu mam:
Kod
.custom-select {
  position: relative;
  font-family: Times New Roman;

.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: #FFE041;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 15px;
  right: 10px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 6px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: black;
  padding: 8px 16px;
  border: 3px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;

}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #FFE041;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  overflow: auto;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}



Dobra rozwiązane, ale wyszedł następny kłopot, po wybraniu z listy np 2 opcji bo powiedzmy się pomyliłem a chciałem wziąść pierwszą to ta pierwsza opcja mi znika . Jakby ją tu wrócić, czegoś mi css brakuje?

Problem rozwiążany do zamknięcia

Ten post edytował stecosik1 24.05.2018, 09:10:44
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 09:31
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn