How to create a checkbox with Hype?


#1

Hi there,

I’m currently working on a website. On my site I would like to ad checkboxes that you can check and uncheck as you please. I tried a few things but nothing works. Do you guys maybe have an idea on how to do it?

Thanks in advance.


(Mark Hunte) #2

Here sone example.

You use a rectangle and add the form to it’s innerHTML.

I have add some JS to get the results.

Checkboxexample.hypetemplate.zip (17.5 KB)

–Update: commented the JS


#3

hehe :wink:

You can also (if you are creative enough) design a checkbox within hype by combining a rectangle and a Tick image / font character and animate it using timelines and then add javascript to obtain some kind of activity. However, Mark’s way above is bar far the easier route :smile:

tickUntick.hype.zip (51.8 KB)


(Jon) #4

You can modify the innerHTML to include the labels as actual label elements so that clicking on them also toggles the associated checkbox input (a much bigger target to hit):

<form action="">
<input class="vehicle" type="checkbox" id="vehicle1" value="Bike"><label for="vehicle1">I have a bike</label><br>
<input class="vehicle" type="checkbox" id="vehicle2" value="Car"><label for="vehicle2">I have a car</label>
</form>

Note, this requires using unique IDs for the inputs but since the JS uses the class type to find the elements, the JS itself does not need to be updated.


(John Julian) #5

Hi there, is there a way to change the size of the checkbox?? Currently the checkbox is quite small in the samples.
I know this is probably a newbie question. Thanks in advance.


#6

@johnxarc

Hi John!

Here is a Hype project demo (based on @MarkHunte’s example above):
LargerCheckBox.hype.zip (17.0 KB)

You’ll find this CSS in the Head of the Hype doc:

<style>
	input[type=checkbox]
	{
 	 -ms-transform: scale(1.5); /* IE */
 	 transform: scale(1.5);
 	 margin-left: 5px;
 	 margin-bottom: 20px;
	}

	.checkboxtext
	{
  	margin-left: 30px;
  	margin-top: -32px;
	} 
</style>

You scale the checkbox size by adjusting the number in the "transform: scale(1.5);" line (and the line for the Internet Explorer browser just above it).
In order to provide control over adjusting the baseline of the text due to increasing/decreasing the size of the checkbox, there is a _div class="checkboxtext"_ in the "form" tag which allows for this baseline adjustment. You will need to change the CSS "margin-top" value in ".checkboxtext" if You adjust the checkbox size and want to keep the same baseline relationship with the corresponding text.
<form action="">
<input class="vehicle" type="checkbox" name="vehicle" value="Bike"><div class="checkboxtext">I have a bike</div><br>
<input class="vehicle" type="checkbox" name="vehicle" value="Car"><div class="checkboxtext">I have a car</div> 
</form>

(John Julian) #7

Hi Jim,

Thanks so much, really do appreciate that. Really clear and concise explanation and sample (you should write a book).

I’m really just getting into using Hype for hi fi prototypes so I’ll probably have lots of questions like this for a while.