fixed toolbar at the top/bottom of a page?

223 views
Skip to first unread message

Alexander Gulentz

unread,
Feb 3, 2010, 4:38:05 PM2/3/10
to jQTouch
Hi all,

here is my short example:

<body>
<div id="callback15126414" class="hustler">
<div class="toolbar">
<h1>Hustler</h1>
<a class="back" href="#">zurück</a>
</div>
</div>
<div id="content" class="current">
<div class="toolbar">
<div class="logo"></div>
<h1>Headliner</h1>
</div>
<div class="content">
<h2>Kategorien</h2>
<ul class="rounded">
<li class="arrow">
<a href="#callback15126414">
Die neuesten Clips
</a>
</li>
</ul>
</div>
</div>
</body>

and here is my Question: How can i implement a static toolbar at the
top of the page?

var jQT = new jQuery.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'js/themes/jqt/img/loading.gif'
],

});


// Some sample Javascript functions:
jQuery(function(){

// Show a swipe event on swipe test
jQuery('#swipeme').swipe(function(evt, data)
{
jQuery(this).html('You swiped <strong>' +
data.direction + '</strong>!');
});

// Page animation callback events
jQuery('#pageevents').
bind('pageAnimationStart', function(e, info){
jQuery(this).find('.info').append('Started
animating ' + info.direction + '&hellip; ');
}).
bind('pageAnimationEnd', function(e, info){
jQuery(this).find('.info').append(' finished
animating ' + info.direction + '.<br /><br />');
});

jQuery('#callback$subContentGroup.contentGroupId').bind
('pageAnimationEnd', function(e, info){
if (!jQuery(this).data('loaded')) {
jQuery(this).append(jQuery('<div
class="loading">Seite wird geladen ...</div>').
load('group.xhtml?catPath=$
{subContentGroup.catPath}', function() {
jQuery(this).parent().data('loaded',
true);
}));
}
});
// Orientation callback event
jQuery('body').bind('turn', function(e, data){
jQuery('#orient').html('Orientation: ' +
data.orientation);
});
});

i found some solution on the web(with js), but noting is possible.
only CSS ist not so good ;) position:fixed don't work.
Could you help me please and give me an example based on my code?

I will be happy to read your answers!

Regards,
Alex

jonathanstark

unread,
Feb 6, 2010, 6:21:35 PM2/6/10
to jQTouch
The short answer is that there is no good way to create a fixed
position element in Mobile Safari. The best thing to do is design
around it.

If you are desperate for a fixed bar at the top or bottom, you can
capture the touch events and handle EVERY user interaction. However,
this has serious limitations and IMHO is rarely worth the effort (and
bloat).

There is an example here:
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16

HTH,
j

Chris

unread,
Feb 7, 2010, 6:44:10 PM2/7/10
to jQTouch
Alex: Refer to this thread:
http://groups.google.com/group/jqtouch/browse_thread/thread/09c0ae9e2db61cf8#

Jonathan is correct in that you will have to write quite a bid of code
to implement the logic and your program will get quite bloaty if you
want to do anything more than just switch screens. For that its
probably just easier to have a Home button at the top that allows
users to navigate to your other panel from the home screen.

In my case I am using the toolbar to act as a sort of filter-lock so
people can change the way the program behaves (it locks the program
into one particular view type based on current content). For my app
it makes sense.

Reply all
Reply to author
Forward
0 new messages