help!

[carsonkahn]

If i just post my HTML and CSS source, will someone please look at it? I didn't write the JS, and it's kinda unique the way it's done, and it doesn't seem to lend itself to the solution above... will you take a look?

the index is here: http://dl.dropbox.com/u/3587374/CK/index2.html
and the css is here: http://dl.dropbox.com/u/3587374/CK/css/style.css
you'll find different javascript stuff locations in the index source code.

bascially what i want is for there to be a "click the image" text centered under the image that disappears (kinda "replaced" by the main text) when you click the image.

the full site as it works right now is here:
http://cld.ly/b318gv

Thank you!

[Old Pedant]

I dunno about others, but I'm not going to take the time to reverse engineer that obscured JS code.

It doesn't even display correctly in FireFox, by the by.

That page would be trivial to modify (and write, in the first place) if it weren't done by that somewhat silly (to my mind, at least) obscuration process. That incidentally makes it slow to load.

I bet we could duplicate that page--with your requested change--in 40 to 60 lines of pretty simple JS code. Ehhh...maybe a bit more than that, to make it move down as it fades in, but not much more.

[carsonkahn]

hey old pendant--

the html isn't obfuscated in the version that' index2.html, please check out that one.

sorry for the confusion.

[Old Pedant]

Ahh...right you are! Sorry!

Well, after all that, I'm afraid I'm not a jquery user, so the best I could do is make a couple of guesses.

The key to it all is in your jquery.custom.js file, which does thie:

$(function() {
	//Body Load
	$.gaTracker('UA-430361-10');
	$("#content,#content *").hide();
	
	//User Interaction
	$("#header").addClass("cursor").toggle(function() {
		$("#content").slideDown("normal");
		$("#content *").fadeIn("normal");
	},function() {
		$("#content").slideUp("normal");
		$("#content *").fadeOut("normal");
	});
});

So that's basically saying that there is a "toggle" (click on, then click off) on your header div:

        <div id="header" id="me2"></div>

That causes the content div:

<div id="content">.
    ...
</div>

to both slide down and fade in.

So...

As I said, *NOT* a jquery user!

But...

Suppose you had *another*

<div id="messge">click the image</div>

And you used css to position it at the same place the content ends up at.

And then you altered your jquery code there to do this:

$(function() {
	//Body Load
	$.gaTracker('UA-430361-10');
	$("#content,#content *").hide();
	
	//User Interaction
	$("#header").addClass("cursor").toggle(function() {
		$("#content").slideDown("normal");
		$("#content *").fadeIn("normal");
		$("#message").fadeout("normal");
	},function() {
		$("#content").slideUp("normal");
		$("#content *").fadeOut("normal");
		$("#message").fadein("normal");
	});
});

???

See? Have it do the opposite fading to the content div. Could possibly slide it up and down, too, but I doubt that's really needed.

Hmmm???

But if this doesn't work, try posting in the jQuery sub-forum, this time showing the above JS code, so people don't have to go looking for it.

[carsonkahn]

thank you so much! brilliant solution, and i actually understand how it works. i'll post here again when i've got it figured out.

[GreatKingRat]

The only thing I would say is avoid hiding the message with CSS for accessibility reasons. That's why I hid the content in the jQuery when I originally wrote the script.

Also, if you're going to rip off my site I'd appreciate it if you removed the Google Analytics tracking code.

www.craigwilson.co.uk

[carsonkahn]

Hey Craig--

yeah lol I don't claim the work to be my own, and I believe you'll find your name credited, eh? I'm sorry if I messed up your google tracking analytics-- I just had this one graphic and I thought your site would feature it well I'd e happy to take it down if you want-- I wasn't ever planning on releasing oficially really (ie that's why it's hosted in dropbox) so yeah if you'd prefer I can do.