mardi 17 avril 2018

Why is CSS sorting (using the checkbox hack) not working when I transition it to my CMS?

Let me preface this by saying I'm not a coder. I'm merely doing this because it's a function I need, so... this is probably a really dumb question. I'm sorry!

I need a simple, CSS-driven (jQuery and Javascript aren't options because the CMS invalidates them on account of security issues) sorting function to operate on an old Djanga Interactive CMS. After searching Codepen, I found something which I thought I could use as a basis, but it is simply not working.

The live website is here.

There are many, many limitations put in place by Djanga, not just the jQuery thing, and I've had issues with it not accepting code in the past -- or just stripping it out entirely. The use of <form> to wrap the snippet, for example, is there only because without it, Djanga reads the code as text.

As such, I'm sure when you look at the code, you'll see a lot of ugly hackiness.

So, if I may ask those who know much more than me... what is going on here? What isn't working right?

Here is the snippet I'm using, which as you can see, works fine here.

input[type="checkbox"] {
    display:none;
}

.wrapper {
  margin: 100px auto 50px;
  width: 96%;
  max-width: 900px;
  padding: 20px;
}
.wrapper img {
  max-width: 100%;
  width: 24%;
  margin: 0.25%;
}
.wrapper label {
  display: inline-block;
  width: 24%;
  padding: 10px;
  margin: 0 0.25% 10px;
  text-align: center;
  background: #365DA1;
  border: 7px solid white;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #333;
  color: white;
  font-size: 20px;
  text-shadow: 1px 1px 1px #333;
}
.wrapper input {
  display: none;
}
.wrapper input:checked ~ img {
  display: none;
}
.wrapper input:checked + label {
  background: #f1c40f;
}
.wrapper #murraycontroller:checked ~ .billmurray {
  display: inline-block;
}
.wrapper #dogecontroller:checked ~ .doge {
  display: inline-block;
}
.wrapper #vanillacontroller:checked ~ .vanillaice {
  display: inline-block;
}
.wrapper #catcontroller:checked ~ .cat {
  display: inline-block;
}
    <h2>Sortable</h2>

<div class="wrapper">
  <h1>Only show me pictures of:</h1>
  
  <form>
<input type="checkbox" name="controllers" id="murraycontroller">
  <label class="murraycontroller" for="murraycontroller">Bill Murray</label>
<input type="checkbox" name="controllers" id="dogecontroller">
  <label class="dogecontroller" for="dogecontroller">Doge</label>
<input type="checkbox" name="controllers" id="vanillacontroller">
  <label class="vanillacontroller" for="vanillacontroller">Vanilla Ice</label>
<input type="checkbox" name="controllers" id="catcontroller">     
  <label class="catcontroller" for="catcontroller">Cats</label>

    
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.placekitten.com/200/200" alt="" class="photo cat">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.placekitten.com/200/200" alt="" class="photo cat">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">  
</form>
</div>

This is really intimidating. I don't even like posting this, because I'm sure it seems like an idiotic question, but I would be thankful for any ideas or direction anyone wants to offer. Thank you so much.




Aucun commentaire:

Enregistrer un commentaire