Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});
I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});
As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa
Related
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
I have download a navigation bar template and struggling to make it work as I want it to. When a heading is clicked it opens a sub menu to have further links. I do not want all headings to open the sub menu, I want some to just be a link I.E home.
When home is clicked it just highlights home as if opening the submenu and doesnt go to the link. I think this is a js issue.
Below is the html:
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Home
<li>
Club Information
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>About the Club</h4>
<ul>
<li>About IDMC</li>
<li>Where to Find Us</li>
<li>What We Do</li>
</ul>
<h4>Contacting Us</h4>
<ul>
<li>General Information</li>
</ul>
</div></div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
I believe this is the js causing the issue but not sure what to change:
var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("click",a);b.on("click",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("click").on("click",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();
You want to exclude the items that are just links, not dropdowns. So, add a class of link to the links that have no sub-items. Home
Then change the Javascript to look like this: The code should then not run on the links with a class of link.
var cbpHorizontalMenu=(function(){
var b=$("#cbp-hrmenu > ul > li"), g=b.children("a").not($('.link')), c=$("body"), d=-1;
function f(){
g.on("click",a);
b.on("click", function(h){
h.stopPropagation();
})
}
function a(j){
if(d!==-1){
b.eq(d).removeClass("cbp-hropen");
}
var i=$(j.currentTarget).parent("li"), h=i.index();
if(d===h){
i.removeClass("cbp-hropen");
d=-1
}else{
i.addClass("cbp-hropen");
d=h;
c.off("click").on("click",e);
}
return false
}
function e(h){
b.eq(d).removeClass("cbp-hropen");
d=-1
}
return {init:f}
})();
I use the Kendo UI splitview.
I created one pane (left) for the navigation and one pane (right) for the content.
I got 4 Navigation links for the left pane like this:
<div data-role="pane" id="side-pane" data-layout="side-default"
data-transition="slide">
<div data-role="view" data-title="test" id="side-root">
<ul data-role="listview" style="height: 250px" data-style="inset"
data-style="inset" data-type="group">
<li>Categories
<ul>
<li onclick="createChart()" data-icon="arrow-e"><a>1</a></li>
</ul>
<ul>
<li onclick="createLineChart()" data-icon="test"><a>2</a></li>
</ul>
<ul>
<li onclick="createMap()" data-icon="world"><a>3</a></li>
</ul>
</li>
</ul>
</div>
</div>
and for the right pane one div's for the map and two div's for the charts like this:
<div data-role="pane" data-layout="main-default" id="main-pane">
<div id="forms" data-role="view" data-title="Form Elements"
data-init="initForm" data-use-native-scrolling="true" data-show="detailViewShown">
<div id="map" ></div>
<div id="chart"></div>
<div id="linechart"></div>
</div>
The Problem is: when I click on "1" the chart created perfectly. After that happened i click on "2" and the new chart should be created and the old one should be removed, but the new chart appears under the chart "1". How can I refresh or set the right pane content new after the click on navigation items? The same problem for the map.
You should have to change data-init to data-show
<div data-init="initForm">
to
<div data-show="initForm">
Here is the explanation:
difference between data-show and data-init
Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});
Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle
Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>
Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.
Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example
const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle
I've been searching how to replace content with navbar, and I found this site : Nested Content with Navbars using jQuery Mobile, & completely can't understand how's the javascript works. yes, I'm a newbie in this field.
so, somehow he managed to create content like this with this code :
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div data-role="content">
<div id="one">One content</div>
<div id="two">Two content</div>
<div id="three">Three content</div>
</div>
</div>
and
(function($) {
// Before handling a page change...
$(document).bind("pagebeforechange", function(e, data)
{
// If the new page is not being loaded by URL, bail
if (typeof data.toPage !== "string")
{
return;
}
// If the new page has a corresponding navbar link, activate its content div
var url = $.mobile.path.parseUrl(data.toPage);
var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']");
if ($a.length)
{
// Suppress normal page change handling since we're handling it here for this case
e.preventDefault();
}
// If the new page has a navbar, activate the content div for its active item
else
{
$a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active");
// Allow normal page change handling to continue in this case so the new page finishes rendering
}
// Show the content div to be activated and hide other content divs for this page
var $content = $($a.attr("href"));
$content.siblings().hide();
$content.show();
});
})(jQuery);
I was going to create 3 contents with my navbars, and here's my code :
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Home</li>
<li>V-Map</li>
<li>Login</li>
</ul>
</div>
</div>
<div data-role="content" align="center" style="margin:2em 1em 2em 1em;">
<div id="one">First Content</div>
<div id="two">Second Content</div>
<div id="three">Third Content</div>
</div>
I don't have a previous page like the sample gave, can anyone help me with the javascript?
Make sure you reference to jQuery, jQuery Mobile libraries in your code.
I assume the problem with the previous button is, that you don't have a page and header div wrapper.
You have to use his exact markup, including the page and header div.
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div data-role="content">
<div id="one">One content</div>
<div id="two">Two content</div>
<div id="three">Three content</div>
</div>
</div>