The Glade 4.0

OK, so I've spent the last couple of years on and off administering several websites for our school. Fairly light stuff, and I had a halfway-decent page to start with.

Now I'm setting one up for a consulting business, as well as a personal page for my CV, etc. And I'm sure I will have many more questions that I can ask here.

I've got the domain registered, using Reclaim Hosting atm.

Want to just set up my pages from scratch, so I learn it from the ground up.

First question:

I've got a nice bit of hide/unhide javascript I've been using to switching something from a hidden to unhidden class on a link click.

The hidden and unhidden classes are in the central stylesheet.

Is there anyway to have script that loads for all pages? Or do I need to put the script in the header of each individual page?

_________________
Darksiege: You are not a god damned vulcan homie.

Much in the same way you use the <link> tag to load a single stylesheet on all of your pages, the solution to your issue would be to use one single header file at the top of all pages, but that is going to require some PHP.

Put all of your header code into a file (from doctype usually down to the opening body tag), call it header.php - then, at the top of each page, use this:



and then any edits you make to header.php will be reflected on all pages that have the include. You can use this same technique with all recurring elements - navigation, sidebar, footer, etc. Please note - all pages executing PHP code need to have a .php extension, so you're gonna have to modify all of your pages most likely.

Example:

Hmm, ok. Can do it for the whole header. But what about parts of it? Ie, if I have different page titles, etc. in each pages header, but just want to load the java?

Not a big deal to paste it into each header.

_________________
Darksiege: You are not a god damned vulcan homie.

Well instead of the entire header you could create an include only for your css and script files. Then just use something like this:



and my_scripts.php:


Basically any reused / frequently edited code can be turned into a PHP include if you want. Best applications are probably headers, footers and navigation.

Edit - and since you're talking about using javascript, is it something you wrote yourself or are you using a framework? If it's the former, maybe look into jQuery (leading js framework): http://try.jquery.com/

It's a modification of something I saw somewhere- may have been here.

_________________
Darksiege: You are not a god damned vulcan homie.

OK, so question:

I would like to set up a page with two columns, 1 static and 1 dynamic. Static column would have a listing of events, dynamic column would display picture/information of said events.

Would using:



toggling between states



With the link



in one column, directing to a div inside the second column (in this case, PHDAbstract) work?

It seems like it should, but I thought I'd see if anyone else had a better idea.

This would be a much cleaner way of displaying the data than any other I can think of off the top of my head, and the display:none characteristic keeps the content from taking any space on the page in the absence of a toggled command.

Also, would there be a way to get the toggling of one content div to also have the opposite effect on the others? So only one could be "open" at a time? Could, in other words, string them together like this:

_________________
Darksiege: You are not a god damned vulcan homie.

I would load jQuery and use the built-in toggle function:



http://www.w3schools.com/jquery/jquery_hide_show.asp

So, stupid question...

How exactly do I load JQuery?

_________________
Darksiege: You are not a god damned vulcan homie.

Put this in your document, either before </head> or </body>. Remove your old script so there's no conflicts.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Oh, ok. Thought this was something I'd have to load onto the server.

Thanks!

Just to ask about the script-

The first part goes in the header, right? But it defines a specific div(PHDAbstract). Would I need to duplicate that for each of the items on the page? The layout I'm envisioning will have a lot of items with individual div names (pet event).

The button is then a general toggle, which as I read it will swap all hidden to unhidden, and visa versa.

_________________
Darksiege: You are not a god damned vulcan homie.

The .toggle function can be tied to anything. The first part, $(".toggle") is the trigger and can be set to any tag, ID or class. In my example, it is targetting the button which has a class of .toggle.

The second part, $("#PHDAbstract") is the target, and can also be any tag, ID or class. In my example, it is targeting a div with an ID of #PHDAbstract.

You can have as many triggers and targets as you want, and yes, the script part goes in your header or footer, as long as you call it after you call the jQuery script itself.



and so on.

Each one of these commands is called an Event Handler. It watches the first element to be clicked, and then runs a function targeting a second element when that happens.

Ok, cool. That's the way I was reading it, but wanted to be sure.

Thanks!

_________________
Darksiege: You are not a god damned vulcan homie.

Ok, so I can't figure out why what I'm doing isn't working:



And then for the trigger:



And the target:



And nothing happens when I click.

_________________
Darksiege: You are not a god damned vulcan homie.

You're missing a > after </a

_________________
"If you haven't got anything nice to say about anybody, come sit next to me." - Alice R. Longworth

"Good? Bad? I'm the guy with the gun." - Ash Williams

Haha, of course.

_________________
Darksiege: You are not a god damned vulcan homie.

Ok, got it working. Had caught the </a after I posted, but had used class instead of id for one of the divs.

So next question: With this code, the text appears visible by default. Is there a way to make it appear hidden by default?

IE, how do I set the initial state of the toggle function?

Also, it seems that with this method, it only toggles the visibility of the indicated item. Clicking on the next toggle link does not hide the other previously toggled links, since each is referred to by id.

It seems like what I need is a "hide all" command that sets all visible divs to hidden, and then have a script that hides all, and then makes visible one new div.

_________________
Darksiege: You are not a god damned vulcan homie.

Well, you can set another class on all those elements for that purpose. Then just $('.nephs-class').hide() or show(); to get them to go away/show up.

_________________
The Dude abides.

When you click on something, you can add a class of "visible"



Then you can have a hide button that when clicked will search your entire document for all elements with that class, remove said class, and hide them.



Just an idea.

Wanting to have them all hidden on load isn't too hard but we're getting a little bit of scope creep now and it might be smarter to start over I'd need to see your HTML to give a more informed idea. Ideally you could just scan the document after it's loaded and hide elements based on a CSS selector:

Yeah, I'm using this as a chance to play around with things that I really haven't before, and some definitely over my head.

I'll PM you the link to my site.

_________________
Darksiege: You are not a god damned vulcan homie.