I want to swipe through these pages as so, but when it happens I want the header panel and the footer to remain stationary. I only want the page content to move when the pages are swiped or changed.
JSFiddle: https://jsfiddle.net/nj3prx5h/
HTML :
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
Bars
</div><!-- /header -->
<div data-role="content">
<h4 align="center">2015 Rates</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars3" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li>Home</li>
<li>Book Tee Times</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>2015 Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</li>
<li>Scorecard</li>
<li>Contact Us</li>
</ul>
</div><!-- /panel -->
</div><!-- end of Rates page -->
<!-- ~~~~~ Stay and Play ~~~~~ -->
<div data-role="page" id="StayandPlay">
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
Bars
</div><!-- /header -->
<div data-role="content">
<h4 align="center">Stay & Play</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#Rates" >Rates</a></li>
<li>Stay & Play</li>
<li><a href="#MemberSpecials" >Specials</a></li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars4" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li>Home</li>
<li>Book Tee Times</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>2015 Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</li>
<li>Scorecard</li>
<li>Contact Us</li>
</ul>
</div><!-- /panel -->
</div><!-- end of Stay and Play page -->
<!-- ~~~~~ SPECIALS ~~~~~ -->
<div data-role="page" id="MemberSpecials">
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
Bars
</div><!-- /header -->
<div data-role="content">
<h4 align="center">2015 New Member Specials</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Rates</li>
<li>Stay & Play</li>
<li>Specials</li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars5" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li>Home</li>
<li>Book Tee Times</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>2015 Rates</li>
<li>Stay and Play</li>
<li>Specials</li>
</ul>
</li>
<li>Scorecard</li>
<li>Contact Us</li>
</ul>
</div><!-- /panel -->
</div><!-- end of Specials page -->
JS :
jQuery(document).ready(function() {
$(document).on('swipeleft', swipeLeft);
$(document).on('swiperight', swipeRight);
function swipeLeft(event) {
if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "Rates") {
$.mobile.changePage("#StayandPlay", {
transition: "slide"
});
} else if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "StayandPlay") {
$.mobile.changePage("#MemberSpecials", {
transition: "slide"
});
}
}
function swipeRight(event) {
if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "MemberSpecials") {
$.mobile.changePage("#StayandPlay", {
transition: "slide",
reverse: true
});
} else if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "StayandPlay") {
$.mobile.changePage("#Rates", {
transition: "slide",
reverse: true
});
}
}
});
How can I do this? I am more worried about the footer as that looks much worse, but if I could get help with both footer and header panel that would be great!
Related
I'm trying to build a working external panel but am having some issues. Here's the HTML:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
/* add panel */
$( document ).on( "mobileinit" , function() {
var panel = '<div>panel</div>';
$( "body" ).prepend( panel ); /* or .append */
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
/* initialize panel and contents */
$(function() {
$( "[data-role=panel]" ).panel().enhanceWithin(); /* or #panelID or .class */
});
</script>
</head>
<body>
<div data-role="panel" class="panel left panel-01" data-position="left" data-display="push" id="panel-01">
<ul data-role="listview" data-theme="a">
<li>My Profile</li>
<li>Recent Activities</li>
<li>FAQ </li>
<li>Terms and Use</li>
<li>Full Site</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div data-role="page" id="home" data-position="fixed">
<div data-role="header"> menu
<h1>Home</h1>
</div>
<div data-role="content" class="content">content
<div data-role="listview" style="margin:1em; border-radius:10px;">
<ul data-role="listview" style="margin:1em; border-radius:10px;">
<li>About us
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="about" data-position="fixed">
<div data-role="header"> menu
<h1>About us</h1>
</div>
<div data-role="content" class="content">About us
<div data-role="listview" style="margin:1em; border-radius:10px;">
<ul data-role="listview" style="margin:1em; border-radius:10px;">
<li>Home
</li>
</ul>
</div>
</div>
<div data-role="footer">
<!--<h4>Footer</h4>-->footer</div>
</div>
<div data-role="page" id="profile" data-position="fixed">
<div data-role="header"> menu
<h1>My Profile</h1>
</div>
<div data-role="content" class="content">About us
<div data-role="listview" style="margin:1em; border-radius:10px;">
<ul data-role="listview" style="margin:1em; border-radius:10px;">
<li>Profiles
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I'm testing this in Chrome and I'm getting:
Uncaught TypeError: undefined is not a function
The code was taken from different sources but seems to be a typical example of loading an external panel.
How do I correct the "undefined function" error?
You have to include jQuery mobile before on()
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
/* add panel */
$( document ).on( "mobileinit" , function() {
var panel = '<div>panel</div>';
$( "body" ).prepend( panel ); /* or .append */
});
</script>
Here's the fiddle
I am trying to make a simple 'recent posts' container similar to wordpress widget like this
The problem is I can't get the tabs to occupy full width and there some space left on the right side of each tab, I've tried to increase the padding but it's not accurate, also tried adding but even that didn't work.
Any help would be appreciated.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#popular" role="tab" data-toggle="tab">
Popular
</a>
</li>
<li>
<a href="#recent" role="tab" data-toggle="tab">
Recent
</a>
</li>
<li>
<a href="#comments" role="tab" data-toggle="tab">
Comments
</a>
</li>
</ul><!-- /.nav-tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="popular">
<ul class="popular-list list-normal">
<li>
<div class="text">
Sample Title for a Post
<p class="meta">
</div><!-- /.text -->
<div class="image">
</div><!-- /.image -->
</li>
</ul><!-- /.popular-list -->
</div><!-- /.tab-pane -->
<div class="tab-pane fade" id="recent">
Some Content Will obviously come here
</div><!-- /.tab-pane -->
<div class="tab-pane fade" id="comments">
Some Content Will obviously come here
</div><!-- /.tab-pane -->
</div><!-- /.tab-content -->
</div><!-- /.col-5 -->
</div><!-- /.row -->
</div><!-- /.container -->
Try this:
Use <ul class="list-group">,<li class="list-group-item">
DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#popular" role="tab" data-toggle="tab">Popular
</a>
</li>
<li>
<a href="#recent" role="tab" data-toggle="tab">Recent
</a>
</li>
<li>
<a href="#comments" role="tab" data-toggle="tab">Comments
</a>
</li>
</ul>
<!-- /.nav-tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="popular">
<ul class="list-group popular-list list-normal">
<li class="list-group-item">
<div class="text">
Sample Title for a Post
<p class="meta">
</div>
<!-- /.text -->
<div class="image">
</div>
<!-- /.image -->
</li>
</ul>
<!-- /.popular-list -->
</div>
<!-- /.tab-pane -->
<div class="tab-pane fade" id="recent">
Some Content Will obviously come here
</div>
<!-- /.tab-pane -->
<div class="tab-pane fade" id="comments">
Some Content Will obviously come here
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- /.col-5 -->
</div>
<!-- /.row -->
</div>
I am using jQuery but its not working in my webpage.
jquery-1.10.2.min.js is used for TAB and jquery.lightbox-0.5.js" is used for Photo gallery with jquery.js scripting file.
Now though it shows the tab buttons and the thumbnails of the gallery, when I click on the tabs the tab doesn't work and photo gallery doesn't work too.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.opacityrollover.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" />
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#photog a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="row-2">
<div class="main">
<div class="container_12">
<div class="grid_9">
<div id="logom">
<img src="images/logo-iie.png" width="43" height="54" alt="IIE LOGO" />
</div>
<h1>
<a class="logo" href="index.html">Indian Institute of Entrepreneurship</a>
<span>Clusters in North East Region</span>
</h1>
An Organisation of the Ministry Of Micro, Small and Medium Enterprises(MSME),<br>
Govt.of India
An ISO 9001:2008 Certified Organisation
</div>
<div id="logor"><img src="images/logo-rrc.png" width="51" height="54" alt="IIE LOGO" /></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row-1">
<div class="main">
<div class="container_12">
<div class="grid_12">
<!-- Main navigation -->
<nav class="main-navigation clearfix span12" role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>RRC Team</li>
<li>
Clusters
<ul class="sub-menu">
<li>Assam
<ul class="sub-menu">
<li>Sipajhar Handloom Cluster</li>
<li>Dhamdhama Handloom Cluster</li>
<li>Pyranga Eri Cluster</li>
<li>Rontholi Jewellery Cluster</li>
<li>Bogulamari Jute Cluster</li>
<li>Asharikandi Terracotta Cluster</li>
<li>Japi Cluster</li>
<li>Incense Sticks cluster</li>
</ul>
</li>
<li>Manipur
<ul class="sub-menu">
<li>Kouna Grass Cluster</li>
<li>Imphal Handloom Cluster</li>
<li>Greater Imphal Jewellery Cluster</li>
</ul>
</li>
<li>Mizoram
<ul class="sub-menu">
<li>Baktwang Wood Carpentry Cluster</li>
<li>Bairabi Bamboo cluster</li>
</ul>
</li>
<li>Sikkim
<ul class="sub-menu">
<li>Okhrey Carpet Making Cluster</li>
</ul>
</li>
<li>Tripura
<ul class="sub-menu">
<li>Hapania Jute Cluster</li>
</ul>
</li>
<li>Meghalaya
<ul class="sub-menu">
<li>Strawberry Cluster, Ri-Bhoi</li>
<li>Umden Eri Cluster</li>
<li>Cashew Nut Cluster, Selsela</li>
</ul>
</li>
<li>Arunachal Pradesh
<ul class="sub-menu">
<li>Tawang Carpet Making Cluster</li>
<li>Dirang Food Processing Cluster</li>
</ul>
</li>
</ul>
</li>
<li class="current">Photo Gallery</li>
<li>Contact</li>
</ul>
</nav> <!-- #main-navigation -->
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</header>
<!-- content -->
<section id="content">
<div class="bg-top">
<div class="bg-top-2">
<div class="bg">
<div class="bg-top-shadow">
<div class="main">
<div class="gallery p3">
<div class="wrapper indent-bot">
<span class="title img-indent3">Gallery</span>
<div class="cleaner_h10"> </div>
<!--------------------------------------->
<div id="w" class="clearfix">
<ul id="sidemenu">
<li>
<i class="icon-info-sign icon-large"></i><strong>Assam</strong>
</li>
<li>
<i class="icon-lightbulb icon-large"></i><strong>Manipur</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Mizoram</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Sikkim</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Tripura</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Meghalaya</strong>
</li>
<li>
<i class="icon-envelope icon-large"></i><strong>Arunachal</strong>
</li>
</ul>
<div id="contab">
<div id="assam-content" class="contabblock">
<h1>Assam</h1>
</div><!-- #end -->
<div id="manipur-content" class="contabblock hidden">
<h1>Manipur</h1>
</div><!-- #end -->
<div id="mizoram-content" class="contabblock hidden">
<h1>Mizoram</h1>
</div><!-- #end -->
<div id="sikkim-content" class="contabblock hidden">
<h1>Sikkim</h1>
</div><!-- #end -->
<div id="tripura-content" class="contabblock hidden">
<h1>Tripura</h1>
</div><!-- #end -->
<div id="meghalaya-content" class="contabblock hidden">
<h1>MIzoram</h1>
</div><!-- #end -->
<div id="arunachal-content" class="contabblock hidden">
<h1>Arunachal Pradesh</h1>
</div><!-- #end -->
</div><!-- #end #content -->
</div><!-- #end #w -->
<!--------------------------------------->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper2">
<div class="grid_4">
<div>© 2014 All right reserved</div>
<!-- {%FOOTER_LINK} -->
</div>
<div class="grid_4">
<div>Powered by: Third Eye</div>
</div>
<div class="grid_4">
<ul class="list-services">
<li></li>
<li><a class="item-2" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(function(){
$('#sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
});
</script>
</body>
</html>
I don't really know what your script does but just by reading it I see this problem:
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
So oldcontent and newcontent are a bunch of strings containing links (URLs) like "http://....." etc.
Then you're trying to make those "strings" fade:
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
I think something is missing in between...
i have one page which have some div with different id for move between div , i move to one of div by panel but when i return to main page list of item(panel) does not work. this is Part of the code.... What should I do
<div data-role="page" id="main" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>mainheader</h1>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item1</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="listpanel">
<ul data-role="listview" style="float:right">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</div>
<div data-role="header">
<h1>item2</h1>
</div>
<div data-role="navbar">
<ul class="ui-btn ui-corner-all">
<li>list</li>
<li>mainpage</li>
</ul>
</div>
<div data-role="content">Content</div>
</div>
I am using a grouped-buttons-widget and a listview-widget. My code is
<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
The problem is now the widgets appear just next to each other without any spacing in between.
What should I do to ensure desired space between these (and perhaps other) widgets?
I think you may try to add a simple <br> to separate the 2 components:
<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<br>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
Or you may try to play with margin-bottom, for example, try the following:
<div style="margin-bottom: 5px;" data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-controlgroup-controls" align="center">
<!-- ........ -->
</div>
</div>
<ul data-role="listview" id="mylist">
<li data-role="list-divider" role="heading" data-theme="b">
Sheet: Untitled1
</li>
<!-- ........ -->
<li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
Total:
</li>
</ul>
Hope this helps.
Let me know if these solutions work for you.