Web coding questions

September 16, 2009 9:47 AM

Two webcoding questions: 1) What is the web coding name for hiding/revealing text without reloading a page? For instance, on this page you can see "Continue Reading" and "Hide this News Article" as toggles. They appear to be doing it with javascript. What is this called and are there simple free coding samples available for me to use? 2) Are there any free plugins that I can use on a blog to play audio samples? Something similar to what's used in MuFi or Wordpress's audio streamer, but without needing Wordpress. Thanks!
posted by Badmichelle to computers & internet (9 answers total)

You're looking for jQuery.
posted by nitsuj at 9:49 AM on September 16, 2009

(1) The Pitchfork hack is a very simple hidden div. You don't need jQuery or a fancy AJAX technique there, just a three line Javascript that sets a div from display:hidden to display:block. I've called it a display toggle or "javascript reveal", but I'm sure there are other names.

(2) The streaming audio object you linked, and most others, are Flash players. There are thousands of them. This one, first hit in Google, seems fine enough. But there are hundreds. Search for "embedded MP3 player" if you need other choices.
posted by rokusan at 9:57 AM on September 16, 2009

1) Like Rokusan said, this is essentially a "display toggle", or possibly even "show and hide". jQuery isn't required, but it does make a lot of these things simpler. Here's a simple tutorial using jquery:

Basic Show and Hide

Just a note that the tutorial doesn't mention the fact that you have to include jQuery first, but that's one line in your head:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

2) I like Yahoo Media Player for this.
posted by backwards guitar at 11:34 AM on September 16, 2009

Here's a simple free coding sample:

<a href="#" onclick="document.getElementById('foo').style.display='block'">Click here!</a>

<div id='foo' style='display:none'>This text shouldn't appear at first</div>

posted by turaho at 12:58 PM on September 16, 2009

And if you want a toggle like on the pitchfork site you can use something like: onclick="x=document.getElementById('foo'); x.style.display=(x.style.display=='none'?'block':'none')"
posted by Rhomboid at 1:03 PM on September 16, 2009

Neat. I've always wanted to know how to do that as well.

Rhomboid, your example is pretty neat but is there also a way to hide the "click here" text when someone clicks it and the thing expands (and then of course have a "hide this" at the end of the expanded text, which closes it and re-reveals the "click here")?
posted by You Should See the Other Guy at 1:55 PM on September 16, 2009

Sure. It's just a matter of coding what you want to happen into the onclick event.

However as you can see that is starting to look pretty ugly and a more proper way of dealing with it would be to not have any inline javascript or styles intermixed in the HTML (separation of content and presentation.) Instead, you would attach the event behaviors to the desired elements from a separate included script file. This would also be the way to go if you wanted to use this for multiple things on the page because it's lousy to repeat code; instead you would just pick a class for the "more inside" div that the script would recognize and it would synthesize the "[ more ]" and "[ less ]" anchors around it for you.
posted by Rhomboid at 2:32 PM on September 16, 2009 [1 favorite]

Like Rhomboid says, it's bad coding style/practice to include the javascript directly within the tags it affects. This is called "inline" javascript"). You want to separate the javascript (behavior) and css (appearance) from the actual html (structure+content). jQuery is good at abstracting javascript. Run through the basic tutorials, it's fairly simple to get, especially if you already know CSS.

For playing music, I personally like the JW Player, and it's what music.mefi uses.
posted by signal at 4:45 PM on September 16, 2009 [1 favorite]

Thanks, Rhomboid!
posted by You Should See the Other Guy at 5:36 PM on September 16, 2009