"How I Did It" By Victor "TabBar" Frankenstein
Nimbus Software
out how to have a static tabbar on the bottom of an iPhone/iPod Touch
screen. Would anyone else like to see the solution posted here? If so,
post a "me, too" here. If there are enough responses I'll get
something banged out this weekend.
djp
aka Nimbus.Software
aka DataZombies - We've got the best brains in the business.
Brad Midgley
I would be interested to see it. A colleague has gotten something
working with the latest jqt and some extensions but it does glitch
(bar appears midscreen) a bit on the first load of each screen.
Brad
> To unsubscribe from this group, send email to jqtouch+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.
>
--
Brad Midgley
ibrahim okuyucu
thanks.
Marcos Oliva
Nimbus Software
for posts by Nimbus Software on this group) so I stopped.
Marcos Oliva
To unsubscribe from this group, send email to jqtouch+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.
Samuel
On 25 mar, 02:17, Marcos Oliva <marcos.alois.ol...@gmail.com> wrote:
> jdp,
>
> humm interesting.. let me search on the postings , I usually get this
> emails
>
> marcos
>
> On Wed, Mar 24, 2010 at 6:14 PM, Nimbus Software
> <nimbus.softw...@gmail.com>wrote:
ibrahim okuyucu
do we have enough people for you yet? jk :)
Still waiting to hear from you.
I'd very much like that tabbar.
Nimbus Software
job. Write something on weekend.
On Mar 25, 7:24 pm, ibrahim okuyucu <okuy...@gmail.com> wrote:
> Nimbus,
> do we have enough people for you yet? jk :)
> Still waiting to hear from you.
> I'd very much like that tabbar.
>
> On Wed, Mar 24, 2010 at 6:17 PM, Marcos Oliva
>
>
>
> <marcos.alois.ol...@gmail.com> wrote:
> > jdp,
> > humm interesting.. let me search on the postings , I usually get this
> > emails
> > marcos
>
> > On Wed, Mar 24, 2010 at 6:14 PM, Nimbus Software <nimbus.softw...@gmail.com>
Nimbus Software
deceptively simple.
CSS
If you look at the jqt.scrolling.js's CSS (http://bit.ly/9RcBlf)
you'll see that on lines 33-39 there is:
.vertical-scroll, .vertical-slide
{
position: relative;
z-index: 1;
overflow: hidden;
height: 370px;
}
The height property is the size of the scrolling div. So if you make
that a smaller number by 49px you'll have a section on the bottom of
the screen for a tabbar. BTW, the height of the major sections of the
screen are:
Status Bar: 20px
Navigation Bar: 44px
Tabbar: 49px
Safari Toolbar: 45px
Scrolling div height between navigation bar and tabbar for apps
launched in Safari:
Profile: 322px (480 - 20 - 44 - 49 - 45)
Landscape: 162px (320 - 20 - 44 - 49 - 45)
Scrolling div height between navigation bar and tabbar for apps
launched from home screen:
Profile: 367px (480 - 20 - 44 - 49)
Landscape: 207px (320 - 20 - 44 - 49)
HTML
The HTML for jqt.scrolling.js is:
<!-- Panel-1 -->
<div id="Panel-1">
<div class="toolbar">
<a class="back" href="#">Back</a>
<h1>Panel Title</h1>
</div>
<div class="vertical-scroll">
<div>
<!-- scrolling content -->
</div>
</div>
</div>
Everything between the child of the div with the class vertical-scroll
is scrollable. The tabbar goes below that child's closing tag:
<!-- Panel-1 -->
<div id="Panel-1">
<div class="toolbar">
<a class="back" href="#">Back</a>
<h1>Panel Title</h1>
</div>
<div class="vertical-scroll">
<div>
<!-- scrolling content -->
</div>
</div>
<div>
<!-- tabbar -->
</div>
</div>
You can put anything you want in the tabbar section; table, ul/li,
div. I mark up this section like so...
<ul class="tabbar">
<li class="Thing1 two">
<a href="javascript:void(0);" class="enabled">
<div></div>
<span>Thing 1</span>
</a>
</li>
<li class="Thing2 two">
<a href="javascript:jQT.goTo('#Thing2');">
<div></div>
<span>Thing 2</span>
</a>
</li>
</ul>
The tabbar class is where I reset jQtouch's ul and li styles. I use
the jQT.goTo function to bypass the slide animation. The enabled class
signifies that this is the tab that is active and to apply any
highlighting to this section. The empty divs will contain the icon as
defined by the tab's css class. The li class "two" defines the width
of the tabbar section. These are defined in the app specific CSS like
this...
#jqt .tabbar li.two {width: 50%;}
#jqt .tabbar li.three {width: 33.33%;}
#jqt .tabbar li.four {width: 25%;}
#jqt .tabbar li.five {width: 20%;}
I'd never have more than five tabs on the bar, but that's up to you.
The easiest way to indicate a tab is enabled is to have two images for
each tab; one that is a gray-scale image and one that is highlighted
with blue for the apple theme and green for the jgt theme. Here's some
examples of tabbars and icons to spark your creativity.
http://bit.ly/vY7gc
http://bit.ly/bWh574
http://iphone.appleinsider.com <-- enable iPhone user agent string in
Safari
http://bit.ly/ItmFO
http://bit.ly/avhl63
http://bit.ly/e4la9
brente
Samuel
> examples of tabbars and icons to spark your creativity.http://bit.ly/vY7gchttp://bit.ly/bWh574http://iphone.appleinsider.com<-- enable iPhone user agent string in
> Safarihttp://bit.ly/ItmFOhttp://bit.ly/avhl63http://bit.ly/e4la9
jonPrecise
Wasn't static tabbars the point of the extension in the first place?
Modifying the CSS a bit to allow for a bottom bar seems a given..
> examples of tabbars and icons to spark your creativity.http://bit.ly/vY7gchttp://bit.ly/bWh574http://iphone.appleinsider.com<-- enable iPhone user agent string in
> Safarihttp://bit.ly/ItmFOhttp://bit.ly/avhl63http://bit.ly/e4la9
Nimbus Software
"Wasn't static tabbars the point of the extension in the first place?"
I don't think that the point of jqt.scrolling.js was a fixed tabbar on
the bottom. All the code is for a fixed navigation bar on the top.
"Modifying the CSS a bit to allow for a bottom bar seems a given.. "
On hindsight it does, but sometimes the solution is so obvious that we
miss it. I did and judging from the amount of posts to this board
about a fixed tabbar so have others.
djp
Chris
getting my own app's tabbar set up.
One question: How does it look in landscape mode? I've found it
pretty rough looking in my own app. To take just one example, I have
a form on a page with a select box. Tapping the select box raises the
select option dialogue, but when that dialogue is closed, the tabbar
doesn't return to the bottom of the screen, but rather stays up in the
middle of the screen where the dialogue box seems to have pushed it.
This doesn't happen in portrait mode.
cy
Nimbus Software
jqt.scrolling wiki helps:
$(function() {
$(window).bind('load orientationchange', function() {
$('#jqt').removeClass('profile
landscape').addClass(Math.abs(window.orientation) == 90 ?
'landscape' : 'profile'); scrollTo(0,0);
});
});
Chris
So just to be clear: you don't have the same problem with a select box in landscape mode (pushing up a menu at the bottom of the screen and leaving it hanging in the middle)? Or have you not tried that? It would be useful to confirm that you're not having the same problems, since it would suggest the fault lies with my own code, and not the scrolling extension.
Best,
Chris
--
To unsubscribe, reply using "remove me" as the subject.
jonPrecise
just make sure the dialog is positioned absolute so its not pushing
the other elements around
On Apr 1, 8:14 am, Chris <donkeyho...@gmail.com> wrote:
> Sadly, that doesn't do it.
>
> So just to be clear: you don't have the same problem with a select box in
> landscape mode (pushing up a menu at the bottom of the screen and leaving it
> hanging in the middle)? Or have you not tried that? It would be useful to
> confirm that you're not having the same problems, since it would suggest the
> fault lies with my own code, and not the scrolling extension.
>
> Best,
>
> Chris
>
> On Wed, Mar 31, 2010 at 9:26 PM, Nimbus Software
> <nimbus.softw...@gmail.com>wrote:
jonPrecise
Chris
So, what's happening is that sometimes that browser dialogue box forces my scrolled content (where the form appears) way off the screen. And it won't come back! Sometimes it forces my little fixed navigation menu running along the bottom of the screen in the center of it. This doesn't happen every time, which makes it even more maddening. Seems to happen more in landscape mode. But I just caught it happening in portrait mode.
Still trying to figure it out.
cy
Chris
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16#comment-10158
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16#comment-11326
If anyone else is having this problem, the solution here seems to help
a bit:
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16#comment-9894
I'm still getting some funny behaviour in landscape mode. The select
box forces my fixed menu right up into the middle of the screen.
cy
Chris
cy
Paul
about HTML.
Is there something to modify in the jqt.scrolling.js file ?
If someone can help me to put a fixed Tab bar, it would be really
appreciated.
rblon
I was wondering if you (or anyone else here) tried to use it on
Android? I did, but found that clicking links within the scrollable
area doesn't work (or at least, it can work, but you have to touch it
extremely lightly /quickly, as otherwise it will be interpreted as
scrolling). I have reported it in the jqextensions group (http://
code.google.com/p/jqextensions/issues/detail?id=11&can=1), with a
dirty work around, but I was wondering if someone else found a better
solution.
(sorry for the double-post, but I have the impression that jqextension
issues don't have a wide audience)
rblon
combination with form input?
I have in the bottom toolbar a textarea and a send button (for chat).
Now when someone presses the textarea, the iPhone form input screen
appears. But the whole page scrolls up as well, which I don't want as
I would like to keep the top toolbar fixed. I have solved this by
changing the height of the scrollable div in the onfocus event handler
of the textarea (and reverting the change onblur).
That is all fine, except that when the first character has been
inputted, the page scrolls up again (putting the textarea in the
middle of the remaining screen, while I would like to keep it at the
bottom). I can call the preventDefault function in the onkeydown
event, but that also prevents text being inputted....
Chris, I'm not sure if this is similar to your problem, but I was
wondering if you found a solution.
On May 20, 8:27 pm, Nimbus Software <nimbus.softw...@gmail.com> wrote:
> Sorry, I don't have an Android unit. J.F. Sebastian ran off with Pris.
Nimbus Software
Bladerunner/android reference if you're wondering.
cubiq.org has updated iScroll to 3.2.
http://tinyurl.com/23r72sj
There's a demo that everyone reading this post should find
interesting.
http://tinyurl.com/22w3a9u
On May 20, 3:27 pm, Nimbus Software <nimbus.softw...@gmail.com> wrote:
> Sorry, I don't have an Android unit. J.F. Sebastian ran off with Pris.
>
> On May 20, 5:38 am, rblon <rb...@fastmail.fm> wrote:
>
>
>
brente
"Home again, home again, jiggidy jig!"