AI2. JavaScript. ListView with images and font. Panels with Horizontal Scroll.

1007 views
Skip to first unread message

Juan Antonio

unread,
Mar 3, 2017, 12:05:56 PM3/3/17
to MIT App Inventor Forum
Nice ListView with images and new font.

Hi friends,
 
- These are two examples of ListView build with JavaScript (jquery-3.1.1.min.js) and CSS.

- Visor2 has 2 fonts size.

- In my simple example Clock is always ON, you can modify this feature.

- You can read visor1.htm and visor2.htm in this Spanish web page:


Regards.









p169Ii_javascript_visordelista_font.aia

Juan Antonio

unread,
Mar 3, 2017, 12:09:01 PM3/3/17
to MIT App Inventor Forum
Panels with Horizontal_Scroll.

This is not exactly App Inventor, this is JavaScript + CSS, but I think it can be interesting.

In this web: Horizontal_Scroll with JavaScript:

In this web: buttons with CSS

I join those two codes and build an app with sliding panels.

In panel.htm and style.css files, you can modity features.

Look code in:

Regards


p169Ji_javascript_panels.aia

Tim Carter

unread,
Mar 3, 2017, 12:52:13 PM3/3/17
to MIT App Inventor Forum
Nice work Juan, and thanks for sharing :)

Juan Antonio

unread,
Mar 3, 2017, 1:08:49 PM3/3/17
to MIT App Inventor Forum
Thank you Tim :)

Min Sullivan

unread,
Mar 5, 2017, 4:17:17 PM3/5/17
to MIT App Inventor Forum
That is awesome!  Do you know how to make a list of just images, that functions like the listview component?

Tim Carter

unread,
Mar 5, 2017, 5:07:37 PM3/5/17
to MIT App Inventor Forum
@Min Sullivan

See here for my effort on this (images only):

Min Sullivan

unread,
Mar 5, 2017, 5:14:15 PM3/5/17
to MIT App Inventor Forum
Thanks!  Can that access images on the web, as an asset, or on the device?

Min Sullivan

unread,
Mar 5, 2017, 5:14:38 PM3/5/17
to MIT App Inventor Forum
And can it be scrollable?  Thanks so much!

Tim Carter

unread,
Mar 5, 2017, 5:35:26 PM3/5/17
to MIT App Inventor Forum
Yes it can be scrollable, depends on how you write your html ;)

Check the rest of the post I linked for a php version which is web based, but the javascript one will pull  from a webserver too (base the html on the server)

Min Sullivan

unread,
Mar 5, 2017, 5:49:06 PM3/5/17
to MIT App Inventor Forum
 I just tried the file attached to your "Good news, I believe I have a solution. Taifuns ListView stuff was very useful, but..." post.

I have absolutely no idea what I'm doing.  I've never used HTML and jQuery with App Inventor in my not-very-long app inventor coding life.

How do I:
  1. have all the images resized before being displayed?
  2. have the images in a vertical layout?
  3. write the HTML so it scrolls vertically?

And does that version work without Internet connection?


Thank you so much!  Awesome job coding it!

Tim Carter

unread,
Mar 5, 2017, 7:03:13 PM3/5/17
to mitappinv...@googlegroups.com
How do I:
  1. have all the images resized before being displayed?
Probably best to size all your images before use, this is best practice, but if not you will see some css that does this in the html file

<style>
img {
   width:100px;
   height:100px;
}
</style>

  1. have the images in a vertical layout?
Easiest way is to put a <div> with some css styling around the script, or reduce the width of the webviewer so only one image fits
  1. write the HTML so it scrolls vertically?
html should automatically scroll vertically

@ Juan - sorry this has hijacked your thread, Min and I will pick this up elsewhere! > https://groups.google.com/forum/#!starred/mitappinventortest/Z2rrSqjDP6M

Min Sullivan

unread,
Mar 5, 2017, 7:32:24 PM3/5/17
to MIT App Inventor Forum
Thanks so much!  I should've remembered how to do the first one.  I'll reduce the width of the webviewer, which will work perfectly with my app.  Thanks!  Does it need Internet connection to run it?  Once the app is packaged, I mean, since you have to have Internet to use the companion.

Juan Antonio

unread,
Mar 6, 2017, 10:21:56 AM3/6/17
to MIT App Inventor Forum
Do not worry Tim :)
Reply all
Reply to author
Forward
0 new messages