I am trying to have a session timeout for an iframe window to automatically close after 20 minutes without warning is this possible?
it is the code for your aim
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
function CreateIframe(){
var iframe=document.createElement('iframe');
iframe.setAttribute("src","http://www.disney.com");
iframe.setAttribute("id","target");
iframe.setAttribute("height","200");
iframe.setAttribute("width","200");
document.body.appendChild(iframe);
setTimeout(function(){
var frame = document.getElementById("target");
if(frame!=undefined && frame !=null){
frame.parentNode.removeChild(frame);
}
else{
console.log('Iframe not created yet');
}},20000);}
</script>
</head>
<body>
<input type="button" value="click me" onclick="CreateIframe()" >
</body>
</html>
Related
The the only action I got to somewhat work was this one, but this shows the popup when the "suspend/hold" button is on the page, not when it's pressed. I want the popup to appear when it's pressed, I've tried the ones mentioned in the documentation, like 'woocommerce_subscription_status_on-hold' and a ton of others, I don't know if I'm using the wrong action or something else in my code is wrong. Here is the snippet, thank you so much for your time.
add_action('wcs_can_user_put_subscription_on_hold','suspend_survey_popup');
function suspend_survey_popup () {
echo '<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>My typeform</title> <style>*{margin:0;padding:0;} html,body,#wrapper{width:100%;height:100%;} iframe{border-radius:0 !important;}</style> </head> <body> <div id="wrapper" data-tf-widget="D4JE8Xxp" data-tf-inline-on-mobile data-tf-medium="snippet" ></div> <script src="//embed.typeform.com/next/embed.js"></script> </body> </html>';
}
Bind a jQuery click event to the suspend button click event.
add_action('woocommerce_after_my_account', 'myaccount_on_suspend_subsciption');
add_action('woocommerce_subscription_details_after_subscription_table', 'myaccount_on_suspend_subsciption');
function myaccount_on_suspend_subsciption() {
?>
<script>
jQuery(document).ready(function($) {
$("td.subscription-actions a.suspend, table.shop_table.subscription_details a.suspend").on("click", function(e) {
var confirmCancel = confirm("Are you sure you want to suspend this subscription?");
if (!confirmCancel) {
e.preventDefault()
}
})
})
</script>
<?php
}
Today I'm learning bootstrap 3 for the first time. I successfully apply a class for my button element. I used event handler to create more buttons on click with createElement() method. In these newly created buttons, however, I failed to apply the the same class. Is the button created with createElement() method different from button originally in the body?
Here is the link to CodePen: https://codepen.io/bqw5354/pen/abZPRYm
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" id="button1" class="btn-primary">1st</button>
<script>
document.getElementById("button1").addEventListener("click", function(){
var btn = document.createElement("button");
btn.id = "button2"
btn.class = "btn-primary";
btn.innerHTML = "2nd";
document.body.appendChild(btn);
document.getElementById("button2").addEventListener("click", function(){
var btn = document.createElement("button");
btn.id = "button3"
btn.class = "btn-primary";
btn.innerHTML = "3nd";
document.body.appendChild(btn);
})
})
</script>
</body>
</html>
Use btn.className instead of btn.class
It will work!
I got error in below code...
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Access-Control-Allow-Origin" CONTENT="https://www.abcd.xyz">
</head>
<body bgcolor="#282c34" text="#43a199" >
<iframe src="2739.pdf#zoom=Fit" id="ifrmCast" type="application/pdf" width="100%" style="height:95vh;"></iframe>
<button onclick="ifrmLoad();"> Click Mee... </button>
<script>
function ifrmLoad() {
alert("called");
var iframe = document.getElementById("ifrmCast");
var elmnt = iframe.contentWindow.document.getElementsByClassName("canvasWrapper");
elmnt.style.display = "none";
alert(elmnt.innerHTML);
}
</script>
</body>
</html>
No Any Solution found here...
I Tried..
< META HTTP-EQUIV="Access-Control-Allow-Origin" CONTENT="https://www.acd.xyz" >
about:config ( Firefox )
YQL
and so many etc..
I have been fighting this issue for quite some time now, and have been (still) unable to print my div with its styling.
Currently, my script is:
$('#printMeButton').click(function () {
//alert("a");
var data = document.getElementById('thisPrintableTable').outerHTML;
var mywindow = window.open('', data);
mywindow.document.write('<html><head><title>Print Me!!!</title>');
// mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
which is nested within a $(document).ready function.
When I include the desired stylesheet (currently commented out), Nothing appears in the print preview.
I also have some script that has an effect on the appearance of the table, and, as such, I believe this may hold the key of having these included into the popup window.
How can i include this into the new popup?
Could someone please suggest a way of printing this as it stands?
Edit History
removed space at end of </head><body>
Changed var data to have outerHTML instead of innerHTML
Altered Question/details from better understanding of issue
Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.
Here is the page to be printed:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
</head>
<body>
<div id="print">
<div class="red">TODO write content</div>
</div>
<button id="print_btn">Print</button>
<script>
$('#print_btn').click(function(){
var newWindow = window.open('print.html','_blank');
$(newWindow).load(function(){
$(newWindow.document).find('body').html($('#print').html());
});
})
</script>
</body>
</html>
The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html
Now, in print.html I'll write:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Since you provide an empty string as a new window's URL (the first parameter of the open function), the page inside it most likely can't figure out where your stylesheet is (as it's address is "relative to nothing"). Try specifying an absolute URL to your stylesheet.
Also, there is media="screen" attribute that should be changed to media="print"
mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://my.site/Site.css" media="print"')
The issue can be solved by introducing some delay time before executing mywindow.close(); method. Seems that some time is needed for CSS to be applied (loaded), like this:
$('#printMeButton').click(function () {
var content = document.getElementById(id).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<!DOCTYPE html><html dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Print</title>');
mywindow.document.write('<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus()
mywindow.print();
// this is needed for CSS to load before printing..
setTimeout(function () {
mywindow.close();
}, 250);
return true;
});
We can use this inline style.
var divToPrint = document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html>' +
'<style>' +
".btn-petty-cash-split{display: none}"+
".btn-petty-cash-split{display: none}"+
'</style>' +
'<body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){
newWin.close();
window.location.reload();
},10);
I have a text box called txtName on my form.
In my page I know I need to place the code in my HEAD tag like so......
<script type='text/javascript' language="javascript">
document.FormName.txtName.value = "Robert";
</script>
But I cant seem to set a value to my textbox txtName with the above code......
That's because your code get executed before the DOM is created.
You can do something like this
window.onload = function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
}
or use JQuery
$(function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
// for a shorter syntax use id
$('#txtNameId').val("Robert");
}
Your script executed before page loaded. Use onload event
Can you set the id on the textbox? Then you can use getElementByID("textboxid"); Selecting by id is faster.
UPDATE:
You need to ensure that the DOM has been load so that your script can locate the element you want to update. One way is:
<body>
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
LoadTextBox();
</script>
</body>
An alternative could be where you use onload in the body tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
</script>
</head>
<body onload="LoadTextBox">
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
</body>