[Pro] Can a browser back return to a specific carousel pane?

I suspect the answer to this is no, but I’ll ask anyway!

Is it possible to ‘back button’ back to a page containing a carousel and end up on a particular pane? I know it’s possible to do it with a text link, but I would have thought that most people would use the back button (or keyboard/mouse shortcut) to navigate backwards.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not at present. The browser history would have to be manipulated in order to do this, and while you can construct a link to a particular pane, the action of navigating from one pane to another does not update the browser history.

Walter

On Jan 11, 2012, at 11:00 AM, neil.west1 wrote:

I suspect the answer to this is no, but I’ll ask anyway!

Is it possible to ‘back button’ back to a page containing a carousel and end up on a particular pane? I know it’s possible to do it with a text link, but I would have thought that most people would use the back button (or keyboard/mouse shortcut) to navigate backwards.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thought as much, thanks Walter.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt, I’ve just come back to this site to add my additional pages by linking back to specific carousel panes, but I’ve just noticed that linking back does indeed scroll through to the correct pane but it doesn’t trigger the hide/show layer items that appear on the pane. Is there a way to trigger these from a different page at the same time as the carousel?

The current ‘home’ page is here: http://www.thinktankcd.com/

It’s my intention to add a new page to each category for additional info, but they really need to be able to link back to the correct pane (and hide/show) on this page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jan 24, 2012, at 10:36 AM, neil.west1 wrote:

Hi Walt, I’ve just come back to this site to add my additional pages by linking back to specific carousel panes, but I’ve just noticed that linking back does indeed scroll through to the correct pane but it doesn’t trigger the hide/show layer items that appear on the pane. Is there a way to trigger these from a different page at the same time as the carousel?

The current ‘home’ page is here: http://www.thinktankcd.com/

It’s my intention to add a new page to each category for additional info, but they really need to be able to link back to the correct pane (and hide/show) on this page.

Target Show/Hide elements can only be triggered by a physical click on the trigger element. There’s no way to fake a click in the browser (for obvious security reasons).

Now in a more abstracted show/hide setup, you could do this by listening for a custom event (synthetic, not a real click event). Here’s an example:

$$('.target').invoke('hide');

document.observe('target:click', function(evt){
	$$('.target').invoke('hide');
	$(evt.element().readAttribute('data-target')).show();
	evt.stop();
});

<a href="#foo" id="foo_trigger" data-target="foo" 
	onclick="this.fire('target:click')">Click</a>

<div id="foo" class="target">
	This is initially hidden
</div>

What’s happening here is that targets are marked with the classname ‘target’. The first line hides all of them when the page loads. Then there’s a general handler that listens for the “target:click” event, works out where it was intended to go, and hides any currently showing targets, then shows the desired target. Finally, it stops the default behavior of that link, which is to anchor down to the div you’re showing.

All right, so far this is just a drop-in replacement for the target show/hide behavior. Where it differs is that because we’re using a fake event, we can call it out programmatically, and it will work exactly as if the link was clicked.

$('foo_trigger').fire(target:click');

There’s no need to do anything else, it will just work as if the link was physically clicked. This could be inserted into the existing function in Carousel that loads a particular pane. But because this is an entirely different method than the one used in Freeway’s built-in Target Show/Hide Actions, you can’t take advantage of this.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter

As always, what you’ve written above is well beyond my knowledge, so a couple of questions:

Assuming I copy the above, where do I paste it?

You say this is a replacement for target show/hide - how do I specify the other parameters I’ve used i.e. restore, effect, duration and target group?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jan 30, 2012, at 12:05 PM, neil.west1 wrote:

Thanks Walter

As always, what you’ve written above is well beyond my knowledge, so a couple of questions:

Assuming I copy the above, where do I paste it?

This is just a sketch of how you could do it, it doesn’t get pasted anywhere or replace anything extant, because it needs to be modified to work within your page. It’s just a proof of concept, and I copied Softpress on it to give them some brain-food for future versions of the Target Actions.

You say this is a replacement for target show/hide - how do I specify the other parameters I’ve used i.e. restore, effect, duration and target group?

As written, the listener function will always hide all other members of the target group, if we were to extend it a little bit more, there is really no end to the customization you could have:

document.observe('target:click', function(evt){
	var elm = evt.element();
	if(!!elm.readAttribute('data-hide'))
		$$('.' + elm.readAttribute('data-group')).
		invoke(elm.readAttribute('data-hide'));
	Effect[elm.readAttribute('data-show')](
		elm.readAttribute('data-target'),
		{duration: elm.readAttribute('data-duration')}
	);
	evt.stop();
});

There, every part of the function is read from a parameter applied to the elements in the page. That’s a lot of duplication, so it could be rewritten to read a set of variables that apply to the entire group, rather than each element carrying the same information around.

So long story short, it’s not possible with the current Target Show/Hide setup, but in future, I hope for it to be.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter

I think that’s almost a relief that you said that, I didn’t really fancy trying to get my head around it! :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options