Anyone fancy a jQuery puzzle?

[onjegolders]

Anyone out there with 5 minutes spare to help me with a jQuery puzzle?

Probably quite simple for anyone with half a brain and a bit more skill than me

I can give you a link to the site. It basically involves a hidden area to the side which slides in when clicked upon. (So far so good).

The thing is when you hover over the bit of the hidden area that's displayed, it pops out a bit further to tease you with the content. When you click on the link the whole area slides into view. The issue is that when it pops out on hover, I'd like the whole area to become a clickable link so that the user doesn't have to go back to the original link to get the slide to take place.

(Confused yet?)

All this is still fine. Where I'm stuck is that once the (whole page) link has been clicked upon, that link needs to disappear otherwise all the content on that page becomes one big link.

I've tried using wrap and unwrap and I'm now wondering whether it's even possible!

[diogo]

You don't need it to be a real link. just give the whole area a class and bind the click event to that class. then, remove the class when the area is clicked. To style that class to look like a link you only need cursor:pointer.

$('.linkClass').click(function(){
    $(this).
        animate({'margin-left':0}).
        removeClass('linkClass');
});

[onjegolders]

Thanks Diogo! (as usual )

It sort of works but it has to tie in with the permanent link on the side (see live site http://web1.milkhost.co.uk/~est/)

So whenever the container is not active then the extra link is there but when clicked, the link gets removed

[diogo]

what??

[kongondo]

[onjegolders]

what??

What what?!

[kongondo]

What what?!

I'm guessing maybe the subtle silhouetted figure in the background.. She was there a minute ago...now she's gone...

[diogo]

The explanation was a bit confusing... What is the container? What is the link? What does it mean when the container is not active?

edit:

I'm guessing maybe the subtle silhouetted figure in the background.. She was there a minute ago...now she's gone...

Not that, I guess this must be because the page is being worked on

[onjegolders]

Ah no, sorry those images are being auto-generated from hhhhold.com! (Not my fault) this is purely for dev purposes!

Sorry about the confusing explanation, it's kind of hard to explain in words.

If you hover over "Gallery", it shifts left so you need to be able to click on the whole thing (otherwise it's annoying for the user). Your (Diogo) code worked great but when you click Gallery again to close it, you have to click twice for some reason.

I'm just looking for a simple way of having the hover and two click methods working smoothly.

I do appreciate you taking a look, thanks again!

[kongondo]

Aah

[diogo]

Maybe you could simply deactivate the gallery link and use all the h5 to close the panel.

$('h5.side-title a').click(function(){
    return false;
});

then you could:

$('side_container.slide.active h5.side-title').click(){
    //code for closing
});

[onjegolders]

Maybe you could simply deactivate the gallery link and use all the h5 to close the panel.

$('h5.side-title a').click(function(){
    return false;
});

then you could:

$('side_container.slide.active h5.side-title').click(){
    //code for closing
});

Thanks Diogo at what point would you deactivate?

[onjegolders]

Am aware that this is quite a lot to ask Diogo, so if you'd be interested in an hour or two's outsourcing work and can come up with a nice solution that I can learn from that would be great (if you have time of course).

If not, I can revert to how it was and it was working not too badly, I'm just trying to nail it

[diogo]

Thanks Diogo at what point would you deactivate?

Globaly, it's allways deactivated since you won't use it anymore. It would only work without JS.

Sure, I would be interested. Just tell me when it has to be done

[onjegolders]

Cheers Diogo, have sent you a message