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/
Related
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
I'm trying to load a default tab in the tabbed ajax code that I've got, this is the source from the head tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.hastiefitness.com.au/wp-content/themes/hastie/jquery.fwd_tabs.js"></script>
And this is what I'm using in HTML:
<div class="tabs">
<ul class="tab-menu">
<li>TEAM TRAINING PROGRAM</li>
<li>VIRTUAL EDUCATION AND COACHING PROGRAM</li>
<li>PERSONAL COACHING PROGRAM</li>
</ul>
<div class="tab-content" id="tab-1">
The page in question is :
http://www.hastiefitness.com.au/programs/
The default tab is meant to be the middle one, which is tab-2.
How would I be able to perform this? I've searched and haven't been able to get it working at all.
Looks like the plugin used does not have any direct support for setting active tab so once the plugin is initialized trigger a click event on the desired anchor element
jQuery(function(){
$('.tabs').fwd_tabs();
$('.tabs a[href="#tab-2"]').click()
})
Demo: Fiddle
I am using the Bootstrap scrollspy plugin (v2.0.0) which works without a problem when the page loads first.
The navigation bar as well as the content sections get updated via ajax calls (add or remove menu items). After this scrollspy doesn't highlight the newly added items anymore.
How do I tell scrollspy to refresh? Or maybe attach scrollspy manually to the following code?
<body data-spy="scroll" data-target=".subnav" data-offset="0">
<div id="listing">
<div class="subnav">
<ul class="nav nav-pills nav-stacked">
<li>Home & Garden</li>
<li>Computers & Networking</li>
</ul>
</div>
<div>
<section id="cat2">...</section>
<section id="cat5">...</section>
</div>
</div>
</body>
scrollspy('refresh') will simply do what the name says!
In my case I added the follwing code after the ajax call:
$('[data-spy="scroll"]').each(function () {
$(this).scrollspy('refresh');
});
I'm using the JQTouch framework for building an iPhone app/WebPage. I have it working nicely, but i cannot make it scroll to the bottom of the page.
<body>
<div class="current">
<div class="toolbar">
<a class="back button" href="javascript:{}">back</a>
<h1>header</h1>
</div>
</div>
<ul id="myContent">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<div id="myInput">
...a couple of input elements..& submit button
that results in the "myContent" being updated with another li
</div>
</body>
Basically I have a UL at the top of my page, that gets updated/added to via server events coming in. This works nicely, but i want to be able to scroll to the "myInput" div which is at the bottom. However, I can't find a way of achieving this, I'm either using libraries incorrectly, or missing a trick. Any ideas?
Cheers
Have you checked the size of your webview? I had this issue but it was because I set my webview height to 480 (so it was off the screen due to the navigation bar)
When the content is static:
Click
<script>$('#nearme').bind('pageAnimationEnd', function(event, info){});</script>
When the content is AJAX:
Click
How do I bind something to occur after the AJAX (page.html) is loaded?
This question pertains to jqtouch which makes AJAX requests from regular anchor tags
Take a look at the demo, in particular the "GET Example" under AJAX section. Essentially, you want to have the anchor element to link to a page which returns a "jQTouch page", i.e. <div id="pageID">...</div>.
So, in your case, you may have this anchor:
Click
And the page.html may be something like:
<div id="ajaxPage">
<div class="toolbar"><h1>Title</h1></div>
<div>
<ul>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>