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 + '… ');
}).
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
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
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.