I have integrated the nanorep in my html page.
I have created the account at nanorep website.
when i am asking question it is responding answer well.
I am able to plug in nanorep correctly.
Now I want a functionality that on any button click event I want the answered which is provided by nanorep.
Thanks in advanced.
Here is the following code I have written for this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title></title>
<script type="text/javascript" language="javascript">
var _nRepData = _nRepData || []; _nRepData['kb'] = '19583554';
function nanorep() {
_nRepData['embed'] = { account: 'etech', container: 'Mydiv2', width: 400, maxHeight: 320, dynamicSize: true, cdcFrame: '', cdcVersion: 3, scriptVersion: '3.12.2.3' };
(function () {
var windowLoadFunc = function () {
var _nRepData = window._nRepData || [];
_nRepData['windowLoaded'] = true;
if (typeof (_nRepData['windowOnload']) === 'function') {
_nRepData['windowOnload']();
// alert(window._nRepData.toString());
}
};
if (window.attachEvent)
window.attachEvent('onload', windowLoadFunc);
else if (window.addEventListener)
window.addEventListener('load', windowLoadFunc, false);
var sc = document.createElement('script'); sc.type = 'text/javascript';
sc.async = true; sc.defer = true; sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'my.nanorep.com/widget/scripts/embed.js?account= etech';
var _head = document.getElementsByTagName('head')[0]; _head.appendChild(sc);
var a = document.getElementById('hdn').value = "hiddenvalue";
//alert(a);
})();
}
function answer1() {
alert("answer value" + $('#hdn').val());
}
function btngo_onclick() {
if (document.getElementById('hdn').value == 'hiddenvalue') {
answer1();
}
else {
alert("not working");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="Mydiv2">
</div>
<asp:HiddenField runat="server" ID="hdn" />
</form>
<button id="btngo" onclick="return btngo_onclick()"> GO </button>
</body>
</html>
Related
Trying to get IE11 specific app to run in Chrome.
Was using the polyfill (github.com/niutech/showModalDialog) successfully until I ran in to the below scenario.
I load ASPX page 1 with a button to load ASPX page 2 via showModal.
(note: jquery.min.js is v1.4.2)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WebForm1</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
(function () {
window.spawn = window.spawn || function (gen) {
function continuer(verb, arg) {
var result;
try {
result = generator[verb](arg);
} catch (err) {
return Promise.reject(err);
}
if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(onFulfilled, onRejected);
}
}
var generator = gen();
var onFulfilled = continuer.bind(continuer, 'next');
var onRejected = continuer.bind(continuer, 'throw');
return onFulfilled();
};
window.showModalDialog = window.showModalDialog || function (url, arg, opt) {
url = url || ''; // URL of a dialog
arg = arg || null; // arguments to a dialog
//opt = opt || "dialogWidth:410px; dialogHeight:420px;dialogTop:" + top + "px;dialogLeft:" + left + "px"; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles
var caller = arguments.callee.caller.toString();
var dialog = parent.document.body.appendChild(document.createElement('dialog'));
dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
dialog.innerHTML = '×<iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
parent.document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
parent.document.getElementById('dialog-close').addEventListener('click', function (e) {
e.preventDefault();
dialog.close();
});
dialog.showModal();
//if using yield or async/await
if (caller.indexOf('yield') >= 0 || caller.indexOf('await') >= 0) {
return new Promise(function (resolve, reject) {
dialog.addEventListener('close', function () {
var returnValue = parent.document.getElementById('dialog-body').contentWindow.returnValue;
parent.document.body.removeChild(dialog);
resolve(returnValue);
});
});
}
//if using eval
var isNext = false;
var nextStmts = caller.split('\n').filter(function (stmt) {
if (isNext || stmt.indexOf('showModalDialog(') >= 0)
return isNext = true;
return false;
});
dialog.addEventListener('close', function () {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
parent.document.body.removeChild(dialog);
nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
eval('{\n' + nextStmts.join('\n'));
});
throw 'Execution stopped until showModalDialog is closed';
};
})();
/*******************************************************************************
* Purpose: Opens a popup
* ********************************************************************************/
async function OpenSiteMinder() {
var title = "Refresh List";
var details = "Authorizing";
var settingsString = new String();
// Fixes dual-screen position on most browsers
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (410 / 2)) + dualScreenLeft;
var top = ((height / 2) - (420 / 2)) + dualScreenTop;
settingsString = "WebForm2.aspx";
var returns = await window.showModalDialog(settingsString, window, "edge:sunken;help:no;unadorned:yes;center:yes;status:no;dialogWidth:410px; dialogHeight:420px;dialogTop:" + top + "px;dialogLeft:" + left + "px'");
}//end of function OpenSiteMinder(sourceID, path)
</script>
</head>
<body>
<form id="form2" method="post" runat="server">
<input class="button" id="btnOK" onclick="javascript:OpenSiteMinder(); return false;" type="submit" value="OpenWebForm2" runat="server" />
<input type="hidden" runat="server" id="hdnWebForm1" name="hdnWebForm1" value="No"/>
</form>
</body>
</html>
ASPX page 2 opens ASPX page 3 via showModal
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WebForm2</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
(function () {
window.spawn = window.spawn || function (gen) {
function continuer(verb, arg) {
var result;
try {
result = generator[verb](arg);
} catch (err) {
return Promise.reject(err);
}
if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(onFulfilled, onRejected);
}
}
var generator = gen();
var onFulfilled = continuer.bind(continuer, 'next');
var onRejected = continuer.bind(continuer, 'throw');
return onFulfilled();
};
window.showModalDialog = window.showModalDialog || function (url, arg, opt) {
url = url || ''; // URL of a dialog
arg = arg || null; // arguments to a dialog
//opt = opt || "dialogWidth:410px; dialogHeight:420px;dialogTop:" + top + "px;dialogLeft:" + left + "px"; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles
var caller = arguments.callee.caller.toString();
var dialog = parent.document.body.appendChild(document.createElement('dialog'));
dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
dialog.innerHTML = '×<iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
parent.document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
parent.document.getElementById('dialog-close').addEventListener('click', function (e) {
e.preventDefault();
dialog.close();
});
dialog.showModal();
//if using yield or async/await
if (caller.indexOf('yield') >= 0 || caller.indexOf('await') >= 0) {
return new Promise(function (resolve, reject) {
dialog.addEventListener('close', function () {
var returnValue = parent.document.getElementById('dialog-body').contentWindow.returnValue;
parent.document.body.removeChild(dialog);
resolve(returnValue);
});
});
}
//if using eval
var isNext = false;
var nextStmts = caller.split('\n').filter(function (stmt) {
if (isNext || stmt.indexOf('showModalDialog(') >= 0)
return isNext = true;
return false;
});
dialog.addEventListener('close', function () {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
parent.document.body.removeChild(dialog);
nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
eval('{\n' + nextStmts.join('\n'));
});
throw 'Execution stopped until showModalDialog is closed';
};
})();
/*******************************************************************************
* Purpose: Opens a popup
* ********************************************************************************/
async function OpenSiteMinder() {
var title = "Refresh List";
var details = "Authorizing";
var settingsString = new String();
// Fixes dual-screen position on most browsers
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (410 / 2)) + dualScreenLeft;
var top = ((height / 2) - (420 / 2)) + dualScreenTop;
settingsString = "WebForm3.aspx";
var returns = await window.showModalDialog(settingsString, window, "edge:sunken;help:no;unadorned:yes;center:yes;status:no;dialogWidth:410px; dialogHeight:420px;dialogTop:" + top + "px;dialogLeft:" + left + "px'");
}//end of function OpenSiteMinder(sourceID, path)
</script>
</head>
<body>
<form id="form1" method="post" runat="server">
<div>
<p><span><b>WebForm2</b></span></p>
<span class="body11RED" id="ctrlMessage" runat="server"><b></b></span>
<p class="body">WebForm2 stuff:</p>
<p class="body">
<input class="button" id="btnOK" onclick="javascript:OpenSiteMinder(); return false;" type="submit" value="Open WebForm3" runat="server"/>
</p>
</div>
<input type="hidden" runat="server" id="hdnWebForm2" name="hdnWebForm4" value="No"/>
</form>
</body>
</html>
ASPX Page 3 opens ASPX page 4 inside of a frame.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WebForm3</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p><span><b>WebForm3 opens WebForm4 inside frame</b></span></p>
<iframe id="iFrameProcessTransaction" runat="server" src="Webform4.aspx" style="height:240px; width:330px"></iframe>
</div>
<input type="hidden" runat="server" id="hdnWebForm3" name="hdnWebForm3" value="No"/>
</form>
</body>
</html>
I want ASPX Page 4 Yes button to return to ASPX page 2. parent.document.getElementsByTagName('dialog')[0].close() fails and parent.parent.document.getElementsByTagName('dialog')[0].close() works but takes me to WebForm1. How do I get it to return to ASPX page 2? (note: 3rd party requirements specify ASPX4 be opened in a frame) I can not close the modal showing aspx3 with the contents of aspx4 spawned from aspx2. Does anyone have any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WebForm4</title>
<script type="text/javascript" >
function PassConfirmation(authenticated) {
var valid = "Yes";
var paramsObject = new Object();
paramsObject.authenticated = valid;
window.returnValue = paramsObject;
//parent.document.getElementsByTagName('dialog')[0].close();
//window.parent.parent.frames[0].document.getElementsByTagName('dialog')[0].close(); //does not work
//window.parent.frames[0].document.getElementsByTagName('dialog')[0].close();
parent.document.getElementsByTagName('dialog')[0].close();
//window.close();
//return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p><span><b>WebForm4: I want clicking Yes to take me back to WebForm2's return of it's showModal</b></span></p>
<br />
<button id="btnYes" runat="server" onclick="PassConfirmation('Yes'); return false;" >Yes</button>
<button id="btnNo" onclick="PassConfirmation('No'); return false;" >No</button>
</div>
</form>
</body>
</html>
I'm probably being very stupid here...
I have two JavaScript functions that are practically identical except each one refers to a different element.
The idea is to show and hide a toast/notification when the document loads.
For one element (errorexplanationcontainer), it works... For the other (alert), it doesn't...
CODE FOR errorexplanationcontainer (WORKS)
<div id="errorexplanationcontainer" class=""></div>
<script type="text/javascript">
window.onload = function() {
var z = document.getElementById("errorexplanationcontainer")
z.className = "show";
setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
}
</script>
^^ This is copied and pasted from the inspect window within Google Chrome. As you can see, the script ran successfully. We know this because class="" is absent in the source document and has been added by the script (after showing class="show" for 3 seconds).
CODE FOR alert (DOESN'T WORK)
<p id="alert">Invalid Email or password.</p>
<script type="text/javascript">
window.onload = function() {
var y = document.getElementById("alert")
y.className = "show";
setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);
}
</script>
^^ No class="" here! The script has not worked...
FULL HTML DOC
<html class="mdl-js"><head>
<title>Dennis' Coffee Hut | CuppaDesk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/assets/favicon-16x16-347e46971826b54de74f354ae410242483f471bb3051a5f948d83af70770dadc.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicon-32x32-ac516884b2aa2ea870ddfbd0ae383c0dd66ec1a640181174ac7adaba8e7ccd7d.png" sizes="32x32">
<link rel="apple-touch-icon" type="image/x-icon" href="/assets/apple-touch-icon-af3f73bee131a689a15fede0d2d6f7cf9698786524670279ac74cd128ec5dc40.png" sizes="180x180">
<link rel="mask-icon" type="image/x-icon" href="/assets/safari-pinned-tab-4f97411db829aebf4a4796a8f216e788ba4eeddf4d062a0a1efe473ee10fce3b.svg" color="#99cc33">
<link rel="icon" type="image/png" href="/assets/android-chrome-192x192-cb0ced957daf2743c293b898f5e595fcf07fc0842b9d0aeef37c08b8c5f74d42.png" sizes="192x192">
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-title" content="CuppaDesk">
<meta name="application-name" content="CuppaDesk">
<meta name="msapplication-TileColor" content="#99cc33">
<meta name="msapplication-TileImage" content="/assets/mstile-144x144-5de954b6d137b31283af01b9a7645c90440392de2b44ec88949fdba65cca75e7.png">
<meta name="theme-color" content="#99cc33">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="wphb5Z8aebicMl6E2CiCJiNPnQowqP2TVUrXOWclCukQwiX/xrbLf3jBE4YRyyswVMEaPEszTO/7xxl1/iClsw==">
<link rel="stylesheet" media="all" href="/assets/main.self-b06bcba5344c9fc9a5c6491a38f0780f4594d723339bc0543a25138d83fe3de3.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/places.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload">
<script src="/assets/rails-ujs.self-56055fe2ac3f3902deb9d12c17b2d725d432162b48fc443946daf7dfbc96d88a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-be3674a79bb9d13d41d259b2c17fad23aef20946dab3603b9d02374ea795005f.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/places.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-eba3cb53a585a0960ade5a8cb94253892706bb20e3f12097a13463b1f12a4528.js?body=1" data-turbolinks-track="reload"></script>
<!-- BEGIN MATERIAL DESIGN LITE -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <link rel="stylesheet" href="/material.min.css"> -->
<script defer="" src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- END MATERIAL DESIGN LITE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p id="alert">Invalid Email or password.</p>
<script type="text/javascript">
window.onload = function() {
var y = document.getElementById("alert")
y.className = "show";
setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);
}
</script>
<div id="login-container">
<div id="cuppadesk-logo-large"></div>
<div id="card-white">
<h1>Log in</h1>
<div class="dropdown-dots">
<button onclick="dotsDropdown()" class="dropbtn-dots"></button>
<div id="dotsDropdown" class="dropdown-content">
<a href="/users/sign_up">
<div class="dropdown-content-item">Sign up</div>
</a>
<a href="/users/password/new">
<div class="dropdown-content-item">Forgot password</div>
</a>
<a href="/users/confirmation/new">
<div class="dropdown-content-item">Didn't recieve email confirmation</div>
</a>
<a href="/users/unlock/new">
<div class="dropdown-content-item">Didn't receive unlock instructions</div>
</a>
<a href="/users/auth/facebook">
<div class="dropdown-content-item">Log in with
Facebook
</div>
</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function dotsDropdown() {
document.getElementById("dotsDropdown").classList.toggle("show-dots");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn-dots')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show-dots')) {
openDropdown.classList.remove('show-dots');
}
}
}
}
</script>
<form class="new_user" id="new_user" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="wphb5Z8aebicMl6E2CiCJiNPnQowqP2TVUrXOWclCukQwiX/xrbLf3jBE4YRyyswVMEaPEszTO/7xxl1/iClsw==">
<div id="errorexplanationcontainer" class=""></div>
<script type="text/javascript">
window.onload = function() {
var z = document.getElementById("errorexplanationcontainer")
z.className = "show";
setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
}
</script>
<div class="field-white">
<input autofocus="autofocus" placeholder="Email" type="email" value="" name="user[email]" id="user_email">
</div>
<div class="field-white">
<input autocomplete="off" placeholder="Password" type="password" name="user[password]" id="user_password">
</div>
<div class="checkbox">
<input name="user[remember_me]" type="hidden" value="0"><input class="css-checkbox" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
<label class="css-label clr" for="user_remember_me">Remember me</label>
</div>
<script>
// generic tools to help with the custom checkbox
function UTIL() { }
UTIL.prototype.bind_onclick = function(o, f) { // chain object onclick event to preserve prior statements (like jquery bind)
var prev = o.onclick;
if (typeof o.onclick != 'function') o.onclick = f;
else o.onclick = function() { if (prev) { prev(); } f(); };
};
UTIL.prototype.bind_onload = function(f) { // chain window onload event to preserve prior statements (like jquery bind)
var prev = window.onload;
if (typeof window.onload != 'function') window.onload = f;
else window.onload = function() { if (prev) { prev(); } f(); };
};
// generic css class style match functions similar to jquery
UTIL.prototype.trim = function(h) {
return h.replace(/^\s+|\s+$/g,'');
};
UTIL.prototype.sregex = function(n) {
return new RegExp('(?:^|\\s+)' + n + '(?:\\s+|$)');
};
UTIL.prototype.hasClass = function(o, n) {
var r = this.sregex(n);
return r.test(o.className);
};
UTIL.prototype.addClass = function(o, n) {
if (!this.hasClass(o, n))
o.className = this.trim(o.className + ' ' + n);
};
UTIL.prototype.removeClass = function(o, n) {
var r = this.sregex(n);
o.className = o.className.replace(r, '');
o.className = this.trim(o.className);
};
var U = new UTIL();
function getElementsByClassSpecial(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
// specific to customized checkbox
function chk_labels(obj, init) {
var objs = document.getElementsByTagName('LABEL');
for (var i = 0; i < objs.length; i++) {
if (objs[i].htmlFor == obj.id) {
if (!init) { // cycle through each label belonging to checkbox
if (!U.hasClass(objs[i], 'chk')) { // adjust class of label to checked style, set checked
if (obj.type.toLowerCase() == 'radio') {
var radGroup = objs[i].className;
var res = radGroup.split(" ");
var newRes = res[0] + " " + res[1];
var relLabels = getElementsByClassSpecial(document.body,newRes);
for (var r = 0; r < relLabels.length; r++) {
U.removeClass(relLabels[r], 'chk');
U.addClass(relLabels[r], 'clr');
}
U.removeClass(objs[i], 'clr');
U.addClass(objs[i], 'chk');
obj.checked = true;
}
else {
U.removeClass(objs[i], 'clr');
U.addClass(objs[i], 'chk');
obj.checked = true;
}
} else { // adjust class of label to unchecked style, clear checked
U.removeClass(objs[i], 'chk');
U.addClass(objs[i], 'clr');
obj.checked = false;
}
return true;
} else { // initialize on page load
if (obj.checked) { // adjust class of label to checked style
U.removeClass(objs[i], 'clr');
U.addClass(objs[i], 'chk');
} else { // adjust class of label to unchecked style
U.removeClass(objs[i], 'chk');
U.addClass(objs[i], 'clr')
}
}
}
}
}
function chk_events(init) {
var objs = document.getElementsByTagName('INPUT');
if (typeof init == 'undefined') init = false;
else init = init ? true : false;
for(var i = 0; i < objs.length; i++) {
if (objs[i].type.toLowerCase() == 'checkbox' || objs[i].type.toLowerCase() == 'radio' ) {
if (!init) {
U.bind_onclick(objs[i], function() {
chk_labels(this, init); // bind checkbox click event handler
});
}
else chk_labels(objs[i], init); // initialize state of checkbox onload
}
}
}
U.bind_onload(function() { // bind window onload event
chk_events(false); // bind click event handler to all checkboxes
chk_events(true); // initialize
});
</script>
<div class="green-submit">
<input type="submit" name="commit" value="Log in" data-disable-with="Log in">
</div>
</form>
</div>
</div>
</body></html>
Again, I'm probably missing something obvious here... I'm completely new to developing and JavaScript is something I particularly struggle with. I've read through many resources but in my mind, the code still looks correct...
Obviously, I'm wrong... So any help will be greatly appreciated!
Use window.addEventListener instead of overwriting window.onload.
For errorexplanationcontainer,
<div id="errorexplanationcontainer" class=""></div>
<script type="text/javascript">
window.addEventListener("load", function() {
var z = document.getElementById("errorexplanationcontainer");
z.className = "show";
setTimeout(function() {
z.className = z.className.replace("show", "");
}, 3000);
}, false);
</script>
For alert,
<p id="alert">Invalid Email or password.</p>
<script type="text/javascript">
window.addEventListener("load", function() {
var y = document.getElementById("alert")
y.className = "show";
setTimeout(function() {
y.className = y.className.replace("show", "");
}, 3000);
}, false);
</script>
i have web application where users can type on iframe(rich-text-editor) when they click a button an iframe will show up.
html code when user click button for new iframe :
<input name="add_button" type="button" value="New frame" onClick="javascript:add_new_frame();"/>
javascript code for creating iframe and designmode
function add_new_frame(){
$("<iframe class=\"a\" id="a" name="a"/>").appendTo(id);
var editor = document.getElementById ("a");
editorDoc = editor.contentWindow.document;
editorDoc1 = document.getElementById ("a").contentDocument;
var editorBody = editorDoc.body;
if ('spellcheck' in editorBody) { // Firefox
editorBody.spellcheck = false;
}
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
editorDoc1.designMode = "on";
}
else {
if ('designMode' in editorDoc1) {
editorDoc1.designMode = "on";
}
}
}
I have tested above on (chrome,opera,safari,IE) and it's working fine. However, it's not working on FF, the iframe is showing up but i cannot edit it (designmode is not working).
is there any solution?
sorry for bad english
You missed \ in your iframe element to mask the "
function add_new_frame(){
$("<iframe class=\"a\" id=\"a\" name=\"a\"/>").appendTo(id);
var editor = document.getElementById ("a");
editorDoc = editor.contentWindow.document;
editorDoc1 = document.getElementById ("a").contentDocument;
var editorBody = editorDoc.body;
if ('spellcheck' in editorBody) { // Firefox
editorBody.spellcheck = false;
}
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
editorDoc1.designMode = "on";
}
else {
if ('designMode' in editorDoc1) {
editorDoc1.designMode = "on";
}
}
}
<html> <head> <title>Untitled Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$ = jQuery;
function frame() {
$("<iframe class=\"a\" id=\"a\" name=\"a\"/>").appendTo(id);
var editor = document.getElementById("a");
editorDoc = editor.contentWindow.document;
editorDoc1 = document.getElementById("a").contentDocument;
var editorBody = editorDoc.body;
if ('spellcheck' in editorBody) { // Firefox
editorBody.spellcheck = false;
}
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
editorDoc1.designMode = "on";
}
else {
if ('designMode' in editorDoc1) {
editorDoc1.designMode = "on";
}
}
}
</script>
</head>
<body>
<input name="add_button" type="button" value="New frame" onclick="frame()" />
<p id="id">
contents</p>
</body>
</html>
Code：
<html>
<body>
<script>
window.onload = function () {
var do_not_drag = document.getElementsByClassName('no_select');
for (var i = 0; i < do_not_drag.length; i++) {
disableSelection(do_not_drag[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != 'undefined') {
element.onselectstart = function () {
return false;
};
} else if (typeof element.style.MozUserSelect != 'undefined') {
element.style.MozUserSelect = 'none';
} else {
element.onmousedown = function () {
return false;
};
}
}
function generateCaptcha() {
var captchaForRead = document.getElementById('captchaForRead');
var captchaForReadInnerHTML = Math.floor(Math.random() * 9000) + 1000
captchaForRead.innerHTML = captchaForReadInnerHTML;
captchaCorr = captchaForReadInnerHTML;
}
function verifyCaptcha(captchaInput) {
if (captchaInput == captchaCorr) {
document.write("Correct!")
}
}
</script>
<form onsubmit="verifyCaptcha(this.form.captchaInput.value);">
<p id="captchaForRead" class="no_select"></p>
<input type="text" name="captchaInput">
<input type="submit" value="submit">
</form>
<script>
generateCaptcha();
</script>
</body>
</html>
This is not working. What can i do? even after i inserted the correct captcha, nothing happened.
What can i do??? I've checked the javascript and html but still cannot find the problem.
Pls help.
Try this:
function verifyCaptcha(captchaInput){
console.log(captchaInput);
if (captchaInput==captchaCorr){
console.log('Correct');
}
}
<form onsubmit="verifyCaptcha(this.captchaInput.value);">
<p id="captchaForRead" class="no_select"></p>
<input type="text" name="captchaInput">
<input type="submit" value="submit">
</form>
I need to display a message on mouse click. But I also need another message to be displayed on the next mouse click. The problem is that in my code both messages appear on the first mouse click.
<!DOCTYPE>
<html>
<head>
<script>
function myfunction()
{
var obj=document.getElementById("msg1");
obj.innerHTML="message1";
if(obj.innerHTML=="message1")
{
var obj1=document.getElementById("msg2");
obj1.innerHTML="message2";
}
}
</script>
</head>
<body>
<div id="msg">
<form name="myform">
<input type="button" value="click" onclick="myfunction()">
<p id="msg1"></p>
<p id="msg2"></p>
</form>
</div>
</body>
</html>
<script>
var flag=0;
function myfunction()
{
if (flag==0)
{
var obj=document.getElementById("msg1");
obj.innerHTML="message1";
flag=1;}
else
{
var obj1=document.getElementById("msg2");
obj1.innerHTML="message2";
}
}
</script>
if (obj.innerHTML == "message1") {
var obj1 = document.getElementById("msg2");
obj1.innerHTML = "message2";
}else{
obj.innerHTML = "message1";
}
Your if would always execute because you were trying to check if obj.innerHTML == "message1" immediately after setting it to that.
Do you see that you set the innerhtml of obj to "message1" and then immediately after you check if the innerHTML is "message1" that will always be true.
You need to change the if. So it says:
if(obj.innterHTML=="message1"){
obj.innerHTML="message2";
} else {
obj.innerHTML="message1";
}
Similar to others, but what the heck:
var obj1 = document.getElementById('msg1');
var obj2 = document.getElementById('msg2');
if (obj1.innerHTML == '') {
obj1.innerHTML = 'message1';
} else {
obj2.innerHTML = 'message2';
}
function myfunction() {
var i, ele;
for(i = 1; i <= 2; i++) {
ele = document.getElementById("msg"+i);
if (ele && ele.innerHTML.length == 0) {
ele.innerHTML = 'message' + i;
return;
}
}
}
Just add a click counter to check it was first click or more then first.
<!DOCTYPE>
<html>
<head>
<script>
var $clickCount = 0;
function myfunction() {
$clickCount++;
var obj = document.getElementById("msg1");
obj.innerHTML = "message1";
if (obj.innerHTML == "message1") {
var obj1 = document.getElementById("msg2");
if ($clickCount == 2) {
obj1.innerHTML = "message2";
}
}
}
</script>
</head>
<body>
<div id="msg">
<form name="myform">
<input type="button" value="click" onclick="myfunction()">
<p id="msg1"></p>
<p id="msg2"></p>
</form>
</div>
</body>
</html>