7 ianuarie 2013

Library For All Update

Well, I didn't invest time in learning PhoneGap yet.

However, my offline HTML app on my android phone helps me a lot when buying new books to my "biblioteca pentru toti" book collection.

I do not really need an improve, or to turn this web page in a real phonegap app, I'm okay using it like this. The only thing I did is adding internal links. That's because antique stores or people over the internet selling this books, they don't sell one or two. They sell a bounch of them, and scroolling all their numbers takes a little time more than my patiance can handle.



So... today I did an update: internal anchor links that takes you to the top of the page, at the 250th, 500th, 750th ... element! This is how it looks:



To use an internal link, you need to corelate two elements in the page: a normal <a> tag, but with the href attribute containing not an url, containing an id, like so:
<a href="#top">top</a>
and another <a> tag, this one containing not the href attribute, but containing a name attribute with the respective name:
<a name='top'></a>
I didn't put anything between the tags because I do not want to be visible: it's like an invisible anchor in your page!

So, let's begin! Add this to HTML file:

In the CSS, make #header's position to fixed and add this so they can look nice:

And now, the fun part. You know that those book numbers are generated dynamically with JavaScript. So, all we need to do now is to insert this in the for loop that does that. With a switch case, we are searching for the wanted book number and if found we will insert an invisible anchor name right there.


This is like Library for All 1.1 version. I hope I can make some spare time to turn this in a release phonegap app. And implement some features, like multiple collections, info about specific book (that requires a database). I guess that will be Library for All 2 version.

Niciun comentariu:

Trimiteți un comentariu