Ok in the attached is a test Hype file it has a working scroll feature so when the top text on the RIGHTHAND side is clicked it scrolls the stage down to the bottom.
What I need to do here is :
Make each of the 5 grey circles ( images)
when clicked scroll to the sections in text
circle 1 scroll to section 1
circle 2 scroll to section 2
I’m a bit confused on how to do this any help?
smoothscrollingEdge2Hype.hype.zip (33.4 KB)
I was able to code, see the NEW attached file. All anchor points work except for the last 2
elements bottom4 and bottom5
I cannot get the links to line up like the first 3.
Also can I use this with scaling?
any help thxsmoothscrollingEdge2HypeDRAFT2.hype.zip (45.7 KB)
Ok figured out why as the stage had to be larger ( height wise ) now that I got that sorted I need to do this where the stage scales to fit different views
lol, I was just going to tell you that was the problem.
But took my time as I was setting up an example where you use the Hype on click to call the Javascript.
The main adjustments I made were to give the grey buttons a class name each that reflects the id of the scroll to >element.
The jump to top elements also then use the single class name ‘top’ that reflects the top section element to scroll back to.
The javascript just gets the class name and uses that in the jQuery’s target id.
var target = element.classList[1];//--- assumes class name 0 will be HYPE_element
if (target.length) {
$('html,body').animate({
scrollTop: $("#"+target).offset().top
// this value sets the speed (1000 is 1 second)
}, 1000);
return false;
}
@MarkHunte - Nice!
Thanks so much, yes figured out as you mentioned but the last thing is I need this to work in different views like smartphones iPhone iPad and browser I cant get the scale to work correctly.
??
R
If you show what you are doing to scale and explain the element positions you want while scaling, I am sure someone will chip in…
Will revisit
Hi @MarkHunte! I just adopted this code for my site and it works great (thanks!).
However my site has multiple layouts for different screen sizes and this method will only work on one layout due to it’s use of the uniqueElementID. Is there any way to adapt this code so it matches only classes, rather than IDs? This way I can use my menu, which is a symbol used across all of my layouts, and apply the class to the targets on each layout.
Hope this makes sense! Thanks for your help!
It should just be a matter of playing with the Classnames.
I could put something together but it would be a guess to what your layouts and symbol are like, Which could be anything.
So an example would help of your setup. If it’s not something you want to post up for everyone to see the PM me with it and I will see if I can help. (no promises)
Convert all elements in Persystent Symbols, and add a fluid layout for iPhone (Portrait).
…I had no clue persistent symbols maintained their Element ID on multiple scenes! This solved everything! Thanks for your help!!! Thank for your reply as well @MarkHunte!
the persistent symbol is a great tool, this is the power of HypePro, the project is quite simple ( thanks to the code by @MarkHunte ) and works fine!
@MarkHunte could we make a new addons for Hypedocks with a similar project? I can make a new layout with your code.
Sure, Your Persystent Symbols example with the code works great…