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

[Juan Antonio]

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.

- Visor1 has font sevillana.ttf: http://www.1001fonts.com/sevillana-font.html#character-map

- 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:

http://kio4.com/appinventor/169I_javascript_visordelista.htm

Regards.

[Juan Antonio]

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:

http://trgraglia.github.io/jquery.horizonScroll.js/demo/index.html

In this web: buttons with CSS

https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover

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:

http://kio4.com/appinventor/169J_javascript_paneles.htm

Regards

[Tim Carter]

Nice work Juan, and thanks for sharing :)

[Juan Antonio]

Thank you Tim :)

[Min Sullivan]

That is awesome!  Do you know how to make a list of just images, that functions like the listview component?

[Tim Carter]

@Min Sullivan

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

https://groups.google.com/forum/#!starred/mitappinventortest/Z2rrSqjDP6M

[Min Sullivan]

Thanks!  Can that access images on the web, as an asset, or on the device?

[Min Sullivan]

And can it be scrollable?  Thanks so much!

[Tim Carter]

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]

 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]

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]

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]

Do not worry Tim :)