Jump to the bottom of the page

Tips & Tricks
#14

Sorry. Beyond frustration here. I added the SmoothScroller script, changed the function name from untitled to smoothScroller, gave the banner the ID of top, selected the up button, set the script to run on mouse up, saved and tested but nothing happened.

As I am using relative layouts, I had to vary the ID for the target for each layout to top1, top2, etc. I duplicated the script for each layout, giving it the function name of smoothScroller1, smoothScroller2, etc. Within each copy I changed the following line to correspond to the ID of the target, e.g.:.

scrollTop: target.offset().top1

In the head HTML i pasted:

(0pen <) script type=“text/javascript” src=“http://code.jquery.com/jquery-2.0.3.min.js”></script (Close>)

It doesn’t work. What am I missing?

#15

I really need to see the project to check whats happening. But also you only need to use the script once, and have a dynamic function that handles it for you.

1 Like
#16

Did you add the jQuery Libraries?

Smoothscroller in relative layouts
#17

–Did you add the jQuery Libraries?

Yes. In the comment it pasted as HTML. I’ve changed that for visibility.

#18

Banner group is target. Script attached to arrow group at bottom.

TestVerticalScrollRelativeV2A.hype.zip (1.5 MB)

#19

You have a number of issues, one being you have just copied and pasted the code, rather than alter the trigger. The code you are using is looking for a hyperlink, or <a>'tag. But you are using a button, so its not triggering. Also, you have no call on the group you want to scroll too, which if you are using a button, I would suggest either an ID, or class, so it knows where too scroll to.

#20

This is the code you should be using on Button 1, of the iPhone layout:

 var target = $('#scroll_'+element.id);
 if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top,        
      
    // this value sets the speed (1000 is 1 second)  
    }, 1000);
 }

The element I am targeting is an image, which I called scroll_pattsHozs.

I put an id on the button called pattsHozs

So the above code is telling the window what to scroll down too. I have no idea what the timelines are for, or the pauses, perhaps nothing to do with the scrolling part. But here is the project. I will be honest and say i found it a little odd in how it was structured, hence the delay, but the iPhone layout is what is used. Hope it helps:

scrollBlinds.hype.zip (1.5 MB)

1 Like
#21

Andrew - I’ve been getting advice from multiple directions. I recognized that the code was for text and not an object and have been trying to get a script to work via a mouse up action, but I was missing some pieces. One person said that I should be able to achieve the scrolling with a single script that would work for all layouts but didn’t say how. Another was talking about a custom function. It is like a pile of puzzle pieces from three different puzzles and trying to figure out is real and what is a red herring and what the picture is supposed to look like.

I’ve done a ton of high-end scripting in the past on a professional basis but not with JS and not with Hype. There are some fundamentals I’m missing. I started out with the premise of creating a script that I would attach to an object that would move to 0,0 at a specific speed, triggered by a mouseUp. That’s pretty much what I’m getting, but the posts on the forum from various friendly and helpful folk have been disconnected. I’ve spent quite a few hours playing detective trying to piece everything together.

Unfortunately, the file you attached may be different than the final version you edited. It has the scripts but I’m not finding the objects that have these IDs and the buttons do not work.

I sincerely appreciate the amount of effort you have put into this. You have been extremely generous.

#22

The file does not really matter, what you are looking for is a target, and gun. The target has to be something with an ID, as in an element ID, whether its text, object, picture. For example:

<img id="ScrollTop" src="" />
<a  id="ScrollTop" href=""></a>
<div id="ScrollTop"></div>

So no matter what the target is, so long as its a ID.

The next is the gun, or trigger. You can use the same as above to fire the code. But in Hype, you don’t need too if you are going to trigger it from an element in Hype, and use JS. The code above is for triggering.

Is does not matter what code you use, but you would have too have an ID for each layout as a target, for example:

<img id="iPad_ScrollTop" src="" />
<a  id="Desk_ScrollTop" href=""></a>
<div id="phone_ScrollTop"></div>

And the trigger for each layout would need to find the corresponding target. Hype loads all layouts out once, which is a shame, I would rather is looked at the screen size, and then loaded the layout required only. But due to this, you have to have ID’s that are unique.

Both cases, you have only copy and pasted the full code Daniel sent, which relies on the <a> tag to fire. But again, you do not need that in Hype, because the onClick, onMouseUp, etc is done for you on all elements / objects.

Place this code, as it is in a function from a click event, in your apps case is would be the arrow image.

 var target = $('#iPad_ScrollTop'); // ** Target Element
 if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top,
    }, 1000);
 }

** The element you want to show, give an ID and enter it as the target.

Then you can add easing to make it scroll with different effects. Hope that helps :slight_smile:

#23

Thanks again for all your help. I am missing a lot of the shorthand here, which makes it tough to figure out what goes where. How do I associate the code with the arrow element? Place it where?

Unfortunately, the tweaked document that you provided does not work.

Based on my experience with other languages, you drop in some code that loads with the document, you apply a tag a specific target, then you attach a script to the trigger object that points at that tagged object. Clicking on a button to insert HTML is straightforward, as is assigning an ID to the target. Attaching the trigger script is confusing me. This gets more complex with relative layouts.

#24

It works fine here. I have just retested it and no problem at all. No errors in console and scrolls when i click the top button.

Not sure what you are doing different, how are you testing it ?

#25

I opened it in Hype and did a preview in Safari. I would click on the up arrow and nothing would happen. Perhaps you could resend it.

Beyond having a solution to this specific problem, I need to figure out the integration of Hype and JS. I know it is not all that difficult.

Thanks

#26

It was not the arrow, but the button. The top button, in the drop down, on the 480 layout scrolls down to the PattsHorz section

scrollBlinds.hype.zip (1.4 MB)

#27

So the script looks at the ID of the button and inserts "scroll_"before that ID name and looks for an object with the ID of “scroll_(whatever)”.

That is one of the missing pieces that makes sense of the whole thing. It took a bit of figuring to work this out.

Thanks again.

#28

For my future reference, I have created a diagram. Is this correct as shown?

PDF diagram

#29

thank you ~~~~~~~~~~~~~~~~~~~

#30

does anyone know a page of doing this but on page load? so the page loads at the bottom. you then scroll up.

#31

@kennedymatt

I answered - what I believe is the same question You are asking here - in your original post:

#32

what does unique ID means? how to do that?

Also, I found that you did that in your official online document:

for example: http://tumult.com/hype/documentation/3.0/#responsive-layouts

and you used :#responsive-layouts

is that same way with what you mean? how did you make the left navigation menu please.

Thanks.

Alex

#33

By ‘Unique Element ID’ I mean this field in the Identity Inspector:

41 PM

That was built by taking advantage of a JavaScript tool called ‘Tocify’ which takes headers in regular HTML and generates a table of contents for you and creates links. Some more info on that in this post.