You're going to have to read up more on javascript. Mozilla has great
online documentation at http://developer.mozilla.org/en/docs/JavaScript
, particularly the core guide for you. Also there are some great
books out there, O'Reilly's definitive guide can be a little dry at
times but does more than explain things.
As another hint, I wouldn't recommend reloading the page so that your
if or switch statements pick up the hash. I would use a class
selector since every link/thumbnail on the left is of class .cross-
link. But since class selectors are inefficient I would contain the
class selector to the containing ul, #portfolioThumbs. From there I
assume you want the image box on the right to slide to the correct
photo. You have packed so i couldn't guess the method or function to
make it slide, but i'm sure they have it documented. Regardless,
you'll need another type of hook to figure out which thumbnail was
clicked. Whether it be easily identifiable thumbnail image names (eg,
thumb-mayTheCats.gif), the href, another class name, an id, a rel
attribute, etc.
This example is much more sensible for your current situation
Example: (not tested, but should work or close to working)
// jQuery's document on ready
$(function() {
// handle a hash on load
var hash_id = document.location.toString().split('#')[1];
// if there wasn't a hash in the url i think hash_id will be null
// or false
if (hash_id) {
// call our custom function with hash_id as first parameter
handlePanelSlide(hash_id);
}
// handle a click event
$('#portfolioThumbs .cross-link').click(function() {
// call our custom function with the $(this) jQuery object
// as a parameter which is the item that was clicked
// leave first parameter false as its for hash_id
handlePanelSlide(false, $(this));
}
}); // end jQuery's document on ready
// custom sliding function
function handlePanelSlide(id, elem) {
// id is false if its a click event
//
// if click event:
// assume these links' ID's were numbered 0 through n
// this could also be the href, would have to use
// the substring function to remove the hash
id = id || $(elem).attr('id');
// this is how many pixels the slider will move
var offset = (Number(id) * -600).toString() + 'px';
// move the slider
// of course you would want to use the easing or
// coda method for a smooth transition, but this
// is ultimately what it does
$('#slider1 .panelContainer').css('left', offset);
}
On Jul 8, 7:30 pm, mitchel <[EMAIL PROTECTED]> wrote:
> Thank you again. That certainly helped. But I still don't quite
> understand what to do with the event handler. I gave the links ids of
> "cross-link1", "cross-link2", etc. and tried this:
>
> $('#cross-link1').click(function() {
> location.reload(true)
>
> });
>
> but it doesn't really do anything.
>
> Thanks again, you've been a giant help thus far.
>
> On Jul 8, 12:23 pm, noon <[EMAIL PROTECTED]> wrote:
>
> > > I the if/else statement doesn't seem to be working.
>
> > You're if statement is using the equals sign as an assignment operator
> > (=) instead of comparison which is double equals (==).
>
> > > Also, it only
> > > reads the current hash on a manual refresh of the page. Here is the
> > > link if helps any:http://www.mitchmckenzie.com/index.php
>
> > That piece of javascript is only evaluated when the page loads. If
> > you want you're changes to occur "onclick" you'll have to assign event
> > handlers to each clickable item -OR- an event handler generically to
> > every click and check its target.
>
> > Event handler (assuming you've added ID's to each link with the class
> > cross-link):
> > $('#cross-link1').click(function() {
> > // do some javascript
>
> > });
>
> > Generic handler:
> > $('a').click(function() {
> > // you arent sure what was clicked, so lets determine before doing
> > something
> > var the_links_rel_property = $(this).attr('rel'); // $(this) refers
> > to what was clicked
> > switch (the_links_rel_property) {
> > case 'img1':
> > // do something
> > break;
> > case 'img4':
> > // do something
> > break;
> > }
>
> > });
>
> > Hope that helps
>
> > On Jul 8, 2:51 pm, mitchel <[EMAIL PROTECTED]> wrote:
>
> > > Thanks! I think that gets me started in the right direction. However,
> > > I am still having some issues. Here is what I have so far:
>
> > > var current =
> > > (document.location.toString().split('#')[1])
>
> > > if (current = "1") {document.write( "<h2>Title
> > > 1</h2><br /><p>Body text.</p>" ); }
> > > else if (current = "2")
> > > {document.write( "<h2>Title 2</h2><p>Body text.</p>" ); }
> > > else if (current = "3")
> > > {document.write( "<h2>Title 3</h2><p>Body text.</p>" ); }
> > > else if (current = "4")
> > > {document.write( "<h2>Title 4</h2><p>Body text.</p>" ); }
> > > else if (current = "5")
> > > {document.write( "<h2>Title 5</h2><p>Body text.</p>" ); }
> > > else {document.write( "<h2>Title 1</h2><br /
>
> > > ><p>Body text.</p>" ); }
>
> > > I the if/else statement doesn't seem to be working. Also, it only
> > > reads the current hash on a manual refresh of the page. Here is the
> > > link if helps any:http://www.mitchmckenzie.com/index.php
>
> > > Any further help would be greatly appreciated.
>
> > > On Jul 8, 8:00 am, noon <[EMAIL PROTECTED]> wrote:
>
> > > > alert(document.location.toString().split('#')[1]) will get you the
> > > > hash. From there an if statement or a switch/case would serve you.
>
> > > > On Jul 8, 8:54 am, mitchel <[EMAIL PROTECTED]> wrote:
>
> > > > > Hello.
>
> > > > > Admittedly, I know very little about jQuery or javascript in general
> > > > > but it seems like it should be able to do what I need it to do fairly
> > > > > easily.
>
> > > > > I am trying to create a div on a page which would display different
> > > > > content based on the hash in the url. Is there a way to create several
> > > > > hidden divs on a page with the content I want and have a class that
> > > > > makes one visible based on the current hash in the URL? Any ideas on
> > > > > how would I do this?
>
> > > > > Thanks.
