The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

FuriousAngle: May 14, 2006; See your face upon the clean water. How dirty! Come! Wash your face!

Hi everybody! Please let me know if this isn't the place to ask.

Skill level: Pretty beginner, I have the basic concepts of HTML 5 and CSS down, with some JS
Project Requirements: Probably CSS and JS

Would anyone mind helping me out? I'd be very grateful! I'd even be happy with a point in the right direction.

I'm looking for a simple, clean way to switch between different sets of text. Ideally I'd like to have a set of radio buttons at the top to let the user switch between three sets of text scattered throughout a page. The way I know how to do it would involve hiding each individual instance of all txtB and txtC while the txtA button is depressed, and that seems like it can get tedious and messy as far as code goes. I feel like there's got to be a better way for me to group everything according to type and use some buttons to toggle which values are shown.

Simple code:

code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<input type="radio" name="edition" value="txtA">Show Text A<br>
	<input type="radio" name="edition" value="txtB">Show Text B<br>
	<input type="radio" name="edition" value="txtC">Show Text C<br>

	<p>Text A.</p>
	<p>Text B.</p>
	<p>Text C.</p>
	<p>Universal Text.</p>
	<p>Text A.</p>	
	<p>Text B.</p>
	<p>Text C.</p>
	<p>Universal Text.</p>

</body>
</html>

Desired output:

Text A./Text B./Text C.
Universal Text
Text A./Text B./Text C.
Universal Text

Any input would be AWESOME.

# ¿ Jul 11, 2016 22:57

Adbot: ADBOT LOVES YOU

# ¿ May 20, 2024 02:49

FuriousAngle: May 14, 2006; See your face upon the clean water. How dirty! Come! Wash your face!

PT6A posted:

Assign a CSS class to each set of text (let's say "textA" "textB" "textC" to keep things simple). When a radio button is selected, set the two non-active classes to have "display:none" in CSS, and the active class to have "display:block".

Is this enough to get started with or would you like more help?

That's a great start! Thanks! Let me see if I can do it with that!

# ¿ Jul 12, 2016 00:25

FuriousAngle: May 14, 2006; See your face upon the clean water. How dirty! Come! Wash your face!

Depressing Box posted:

You could also lean more on CSS and write a style that hides all conditional elements, then show the elements that match the parent class:
CSS code:
<CODE HERE>
Then just use JS to make the radio buttons toggle the class on a parent element:
code:
<MORE CODE HERE>

So close! I hate to ask for help again so soon but this is driving me nuts. My JS skills aren't quite up to snuff, apparently, and I'm having a hell of a time figuring out the IF statement's syntax (if I should even be using IF statements for what I'm doing).

Here's what I have so far. To simplify I just lumped the CSS in the main code. Can anyone spot what I'm doing wrong?

code:

<!DOCTYPE html>
<html>
    <head>
        <style> 
            .textB {
                display:none;
            }
            
            .textA {
                display:block;
            }            
        </style>
    </head>
    <body>
      
        <input type="radio" name="edition" value="txtA">Show Text A
        <input type="radio" name="edition" value="txtB">Show Text B<br>
    
        <script>
            if (document.edition.txtA.checked == true) {
                .textA {
                    display:block;
                }
                .textB {
                    display: none;
                }
            }
            else if (document.edition.txtB.checked == true) {
                    .textB {
                        display:block;
                    }
                    
                    .textA {
                        display:none;
                    }
                }
        </script>
        
   <p class="textA">Text A.</p>
            <p class="textB">Text B.</p>
            <p>Universal Text.</p>
            <p class="textA">Text A.</p>	
            <p class="textB">Text B.</p>
            <p>Universal Text.</p>

    </body>
</html>

# ¿ Jul 12, 2016 03:28

FuriousAngle: May 14, 2006; See your face upon the clean water. How dirty! Come! Wash your face!

Depressing Box posted:

Mixing CSS and JS like that won't actually do anything. I'd recommend reading some introductory JavaScript tutorials to get familiar with how the language is structured (I've found Eloquent Javascript to be pretty straightforward, and it's free).

To your specific question, here's a JSFiddle demonstrating a possible solution, using jQuery since I don't know which browsers you're targeting. Notice how the major sections (controls, text) are grouped under divs with descriptive classes, making them easier to target with your styles and scripts.

That's great! It's exactly what I want it to do! And you're right, I definitely need to get more familiar with Javascript. I'm trying to run before I can walk. In the meanwhile, where do I place that JS code so it works? I've tried copying it directly in <SCRIPT> brackets in the HEAD and BODY sections and that doesn't work so I'm fairly certain I'm doing that wrong too.

# ¿ Jul 12, 2016 19:29

FuriousAngle: May 14, 2006; See your face upon the clean water. How dirty! Come! Wash your face!

Depressing Box posted:

You need to include jQuery first, and I recommend putting both at the very bottom of the page, just before the closing </body> tag, like so. Loading scripts last keeps them from slowing down the initial page load, and makes it so you don't (or very rarely) need to wait for the window.onload event.

You are an amazing person. You deserve a raise and a back-rub. Thank you!

# ¿ Jul 12, 2016 19:52

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread