Develop Reference

Weird jQuery Mobile highlight behavior on click

I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.

It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.

Scroll in a navbar (Bootstrap 3), but keep the rest of the page still

I have a question regarding scrolling in a divider, but keeping the rest of the page still. Imagine this (since I just made this account and can't post any pictures.): The post is built out of 3 components:
The navbar: Don't worry about this.
The side menu: This is the part I want to scroll through, because it contains 40 elements that don't fit onto one single page.
The content: I want this one to scroll as well, but I don't want it scroll at the same time as the side menu does.
Here is the code for the part I am talking about:
<div class="panel panel-primary fullheight" ng-controller="NavCtrl">
<div class="panel-heading">All branches</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><input ng-model="search" class="centerhorizontal fullwidth" placeholder="Filter"></li>
<hr>
<li ng-repeat="branch in branches | filter: search">{{branch}}</li>
</ul>
</div>
</div>
Any suggestions whatsoever would be very useful!

set a css rule of overflow-y: scroll on the div that you want to be scrollable
eg
#scrollable-area{
overflow-y: scroll;
height: 300px;
}
Heres a JSFiddle demonstrating this.

Navbar in Header JQuery Mobile

EDIT: My temporary solution is to turn off all transitions and use different id for each header. You then get the persistent toolbar, but without transitions.
working example without transitions
I am using a persistent fixed navbar in my header in JQuery Mobile.
I'm navigating between 3 html files, and on the first(main) page there is no problem, but on the second and third page the navbar covers some of the content.
example of broken navbar code for the navbar and header:
<div data-role="header" data-id="header" data-position="fixed">
<h1>Page 1</h1>
Options
<div data-role="navbar">
<ul>
<li><a href="#page1" data-icon="home" data-iconpos="top"class="ui-btn-active ui-state-persist" >Page1</a></li>
<li><a href="#page2" data-icon="info" data-iconpos="top" >Page2</a></li>
<li><a href="#page3" data-icon="gear" data-iconpos="top" >Page3</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
I have uploaded an example of the problem here(with pages in one html file instead of three html files) : broken navbar

here's the updated one:
http://jsfiddle.net/LvuUX/2/
You had same data-id="header" for all three pages, as you are using multi-page template so you can't have same id for multiple elements
EDIT: http://jsfiddle.net/LvuUX/3/
looks like jQuery is not using the correct padding-top when page loads. To fix this issue you can just use a fix padding-top for your data-role="content"
<style type="text/css">
.ui-page-header-fixed { padding-top: 5.9em; }
</style>

I think what you're trying to do is similar to the problem I had. I had a fixed positioned navbar but my page content was being hidden underneath it. I solved the problem by applying a top margin to my content div equal to the height of the navbar. (ie. My margin-top of my content div was 50px as that was the height of my navbar.)
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
I hope I interpreted your question correctly. I've only been learning html&css 3 months but when I saw your question I thought this might help.

Separating Tabs from Container in jQuery UI

I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).

I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks

Jquery taking effect after the page is loaded

I am using jquery ui. But the page is taking a lot of time to load. Also I am using tabs function for on LI elements of UL tag. But for a split second the list is shown as it is and after that the Tabs effect takes place. I have written the javascript for calling the tabs in the same html file. How I can reduce the loading time and also the the abrupt view that is shown for a split sec.

If you are truely using the load event, then you probably want to switch to the domReady event.
instead of doing
<head>
<script>
$(document).load(eventHandler);
</script>
</head>
do
<head>
<script>
$(document).ready(eventHandler);
</script>
</head>
or simply
<head>
<script>
$(eventHandler);
</script>
</head>
which is a shortcut for the same thing
This will trigger as soon as the DOM is ready to be manipulated, but before images are loaded, and generally before the browser renders the page for the first time, tho that depends on how your have built your page.

You can set your UL tag to display:none

#dilip
For loading times you can install Firebug with Firefox and see where the loading times go.
If you are using PHP to generate your page, you can also use http://www.xdebug.org/ to see where PHP takes the most time per script file.
For the menu I would say, do not let the JavaScript kick in to render the Tabs effect when the DOM has fully loaded. jQuery can detect that easily :)

Background:
There are a few little optimization you can do for smoother loading of the tabs. But it's basically trade-off to easy-to use. You add some css classes into your html already and don't wait till jQuery puts it for you. This avoids all the funny movements in the page when jQuery takes over, coz the elements will be already in place.
Explained steps:
1) div containing all the tabs:
You add class ui-tabs which in combination with step2 will suppress the original list and puts the navigation already in place.
You add class ui-widget which fixes the font-size and the position of the first tab against navigation.
2) ul containing the nav items:
You add class ui-tabs-nav which completes the list repositioning.
3) Each particular div containing tab panel, which is not active:
You add style="display:none;". This is what jQuery does anyway. So you don't have to remove style after the tabs are ready. jQuery does it for you. It also more fine-tuned than crudely hiding all content of tabs.
4) Is also good idea to put tabs constructor call in document ready:
$(document).ready(function(){$( "#tabs" ).tabs();}
Result:
So you change your html from original
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2">
<p>tabs-2 content</p>
</div>
<div id="tabs-3">
<p>tabs-3 content</p>
</div>
</div>
to:
<div id="tabs" class="ui-tabs ui-widget">
<ul class="ui-tabs-nav">
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2" style="display:none;"><!-- display:none is later reverted by jQuery.tabs -->
<p>tabs-2 content</p>
</div>
<div id="tabs-3" style="display:none;">
<p>tabs-3 content</p>
</div>
</div>
Conclusion:
You are just using jQuery styles.
You tabs navigation and tab panels are already in place before jQuery starts rendering.
No need any clean-up (E.g.: remove display:none from ul) after tabs are rendered.