I'm redoing my website and my web design skills are very very rusty so its been a sorta step by step effort to get to where I'm at.

http://endersdrift.freeiz.com/

Basically the problem I'm having is I was able to get it work more or less how I want but the links for Graphic Design, Photography, Powerlifting, SUFK all have to be hit once which has nothing happen and then the second time it will show.

I dont know javascript so I found the show/hide script and then I found some more instructions which helped me get the 'About Me' to work correctly but in doing so this happened.

Any simple fixes would be really helpful! All the scripts and css and everything are really easy to find on the site.

So am I reading this correctly?

On page load, you want the "about" section to show. ("ABOUT As I sat and ate lunch in the student union at Florida In....")

Then If I wish to view your Graphic design work, I click the "Graphic Design" link - BUT nothing must happen. If I click it again, ONLY then does the thumbnails section appear?

Strange navigation in that case?

If instead you want the 1st click to show the thumbnails... then I suggest tossing the show/hide script and using jQuery's show() and hide() instead.

However - for a quick/dirty fix, by no means the best way, here is showHide, modified, for you:

function showHide(id) { var sections = ['about', 'graphic', 'photo', 'powerlifting', 'sufk'];

for (var i = 0; i < sections.length; i++) {
    if (sections[i] == id) {
        document.getElementById(id).style.display = 'block';
    } else {
        document.getElementById(sections[i]).style.display = 'none';
    }
}

}

Thanks Scud, yes you are reading it correctly.

I found this:http://papermashup.com/simple-jquery-showhide-div/

Seems to be what you're referring to. How would I tweak it so that ABOUT starts on Show and the others start on Hide?

If you are going to include jQuery you can clean up your markup a bit with event delegation:

Your menu markup would look like this :

ABOUT • GRAPHIC DESIGN • PHOTOGRAPHY • POWERLIFTING • SUFK - ORLANDO

and the javascript :

$(function(){

        $('#menu').delegate('a', 'click', function (event) {

            // hide all sections
            var sections = ['about', 'graphic', 'photo', 'powerlifting', 'sufk'],
                i = sections.length;

            while (i--) {
                document.getElementById(sections[i]).style.display = 'none';
            }

            // toggle linked
            $('#'+event.target.href.split('#')[1]).toggle();

            // prevent default action and stop propagation
            return false;
        });

    });

I realize you said you don't know javascript, so ask away, but basically the menu element considers which child element got clicked and 'delegates' the appropriate action.

That's a better approach than mine - aside from a typo: the comma at the end of this line should be a semi-colon

var sections = ['about', 'graphic', 'photo', 'powerlifting', 'sufk'], // <-- ";" goes here instead of ","

jQuery is really amazing - and while the delegate example looks somewhat intimidating, a section could be shown/hidden using a very simple call:

$("#about").toggle();

Definitely worth a look.

Originally posted by: scudsucker aside from a typo: the comma at the end of this line should be a semi-colon

No, we wouldn't want to have 'i 'prancing around in the global namepsace

Oh.. right..

Sorry that was foolish. I never declare variables like that - always either

var a,b,c,d

or

var a="something"; var b=["something", "else"]; var c=123;

So I thought you had cocked it up. Alas.. it was me.

Yeah, I mostly got into the habit of using single var statements because JSLint otherwise nags about it and I fear the Wrath of Crockford.

um I did what you suggested and now none of it is working?

I think you need to include a more recent jQuery version

Okay found the most up to date and that helped. Now the sections are showing again and disappearing but they're not staying open if someone wants to show more than one section at a time. It's also not doing that sorta cool scrolly thing that was in the sample I had found above (http://papermashup.com/simple-jquery-showhide-div/) which I kinda like.

Thanks for all the help by the way

Removing the initial hiding and changing toggle to slideToggle should do it. jQuery has plenty of animations to play with, but you have to call / chain them.

$('#menu').delegate('a', 'click', function (event) { // toggle clicked $('#'+event.target.href.split('#')[1]).slideToggle();

// prevent default action and stop propagation
return false;

});

Thanks man I never really knew what all this new stuff was being done with. Looked it up and foundhttp://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques. I should really try learning some of this stuff it seems but after I get my shit online.

hmm getting closer :-

I got the about to stay open by removing the others from the hide statement. I changed toggle to slideToggle. The slide effect works and looks slick. But the close doesn't work. It just reopens it?

Remove the hide code entirely - check my previous post.

Thanks for all the help! That worked but I have no idea why. Is it just a built in part of the slideToggle that the first item starts in the open position?

Hmm in looking at it now I'm wondering if maybe when a section is clicked on it should close the open section. Not sure if someone opens Graphics and then clicks on Photography they'll realize to scroll down. What do you think? Is that still fairly easy?

I should return the book on Ruby I bought as I can't even get Ruby properly installed and find a book on this instead maybe. Won't teach me about back end but sure would be helpful to up my skills in some capacity.

The first item starts open because it's defined that way in the stylesheet. The toggle function simply switches targeted elements between display:block and display:none.

From a UX perspective it doesn't make sense that a tab-like structure opens multplie sections on the same page. It's counter-intuitive to the format. That's why my initial code switches between tabs, much like you propose now - so revert to that if you like.

When you want to have sections open on the same page, an accordeon style ui would be more appropriate. ( rough example :http://www.talentedyp.nl/ )

Ah yes I see that now. I had made a site that had the content stay open once before back with javascript before all this jquery stuff even existed and it worked well but the menu was on the left since the menu I want to definitely be a top menu you're right and it needs to either be accordion style or not stay open.

I went back to the original code you gave me but changed the toggle to slideToggle and it works well now.

I see about the none in my css code, for some reason I thought when I went to your code I removed that. Glad something I did was correct from the start

Thanks for all the help man! When its all said and done I'll be sure to post it up somewhere, gotta get the actual sections correct and make some more changes now that the navigation is in place.

Hey Wowbagger I didnt even notice until now while I continue working on it that in doing these changes the lightbox no longer works. Any idea what might be interfering with it?

Ah you're also including the prototype library, which uses the same '$' identifier for it's global object.

Here's more info :http://docs.jquery.com/Using_jQuery_with_Other_Libraries

It should become something like this :

jQuery.noConflict();

jQuery(function(){

        jQuery('#menu').delegate('a', 'click', function (event) {

            // hide all sections
            var sections = ['about', 'graphic', 'photo', 'powerlifting', 'sufk'],
                i = sections.length;

            while (i--) {
                document.getElementById(sections[i]).style.display = 'none';
            }

            // toggle linked
            jQuery('#'+event.target.href.split('#')[1]).slideToggle();

            // prevent default action and stop propagation
            return false;
        });

    }); 

thanks it all works now! There's another script I found which I think would really set it off but it seems really complicated and advanced for me. I'm gonna get the rest of the page up and then maybe I'll tinker with this other script on an index2

This is the script I wouldn't eventually mind having in my graphic design section but definitely beyond my current level:http://playground.mobily.pl/jquery/mobily-select/demo.html