Hide/Reveal with CSS and Java Script
I've been working on a project at school trying to produce a web site to act as the backbone of a language lab in the PC room, turning every box with a web browser and network connection into a terminal for English study (in theory). My school's disastrous network overhaul last year means that the internet is now unusably slow (don't even start me on it), and I wanted to develop the site with a focus on media such as movies and music, so I decided to host the site locally - I built the box with debian server, got apache up and running with PHP support and I've coded the majority of the site already.
You can see a slightly buggy copy viewable online here: learningenglish.
I developed the media playback using JW FLV Media Player, but stumbled across a problem where I wanted to have links that would load specific audio files into the player so that students could hear the reading of a word in English without having to use a separate play bar for every single file, kind of like having a playlist for the player on the web page itself.
One possible way to solve this problem is with hide/reveal in CSS, creating many instances of the player and then hiding all the ones that aren't being used. I'm not sure if this is what I will eventually do, but it led me to this page and learning a little about hide and reveal in CSS.
The problem was that I wanted only one item from a large selection to be displayed, and the only way I found to do this online was with radio buttons which I don't want to use. So, I sat down and tried to code some java script that would do this dynamically for a list of any size and with a little help from my friend Sayer, this was the result.
I couldn't find anything else on the net which showed how to use hide/reveal to display one item from a list without radio buttons, so I hope that this might be useful to some people. It scans the HTML content and determines how many elements there are on the page based on the DIV id, meaning there is no need to set the number yourself and making your HTML more easily maintainable.
Hide/Reveal with CSS and Java Script.
You can see a slightly buggy copy viewable online here: learningenglish.
I developed the media playback using JW FLV Media Player, but stumbled across a problem where I wanted to have links that would load specific audio files into the player so that students could hear the reading of a word in English without having to use a separate play bar for every single file, kind of like having a playlist for the player on the web page itself.
One possible way to solve this problem is with hide/reveal in CSS, creating many instances of the player and then hiding all the ones that aren't being used. I'm not sure if this is what I will eventually do, but it led me to this page and learning a little about hide and reveal in CSS.
The problem was that I wanted only one item from a large selection to be displayed, and the only way I found to do this online was with radio buttons which I don't want to use. So, I sat down and tried to code some java script that would do this dynamically for a list of any size and with a little help from my friend Sayer, this was the result.
I couldn't find anything else on the net which showed how to use hide/reveal to display one item from a list without radio buttons, so I hope that this might be useful to some people. It scans the HTML content and determines how many elements there are on the page based on the DIV id, meaning there is no need to set the number yourself and making your HTML more easily maintainable.
Hide/Reveal with CSS and Java Script.
0 Comments:
Post a Comment
<< Home