Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Make entire clickable in Sugarcube

Hello,
I'm quickly falling in love with Sugarcube. My game looks 100x better already.

Here's a few more questions...

1. How do I make a <li> element (which has a list of radio buttons) clickable?
radiobutton {
	border: solid #000060 0.09em;
  white-space: 0.3em;
	padding: .45em 0.45em 0.45em 0.45em;  
	border-radius: 0 em;
  color:#ffffff;
	background-color:black;
	font-family: "Arial Black", "Gadget", sans-serif;
}


and
<ul>
<li><<radiobutton "$job" "1" checked>> 1</li>

<li><<radiobutton "$job" ""2"">> 2</li>

<li><<radiobutton "$job" "3">> 3</li>

</ul>

<<button "Choose my job" "Job Path">><</button>>

is my current code. I've tried a display: block but that didn't work. Any advice on this one?

Comments

  • You cannot make the <li> clickable in any way which will also affect the radiobutton, which is what I assume you're looking to do—short of using JavaScript simply to prove that it can be brute forced.

    What you actually want to do is to use a <label> element—which is better for accessibility anyway. For example:
    <ul class="radiolist">
    <li><label><<radiobutton "$job" "1" checked>> 1</label></li>
    <li><label><<radiobutton "$job" "2">> 2</label></li>
    <li><label><<radiobutton "$job" "3">> 3</label></li>
    </ul>
    <<button "Choose my job" "Job Path">><</button>>
    


    And the CSS:
    ul.radiolist label {
    	display: block;
    	color: #fff;
    	background-color: #000;
    	border: 0.09em solid #000060;
    	font-family: "Arial Black", "Gadget", sans-serif;
    	margin: 0.3em;
    	padding: 0.45em;
    }
    
    You may need to tweak the style, of course, but that should put you on the right track.


    Additionally. If you wanted to get rid of the list-styling on the <ul>, simply add something like the following before the other rule.
    ul.radiolist {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    


    PS: You had too many quotes around the 2 in your original <<radiobutton "$job" ""2"">>. Do not double up your quotes like that. Something to keep an eye on.

    PPS: Your original CSS had several syntax errors, which were causing parts of it to be ignored. Something else to keep an eye on.
  • Le-sigh. Thanks for your help. You rock. I'll try that. More questions to follow.
  • I am also falling in love with SugarCube. :P
  • DairynGM wrote: »
    I am also falling in love with SugarCube. :P
    But changing over is NOT easy.

  • I know. But so far, at least for me, I'm finding for every step I take backwards to make a change, I realize I can take two steps forward in making the whole game look or function nicer.

    Just today, it's been adding auto-reading text with a player-changeable delay variable, a way better sidebar than the one I'd thrown together, and easier implementation of passage-specific backgrounds.

    ...And, y'know, I would have settled for just a save-to-file function. :3
  • DairynGM wrote: »
    I know. But so far, at least for me, I'm finding for every step I take backwards to make a change, I realize I can take two steps forward in making the whole game look or function nicer.

    Just today, it's been adding auto-reading text with a player-changeable delay variable, a way better sidebar than the one I'd thrown together, and easier implementation of passage-specific backgrounds.

    ...And, y'know, I would have settled for just a save-to-file function. :3

    For me I was able to add more in the sidebar (like a picture) which is sweet. There is so much more I can do with it, but I'll save what I have in mind for the next game. Didn't know about the backgrounds. Thank you!

    Enjoy buddy!

Sign In or Register to comment.