i have jquery mobile list view.
can anybody help me please, to customize this listview.
i want to customize the separator between list, so its will look like this
here is my code
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css"/>
<div data-role="page" id="mainn">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
</div>
<div data-role="content">
<ul id="promoList" data-role="listview" >
<li>
<img src="airasia.jpg" >
<span class="ui-li-count">test 123</span>
</li>
<li>
<img src="d1380513326.jpg">
<span class="ui-li-count">test 124</span>
</li>
</ul>
</div>
</div>
Related
Hi saw that there was another post with the same title "https://stackoverflow.com/questions/27645823/referenceerror-handlebars-is-not-defined" as this but the problem does not look to be the same. I'm trying to build a single page app but I keep getting the "Uncaught ReferenceError: handlebars is not defined" error in the console. The network tab on the console looks to show that the handlebars.min.js is being loaded.
You are invoking handlebars before it is getting loaded. Move your script that compiles handlebars to body like below.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/bin/materialize.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script type="text/x-handlebars-template" id="main-template">
<h1>Loaded main template</h1>
</script>
<button class="clear-screen">Click Me</button>
<nav>
<div class="nav-wrapper" id="nav-color">
Logo
<i class="mdi-navigation-menu"></i>
<ul class="side-nav" id="mobile-demo">
<li><i class="mdi-action-home left"></i>Home</li>
<li><i class="mdi-content-add left"></i>Add Card</li>
<li><i class="mdi-navigation-close left"></i>Remove Card</li>
<li><i class="mdi-action-stars left"></i>Get Premium</li>
<li><i class="mdi-action-settings left"></i>Settings</li>
</ul>
</div>
</nav>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="flybuys"><span id="flybuys-text">FlyBuys</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="airpoints"><span id="airpoints-text">Airpoints</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="onecard"><span id="airpoints-text">OneCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="summitclub"><span id="summit-text">Kathmandu Summit Club</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="clubcard"><span id="new-world-text">New World ClubCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
</ul>
<!-- Modal Trigger -->
<a id="btn-color" class="waves-effect waves-light btn modal-trigger" href="#modal1">Add More</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Get Premium</h4>
<p>To have more than 5 card you need Premium, this gives you the ability to have unlimited card! Get it now for only $1.</p>
</div>
<div class="modal-footer">
Not now
Get Premium
</div>
</div>
<div class="content">
init content
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var template = handlebars.compile( $('#main-template').html() );
$(document).on('click','.clear-screen', function(){
$('.content').html( template() );
});
</script>
</body>
</html>
in my previous project , i have used the foundation 4 open source. that time i have got a top bar navigation. but now am again trying new project with foundation. for that i have downloaded http://foundation.zurb.com/develop/download-f4.html that is foundation4.3.2 version. i have refereed the foundation 4.3.2 version css and js in my new project, but the top-bar not coming its showing like tree view without any effort of foundation ?
if i refer the foundation 4 , top - bar is working...
then
why Top-bar not working while i refereeing the foundation 4.3.2 version ?
HTML code
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</ul>
</section>
</nav>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
Note: There is no error i found out at run time.. but my web page showing like tree view ( i used ul and li element) without any effort of foundation 4.3.2 version.
My web page should look like below image
The following should work:
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Options
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Configuration
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>');
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
I've done a few things here. First and foremost, I just formatted the code so it could be read easier. Second, I removed the call to foundation.min.js in the head. You're calling foundation.min.js at the foot of the body, and including it twice can cause confusion with naming variables. I also removed your call to foundation.topbar.js because this file is included in the minified script you've already included. Last I re-worked your dropdown menus so that Foundation could interpret them properly. Foundation expects to the dropdown menu to be within the parent li element. I also made the dropdown li text into anchors in accord with Foundation documentation.
Oh, and I added a semi-colon to the document.write() statement that includes jQuery/zepto.
This is not foundation 4.3.2 version problem. actually i have made some changes in foundation.css itself.. that made the problem for my web page. after i deleted changes made in the foundation.css then got the top-bar navigation.
So we dont make changes in the foundation.css itself.
better we can create customized css for our references.
I am relatively new to javascript and I am using a 'plugin' you can find here:
https://github.com/VinceG/twitter-bootstrap-wizard
when I implement this code everything works fine except when the page starts no tabs are selected.
I wish the first tab to be selected. Reading through the code it would seem the following code is meant to do this
this.fixNavigationButtons = function() {
// Get the current active tab
if(!$activeTab.length) {
// Select first one
$navigation.find('a:first').tab('show');
$activeTab = $navigation.find(baseItemSelector + ':first');
}
Anyone familiar with this plugin?
the code I am using is exactly the one on this page
http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-pills.html
UPDATE:
here is my markup code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Form Prototype</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="rootwizard">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--Form Wizard-->
<script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<!--Interaction script-->
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
and test.js
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});
I'm experiencing issues with the drawer in my asp.net mvc mobile application. After a lot of hassle (and possibly a few bugs in the asp.net mvc helpers) I decided to roll back to a javascript layout for my app.
The only problem I have is that I've implemented a drawer-menu that does not seem to work properly.
For some reason, Kendo generates a # in the middle of my url, causing the drawer to not show.
This is the url when it doesn't work:
http://localhost:55683/#/UnitDetails/Index/2
And here it is when it works:
http://localhost:55683/UnitDetails/Index/2#/
Here's my markup in my shared _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.mobile.min.js"></script>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#RenderBody()
<!--Main Layout -->
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a data-icon="action" href="~/Logout">Logout</a>
</div>
</div>
</div>
</body>
</html>
And here's the Index.cshtml of my UnitDetails-view:
<!-- Drawer layout -->
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
#*<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>*#
<a data-align="right" data-role="backbutton">Back</a>
</div>
</header>
</div>
<div id="drawer-home" data-role="view" data-layout="drawer-layout" data-title="Unit Details">
<!-- Content removed for readability -->
<div data-role="footer">
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox">Inbox</li>
</ul>
</li>
</div>
<script>
window.app = new kendo.mobile.Application(document.body, {
layout: "drawer-layout",
transition: "fade",
skin: "flat",
hideAddressBar: true
});
</script>
There was a bug with the kendo mobile drawer 2013.2.918 and was fixed with a later internal build. Try some debugging by removing the data-views attribute from the drawer. But this will cause the drawer to be displayed in all views via swipe.
I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>
The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});