Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
Related
I have a jquery code that adds the tel: link to a style in a span around a phone number but it only works for one phone number. I have a page with 20 different phone numbers and when I add the style to all of the phone numbers it will populate all 20 tel: links with the last phone number in the list to all of the tel: links.
How can I make the tel: link for each phone number populate correctly? Currently It populates just the last phone number in the list to all of the tel: links.
Any help would be much appreciated!
$(document).ready(function() {
// if Modernizr detects class "touch"
if($('html').hasClass('touch')) {
// for each element with class "make-tel-link"
$(".make-tel-link").each(function () {
//$.each(".make-tel-link", function () {
var jPhoneNumber = $(this).text();
// wrap phone with href="tel:" and then insert phone number
$(this).wrapInner('<a class="jPhoneLink" href=""></a>');
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
});
}
});
Here is an example of the markup.
<!DOCTYPE html>
<html class="touch">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="codiqa.ext.js"></script>
<script src="modernizr.custom.39046.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<div id="head"> <strong>Contacts</strong></div>
<div data-role="navbar" data-iconpos="left">
<ul>
<li>
<a href="index.php" data-transition="fade" data-theme="" data-icon="">
home
</a>
</li>
<li>
<a href="3.php" data-transition="fade" data-theme="" data-icon="">
contact
</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
<h1>CONTACT US</h1>
<div class="layout">
<h4>Headquarters</h4>
4235345 High bar<br />
Suite 345<br />
Quence, AL 45205
<br />
<h4>Customer Service</h4>
info#fgfghgdgh.com<br />
<span class="make-tel-link">888-555-5555</span><br />
<span class="make-tel-link">800-555-5555</span><br />
<span class="make-tel-link">866-555-5555</span><br />
</div><br />
</div>
</div>
</div>
</body>
</html>
you can create the link first and in there set its attributes and the wrap it
$(function(){
$.each($(".make-tel-link"), function () {
//replace all instances of '-'
var jPhoneNumber = $(this).text().replace(/-/g,'');
var link = $('<a />', {class: 'jPhoneLink', href: 'tel:'+jPhoneNumber});
$(this).wrapInner(link);
});
});
working example
http://jsfiddle.net/pUkUb/3/
Edit:
the problem in your script is here:
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
you are assigning the attribute to all the elements that have that class, not the one you just created
I am trying to set focus to the input box and showing android keyboard using jquery mobile on pageshow.
I tried a lot of options from web. but none is working as expected in both emulator and mobile.
Here is the Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" id="main">
<div data-role="header"><h3>Set Focus, Show Keyboard</h3></div>
<div data-role="content">
<label for="gotoPage"></label>
<input type="text" name="gotoPage" id="gotoPage" placeholder="Question No." data-mini="true" />
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('pageinit',"[data-role=page]", function() {
});
$(document).on('pagebeforeshow',"[data-role=page]", function() {
});
$(document).on('pageshow',"[data-role=page]", function() {
$('#gotoPage').focus().select();
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>
Find the Screen shots for reference
Kindly advice... Thanks in advance...
NOTE:
As per Omar comment it is working fine in ios....
anyone can suggest how we get work this in android?
The solution which works for me:
$("#main").on("pageshow" , function() {
$('#gotoPage').focus();
});
I am using cordova for mobile app development on android platform.
I have this html code in www/index.html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="JS/main.js" type="text/javascript"></script>
<link rel="stylesheet" href="CSS/main.css"/>
</head>
<body id="body" class="body">
<div id="box" class="bodyBlack">
</div>
</body>
</html>
I don't know why but when I am running this app (also when just opening on pc browser) i am having this div appended at the bottom of the page:
<div ui-loader ui-corner-all ui-body-a ui-loader-default>
<span ui-loader ui-corner-all ui-body-a ui-loader-default></span>
<h1>loading</h1>
Here is the content of main.js:
$(document).ready(function(){
$('#box').click(function(){
if($(this).attr('class') == 'bodyBlack'){
$(this).removeClass('bodyBlack');
$(this).addClass('bodyWhite');
}
else{
$(this).removeClass('bodyWhite');
$(this).addClass('bodyBlack');
}
});
});
Why and from where dose it getting from? how I am preventing it to do so?
Thanks!!!
This seems to be a "Loading Message" generated by jQuery Mobile, see this answer. So jQuery Mobile is loading something (and cant't find it, perhaps). Please post the content of your main.js file if you're still having trouble!
i have used nested frames,
<!DOCTYPE html>
<html>
<head>
</head>
<frameset rows="200px,500px">
<frame src="topBar.html" > <!-- top frame -->
<frameset cols="30%,70%">
<frame src="leftBar.php" noresize /> <!-- left frame-->
<frame src="rightBar.php" name="rightBar" id="rightBar" frameborder="yes" style="overflow:scroll"/> <!-- left frame--> <!-- right frame-->
</frameset>
</frameset>
</html>
the rightBar.php is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link href="style/jquery.mobile.scrollview.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile.scrollview.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
$('#page').scroll();
var data = 'cat=drinks' ;
$.ajax
(
{
url:'rgh.php',
type: "POST",
data:data,
success: function (data)
{
$("#loadContent").html(data);
}
}
)
$(".closeBtn").click(function(){
$(".QTPopup").css('display', 'none');
})
});
</script>
</head>
<body>
<div data-role="page" id="page" data-rel="dialog" data-transition="pop">
<div data-role="content" data-position="fixed">
<ul data-role="listview" id="loadContent" data-filter="true" data-scroll="true">
</ul>
</div>
</div>
</body>
</html>
when user clicks the leftBar.php 's options it reflects on rightBar.php and shows the content dynamically, the browser shows the Scroll Bar only for rightBar frame which is fine on PC, but it is not showing on Android device, it shows whole scroll bar to webview, i need only rightBar frame to show scroll-bar in Android webview ? so can anyone help me ?
I need to make a call by android phoneGap application with sencha touch button.
I have found an iphone plugin to make calls from phoneGap application.
I has not found any plugins or anything for android.
Please help.
thanks in advance
Use this line to make a phone dialer to display
<a href="#" rel="external" id="ext" onclick="document.location='tel:123456'" > </a>
When I look in my Phonegap 1.5.0 Example index.html for Android I see this code:
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body onload="init();" id="stage" class="theme">
<h1>Welcome to PhoneGap!</h1>
<h2>this file is located at assets/www/index.html</h2>
<div id="info">
<h4>Platform: <span id="platform"> </span>, Version: <span id="version"> </span></h4>
<h4>UUID: <span id="uuid"> </span>, Name: <span id="name"> </span></h4>
<h4>Width: <span id="width"> </span>, Height: <span id="height">
</span>, Color Depth: <span id="colorDepth"></span></h4>
</div>
<dl id="accel-data">
<dt>X:</dt><dd id="x"> </dd>
<dt>Y:</dt><dd id="y"> </dd>
<dt>Z:</dt><dd id="z"> </dd>
</dl>
Toggle Accelerometer
Get Location
Call 411
Beep
Vibrate
Get a Picture
Get Phone's Contacts
Check Network
<dl>
<dt>Compass Heading:</dt><dd id="h">Off</dd>
</dl>
Toggle Compass
<div id="viewport" class="viewport" style="display: none;">
<img style="width:60px;height:60px" id="test_img" src="" />
</div>
</body>
</html>
Notice this line: Call 411 When you click that button, you'll be calling 411. :)