vivek mahadevan: October 2013

Thursday, October 31, 2013

C:\vivek\jquerymobile\netbeansEx\vivekmras\web\fixedheadermultiple.html

 1 <html> 
 2 <head> 
 3         <title>vivekmras.webhostingbuilders.com</title> 
 4         <meta name="viewport" content="width=device-width,user-scalable=no">
 5         <script src="viscpt.js"></script>
 6         <style>
 7             #fixhed{
 8                 
 9 position: fixed;
10 width: 100%;
11 height: 40px;
12 top: 0px;
13 -webkit-margin-before: 0em;
14             }
15             
16         #fixhed td{  
17             width: 10%;
18             height: 40px;
19         }
20         .ui-content {
21             padding: 0px;
22         }
23         .ui-bar-a {
24             border:0px;
25             background: transparent;
26         }
27             </style>
28  </head> 
29 <body> 
30     <div data-role="header" data-position="fixed">
31         <h1></h1>
32 </div>
33     <div data-role="content">
34             <div id="fixhed"><table border="1" style="width: 100%;">
35                 <tr>
36                     <td></td>
37                     <td style="width: 80%;background:red;"></td>
38                     <td></td>
39                 </tr>
40             </table>
41             </div>
42             Adding Back buttons
43 
44 jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true. This can also be set via markup if the page div has a data-add-back-btn="true" attribute.
45 
46 If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.
47 
48 If you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute.
49         </div><!-- /content -->
50     
51 </body>
52 </html>

Thursday, October 24, 2013

scroll position mobile

<head>

<title>vivekmras.webhostingbuilders.com</title>

<meta name="viewport" content="width=device-width,user-scalable=no">

<script src="viscpt.js"></script>

</head>

<body>

<div data-role="page" id="one">

<div data-role="content" >

<h2>One</h2>

<div id="div1"></div>

<label for="text-1">Text input:</label>

<input type="text" name="text-1" id="text-1" value="">

<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">

<h4>Heading</h4>

<ul data-role="listview">

<li><a href="#">List item 1</a></li>

<li><a href="#">List item 2</a></li>

<li><a href="#">List item 3</a></li>

</ul>

</div>

</div>

<div data-role="footer" data-theme="d">

<h4>Page Footer</h4>

</div>

</div>

<script>

window.onload = function() {

var d = document.getElementById("div1");

var topPos = d.offsetTop;

/

console.log("onload-- document.body.scrollTop="+document.body.scrollTop);

console.log("onload-- window.innerHeight="+window.innerHeight);

console.log("onload-- document.body.scrollHeight="+document.body.scrollHeight);

};

window.onresize=function(){

var d = document.getElementById("div1");

var topPos = d.offsetTop;

console.log("onresize-- document.body.scrollTop="+document.body.scrollTop);

console.log("onresize-- window.innerHeight="+window.innerHeight);

console.log("onresize-- document.body.scrollHeight="+document.body.scrollHeight);

};

document.addEventListener('scroll', function (event) {

console.log("document.body.scrollTop="+document.body.scrollTop);

console.log("window.innerHeight="+window.innerHeight);

console.log("document.body.scrollHeight="+document.body.scrollHeight);

if (document.body.scrollHeight ==

document.body.scrollTop +

window.innerHeight) {

}

var d = document.getElementById("div1");

var topPos = d.offsetTop;

console.log("topPos="+topPos);

});

</script>

</body>

vivekmras.webhostingbuilders.com

One

Text input:

Heading

Page Footer

Wednesday, October 23, 2013

jquery mobile ios 5 > issue on zoom

https://github.com/jquery/jquery-mobile/issues/3690

http://zsprawl.com/iOS/2012/05/completely-disabling-zoom-in-jquery-mobile-1-1-0/

$(document).bind("mobileinit", function(){
//$.mobile.ignoreContentEnabled="true";
//$.mobile.zoom.enable( false );
//$.extend($.mobile.zoom, {locked:true,enabled:false})
});

<!DOCTYPE html>
<html>
<head>
<title>vivekmras.webhostingbuilders.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width,user-scalable=no">
<script src="viscpt.js"></script>
</head>
<body>
<style>
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page {
position: relative;
}
</style>
<p><a id="name1" href="#two" >Show page "two"</a></p>
<p><a id="name2" href="#one" >Show page "one"</a></p>
<div id="para">
<p>Hiya</p>
<p>Such interesting text, eh?</p>
</div>
<div id="para2">
<p>Hi vivek</p>
<p>Such interesting text, eh?</p>
</div>
<script>
$( '#name1' ).click(function() {
// $( '#para' ).hide( "slow" );
// $( '#para1' ).show( "slow" );
$.mobile.changePage( "#two", {
transition: "flip",
reverse: true
});

});
$( '#name2' ).click(function() {
// $( '#para1' ).hide( "slow" );
// $( '#para' ).show( "slow" );
$.mobile.changePage( "#one", {
transition: "flip",
reverse: true
});
});
</script>

<div data-role="page" id="one">

<div data-role="content" >
<h2>One</h2>
<label for="text-1">Text input:</label>
<input type="text" name="text-1" id="text-1" value="">
</div>

<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
</div>


<div data-role="page" id="two">

<div data-role="content" >
<h2>two</h2>

</div>

<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
</div>

</body>

</html>

Wednesday, October 9, 2013

useragent and input switch

<!DOCTYPE html>
<html>
<head>
<title>vivekmras.webhostingbuilders.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="login">

<label for="name">Login value:</label>
<input type="text" name="name" id="name" value="" />

<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />

<button type="submit" data-theme="e" >Submit</button>

</div>
<script>
function isNumberKey(evt, y){
var next=y.tabIndex;
console.log('next='+next);
document.getElementById("passwrdnew").focus();

var charCode = (evt.which) ? evt.which : event.keyCode;
alert("charCode="+charCode);
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1) && (userAgent.search("chrome") > -1)){
alert("android mobile chrome");
}

var mytextvalue = document.getElementById("passwrd").value;
// alert("mytextvalue="+mytextvalue);
//var str="myfile.doc";
//alert(mytextvalue);
if(mytextvalue.toString().indexOf('-') !== -1){
alert("value avialable");
}
var value = evt.target.value;
// alert("value="+value);
if(mytextvalue==="1-"){
//alert("value="+mytextvalue);
}

var charCode = (evt.which) ? evt.which : event.keyCode;
//alert("charCode="+charCode);
if(charCode === 45 || charCode === 46 ){
// alert("1");
//var string = "Hello";
var str = mytextvalue.substring(0, mytextvalue.length);
//alert(str);
document.getElementById("passwrd").value=str;
//alert("value="+value);
return false;
}
if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode === 45 || charCode === 46 )){
//alert("charCode="+charCode);
//evt.preventdefault();
return false;
//setTimeout(function(){},1);
}else{
return true;
// evt.preventdefault();
}

}

document.getElementById("passwrdnew").keydown(function(event){
alert(event.keyCode);
});
</script>

<div id="login1">
<label for="password">Password:</label>
<input type="number" id="passwrd" tabindex="1" pattern="[0-9]*" onkeydown="return isNumberKey(event, this);"/>

<label for="login">login:</label>
<input type="text" id="passwrdnew" onkeydown="return isNumberKey(event);"/>
</div>

</body>

</html>

Sunday, October 6, 2013

numeric input no dots or no hyphen android and iphone

<!DOCTYPE html>
<html>
<head>
<title>vivekmras.webhostingbuilders.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="login">

<label for="name">Login value:</label>
<input type="text" name="name" id="name" value="" />

<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />

<button type="submit" data-theme="e" >Submit</button>

</div>
<script>
function isNumberKey(evt){
var mytextvalue = document.getElementById("passwrd").value;
// alert("mytextvalue="+mytextvalue);
//var str="myfile.doc";
//alert(mytextvalue);
if(mytextvalue.toString().indexOf('-') !== -1){
alert("value avialable");
}
var value = evt.target.value;
// alert("value="+value);
if(mytextvalue==="1-"){
//alert("value="+mytextvalue);
}

var charCode = (evt.which) ? evt.which : event.keyCode;
if(charCode === 45 || charCode === 46 ){
// alert("1");
//var string = "Hello";
var str = mytextvalue.substring(0, mytextvalue.length);
//alert(str);
document.getElementById("passwrd").value=str;
//alert("value="+value);
return false;
}
if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode === 45 || charCode === 46 )){
//alert("charCode="+charCode);
//evt.preventdefault();
return false;
//setTimeout(function(){},1);
}else{
return true;
// evt.preventdefault();
}

}

</script>

<div id="login1">
<label for="password">Password:</label>
<input type="number" id="passwrd" pattern="[0-9]*" onkeypress="return isNumberKey(event);"/>

</div>

</body>

</html>