CSS again

[fahrenheit]

-page may load with everything expanded, then collapse at the end. This is partly intended behaviour, but perhaps a bit odd.

if you are doing stuff the current way, it will allways happen like that, the browser rends normaly all the code and then applys styles.

On a side note, i still think that the cleanest way of doing the collapse/expand things is this:

you encapsulate what you want to show in a div, give it an id and a style="display:" or a class it's the same thing.

like so:

Code: Select all

<div id=expand_this style="display:"><table blahhadaljada></table></div>

and use this simple function to toggle the visibility of the div:

Code: Select all

function toggle( targetId ){
  		target = document.getElementById( targetId );
  			if (target.style.display == "none"){
  				target.style.display = "";
  			} else {
  				target.style.display = "none";
  			}
}

this also works for <span>

for an example just see here and see how i use the function (it's not the cleanest example ever, i know )

[Rar]

My code is better than that, read it, you mighta learn summat. I could apply the display: none via attribute rather than class and style sheet, but #1: the problem is *while* the page is loading, and onload will still only run once the whole page has loaded, #2: the way I've done it is faster and cleaner than your option.

If you have suggestions as to applying a hide as the page is loading, without breaking the page for people with JS disabled (your page - no JS, no content), I'm interested. Provided the script stays linked in the header where it belongs and not in the body.

Rar

[fahrenheit]

My code is better than that, read it, you mighta learn summat. I could apply the display: none via attribute rather than class and style sheet, but #1: the problem is *while* the page is loading, and onload will still only run once the whole page has loaded, #2: the way I've done it is faster and cleaner than your option.

If you have suggestions as to applying a hide as the page is loading, without breaking the page for people with JS disabled, I'm interested. Provided the script stays linked in the header where it belongs and not in the body.

Rar

Point taken, didn't know that class change was quicker, live and learn...

other than putting all the html (hint-related, no js) code inside a <noscript> to avoid breaking stuff for ppl without js and place a <span> or a <div> in a normal area and then do a innerHTML replace with document.writes, I don't see anyway to apply styles before the browser finishes rendering, as i don't think that any browser does the style at the same time as the rendering (except opera, and it needs to finish the current working element before applying the style).
But this doubles the code and it's not very efficient (and innerHTML although is supported by almost every browser is not a standart, or wasn't).

[egg]

Anyway, felt like dipping into the evil world of JS today, so, pulled egg's anime hint page to bits. Or rather collected all the bits, and made sense of them. Fixed various bugs and greatly reduced the volume of script, and moved it all out of the page and into the header where it belongs.

I guess I need to revisit this... I didn't really like some of the stuff I had to do, but that's what I got to work cross platform... The hardest part was initially setting and tracking values of the fields when they were hidden/shown, and that made it much more complicated. Also I made the JS a little worse in some places because it made the perl neater, I could use a couple of common methods of defining variables/fields (for instance the list of genres is loaded dynamically from the DB). I will have to review your changes and see how things work out.

As long as we are here, would you like to do a mock-up based on categories instead of (or maybe along side until things are converted over) the genres? I haven't figured out how to handle that in a good way.

[Rar]

Yeah, I was picking on you for two reasons egg, firstly that by removing some of the resrictions you had I could avoid a lot of the pain, and also that petriw has grand plans for expanding and collapsing things, and I wanted to have a crack at a simple version so I knew what it was like. By and large I think this version will make it easier for you to add and change things in the page without worrying about touching any scripting at all.

On the category front, my idea was that they should be specified by a minimum and maximum value, on a scale of 0 (not added), 1 (+), 2 (*), 3 (*+), 4 (**), 5 (**+), 6 (***). How to do this with common controls though... is a good question. Two lots of seven radio buttons, and JS to ensure that max >= min, does not seem like a good option. Also, how to make a list of a few hundred cats actually useable... uuuuu

Rar

[Rar]

Mostly just poked stuff today... and started but didn't finish the calendar page. Oh, and made a progress-index, that you can't view in Opera.

Rar

[Rar]

http://petriw.com/creativity/rar/genren_work.htm

Was avoiding finishing that one for a bit. Note, it's a JS-cleanup page, I know it's not very pretty to look at atm, and it doesn't have all the tree, due to laziness. Progress to date on teh index still. I think I've borked various IE bits over time, and everything will need a reshuffle before being put into action, but progress happens, yo.

Rar

[exp]

i assume you know that it is broken in opera?
i.e. when expanding Setting::Place Setting::Time will also be indented.

BYe!
EXP

[PetriW]

ajax conversion of the anime page is almost complete too:
http://petriw.com/creativity/test/anime_work.htm

[Rar]

i assume you know that it is broken in opera?
i.e. when expanding Setting::Place Setting::Time will also be indented.

You're making it up, it works fine.

Rar

Okay, okay, I admit, I changed it...