iScroll in Hype3 Pro

Hey Guys,

hope that someone can help. I am trying to use iScroll5 in Hype. With a simple text block everything is working like a charm. But i would like to use iScroll on more complex structures. Basically i am building a large object and i am grouping this object. This should give a a regular DIV that i can use as a wrapper (just like a simple text block object). I have somehow the feeling that this worked in previous versions of Hype.

Here is my simple testfile:

https://dl.dropboxusercontent.com/u/75478515/TestScroll.zip

Code side i was trying all methods for onLoad:

var wrapper = document.getElementById(‘wrapper’);
var myScroll = new IScroll(wrapper);

var myScroll = new IScroll(’.wrapper’);

Any help is highly appreciated. I need this really badly for a project…

Cheers!

Hi @sandor

Firstly, iScroll only scrolls the first child of your wrapper element. Unfortunately for each element you create in Hype, Hype wraps this in it’s own container so effectively there is nothing that gets scrolled. IF for example you create a rectangle element and then create something inside the innerHTML ( a <ul> list for example) then use the id of that rectangle element as your wrapper then you will see iScroll working.

Secondly, Why don’t you just change the content-overflow to ‘scrollbars’ in the Metrics inspector if you need that ‘wrapper’ group to scroll?

D

This is 3rd time today, when i send this example file :grinning:
scrollTest.hype.zip (123,2 Kt)

1 Like

@sandor

Does any of this help?

D

Hi ilkka,

thanks for posting the example – i am just unable to open it. Hype is saying that it is made with a newer version of Hype. I am using 3.0.3 Pro and there are no newer updates. Would love to see your working example. But the fact you are sending this the 3rd time shows the interest in iScroll :smile:

Hey DBear,

thanks for writing! So if i create 3 simple rectangles and wrap them together – how would my code be looking (in terms of

? To your second question - i would like to use iScrolls more advanced features like paging etc…

Thanks,

Sandor

Hi Sandor

I try to figure out how to convert this beta-test file to 3.0.3 format.

Ilkka

I really appreciate this ilkka!!

Hi @sandor

FYI the example that @ilkka_kumpunen is offering is not using iScroll

For you to be able to use iScroll you must include (wrap) all your elements in a rectangle element with ID of whatever you want (e.g wrapper) and then you must put all of your scrolling content inside the rectangle using HTML (see attached file) this must also be in it’s own div so it can all scroll together.

D

iScroll.zip (1.2 MB)

Hey D,

thanks for you time! I am just a bit confused – the example you provided here is working for you? I can’t get it to work on my side…

Cheers!

This works for me – I converted it to a regular Hype document:

iscroll.zip (1.2 MB)

More info on iScroll: http://cubiq.org/iscroll-5

@Daniel

I thought it was a hype document?

OP already has the info on iScroll :slight_smile:

D

Yeah it was, just double checked it and saved it as a .hype file instead of a template in case Sandor was having issues opening.

Can you not open it, or do you not see the iScroll features in place?

True. I use that script because it controls timeline and I’m able to adjust the speed and direction of the scroll.

In my example there is 2 scripts:

  function controlTimeline(hypeDocument, element, event) {
    if (window.addEventListener) {
    window.addEventListener("mousewheel", getScrollDir, false);
    //FF
    window.addEventListener("DOMMouseScroll", getScrollDir, false);
    }
    
    
function getScrollDir(e){

	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
	
	if(delta === -1){
	newTime = hypeDocument.currentTimeInTimelineNamed(timelineNameToControl) + step;
	hypeDocument.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	
	}else{
	newTime = hypeDocument.currentTimeInTimelineNamed(timelineNameToControl) - step;
	hypeDocument.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	}
	

}

And this:

  function controlTimeline(hypeDocument, element, event) {
    
    	window.timelineNameToControl = ’content’;
    	duration = hypeDocument.durationForTimelineNamed(timelineNameToControl);
    	//step for each fired event 
    	window.step = duration/100;

First You need to design your scroll direction and speed with timeline. In this example content means the moving objects timeline.

Java script controls the timeline which can move in any direction you want to.

ok. Would there be an issue between .hypetemplate and .hype files. I always use templates because when opening the .hype file and making changes it saves them automatically and loses the original info.

D

Hey Guys,

first of: thanks for the awesome support! @DBear & @Daniel – got the example working now. Just for clarification for me. In order to get iScroll working, we need following DIV structure:

<div id="iscroll_wrapper">
    <div id="hype_wrapper">
        <div>...</div>
        <div>...</div>
        ...
    </div>
</div>

But if i construct my contents in Hype, i can not achieve this structure no matter how i build and group my objects… Right?

Well, it would be really nice to be able to use iScroll. The possibilities for creating scrolling stuff (like sliders of any type) or parallax effects (even for mobile) would be exciting. Basically we could build some pretty complex stuff without having to manually create timelines etc…

Tanks again!

@ilkka_kumpunen … if you have the chance to convert it, i would LOVE to se your approach

I asked help. Can’t convert it with my tools :confused:

@sandor

As I said in a previous post I think, iScroll uses the first child of whatever element (ID) you choose to be the wrapper. Unfortunately, because of the way Hype is programmed, each element you create in Hype comes in it’s own wrapper div (Hype_container) so unfortunately iScroll will not work as is with Hype (unless you create your elements like above, in the innerHTML)

Just to clarify the structure

The “wrapper” div is a rectangle created in Hype. Inside this rectangle (Edit->Edit Element’s inner HTML) you create a div and then your content. The div you create here is the one that is scrolling (It is the first child of the rectangle (wrapper) element.

Hope this clarifies things for you.

I’ll upload a copy of @ilkka_kumpunen’s approach for you to be able to open and look at, here…

scrollTestv2.hype.zip (49.5 KB)

D

1 Like

Hey Guys,

many thanks to all of you for all the time you spent here – even if there is no solution for my specific need!!!

AWESOME COMMUNITY!

2 Likes

Hello All,

Totally agree on the community Sandor!

I am trying to create a menu scroll animation that works in every Scene. I prefer not to have to create a timeline within every Scene etc.

So, would it be possible to achieve the same scroll effect if the "aineisto" animation was within a Persistent Symbol e.g. named Symbol?

Here is the file in case helpful.

scrollTestv2 - animation within symbol.hype.zip (105.1 KB)

If not the approach above, can one achieve this through this approach by DBear?