Upvote 3

Possible to scroll i-Phone screens?

Answered Victor Conesa 13 years ago

Hello - This is the best tool I've found in years! I am trying get my company to buy copies for our use. Outstanding work!


Is there any way to simulate a scrolling iPhone panel, where the content area can be scrolled up or down past the window frame?

Best Answer
photo

Check out this tutorial to learn how to scroll in iPhone prototypes in Justinmind.

Replies (18)
photo
1

Thanks for the compliment :). To define a scrolling area just take a look at this video tutorial http://www.justinmind.com/tutorials/a.... The scroll will also work if you load the html or publish it inside a real iphone and the bar won't appear (you will have to use two fingers to do the scroll). To simulate an iphone prototype inside a real iphone we recommend to either publish is for test in Usernote or go to File -> Preferences.. in Prototyper and uncheck the option 'Include comments in HTML'. Then export the HTML and load it in a real iphone. Try it, it's real cool when you see a prototype in a real iphone!

photo
1

Hi Victor,


thanks for the tip with the two fingers, it's really impressive to see my lists scrolling on my iphone!


Greets, Niels

photo
1

You are welcome! But a user told me a better way to do it. He just draw all the contents in their screens trespassing the 480px height. Then you just need one finger to scroll. The problem is you can't have the title bar fixed at the top but it's cool anyway.

photo
1

Hi Victor,


I'm having 2 problems.


1. It seems that the scroll function is NOT working when setting the scroll bar to NEVER VISIBLE - I ran the simulation on my laptop but the content doesn't scroll unless I show the scroll bars


2. When I export the app to UserNotes and run the simulation, all the "hidden" content inside the panel is visible (i.e.: extending beyond/outside the Dynamic Panel)


Best,


Diego

photo
1

Hello Diego,


1. In Prototyper, if you want to scroll a container's content up/down you need to set its scroll bar visibility to 'automatic' or 'always visible' since 'never' is the option for no-scroll. However if you generate the HTML and view the prototype from an iphone these scrollbars will not be shown and will work as a real iphone app.


2. It could be a bug related to the HTML generated by Usernote. We have not been able to reproduce this case so it would be very helpful if you could send us a example to find the source of the problem. Thank you!


Regards

photo
1

Hi,


the scroll is working for my iPad app. But it is possible to simulate a smooth scrolling like on a real iPhone/iPad?


Thanks


Maxime

photo
1

Sure, just define scroll bars in your dynamic panels.

photo
1

I think he means; How can you adjust the scrolling so that it feels more like its not a demo. Currently the scroll doesn't cover much distance when using it on a phone

photo
1

Hey there,


I got a problem with scrolling and dynamic panels.


It's not possible to scroll when I use a dynamic panel for the content ("always visible" or "automatically"), but when I don't use a dynamic panel or one with "never visible"-settings I can't have a sticky header.


Any solutions?


Thanks and merry Christmas!


Tina

photo
1

Hi Tina,


would you mind to share some screenshots of your project? Another option is to send us your project.


Best regards.


Albert

photo
1

I sent you my project.


Thanks!

photo
1

i'm trying to do the same exact thing as Tina. Scrolling with an iPhone app without the header (and footer - subnav) flying off the screen. Basically is there a way to scroll while keeping the topnav and subnav frozen?


Also is there an ios version of the scroll? The current PC scroll bar is not going to work for my mobile prototype.

photo
1

Here you have a tutorial of how to do it: http://justinmind.com/prototyper/lear...

photo
1

The instructions provided in this tutorial did not work for what I want to do. Do you have a more current list of instructions? I noticed that tutorial is not linked from your current website as well.


I have a background image that is 320 x 1136. As you probably know 320 is the exact length of the iphone5 horizontal and 1136 is exactly the length of the iphone5 vertical multiplied by 2. I have to images with accompanied image maps on the header and footer that are 320 x 100 each. I want these two images to remain in the header and footer and I want to be able to scroll the 320x1136 image all the way down to the bottom which would of course be located sandwiched between the header and footer. Is this possible?


.

photo
1

The problem could be that you have set your image as a background image instead of an object or, if you reproduce the tutorial, in our example the image is outside the dynamic panel.


If you want to do something like next example, you need to drag into the dynamic panel the image that you want as background.


https://www.justinmind.com/usernote/t...


I hope it helps

photo
1

yes this is exacty what I want. And yes all of my screens have my own image I produced in illustrator in the background.


So what you're saying is I have to drag the dynamic panel over the entire prototype?

photo
1

What you can do is the following. If the header and the footer are the same in all the screens with the same events in the template. Once you have done it, go to the first screen, drag a dynamic panel(DP) and resize it as height and width as you want, in your case 320 x 1136. Then, double click on the DP and include the image widget. After you have done it, click right on the DP, select "exit edit content" and resize the DP between the header and the footer.


If all the images have the size, what you can do is create a widget from this DP (right button and "add to my widgets") and for every new screen that you add in your project, you will only need to drag into the canvas this widget, leave it between the header and the footer and change the image with a double click on the image.


I share with you the example if you want to see how I did it.


https://www.dropbox.com/s/r2dtv19w91b...


I hope it make sense.

photo
1

Check out this tutorial to learn how to scroll in iPhone prototypes in Justinmind.

Leave a Comment
 
Attach a file