Develop Reference

Event not available anymore after page change in jQuery Mobile

I use jQuery Mobile 1.4.5. When I load a page and right away click the mobile menu toggle button, the mobile menu opens. When I change pages, the mobile menu does not open anymore when I click the toggle button.
My navigation looks like this:
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<a id="toggle-mobile-menu" href="javascript:void(0)" data-role="none">
Toggle mobile menu
</a>
<ul id="mobile-menu">
// ...
</ul>
</div>
</div>
<div data-role="content"></div>
$(function () {
$(document).on('click','#toggle-mobile-menu', function() {
$('#mobile-menu').fadeToggle();
});
});
How do I need to adapt my code?

Use just one external toolbar and place the markup outside the page within the body of your page. It's easy: the markup remains the same.
Don't forget to initialize the toolbar: because external toolbars are not within a page, you must call the toolbar plugin yourself.
In $(document).ready add this:
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
Here is the jQuery Mobile documentation about this topic:
http://demos.jquerymobile.com/1.4.5/toolbar-external/
and here for fixed toolbars:
http://demos.jquerymobile.com/1.4.5/toolbar-fixed-external/

ul + span in line(with CSS?)

I'm using bootstrap for pagination, here simplified code.
<div style="margin:20px 0px 20px 0px">
<ul class="pagination" style="display:inline">
<li>page 1</li>
<li>page 2</li>
</ul>
<span>ajax-loader</span>
</div>
<form>text fields, button for send msg</form>
Ajax loader looks fine, right after pagination buttons, but form's elements ignore my div and go right after my ajax loader(same line), like there is no div. Brake line(br) not working too, i don't understand why.
So i want:
"pagination-ajaxloader"
"other data"
I have:
"pagination-ajaxloader-otherdata"
I tried to use float for ajaxloader, but i want it near pagination from right side. Looking for some advise, thank you.

show() function doesn't seem to work as expected

I am trying to create a webpage with a menu on the left side and a content area on the right side. Mockup image below to give you an idea:
I am using jQuery UI to try to accomplish this. The goal is to have the content area on the right side to be set based on the menu item selected on the left. The area will always be a tabbed layout, but the content and amount of tabs will be different for each of the item selected from the left menu. Eventually, I want to integrate this into an ASP.NET MVC 5 app to include user authorization and roles affecting what menu items and tabs will be visible based on the logged in user. But for now, I am simply trying to get the tab menu to show up based on what I click on the left menu, and to show it specifically upon clicking one specific item. For the others, it will hide it again (I have not tried to implement the re-hiding yet, and that is not part of this question; I just want to get the initial show() to work).
So right now my approach is to hide the tabs on page ready, then use a function to display it when clicked, using the jQuery show() function. However, this doesn't work (tried in firefox and IE).
My attempt is at: https://jsfiddle.net/3mo28z1t/5/
In the fiddle, in the javascript section, if you change the "hide" to "show"
$("#tabsuseradmin").hide();
you will see the tabs menu, in case you want to get an idea of the layout before trying to fix the issue.
Specifically, I want the action of clicking on "Left menu item 3" to show the tabs.
Thank you.

I cleaned your fiddle up so that your scripts/css were in external resources. You must first define the target and then call the function with the target - you haven't targeted the individual tabs(i haven't done this for you either, i'm just pointing it out) Also you can't use show as a function name, as its reserved.
What i did do is create a toggle on the #leftmenu>li - see fiddle
$(function() {
$("#tabsuseradmin").tabs();
$("#leftmenu").menu();
});
$('#leftmenu>li').on('click', function(){
$("#tabsuseradmin").toggle();
});
$(function showTab(target) {
document.getElementById(target).show();
});
$(function hideTab(target) {
document.getElementById(target).hide();
});
#leftmenu {
display: inline-block;
}
#tabsuseradmin {
display: inline-block;
margin-right: 10px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
<ul id="leftmenu">
<li>Left menu item 1</li>
<li>Left menu item 2</li>
<li>Left menu item 3</li>
<li>Left menu item 4</li>
</ul>
<div id="tabsuseradmin">
<ul>
<li>Tab first</li>
<li>Tab second</li>
<li>Tab third</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
<div id="tabs-3">
<p>Tab 3</p>
</div>
</div>
</body>

<li id="clicker" onclick="show('tabsuseradmin')">Left menu item 3</li>
$(document).ready(
function(){
$("#clicker").click(function () {
$("#tabsuseradmin").show();
});
});
Updated Fiddle

There is an error in your code. If you check console, it specifically says - show is not defined. Show & hide are methods provided by jQuery. They are not the same in javascript.

In your example you are using document.getElementById(target).show();, but .show is a jQuery method
you should use something like :
$(document.getElementById(target)).show();
$('#'+target).show();
You can also declare your event handler differently to avoid the problem seen in jsfiddle (that show is not defined), see my updated jsfiddle for that

Responsive sidebar and input

I have an issue with a responsive menu containing an input.
The original thread is here:
Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element
If I add an extra li, with an input (for a search field), I get a jump if I click the input. This happens only if I have scrolled before opening the sidebar.
ul class="left">
<li class="divider divider-first"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li>
<form method="get" action="/search.html">
<input type="text" placeholder="Search" name="Search">
</form>
</li>
</ul>
Here's the fiddle with the extra li: http://jsfiddle.net/29qgW/5/
If you open the result window on an iPhone, you can see it happening.
Some kind of margin gets added above both the sidebar and the top bar. I tried to find it with the iOS simulator, but the margin is not really there as a style.
It gets even worse if you try to scroll after having selected the input. How can this be fixed? I've tried to change the metatag to disallow user zooming, but that doesn't work.
Does anyone know how to fix this?
Update: edited to show metatag, and closed input tag.

change information in seperate divs with button click

I am trying to accomplish this effect but I'm sure the coding is incorrect. I want the image DIVs to swap content when each button is clicked. This is what I have so far, but I'm sure the code is incorrect. Is there a better way of achieving this? thanks, and forgive me for the noob question.
HTML:
<div class="item-1 content-item">
I am the 1st image content
</div>
<div class="item-2 content-item" style="display: none;">
I am the 2nd image content
</div>
<div class="item-3 content-item" style="display: none;">
I am the 3rd image content
</div>
<div class="item-1 content-item">
I am the content for item 1
</div>
<div class="item-2 content-item" style="display: none;">
I am the content for item 2
</div>
<div class="item-3 content-item" style="display: none;">
I am the content for item 3
</div>
<ul>
<li class="change-item" data-item="1">Item 1</li>
<li class="change-item" data-item="2">Item 2</li>
<li class="change-item" data-item="3">Item 3</li>
</ul>
jQuery:
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.item-' + this_item).fadeIn();
});

A couple tips you might find helpful, even though it is working fine.
Since your items are actually grouped by number and the stuff in between is hidden, you could just group them together.
You should consider using id attributes in your markup. This makes it more clear that each one of your items is unique and makes the javascript run faster.
Your <ul> is technically in order, so it's more properly an <ol>. This is splitting hairs, and will give you numbers instead of bullet points, giving you more work to style it correctly. But it's worth mentioning.
Consider giving some indication that the list items are interactive. You could make them buttons or anchors (so they would display like hyperlinks). Or try a css rule for the cursor to make the mouse pointer change when they a user goes over the link.
Like this:
.change-item {
cursor: pointer;
}
Put it all together, it might look something like this:
HTML:
<div id="item-1" class="content-item">
<img src="/item-1.png"/>
<p>I am the content for item 1</p>
</div>
<div id="item-2" class="content-item" style="display:none;">
<img src="/item-2.png"/>
<p>I am the content for item 2</p>
</div>
<div id="item-3" class="content-item" style="display:none;">
<img src="/item-3.png"/>
<p>I am the content for item 3</p>
</div>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Javascript:
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('#item-' + this_item).fadeIn();
});
But as you can tell, your code is fully functional as is. You didn't do anything terribly wrong (good job!), these are just a few things that might make this page easier on you or your users.