▼
Streaming live at 10am (PST)

Site navigator tracking pane - like photoshops - possible to embed?

#1

Hi All,

I've very quickly built this site to show a storyboard layout as a site (as doing it as all one image or a PDF resulted in low quality or forced downsized images)

http://concrete-ui.webflow.com/

Screen Shot 2015-04-09 at 17.15.08.png1581x1229 613 KB

So very simply the person looks at the page and they can scroll H and V to see the HD versions of the UI storyboard - in the top right is a basic overview of the storyboard layout (just a static image)

What i'm wondering is how easy is it to add a little square within that top right div that tracks the users location on the site.

Like Photoshops navigator window popup does:

I can't code at all. frowning and I'm showing this to the client tomorrow.

Thanks

Josh

#2

Oh that's describing me too (:

You know how, when you link to a section with a unique ID, the link gets a focus class when you're on said section? I don't know if it would work but if each of your mockup was a section, and if you navigator was a navbar with a grid of links mimicking the sections structure, would it highlight the section you're on? I really don't know if this can work but if someone can make it work without coding it's you smile

#3

That's a great idea! I'll give it a go smile

#4

Good idea, sadly didn't work

http://concrete-ui.webflow.com/

I tried it on the first one - it picks up vertical height exactly as we wanted it to smile but sadly not horizontal location so the 1st one stays active even if off screen to right as long as at that level frowning

Prob's not helped by the fact that Webflow wont let me see things horizontally except on the live version

https://preview.webflow.com/preview/concrete-ui?preview=199b3630dc0e61b0a5cc7da162c082ad

#5

I kinda knew this would be an issue... Tried to find another hack but not good idea so far.

#6

Yea i've tried a few things but I think we'd need external code to get a little tile to follow your location around frowning
Anyone got any ideas?

Thanks!

#7

Hi @vincent - for now i've got it like this - so it just highlights the whole row you are on smile seems a simple workaround for now - Client meeting got moved to Tuesday so got a bit more time to refine everything!

http://concrete-ui.webflow.com/

#8

Well good job anyway, it's kind of very cool smile

#9

Hey @OvertonGraphics, one solution would be to create "windows", each 100 width and 100 height and then to use interactions to fade in a segment over the top - see https://webflow.com/website/Focus-TEMPLATE for an example of windows.

Hope this helps!

Arthur

#10

Thanks @Arthur I got a good working solution with the ol' interactions instead of links solution.

Now whichever image you hover on is the one highlighted in the navigator at top smile

CC @vincent

http://concrete-ui.webflow.com/

#11

Aaah, with :hover... so simple, and it works great actually smile

#12

The best addition would be to add hover and onclick interaction for the tiles in the right upper corner.

For R2C2
Onhover: make div R2C2 a little darker (opacity 70%)
Onclick: navigate to ID 3 (which you have already made).

Then the navigator is a(lso a true) navigation.

#13

Thanks @Diu

How do I do navigation with OnClick in Interactions?

The reason I don't have page scrolling as mentioned earlier is that it only scrolls vertical height not horizontally. Would it be possible to scroll H with an Interaction?

I couldn't see how to navigate the page with an interaction OnClick though.

Cheers!

#14

I've been trying to find a way to do that ever since you've posted your last results... but I'm falling short of one.

#15

Here's one, it's not easy, but doable:

http://demos.flesler.com/jquery/scrollTo/

And maybe, this code could help as well.

closed #16