How to set active TAB on pagecreate in jQuery Mobile - javascript

I need to select first TAB as default when page is created in jQuery Mobile.
Using official example is not clear how to do it. http://demos.jquerymobile.com/1.4.2/tabs/
Any clue?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>


Use Below Code // Add 'ui-btn-active' to which tab you want to set active
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>

Related

drop down menu not work after including in a div

I have a header with dropdown menu on my home page but if i put the header div into another html file and after that if i include it in my home page using jquery load function than the drop-down menu is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="myid">
</div>
<script>
$(function(){
$("#myid").load("header.html");
});
</script>
<script src="js/cbpHorizontalMenu.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
cbpHorizontalMenu1.init();
});
</script>
</body>
</html>
*****The header content*****
<header class="header">
<div class="layout">
<div class="top-header">
<div class="top-right">
<div class="nav-toggler">
<button class="toggle-link hidden-bar-opener" data-pixel=".top-menu">Top Menu</button>
</div>
<div class="layout">
<div class="top-menu cbp-hrmenu1">
<ul>
<li><span class="fa fa-plus"></span> Our Services
<div class="service-drop cbp-hrsub">
<div class="cbp-hrsub-inner">
<ul>
<li>football</li>
<li>cricket</li>
<li>hockey</li>
</ul>
</div>
</div>
</li>
<li>
<span class="fa fa-plus"></span> Contact Us
<div class="service-drop cbp-hrsub">
<div class="cbp-hrsub-inner">
<ul>
<li><i class="fa fa-phone-square" aria-hidden="true"></i> +91-99863355333</li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i> +91-124382428</li>
<li><i class="fa fa-skype" aria-hidden="true"></i> skype</li>
<li><i class="fa fa-envelope" aria-hidden="true">mail me </i></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-menu">
<div class="layout">
<div class="nav-toggler">
<button class="toggle-link hidden-bar-opener" data-pixel=".main-menu1"><i class="fa fa-bars"></i></button>
</div>
<nav class="main-menu1 cbp-hrmenu">
<ul>
<li>
Category one
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li>test </li>
<li>test </li>
<li>test </li>
<li>test </li>
<li>test</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Category two
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
</header>
if i copy the content of header in the div than it is working fine. But i want to include it on every page of my site.
Here is the live example http://plnkr.co/edit/51vGFoI7aJF1HUE3Wim9

The issue is because the content is loaded asynchronously, and you try an initialise the menu before it's in the DOM. You need to instead put the initialisation in the callback of load(). Try this:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/cbpHorizontalMenu.js"></script>
<script>
$(function(){
$("#myid").load("header.html", function() {
cbpHorizontalMenu.init();
cbpHorizontalMenu1.init();
});
});
</script>
</head>
<body>
<div id="myid"></div>
</body>

if it's in PHP you can name it like header.php
2.then include it <? include('header.php'); ?>
put that line of code in the top or where div you want

jQuery Mobile Undefined is not a function

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>

jQuery is not working in webpage?

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...

jQuery Mobile: Spacing the widgets in a page

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.

jQuery UI Widget has no method 'uniqueId'

I am trying to make jQuery UI widget work in my web application
I got all the files from original demo, and basically did everything I could so the code and files were pretty much the same as in demo version.
And all the time get this error: Uncaught TypeError: Object [object Object] has no method 'uniqueId'
Here is js code:
$(function () {
var date = new Date();
date.setDate(date.getDate() + 1);
$(".calendar", ".add-item").datepicker({
showAnim: "drop",
dateFormat: "yy-dd-mm",
minDate: date
});
$("#bar1").menubar({
position: {
within: $("#demo-frame").add(window).first()
}
});
$(".menubar-icons").menubar({
autoExpand: true,
menuIcon: true,
buttons: true,
position: {
within: $("#demo-frame").add(window).first()
}
});
$("#bar3").menubar({
position: {
within: $("#demo-frame").add(window).first()
},
items: ".menubarItem",
menuElement: ".menuElement"
});
});
Here are included files:
<script src="#Url.Content("~/content/js/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery-ui-1.8.21.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.position.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.button.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.menu.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.menubar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/main.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/css/main-admin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/css/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
And here is plain html:
<div class="header">
<div class="demo">
<ul id="bar1" class="menubar">
<li>File
<ul>
<li>Open...</li>
<li class="ui-state-disabled">Open recent...</li>
<li>Save</li>
<li>Save as...</li>
<li>Close</li>
<li>Quit</li>
</ul>
</li>
<li>Edit
<ul>
<li>Copy</li>
<li>Cut</li>
<li class="ui-state-disabled">Paste</li>
</ul>
</li>
<li>View
<ul>
<li>Fullscreen</li>
<li>Fit into view</li>
<li>Encoding
<ul>
<li>Auto-detect</li>
<li>UTF-8</li>
<li>UTF-16
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</li>
<li>Customize...</li>
</ul>
</li>
</ul>
<ul id="bar2" class="menubar-icons">
<li>File
<ul>
<li>Open...</li>
<li class="ui-state-disabled">Open recent...</li>
<li>Save</li>
<li>Save as...</li>
<li>Close</li>
<li>Quit</li>
</ul>
</li>
<li>Edit
<ul>
<li>Copy</li>
<li>Cut</li>
<li class="ui-state-disabled">Paste</li>
</ul>
</li>
<li>View
<ul>
<li>Fullscreen</li>
<li>Fit into view</li>
<li>Encoding
<ul>
<li>Auto-detect</li>
<li>UTF-8</li>
<li>UTF-16
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</li>
<li>Customize...</li>
</ul>
</li>
</ul>
<div id="bar3" class="menubar">
<div class="menubarItem">
File
<div class="menuElement">
<div>
Open...</div>
<div class="ui-state-disabled">
Open recent...</div>
<div>
Save</div>
<div>
Save as...</div>
<div>
Close</div>
<div>
Quit</div>
</div>
</div>
<div class="menubarItem">
Edit
<div class="menuElement">
<div>
Copy</div>
<div>
Cut</div>
<div class="ui-state-disabled">
Paste</div>
</div>
</div>
<div class="menubarItem">
View
<div class="menuElement">
<div>
Fullscreen</div>
<div>
Fit into view</div>
<div>
Encoding
<div class="menuElement">
<div class="ui-state-disabled">
Auto-detect</div>
<div>
UTF-8</div>
<div>
UTF-16
<div class="menuElement">
<div>
Option 1</div>
<div>
Option 2</div>
<div class="ui-state-disabled">
Option 3</div>
<div>
Option 4</div>
</div>
</div>
</div>
</div>
<div>
Customize...</div>
</div>
</div>
</div>
</div>
</div>

Remove inclusion of:
<script src="/content/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

uniqueId is a new function introduced with jQuery 1.9.x. I assume youre using a dev Widget (aka out of the master branch at GitHub) with jQuery 1.8.x.

It seems to me that you have not included all required source (.js) files. Either that or your URL is wrong.
It may be easier to include just one UI bundle from this page:
http://jqueryui.com/download/
That way you know that you have all required source?

Categories

Resources