mjohnst

Michael Johnston's Blog

down SCROLL down

rss

Custom Flat Radio Buttons

- by Michael Johnston

A while back, I was searching the web for a way to make some custom radio buttons. I didn't want the generic nodes that were seemingly immune to CSS style and I was interested in finding a solution without Javascipt

Here is what I came up with:


What color is the stoplight?



This is accomplished by creating a simple HTML form:

<form method="post">

      <label id="red-radio" for="red">
        <input id="red" type="radio" name="colors" value="red"/>
        <span class="button red">Red</span>
      </label>

      <label id="yellow-radio" for="yellow">
        <input id="yellow" type="radio" name="colors" value="yellow"/>
        <span class="button yellow">Yellow</span>
      </label>
 
      <label id="green-radio" for="green">
        <input id="green" type="radio" name="colors" value="green"/>
        <span class="button green">Green</span>
      </label>

</form>
<button onClick="alertLight();">Submit</button>

This Javascript upon clicking button (just for example, sending to server makes more sense):

function alertLight() {
  var radios=document.getElementsByName("colors");
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
          alert("The stoplight is "+radios[i].value);
      }
  }
}

And setting the CSS as:

input[type="radio"] {
  display: none; /* removes the default buttons */
}

label {
  /* simple styling of label, bottom margin set to 0 for elements to 'stick' together */
  font-weight:bold;
  margin-bottom: 0;
  width:200px;
}

span.button {
  /* this CSS controls what the custom radio button will look like */
  display: block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-bottom: 0;
  background-color:#999;
}

/* Last change the custom button (span) style when input is checked 
    for this code to work, the span comes after the input */
:checked + span.green {
  background-color:green;
}
:checked + span.red {
  background-color:red;
}
:checked + span.yellow {
  background-color:yellow;
}

My personal application of this style is used on a personal project website where I've given users these stylized radio buttons to remove linked 3rd party social accounts from their profile. I didn't want to break the flat, blocky style of the website with radio buttons, so I designed these.

applied example of form from startupcrawler.com
Flat, Blocked Radio Buttons from StartupCrawler
example with hover
Radio button hovered over Twitter radio button.
example with selected
Twitter radio button selected.
A side note: I'm sure the accessibility on this is quite lacking. If there are any other issues that are discovered, let me know in the comments.

...read more & comments

Discovering Heroku

- by Michael Johnston

A few days back I looked in to the cloud Platform as a Service (PaaS) Heroku. I didn't quite understand what the pricing options were, so I wrote it off as something that was more for individuals with money, startups with funding, or larger companies. I had heard the name thrown around with the word scalable, and the pricing options page showed that, but I still was a bit unclear about what Dynos were, why I needed them, and if Heroku was a better option for me than my current PaaS Webfaction. What I discovered today was that it can be used for free, supports my language/framework of choice Python/Django with PostgreSQL, and has appealing add-on features.

The article that spurred my discovery is from an amazing web-app development blog/tutorial site NetTuts+. The article popped up in my RSS feed comparing AppFrog to Heroku. I gave the article a quick read over (I recommend it) and discovered that Heroku's most basic option is free (along with AppFrog's). Immediately, I had to explore Heroku, set up an account and play around with it

...read more & comments

Posts Coming Soon

- by Michael Johnston

Hello internets!

This is my new personal development blog. I will try to keep new posts coming every so often.

Some topics that I will post about:

  • Python
  • Django
  • HTML/CSS/JavaScrip
  • Design
  • Other misc. topics

If any issues arrise on this website, shoot me an email at me@mjohnst.com

I built this webpage from scratch using Python/Django and my HTML/CSS/JavaScript knowledge. I hope you enjoy it!

Michael Johnston (mjohnst)

...read more & comments