Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: help!

  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation help!

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    hey old pendant--

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

    sorry for the confusion.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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:
    Code:
    $(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:
    Code:
            <div id="header" id="me2"></div>
    That causes the content div:
    Code:
    <div id="content">.
        ...
    </div>
    to both slide down and fade in.

    So...

    As I said, *NOT* a jquery user!

    But...

    Suppose you had *another*
    Code:
    <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:
    Code:
    $(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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  • #6
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •