I’m building a webpage to automatically generate lists of vocab words.  I’m using PHP to read in the data file, turn it into a 2D array (ie. rows and columns) and then shuffle the data before echoing it out.

My issue is that when I echo the data out I obviously don’t include the translations.  I want to have a way of toggling the answers on and off, but if you put in a normal link to the same page with a $_GET to include answers, the data is reshuffled.

So, either I need a way of transferring the array to the next page or a way of making the text appear and dissapear without refreshing/reloading.

Any ideas?  :?

P.S. The page in question is http://www.mattclaridge.com/japanese/ in case I didn’t explain it very well :oops:

Have you thought about using CSS+Javascript to simply hide the answers in the page? Basically, you echo out the questions and answers and hide the answers until the user clicks on a box or link.

You’ll have to use the concept of layers. It’s pretty easy to implement and there are tons of examples on how to do this on the web. Do a search for “css show hide” and you’ll find lots of articles like this one.

http://www.netlobo.com/div_hiding.html

Hope this helps…

Yeah I’d realised that JS was the way to go, but I don’t know any!

I looked up layers but didn’t see how it would help :oops:

Googling around the main problem seems to be that you can only change one DIV using a unique ID, and I don’t fancy giving each element a unique ID

Is that where the layers are meant to help?
It’s too early in the morning for my brain to process it all :?

[quote author=“Mighty Matt”]Googling around the main problem seems to be that you can only change one DIV using a unique ID, and I don’t fancy giving each element a unique ID

That’s actually the easiest way to do it. Use the loop index that you’re using to iterate through the array to give each div a unique ID so that the IDs are “ans1”, “ans2”, etc using echo. In each iteration of the loop there would presumably be a link to make that div unhidden. Make a javascript function called “showAnswer(ID)” or something and pass the iterator to this function again using echo.

Then you can define a CSS style that implements display:none; for example I’ll call it “hiddentext” and a style that implements the style you want for the answer text, call it “answertext”. Make the class of all of the answer <div> tags “hiddentext” Then use this JavaScript function:

Not the most elegant or correct way to do it, but it should work. To make the function a toggle, modify this function to test the value className property before it assigns and have it assign “hiddentext” to className instead of “hiddentext” if it’s already hiddentext”.

Many thanks to all.  I have made it work.

In the end I used Drachen’s suggestions and it wasn’t as bad as I thought to give each element a unique ID.  The ‘className’ bit was also really useful.

I’m intreaged though.  You say it’s not the most ‘elegant or correct’ way.  so what would those be?  Probably planning it better from the start!!  :oops:

hmm, just seen a different problem.

Those entries which don’t have a Kanji are showing a blank space because there is nothing to show there:

http://www.mattclaridge.com/japanese/index.php?file=Test&input=Fruits

I thought it was to do with not having used

on the entries when creating the standard list, and so it was therefore showing up because of a return character, but I’ve just put trim in and it still works…

I guess it’s to do with making the div

which when it has an entry is fine but when it’s empty it goes straight down to the background.

Hmm whilst I’m on issues I can’t solve with CSS.

If you look at a test page then there is a gap between the ‘Japanese’ header and ‘Test’ header.  This isn’t on the other pages and I don’t know where it’s coming from.  The source code shows

which doesn’t have a return marker in it.  :?:

Glad the code worked for you. What I meant by “most correct” was that it didn’t test whether the browser supported document.getElementById method to accomodate older browsers.

The gap under the header is caused by an errant unprintable character in the HTML at the very end of line 10 (just after the closing </div> tag). Amusingly, it only causes problems under IE.

I think you’ve been lead astray a bit by some HTML gurus who say that there are no good uses for tables anymore. They were designed to be used for tabular data, and this is definitely tabular data. Use a table as long as you remove all the float:left properties you really don’t need. Using <div>s float:left and clear was inventive to say the least! :D The table should be cellspacing=“0” and cellpadding=“0” and the <td>s should be class=“title or class=“entry1” or class=“entry2” and it should look like what you have now.

You make a good point about tables :oops:

In my defense this was/is mainly an exercise in learning more about CSS (and javascript as it turns out).  A table wouldn’t have been nearly as intellectually stimulating!!

I still have the issue on the test pages where if there is no Kanji entry, making the DIV visibility:hidden makes it show the background of the page, not the colour of the parent DIV.  ie. a bloody great hole!!

This is probably an issue with IE because everything is, but as most people use it it ‘needs’ fixing! 

Oh and if you think I’m going to bother redoing everything in tables…

Well I probably will one day, when I’ve got more important things to be doing 8)

[quote author=“Mighty Matt”]In my defense this was/is mainly an exercise in learning more about CSS (and javascript as it turns out).  A table wouldn’t have been nearly as intellectually stimulating!!

Don’t take offense to this, because your page isn’t bad by a longshot, but I’m not sure whether it’s bad CSS/HTML books or just the complexity of CSS, but people seem to have a lot more trouble with CSS than they did with just HTML 3.2. People jump through hoops trying to get what they want without understanding how the box model works (or doesn’t) or how cascades work. Best book I ever read on CSS was this one . It tells you why CSS works like it does instead of how it works.

[quote author=“Mighty Matt”]I still have the issue on the test pages where if there is no Kanji entry, making the DIV visibility:hidden makes it show the background of the page, not the colour of the parent DIV.  ie. a bloody great hole!!

Believe it or not, but it’s doing exectly what it’s supposed to be doing. You have a containing element around the “row” where you have style=“clear:both”. Give that a background color and it should be OK… for IE. Firefox and Opera won’t like your current layout much… The real problem behind both issues is that you’re completely abusing float:left to create your faux table structure. <div>s are by default displayed display:block, which means that they take up a rectangular area and are vertically stacked. I suppose you could put 3 33.3% wide <div>s with display:inline inside another <div> as a “row”, but that’s kind of like using a chainsaw to mow the lawn. Yes, it theory it will work and is a hell of a lot of fun, but…
:D

I think my problem is that I start out just to make a simple page and then get carried away my making it more complex than it needs to be just because I’ve read about some function on some page somewhere.  Then by that point I decide I’d like to do something even more fun (ie. complex - like the test page) and instead of starting from scratch and planning things properly I just bolt on stuff to make it work!

Ah well, it gets the job done (in a round about way).

I’ll give that book a look when I get home, in-between cutting and sticking about 50 flash cards :?

Well I sucumbed and have redone things with tables.  I’ve actually used several because I was having issues with the differences in widths between the tables and the header/footer divs.  The silly box model.  Why can’t you define the maximum width of the div and then apply stuff within that, without it making things bigger (here’s where you tell me you can, in which case I’ll get that book!)

Anyways, even the test pages work properly with no gaps.

And as for that strange character making a space on my page…  I don’t know where it came from and my editor (notepad++) wasn’t showing anything up.  I only found it when I was editing the page online through http://www.web2ftp.com (which is a handy site btw) and it showed up.

How did you discover it Drachen?

[quote author=“Mighty Matt”]Well I sucumbed and have redone things with tables.  I’ve actually used several because I was having issues with the differences in widths between the tables and the header/footer divs.  The silly box model.  Why can’t you define the maximum width of the div and then apply stuff within that, without it making things bigger (here’s where you tell me you can, in which case I’ll get that book!)

Not exactly sure what you’re asking. Here’s a primer on what the box model is and why it can be problematic.

[quote author=“Mighty Matt”]And as for that strange character making a space on my page…  I don’t know where it came from and my editor (notepad++) wasn’t showing anything up.  I only found it when I was editing the page online through http://www.web2ftp.com (which is a handy site btw) and it showed up.

How did you discover it Drachen?

Probably happened when you were fooling around with character encoding. I made a new document in Dreamweaver and copied part of the code from one window to another. I guess the Windows clipboard didn’t know what to do with it and turned it into a ? character.