i am working on script where i have to open pop up after click on window . but after click on window the function executing twice
.How to resolve this ?
ie after click on window two popup opening . but after click on function the function executing twice
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Best Popunder Script Ever # ScratchingCodes.com</title>
<meta name="description" content="Best Popunder Script Ever Demo and Download" >
<meta name="author" content="Mr. Farhan Saleem ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="testSubmit" >
<header class="txt-center">
<h1>Best Popunder Script Ever Demo and Download</h1>
<br>
<h3>Please click on Button</h3>
<form action="">
<input type="submit" />
</form>
<script type="text/javascript">
(function($) {
$.popunder = function(sUrl) {
var bSimple = $.browser.msie,
run = function() {
$.popunderHelper.open(sUrl, bSimple);
};
(bSimple) ? run() : window.setTimeout(run, 1);
return $;
};
$.popunderHelper = {
rand: function(name, rand) {
var p = (name) ? name : 'pu_';
return p + (rand === false ? '' : Math.floor(89999999*Math.random()+10000000));
},
open: function(sUrl, bSimple) {
var _parent = self,
sToolbar = (!$.browser.webkit && (!$.browser.mozilla || parseInt($.browser.version, 10) < 12)) ? 'yes' : 'no',
sOptions,
popunder;
if (top != self) {
try {
if (top.document.location.toString()) {
_parent = top;
}
}
catch(err) { }
}
sOptions = 'toolbar=' + sToolbar + ',scrollbars=yes,location=yes,statusbar=yes,menubar=no,resizable=1,width=800,height=510';
sOptions += ',height=' + (screen.availHeight - 122).toString() + ',screenX=0,screenY=0,left=0,top=0';
var a = $('#dialog').clone().html();
var popunder = _parent.window.open(sUrl, $.popunderHelper.rand(), sOptions);
var yourDOCTYPE = "<!DOCTYPE html>";
var printPreview = _parent.window.open('about:blank', 'print_preview', "menubar=1,resizable=1,width=1024,height=600");
var printDocument = printPreview.document;
printDocument.open();
printDocument.write(yourDOCTYPE+ "<html>"+ a + "</html>");
if (popunder) {
popunder.blur();
if (bSimple) {
window.focus();
try { opener.window.focus(); }
catch (err) { }
}
else {
popunder.init = function(e) {
with (e) {
(function() {
if (typeof window.mozPaintCount != 'undefined' || typeof navigator.webkitGetUserMedia === "function") {
var x = window.open('about:blank');
x.close();
}
try { opener.window.focus(); }
catch (err) { }
})();
}
};
popunder.params = {
url: sUrl
};
popunder.init(popunder);
}
}
return true;
}
};
})(jQuery);
$(window).unbind().click(function() {
jQuery.popunder('#');
console.log('ok');
});
</script>
</header>
<div id="dialog" class="window">
My Window Content
<div id="popupfoot">
<a href="#" class="close agree" id="close">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<p class="txt-center" style="font-size:14px;" >
<img src="http://scratchingcodes.com/wp-content/uploads/2015/05/Scratching-codes-logo-orange1.png">
<br>
Back to the post </p>
<br>
<footer class="txt-center"> Designed and Developed by <a href="http://scratchingcodes.com/" > Scratching Codes </a> </footer>
</div>
</body>
</html>
Why don't you use the Bootstrap Modal?
http://getbootstrap.com/javascript/#modals
You could try this [pseudocode]
var flag = false;
on click do
if flag === true;
return false;
flag = true;
//do your stuff here
flag = false
end click
your concept of clicking on window and opening the popup is wrong , every time you click on any element the window will popup , which is very disturbing thing , you should implement some trigger for opening the popup , or specify why you want this to be happen.
like to your :
<input type="submit" />
give an id or a class:
<input type="submit" id="open_popup"/>
then change your function from this:
$(window).unbind().click(function() {
jQuery.popunder('#');
console.log('ok');
});
to this
$('#open_popup').click(function() {
jQuery.popunder('#');
console.log('ok');
});
but till you don't provide the information about why and how you want it to react . can't help more
Related
What am I doing?
I'm try running two function in order but JavaScript is calling and running two function in same time.
What's the problem?
The setModalBox function give undefined error if is called before setProjects function.
What have I already tried?
I tried used Promise with setTimeout it work, but can sometimes setModalBox function be called before and give of same error.
Part of JavaScript:
class Portifolio{
init() {
this.setProjects();
// this.setModalBox();
}
setProjects() {
let response_promise = fetch("contents/projects.json")
document.addEventListener("DOMContentLoaded", function() {
response_promise.then(response => response.json().then(projects => {
// ? Gradient in border for each color language
for(let project in projects){
// Div project
var div = document.createElement("div");
div.className = "project";
div.id = `project-${projects[project].name}`
document.querySelector(".projects").appendChild(div);
// Tittle project
var h1 = document.createElement("h1");
h1.className = "tittle-project";
h1.innerHTML = projects[project].name;
document.querySelector(`#project-${projects[project].name}`).appendChild(h1);
// Paragraph project
var p = document.createElement("p");
p.className = "about-project";
p.innerHTML = projects[project].about;
document.querySelector(`#project-${projects[project].name}`).appendChild(p);
}
}))
}, false)
return new Promise((resolve, reject)=>{
setTimeout(()=>{
this.setModalBox()
}, Math.random() * 2000)
})
};
setModalBox(){
let projectsLength = document.querySelectorAll(".projects")[0].children.length;
let modalBox = this.modalBox;
for(let i = 0; i <= projectsLength; i++){
let projectsAll = document.querySelectorAll(".projects")[0].children[i];
// That "try" is for not to show error in console
try{
// Open Modal Box
projectsAll.onclick = function(){
modalBox.style.display = "block"
};
}catch{}
// Close Modal Box, when click at "X"
this.modalBoxClose.onclick = function(){
modalBox.style.display = "None"
};
// Close Modal Box, when click out of Modal Box
window.onclick = function(){
if(event.target == modalBox){
modalBox.style.display = "None"
}
}
// Close Modal Box, when press esc key
document.addEventListener("keydown", function(event){
if(event.key == "Escape"){
modalBox.style.display = "None"
}
})
}
}
}
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projetos - Vitor Hugo's Portifolio</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<header>
<div id="wrapperJS" style="position: relative; overflow: hidden">
<nav>
<a class="logo" href="/">Vitor Hugo</a>
<div class="mobile-menu">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<ul class="nav-list">
<li>Home</li>
<li>Sobre</li>
<li>Projetos</li>
<li>Contato</li>
</ul>
</nav>
</div>
</header>
<script src="mobile-screen.js"></script>
<!-- Boxes -->
<div class="projects"></div>
<!-- Modal Boxes -->
<div class="modal-box">
<div class="modal-box-contents">
<span class="modal-box-close">×</span>
<p>test</p>
</div>
</div>
</body>
</html>
What I have to do? please help me. If need more information,ask. And sorry for any error orthography and grammar I am studing English.
Try async/await.
For example you can do it like this:
const setProjects = async () => {
try {
await // Put your code here
}catch (err){
console.log(err)
}
};
Then :
setProjects().then(setModalBox());
Now your functions will be executed in an order.
You can just call setModalBox at the end of the DOMContentLoaded event handler.
I and my course mate are trying to write a code where when the order button is clicked it should save on local storage and redirect to an order page.
So far when we click on order it is not registered in the application/local storage section of the google developer tool and thus does not redirect to a new page.
We put an eventlistener to show a console.log for when we click, just to be sure the buttons are in order(this part is not important).
We also used an online javascript validator to eliminate typos and errors.
Also do we need any specific code on the order.html file to interface with local storage?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>grc</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Groceries</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<aside><img class="imgclass1" src="images/rounded logo.png" alt="Grocer Nigeria"></aside>
<article class="preinventory">
<section class="columns-desktop">
<div class="inventory">
<img class="sales" src="images/tomato.jpg" alt="Tomato"/>
<div class="columns">
<div class="title">Tomato</div>
<div class="Price">$100</div>
</div>
<p class="Desc"> Our Tomato2</p>
<button data-order="Tomato2">Order</button>
</div>
<div class="inventory">
<img class="sales" src="images/tomato.jpg" alt="Tomato"/>
<div class="columns">
<div class="title">Tomato</div>
<div class="Price">$100</div>
</div>
<p class="desc"> Our Tomato</p>
<button data-order="Tomato">Order</button>
</div>
</section>
</article>
</main>
<footer>
<nav>
<ul>
<li>Home</li>
<li>Groceries</li>
<li>Contact</li>
</ul>
</nav>
</footer>
<script type="text/javascript">
window.addEventListener("DOMcontentLoaded", function(e){
const orderButtons= document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click",function(e){
const button= e.currentTarget;
const container= button.parentNode;
const order={
id:button.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price1: container.querySelector(".Price").innerText,
desc:container.querySelector(".desc").innerText
};
localStorage.setItem('order', JSON.stringify(order));
const url = window.location.href.replace("grc.html","order.html");
window.location.href = url;
});
});
});
window.addEventListener("DOMcontentLoaded", function(e){
console.log("The page is loaded.");
});
const orderButtons= document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click", function(e){
console.log("The button was clicked.");
});
});
</script>
</body>
</html>
**Below is what I see when I run the live server**
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function() {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
head.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
head.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function(msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
console.log('Live reload enabled.');
})();
}
// ]]>
</script>
</body>
</html>
The issue here is that the event DOMContentLoaded does not fire.
Here is how I have used the load event instead; for redirection, I have simply used URL search params (because I don't know what your other html file looks like) although you may use your other html document instead.
The snippet is below
However note: Stackoverflow will not allow the JavaScript to run, and will throw a securityError. To run this code you must save it on your computer or use a jsFiddle
function continue_ordering() {
alert("Now continue with order");
};
window.addEventListener("load", function(e) {
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
const button = e.currentTarget;
const container = button.parentNode;
const id = button.getAttribute("data-order");
const order = {
id,
title: container.querySelector(".title").innerText,
price1: container.querySelector(".price").innertext,
desc: container.querySelector(".desc").innerText
};
localStorage.setItem("order-" + id, JSON.stringify(order));
window.location.search = "?ordering=true&order-id=" + id;
});
});
});
window.addEventListener("load", function(e) {
if (window.location.search.search("ordering=true") != -1) {
console.log("User is ordering");
const params = new URLSearchParams(location.search)
const id = params.get("order-id");
if (!id || id == null) throw "There is no order id, error. Remove the ?ordering=true from the url and try again.";
const order_info = JSON.parse(localStorage.getItem("order-" + id));
if (!order_info) throw "Order information is not present: try ordering again. Remove the ?ordering=true from the url";
console.log("Order info is:\n", order_info);
document.getElementById("ordering").removeAttribute("hidden");
return;
};
document.getElementById("make-order").removeAttribute("hidden");
});
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
console.log("The button was clicked.");
});
});
<div id="make-order" hidden>
<button data-order="test">Order</button>
<div class="title">This is the title</div>
<div class="price">130 USD</div>
<div class="desc">Lorem</div>
</div>
<div id="ordering" hidden>
<h1>
You are ordering.
<br> Choose
Stop ordering Or Continue with order
</h1>
</div>
The DOMcontentLoaded event has already fired by the time that code hooks it.
Check this post;
Code inside DOMContentLoaded event not working
I am working on the tablet's display of a Pepper robot; I have a functional HTML index page comprising a list of questions—each question redirects to its respective HTML when clicked on—, 2 volume buttons and 2 other buttons—one that pops up an instruction image and the other one that closes the index page and gets back to the splash screen, which when clicked upon, reveals the index page. So far everything is working. The issue is that when I click a question—I get redirected to its HTML page, but then I get stuck there, as neither the 2 volume buttons nor the 2 other buttons work;
I made sure to include the following in each HTML page:
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
I also reused the same JavaScript functions that worked for the index page.
I commented out some line:
btnPrevious.addEventListener('click', goToPreviousPage);
because I noticed it prevented the splash screen from disappearing when clicked on—i.e., the visibility attribute stays on visible instead of switching to hidden thus revealing the index page, but still, the 3 remaining buttons don't work anyway.
Here is my faq.js code:
/* global QiSession */
var serviceName = 'ADFAQ';
var volumeUpEvent = serviceName + '/VolumeUp';
var volumeDownEvent = serviceName + '/VolumeDown';
var volumeData = serviceName + '/Volume';
/* Clickable buttons */
var btnReturn = document.getElementById('return');
var btnHelp = document.getElementById('call_help');
var btnPrevious = document.getElementById('previous_page');
var btnVolUp = document.getElementById('volume-up');
var btnVolDown = document.getElementById('volume-down');
/* Help image and splash screen */
var helper = document.getElementById('helper');
var img = document.getElementById('click_on_me');
var memory;
var volume;
var audioDevice;
QiSession(connected, disconnected);
function connected (s) {
console.log('QiSession connected');
var questions = document.getElementById('questions');
/* Associating buttons to their respective functions */
btnHelp.addEventListener('click', showHelper);
btnReturn.addEventListener('click', closeQuestions);
//btnPrevious.addEventListener('click', goToPreviousPage);
btnVolUp.addEventListener('click', raiseVolume);
btnVolDown.addEventListener('click', lowerVolume);
img.addEventListener('click', loadQuestions);
questions.addEventListener('click', clickOnQuestion);
s.service('ALMemory').then(function (m) {
m.subscriber(serviceName + '/DialogEnded').then(function (subscriber) {
subscriber.signal.connect(hideQuestions);
});
m.subscriber(serviceName + '/Pepper').then(function (subscriber) {
subscriber.signal.connect(displayPepperHTML)
});
m.subscriber(serviceName + '/RaiseVolume').then(function (subscriber) {
subscriber.signal.connect(raiseVolume);
});
m.subscriber(serviceName + '/LowerVolume').then(function (subscriber) {
subscriber.signal.connect(lowerVolume);
});
memory = m;
});
s.service('ALAudioDevice').then(function (a) {
a.getOutputVolume().then(assignVolume);
audioDevice = a
});
}
function disconnected () {
console.log('QiSession disconnected');
}
function assignVolume(value){
volume = value;
}
function raiseVolume (event) {
var changed = 0;
if(volume < 100) {
volume = Math.min(volume + 5, 100);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeUpEvent, changed);
}
function lowerVolume (event) {
var changed = 0;
if(volume > 30) {
volume = Math.max(volume - 5, 0);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeDownEvent, changed);
}
function showHelper (event) {
if (btnHelp.innerHTML === '?') {
helper.style.opacity = '1';
helper.style.zIndex = '1';
btnHelp.innerHTML = '←';
} else {
helper.style.opacity = '0';
helper.style.zIndex = '-1';
btnHelp.innerHTML = '?';
}
btnHelp.blur();
}
function loadQuestions (event) {
memory.raiseEvent(serviceName + '/LoadQuestions', 1);
img.style.visibility = 'hidden';
}
function goToPreviousPage () {
window.location.href = "index.html";
}
function displayPepperHTML() {
window.location.href = "pepper.html";
}
function closeQuestions (event) {
if(location.href != "index.html")
{window.location.href = "index.html";}
memory.raiseEvent(serviceName + '/CloseQuestions', 1);
btnReturn.blur();
}
function hideQuestions (data) {
if (data !== 0) {
img.style.visibility = 'visible';
helper.style.opacity = '0';
btnHelp.innerHTML = '?';
}
}
function clickOnQuestion (event) {
memory.raiseEvent(serviceName + '/' + event.target.id, 1);
}
Here is my non-functioning pepper.html code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Pepper</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1280, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/faq.css" />
</head>
<body>
<header>
<h1>Bla bla bla</h1>
<span class="buttons">
<button id="previous_page" class="button-help"> ← </button>
<button id="return" class="button-return">X</button>
</span>
<div id="helper" class="pop-up">
<img src="img/interactionscreen_frf.png" alt="Bla bla bla">
</div>
</header>
<ul id="questions">
<p>
Bla bla bla
</p>
<div class="volume-part">
<div id="volume-up" class="Click-me">+</div>
<img src="img/speaker.png" alt="Bla bla bla" style="vertical-align: middle;">
<div id="volume-down" class="Click-me">-</div>
</div>
</ul>
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
</body>
</html>
Thank you for your help.
I am expecting the pepper.html page to respond to both the volume and ← and X buttons, as the index.html should, since they use the exact same Javascript.
I was able to find some workaround: creating one JavaScript file for each HTML page, this is redundant and non-optimal I know, but at least it works.
This also made me realize that the commented-out line was blocking the program because the index.html page doesn't use the previous_page button, that's what led me to make a JS file for each HTML page.
If anybody has any other suggestions I am all ears.
Edit: I reduced the number of JS scripts to only 2. One for the index.html and the other for the identically-structured html pages of the other questions.
I have an issue with a Button. It is appearing in IE and Firefox, but not appearing in Chrome.
The code for the button is using Rally API and it’s generated while loading the page.
I have tried Googling the answer, but I couldn't find anything.
Heres my code:
function onClick(b, args) {
if(OneButtonClickFlag == true) {
OneButtonClickFlag = false;
var buttonValue = args.value;
var userName = "__USER_NAME__";
TimeSheetReport(); // calling the “timesheet report “
}
}
function onLoad() {
var config = {
text: "Generate",
value: "myValue"
};
var button = new rally.sdk.ui.basic.Button(config);
button.display("buttonDiv", onClick); // call the “onclick” function
}
rally.addOnLoad(onLoad);
This App below seems to work with your code in it up until the point where it encounters your OneButtonClick flag. I tested it in Chrome. Does this work for you?
<head>
<title>Button Example</title>
<meta name="Name" content="Component Example: Button"
/>
<meta name="Version" content="2010.4" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.26/sdk.js"></script>
<script type="text/javascript">
function onClick(b, args) {
console.log("works until this undefined variable");
if (OneButtonClickFlag == true) {
OneButtonClickFlag = false;
var buttonValue = args.value;
var userName = "__USER_NAME__";
TimeSheetReport(); // calling the “timesheet report “
}
}
function onLoad() {
var config = {
text: "Generate",
value: "myValue"
};
var button = new rally.sdk.ui.basic.Button(config);
button.display("buttonDiv", onClick); // call the “onclick” function
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div id="buttonDiv"></div>
</body>
I'm using phonegap to develop a mobile web application and possibly transfer it to other platforms later on such as android, etc.
I want to be able to write to local files on the device, however, no matter, what I do, it doesn't work. There is no proper documentation to support with such problems.
If anyone could help, I'd greatly appreciate it.
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />-->
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css"/>
<script src="jquery/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
<title>Hello World</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="NativeControls.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>LOGIN</h1>
</div>
<div data-role="content">
<img src="images/cslogosmall2.png" style="margin-top: -10px; margin-left: -5px;"/>
<form id="login" method="post">
<p>
<ul data-role="listview" data-theme="g" id="contentlist">
<b>Program:</b>
<input type="text" id="program"/>
<b>Username:</b>
<input type="text" id="username"/>
<b>Password:</b>
<input type="password" id="password"/>
</ul>
</p>
<br/>
<button type="submit" data-theme="a" id="submit" value="Submit"></button>
Offline
</form>
</div>
<!--<div data-role="footer">
<h1> Main Page Footer </h1>
</div>-->
</div>
<div data-role="page" id="contentpage">
<div data-role="header">
<h1> Content Page </h1>
</div>
<div data-role="content">
<a href="#" data-role="button" onclick="history.go(-1);return false;" onClick=buttonDemo()> Back to Main Page </a>
<a href="#" data-role="button" id="beepbtn" onClick=beepbeep()> Beep!</a>
</div>
<div data-role="footer">
<h1> Content Page Footer </h1>
</div>
</div>
</body>
</html>
And here is my javascript file:
function validate() {
navigator.notification.alert("validate called");
var program = document.getElementById('program');
var username = document.getElementById('username');
var password = document.getElementById('password');
if (!program || program == "") {
navigator.notification.alert("Please enter a program");
return false;
}
else if (!username || username == "") {
navigator.notification.alert("Please enter a username");
return false;
}
else if (!password || password == "") {
navigator.notification.alert("Please enter a password");
return false;
}
return true;
}
function beepbeep() {
//navigator.notification.alert("Beep function called");
navigator.notification.beep();
}
$(document).ready(function() {
$('#submit').click(function() {
var program = document.getElementById('program').value;
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (!program || program == "") {
alert("Please enter a program", null, "ClearSpider", "OK");
return false;
}
else if (!username || username == "") {
alert("Please enter a username", null, "ClearSpider", "OK");
return false;
}
else if (!password || password == "") {
alert("Please enter a password", null, "ClearSpider", "OK");
return false;
}
return true;
});
document.addEventListener("deviceready", onDeviceReady, false);
window.addEventListener("resize", orientationChange, false);
});
function test() {
console.log("fail");
var fs = FileWriter.write(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
alert(LocalFileSystem.PERSISTENT);
alert("Test called");
}
function onTabBarItem(id)
{
alert("hello");
//jQT.goTo("#" + id, "slide");
// if you need to modify the tabbar items that are shown, you should do
// so here.
}
function fail(error) {
console.log(error.code);
}
function gotFS(fileSystem) {
alert("at gotFS");
fileSystem.root.getFile("readme.txt", {create: true}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
alert("at gotFileEntry");
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
alert("at gotFileWriter");
writer.onwrite = function(evt) {
console.log("write success");
};
writer.write("some sample text");
// contents of file now 'some sample text'
writer.truncate(11);
// contents of file now 'some sample'
writer.seek(4);
// contents of file still 'some sample' but file pointer is after the 'e' in 'some'
writer.write(" different text");
// contents of file now 'some different text'
}
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady() {
// Initializating TabBar
//window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
navigator.notification.alert("hi kaan", null, "hey", "SWEET");
Cordova.exec("NativeControls.createTabBar");
//var options = "top";
var options = "bottom";
navigator.notification.alert(window.requestFileSystem);
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
break;
case 90:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
break;
default:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: ";
break;
}//end switch
}//end window.orientationchange
//var taboptions = {"onSelect":onTabBarItemSelect};
var moreNum = 1;
Cordova.exec("NativeControls.showTabBar", options);
var onSelect = {"onSelect":onTabBarItem};
//onSelect = "hahaha";
Cordova.exec("NativeControls.createTabBarItem", "test", "test", "tabButton:Recents", onSelect);
Cordova.exec("NativeControls.createTabBarItem", "test2", "test2", "tabButton:Search", onSelect);
Cordova.exec("NaviteControls.createTabBarItem", "test3", null, "tabButton:More", onSelect);
Cordova.exec("NativeControls.showTabBarItems", "test", "test2", "test3");
Cordova.exec("NativeControls.selectTabBarItem", "test");
//Cordova.exec("NativeControls.tabBarItemSelected", "1");
/*nativeControls = window.plugins.nativeControls;
navigator.notification.alert(nativeControls);
nativeControls.createTabBar();
// Books tab
nativeControls.createTabBarItem(
"books",
"Books",
"tabButton:Recents",
"",
{"onSelect": function() {
books();
}}
);
// Stats tab
nativeControls.createTabBarItem(
"finished",
"Finished",
"tabButton:Recents",
"",
{"onSelect": function() {
finished();
}}
);
// About tab
nativeControls.createTabBarItem(
"about",
"About",
"tabButton:Recents",
"",
{"onSelect": function() {
about();
}}
);
// Compile the TabBar
nativeControls.showTabBar();
nativeControls.showTabBarItems("books", "finished", "about");
nativeControls.selectTabBarItem("books");*/
}
function orientationChange() {
var nativeControls = window.plugins.nativeControls;
nativeControls.resizeTabBar();
}
function books() {
}
function about() {
}
function finished(){
}
Note that this line doesn't work:
navigator.notification.alert(window.requestFileSystem); does not display an alert.
I was using 1.4.1 yesterday when I successfully saw the alert. When I switch to 1.5.0, the alert prints null. This is because of the require namespacing that was added in cordova-1.5.0.
However, even in 1.5.0, the API sample still works for me:
function gotFS(fileSystem) {
navigator.notification.alert(window.requestFileSystem);
myFS = fileSystem;
console.log(fileSystem.name);
console.log(fileSystem.root.name);
$('#file-system-text').html("File System: <strong>" + fileSystem.name + "</strong> " +
"Root: <strong>" + fileSystem.root.name + "</strong>");
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, createGotFileEntry, writeFail);
}
function createFile() { // button onclick function
if (myFS) {
gotFS(myFS);
} else {
navigator.notification.alert(window.requestFileSystem);
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, failFS);
}
}