Let css search or database in HTML 2
In the last article I refused to use the html + php + sql bundle, leaving only the html. Like the last time, on the html page there is everything that we need at once, and it remains only to remove the excess, based on the search parameters. We used to do this with JavaScript, and now we'll take advantage of CSS.
Well, again, the standard blank page.
')
So, blocks containing information other than style classes contain descriptive. Descriptive classes will allow us to display only blocks that match parameters.
For this we useattribute selector [class ~ = "class_name"] chain of classes. And for example, using such a CSS line, we will leave only one house visible.
And to compile this line, we use JavaScript.
Here, in between times, the anchor is placed on the selected parameters.
That's all.
PS Thanks @ SelenIT2 for the tip . JavaScript code has shortened a bit and the url has become more beautiful.
Well, again, the standard blank page.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-language" content="ru"> <title></title> <script src="search.js"></script> <link href="search.css" type="text/css" rel="stylesheet" charset="utf-8" > <style id="filter"> </style> </head> <body> <table class="search"> <tr> <th>:</th> <td> <select id="style"> <option value=""></option> <option value="neoklas" id="neoklas"></option> <option value="postmodern" id="postmodern"></option> <option value="psevdomodern" id="psevdomodern"></option> <option value="neogot" id="neogot"></option> </select> </td> </tr> <tr> <th> :</th> <td> <select id="wall_material"> <option value=""></option> <option value="kirpich" id="kirpich"></option> <option value="gazobeton" id="gazobeton"></option> <option value="karkas" id="karkas"> </option> <option value="derevo" id="derevo"></option> </select> </td> </tr> <tr> <th>:</th> <td> <select id="floors"> <option value=""></option> <option value="fl1" id="fl1">1</option> <option value="fl2" id="fl2">2</option> <option value="fl3" id="fl3">3</option> </select> </td> </tr> <tr> <td colspan="2"> <input id="search" type="button" value="" /> </td> </tr> </table> <!-- --> <div class="home whiteframe neoklas kirpich fl2"> <a class="url" href="http://kirpich.example.com/#rust"> <img class="image" src="http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt=""/> </a> <div class="name"> <a class="url" href="http://kirpich.example.com/#rust"> «» </a> </div> <div class="style"></div> <div class="wall_material"> , </div> <div class="square">165.5</div> <div class="living_space">86</div> <div class="floors">2</div> </div> <div class="home whiteframe postmodern gazobeton fl2"> <a class="url" href="http://kirpich.example.com/#shater"> <img class="image" src="http://kirpich.example.com/thmb/shater/shater_enter.jpg" alt=""/> </a> <div class="name"> <a class="url" href="http://kirpich.example.com/#shater"> «» </a> </div> <div class="style"></div> <div class="wall_material"> </div> <div class="square">262</div> <div class="living_space">148.5</div> <div class="floors">2</div> </div> <div class="home whiteframe psevdomodern karkas fl1"> <a class="url" href="http://karkas.example.com/#papirus"> <img class="image" src="http://karkas.example.com/thmb/papirus/Papirus%20Vid-1.jpg" alt="" title="«»"/> </a> <div class="name"> <a class="url" href="http://karkas.example.com/#papirus"> «» </a> </div> <div class="style"></div> <div class="wall_material"> </div> <div class="square">142.3</div> <div class="living_space">77.9</div> <div class="floors">1</div> </div> <div class="home whiteframe neogot derevo fl3"> <a class="url" href="http://derevo.example.com/#legenda"> <img class="image" src="http://derevo.example.com/thmb/orehovo/orehovo.jpg" alt="" title="«»"/> </a> <div class="name"> <a class="url" href="http://derevo.example.com/#legenda"> «» </a> </div> <div class="style"></div> <div class="wall_material"></div> <div class="square">436.7</div> <div class="living_space">166.2</div> <div class="floors">3</div> </div> <!-- <div class="home whiteframe"> <a class="url" href=""> <img class="image" src="" alt="" title=""/> </a> <div class="name"> <a class="url" href=""> </a> </div> <div class="style"></div> <div class="wall_material"></div> <div class="living_space"></div> <div class="square"></div> <div class="floors"></div> </div> --> </body> </html> ')
So, blocks containing information other than style classes contain descriptive. Descriptive classes will allow us to display only blocks that match parameters.
<div class="... neogot derevo fl3"> For this we use
.home{display: none} .home.neogot.derevo.fl3{display: block} And to compile this line, we use JavaScript.
function select_el(value){ if (value){ var el=document.getElementById(value); if (el) el.selected = true; } } function get_filter(id){ var value=document.getElementById(id).value; if (value) return "."+value; else return ""; } (function(){ var but = document.getElementById("search"); if (!but) return setTimeout(arguments.callee, 1000); var params = document.location.hash.replace("#","").split("."); for (var i = 0; i < params.length; i++) select_el(params[i]); (but.onclick = function(){ var style = document.getElementById("filter"); var style_text = [".home{display: none} .home",get_filter("style"), get_filter("wall_material"), get_filter("floors"),"{display: block}"].join(""); if (typeof style.textContent == "string") style.textContent = style_text; else style.styleSheet.cssText = style_text; document.location.hash = [get_filter("style"), get_filter("wall_material"), get_filter("floors")].join(""); })() })() Here, in between times, the anchor is placed on the selected parameters.
That's all.
PS Thanks @ SelenIT2 for the tip . JavaScript code has shortened a bit and the url has become more beautiful.
Source: https://habr.com/ru/post/135339/
All Articles