• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Adobe Muse - Dot scroll indicator.

Community Beginner ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Hi There,

I'm creating a 'news' section for my companies website. For this I have a series of images running down the page as our latest stories.

I have used a tool tip widget and anchors to give each image/new story a trigger point. However, I'm wondering If it is possible for the trigger points to

highlight (same as active state, but without moving the mouse over them or clicking) as I scroll through the page to show the viewers location on the whole page.

I would then like to include a 'back to top' button at the bottom of the page

This seems like a straight forward thing to me however I have been searching for hours trying to work it out with no avail.

Attached below is some screen shots of an example, however my sections will be smaller so you will be able to visibly see the dot shifting as you scroll.

02.jpg

Many thanks in advance

Views

929

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Apr 20, 2017 Apr 20, 2017

Yes, this is possible.

Back to top: place any button at the bottom and link it to your top anchor (easy, isn`t it)

Your tooltip widget will not do what you want as it doesn´t let you scroll to the anchor point.

It is already linked to its content, right?

What you want is better done with several state buttons. These can be linked to anchors and these can, even individually, highlight for the user to show: "where am I?"

If you like watch this realschule gaggenau ​.

Is it his what you want to achieve?

U

...

Votes

Translate

Translate
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Yes, this is possible.

Back to top: place any button at the bottom and link it to your top anchor (easy, isn`t it)

Your tooltip widget will not do what you want as it doesn´t let you scroll to the anchor point.

It is already linked to its content, right?

What you want is better done with several state buttons. These can be linked to anchors and these can, even individually, highlight for the user to show: "where am I?"

If you like watch this realschule gaggenau ​.

Is it his what you want to achieve?

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Is it his what you want to achieve? should be : Is it this ...

The best way: create the first state button with all states  for normal/rollover/click/active and copy the first one (ALT+click), then copy those two (now you have four), then copy those four and so on.

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Still alive?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Hi Uwe,

Yes that in a sense is what I would like to achieve. how do I get the state buttons to light up as I scroll down the page. the layout of the buttons will be the same as the example image that I posted in my original question.

I already have anchors set up for each news item so can I just link the new state button the same as with the tooltip?

Thanks so much for your help

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Hi Uwe,

I got it set up and it works great, thanks for your help.

One more quick question, now that I have a long string of dots I have pinned it to the top of the page but is there anyway to stop it scrolling over the footer section (created in a master page) once I get down to the bottom?

Hope this makes sense,

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

I am not sure what you mean scrolling over the footer section? If the content is long enough no footer will appear.

Not to forget, I put some scroll effects to the site, I showed to you and I need the footer for information.

So what do you want to hide? Unless there`s no anchor for the footer, it shouldn`t show up.

If I understood you wrong, could you provide a screenshot?

Long questions–quick questions–we don`t care

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Hi There,

Sorry for all the questions.

I now have all of my little state buttons set within an accordion widget so that I can sort them by year. Each section can be collapsed and opened when clicked, then as you scroll the dots get highlighted.

however, is there a way for me to make the next section of the accordion open up as a scroll through?

attached below is an image of my current set up:

example 01.png

So I would like the 2016 tab to open up (2017 to collapse) when I scroll past the 3rd dot of the 2017 section.

Many thanks in advance for all your help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

For the question with the accordion: we would need a .muse – only an empty page with the accordion.

If your "next" tab is long enough it will be a scroll though, right? You can place anchors also inside the accordion and link to them as well, you know that?

As above: give us a .muse (I´m interested anyway bout your accordion setup ), If I didn`t get  the question right.

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

Dropbox - ADOBE MUSE FILE

The link above should take you to a dropbox file containing the .muse file with the accordion test set up.

As you scroll through the page i would like the corresponding accordion tabs to open up as you scroll through. and then the dots to highlight (as they currently do) as you scroll through the section.

ie. 2017 has 3 dots, after you move past the last 2017 images and onto the 2016 images the 2016 accordion tab opens up, and the 2017 tab closes. ...  I hope this makes sense... basically i just want the headline tabs (2017, 2016 & 2015) to have the same scroll activation that the dots do, rather than a click/hover activation.

If i can get this to work then my previous question about scrolling over the footer will be fixed.

Thanks in advance

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

I will have a look. Download already happened, I check for understanding and be back soon.

Maybe with one or two questions.

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2017 Apr 20, 2017

Copy link to clipboard

Copied

To be honest, so far I do not have a clue what ...

If you want to scroll through the section, you may have anchors, right?

I keep on by changing the clouds for each section now, so I see the action (I cannot see a black owl in the darkness of black forest )

Keep your ear to the ground

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 21, 2017 Apr 21, 2017

Copy link to clipboard

Copied

Haha, ok sorry maybe I'm not explaining it properly.

I just want the sections of the accordion to open up as you scroll through the whole page. instead of having to click them to see the dots? does that make sense?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 21, 2017 Apr 21, 2017

Copy link to clipboard

Copied

Yep, now I got it. No the accordion will not open its tabs according to your scroll action. And it will not close if you move to the next year, unfortunately.

If you want to have this: As you have realized, the buttons/dots do react in fact to your scroll action, the tabs will not open accordingly.

My question/suggestion: why not use state buttons inside the accordion?

I allowed myself to try this approach:  Home ​, which you can download if you like.

It will be a little better to see at which place the user stays at the moment (of course you change colors).

If wanted, create one state button as desired and copy it as often as you need it. Then you only have to change typo.

You also can leave the typo away, make it smaller in width and only use colors, or use different geometrics?

One last suggestion: only use state buttons, you would need three different groups of state buttons (2015 | 2016 | 2017), place them where they will be used and use only three buttons on top for each year.

I made an idea at 2016, check. From there you could play with opacity, speed of scroll motion and so on.

Ah, yes I forget: try to stick with fixed with (necessary for scroll motion) until you reach 768 for mobiles.

Watch this thread also if you have time

Muse not redirecting to tablet version​

Best Regards

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 23, 2017 Apr 23, 2017

Copy link to clipboard

Copied

Hi Uwe,

Thanks so much for your help, however that's not really what i want to achieve so I'm going to have to look into another method.

What do you mean by:

"Ah, yes I forget: try to stick with fixed with (necessary for scroll motion) until you reach 768 for mobiles"

Thanks again for your help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 23, 2017 Apr 23, 2017

Copy link to clipboard

Copied

LATEST

This was and still is related to this thread:  Muse not redirecting to tablet version​.

This was/is just a general suggestion. From this thread you could pull out the information that it is best practice to stay with fixed width breakpoints. It generates less hazzle, if you keep, even from large screens towards 768 to fixed width (you can pin your accordion in fixed width layout, too) and only start at 768 with fluid width for all those mobiles out there.

I realized, you chose a fluid width in your example, if this just happened by accident, don`t worry.

Cheerio

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines