How to run this script with button click?
I don't know how to write code for a button and connect it with the code below.
<div id="rez" style="display: none;">BRAVO!</div>
<script>
function showElement(id) {
document.getElementById(id).style.display = "block";
}
window.onload = function ShowHide() {
var legend = document.getElementById("LEGEND").innerHTML;
if(legend.indexOf("100%") != -1) showElement("rez");
}
</script>
a simple google search will yield answers to this kind of questions: http://www.w3schools.com/jsref/event_onclick.asp
Related
I search a method to break the process after click a html a element. It is possible to make a onclick="alert();" event on this a element and the process is temporary stopped, till the OK button is clicked, or the process is breaked, when the page are reloaded or click previous page. Also the break is, but not perfect. With a confirm() it is similare, but by clicking "Cancel" the process is not canceled.
function myFunction() {
var confirmresult = confirm("Press a button!");
if (confirmresult === true) {
// OK = go away!
} else {
// Cancel = stay here!
}
}
<!DOCTYPE html>
<html>
<body>
example.com
</body>
</html>
The example don't work by me. Here the code:
<!DOCTYPE html>
<html>
<body>
example.com
<script>
function myFunction() {
var confirmresult = confirm("Press a button!");
if (confirmresult === true) {
// OK = go away!
} else {
// Cancel = stay here!
}
}
</script>
</body>
</html>
I have found a solution, but im not secure is it valide. Pleas help!
There is not so easy why the people think.
The thing is, it should be a solution for existing websites. No new coding is needed. Only insert the function myFunction(). onclick="myFunction()" is always present. And its only possible to put JS code in the head (not in the footer), because for this a custom <script> is always loaded via PHP in the webpages.
First, a methode with only code a new function with javascript:void(0);
The running code snippet function here don't work by me. Below a JSFiddle.
function myFunction() {
var confirmresult = confirm("Press a button!");
if (confirmresult === true) {
// OK = go away!
} else {
// Cancel = stay here!
document.getElementById("demo").removeAttribute("target");
document.getElementById("demo").href = "javascript:void(0);";
}
}
<!DOCTYPE html>
<html>
<body>
<a id="demo" href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
</body>
</html>
The code:
<!DOCTYPE html>
<html>
<body>
<a id="demo" href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
var confirmresult = confirm("Press a button!");
if (confirmresult === true) {
// OK = go away!
} else {
// Cancel = stay here!
document.getElementById("demo").removeAttribute("target");
document.getElementById("demo").href = "javascript:void(0);";
}
}
</script>
</body>
</html>
JSFiddle: https://jsfiddle.net/dLp8qtcm/
Second, a solution with preventDefault(). Consider the event instead a this. For this a edit of the webpages is needed for inside the event in onclick="myFunction(event)".
Thanks for the hints with the preventDefault(), but the examples in the answers don't work by me. Here is a working solution.
The running code snippet function here don't work by me. Below a JSFiddle.
function myFunction(e) {
var confirmresult = confirm("Press a button!");
if (confirmresult == true) {
// OK = go away!
} else {
// Cancel = stay here!
e.preventDefault();
}
};
example.com
example.com
<script>
function myFunction(e) {
var confirmresult = confirm("Press a button!");
if (confirmresult == true) {
// OK = go away!
} else {
// Cancel = stay here!
e.preventDefault();
}
};
</script>
JSFiddle: https://jsfiddle.net/osanthdq/
EDIT: The matter is a little bit complex. I have explained it here: Event keyword in js
I have listUser.jsp, it has a link that "calls" user.jsp. user.jsp have a form that saves in my DB and listUser.jsp shows it. The problem is: i want user.jsp to open in a modal, is that possible? i've tried iframe inside the modal, but when i Submit in user.jsp, inside the iframe, it "returns" to listUser.jsp and doesn't close.
with the iframe i've tried this (didn't work):
<script>
function yourFunctionName () {
var div = document.getElementById('dialog');
if(document.getElementById('noop').src === 'user.jsp'){
div.style.display = 'none';
} else {
div.style.display = 'block';
}
}
</script>
<script>
function myFunction() {
setInterval(yourFunctionName, 1000);
}
</script>
i'm learning, so i don't know much
You can use jquery for this purpose,
listUser.jsp
<div id=content></div>
Use jquery instead of yourFunctionName (), like this
document.ready(function(){
$('#button').on("click", function() {
$("#content").load(absolutePath/user.jsp);
});
});
hope this will helpful!
I've been printing my page using the code below:
window.print();
An image below is what the print preview in Google chrome browser looks like. It has two main buttons: print and cancel.
I want to know if the user has clicked the print or cancel buttons. What I did uses jquery:
HTML Code of the Print Preview:
<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>
Jquery Code:
$('button > .cancel').click(function (e) {
alert('Cancel');
});
$('button > .print').click(function (e) {
alert('Print');
});
I tried the code above with no luck. What am I missing?
You can not access Chrome's internal windows (printing dialog in this case) directly from a regular web page.
(function () {
var beforePrint = function () {
alert('Functionality to run before printing.');
};
var afterPrint = function () {
alert('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
//alert($(mediaQueryList).html());
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
Or, If you want to do something when the print preview gets opened, you can try below:
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode == 80) {
setTimeout(function () { CallAfterWindowLoad();}, 5000);
return true;
}
});
function CallAfterWindowLoad()
{
alert("Open and call");
}
Reference:
How to capture the click event on the default print menu called by Javascript window.print()
Maybe if you provide your requirements for this two buttons click event, we can provide you an alternate solution.
it is very easily possible:
<body onafterprint="myFunction()">
The myFunction() that you can define within a tag will be fire when either the printing job is done or the cancel button was pressed.
As far as I know, the print preview is not part of any document your JS can access. These might interest you:
Detecting browser print event
ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically
<script>
window.print();
onafterprint = function () {
window.location.href = "index.html";
}
</script>
This should do the trick. I've used jQuery v2.2.0 which is included in the html file.
$("#print").click(function() { // calls the id of the button that will print
document.body.style.visibility = 'hidden'; //code for hiding the body
document.getElementById('printthis').style.visibility = 'visible'; // div to be printed
document.getElementById('printthis').style.position = 'absolute'; //some code/css for positioning. you can adjust this
document.getElementById('printthis').style.top = '40px';
document.getElementById('printthis').style.left = '0px';
if (print()) { // shows print preview.
} else { // else statement will check if cancel button is clicked.
document.body.style.visibility = 'visible';
document.getElementById('printthis').style.position = '';
document.getElementById('printthis').style.top = '';
document.getElementById('printthis').style.left = '';
alert("Print Canceled");
}
});
I guess this might as well be used as a way to print certain divs in your html. Just hide the body element and only show the div that you want to print with some positioning css. Hope it works in yours. I've tried it and I can say that it worked for me.
I downloaded the File upload script called Simple Photo Manager.
Since I'm more familiar with jQuery functions I want to use them in combination with the already existing JS code from that script.
I basically want to hide the Delete button when it's clicked.
Why is the Delete button not being hidden after I click on it?
(Note: the JS files are correctly included into the HTML file)
Also, the delLink.removeChild and delLink.appendChild are useless here because it was originally intended for a Delete/Restore switch link, but I decided to go for a button instead.
Thanks a lot if you can help me.
The html code is:
<input type='button' id='deleteit' onClick="deleteLinkOnClick
(this, 'delFlag<?=$imgid?>')">
The JS code for creating that element when an image is uploaded is:
var image_del_link = par.createElement('input');
image_del_link.type = "button";
image_del_link.value = "Delete";
imgdiv.appendChild(image_del_link);
The function for the onclick is: (I tried to write the jQuery function at the bottom)
function deleteLinkOnClick(delLink, delFlag) {
var par = window.document;
var imgDiv = delLink.parentNode;
var image_hidden = delFlag == '' ? imgDiv.childNodes[2] : par.getElementById(delFlag);
if (image_hidden.value == '1') {
image_hidden.value = '0';
delLink.removeChild(delLink.childNodes[0]);
delLink.appendChild(par.createTextNode("Restore"));
delLink.style.color = '#FF0000';
}
else {
image_hidden.value = '1';
delLink.removeChild(delLink.childNodes[0]);
delLink.appendChild(par.createTextNode("Delete"));
delLink.style.color = '#64B004';
}
$(document).ready(function(){
$(image_del_link).click(function(){
$(this).hide();
});
});
}
Here it is.
$("#deleteit").click(function(){
$(this).hide();
})
Try :
$("#deleteit").live("click", function(){
$(this).hide();
});
I wrote some html/css/javascript code that was taken verbatim from a javascript textbook. For some reason, the code does not run correctly in my browser (which is the newest version of Firefox). When I click the button, the javascript function "toggleStyle()" does not execute in the browser at ALL. This is the code for the button:
<button type="button" onclick="toggleStyle()">Toggle Style</button>
This is the javascript coding. Note that when I click the button, not even the alert() method is executed:
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
Did you put the code inside <script type="text/javascript">?
<script type="text/javascript">
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
}
</script>
The above code is working:
For starters, I don't see the end } brace; do you have one?
Also, where is the function defined? Does the script get loaded? Are there any errors?