The dleMonitor and script in the code below are not working. Why? I think that timeout block need to be set in template file. I just want to make logout from profile after timeout. Help me please.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>
<ui:insert name="title">CMS</ui:insert>
</title>
<link rel="stylesheet" type="text/css" href="/cms/css/style.css"/>
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
<script type="text/javascript">
var timeOut = 1000 * 60 * 1; // 30 minutes
var lastActivity = new Date().getTime();
var checkTimeout;
checkTimeOut = function(){
if(new Date().getTime() > lastActivity + timeOut){
window.location.replace('http://sidanmor.com');
}else{
window.setTimeout(checkTimeOut, 1000); // check once per second
}
}
</script>
</h:head>
<body>
<p:idleMonitor timeout="5000" listener="#{LogoutServlet.service()}"
onidle="PF('alertExpire').show();">
</p:idleMonitor>
<p:idleMonitor widgetVar="idle" timeout="300" onidle="alert('OK')" />
<div id="minHeight"></div>
<div id="outer">
<div id="clearheader"></div>
<div id="nav">
<ui:include src="/templates/#{mainCms.edition}/nav.xhtml" />
</div>
<div id="content">
<ui:insert name="content" > Content area. </ui:insert>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">
www.com.ua
</p>
</div>
<div id="header">
<a href="/cms" class="logo" title="ом">
<span class="main">г</span>
</a>
</div>
</body>
</html>
I'll assume that this code
window.location.replace('http://sidanmor.com');
logs you out from the system. So here
var checkTimeout;
checkTimeOut = function(){
if(new Date().getTime() > lastActivity + timeOut){
window.location.replace('http://sidanmor.com');
}else{
window.setTimeout(checkTimeOut, 1000); // check once per second
}
}
you are assigning the function into checkTimeout variable without executing it, so adding this
checkTimeout(); // runs the function
will execute the function and run it again every second.
Related
I'm working on a game I want that when I press the keyboard button once, jump on my gaming character until the given loop condition is incorrect. But now the problem is that my character is jumping as well as pressing the keyboard button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--AnimationUsingKeyboard.html-->
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=utf-8"/>
<title>AnimationUsingKeyboard.html</title>
<link rel="Stylesheet" type="text/css" href=""/>
<script type="text/javascript" src="AnimationUsingKeyboard.js">
//<![CDATA[
//]]>
</script>
</head>
<body onload="init()">
<h1>Animation Using Keyboard Input</h1>
<div id="outline" style="position:absolute;
width:50px;
height:50px;
top:100px;
left:5px;">
<img id="krizen" src="krizen1.png" width="50px" height="50px" alt="krizen.png"/>
</div>
<div id="output">
</div>
</body>
</html>
var imgList=new Array("krizen1.png",
"krizen2.png",
"krizen3.png",
"krizen4.png",
"krizen5.png",
"krizen6.png",
"krizen7.png",
"krizen8.png"
);
var outline;
var krizen;
var jump;
function init(){
outline=document.getElementById("outline");
krizen=document.getElementById("krizen");
document.onkeydown=keyListner;
}
function keyListner(e){
if(!e){
e=window.event;
}//end if
if(e.keyCode==38){
jump=parseInt(outline.style.top);
while(jump!=70){
outline.style.top=jump+"px";
jump-=5;
}//end while
}//end if
}//end keyListner function
You could try to set a variable; lets say Pressed to 1 if the key is pressed, and if its released it turns Pressed to 0 and the loop checks if Pressed===1
I'm making a header for my site, and I want to have it like a slideshow.
The problem is that the images won't change. It shows only 1 images, and the rest won't show up.
Code:
//Array with the paths to the images
var image = new Array("img/header/header1.png", "img/header/header2.png", "img/header/header3.png");
//imageNumber to change the image, and imageLenght for the array lenght - 1
var imageNumber = 0;
var imageLength = image.length -1;
//Call changeImage()
changeImage();
//Function to change the image
function changeImage() {
//use strict because I use dreamweaver and it needs that(I don't know why)
"use strict";
//Add 1 to imageNumber for choosing a image(in "document.slideshow.src = image[imageNumber];")
imageNumber++;
//Check if image number is not below 0 or above the array index
if(imageNumber < 0) {
imageNumber = imageLength;
} else if(imageNumber > imageLength) {
imageNumber = 0;
}
//Change the image
document.header.src = image[imageNumber];
//recalling every second
setTimeout(changeImage, 1000);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tommie's HOME</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/header_slideshow.js"></script>
</head>
<body>
<div id="big_wrapper">
<nav>
<ul id="n1">
<li><img src="img/logo.png" width="100px"/></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul id="n2">
<li>About</li>
<li>Shop</li>
</ul>
</nav>
<div id="content">
<header>
<img src="img/header/header1.png" name="header" />
</header>
</div>
</div>
</body>
</html>
If you know the problem, feel free to reply.
Kind regards,
Tom
OK this is what im trying to do here:
I simply want to randomize the image under dv id splash and i have images placed in the root folder. I tried to randomize the code using function randomImg() here but the output is empty.
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<meta name="author" content="blahblahblah" />
<!-- Date: 2014-03-06 -->
<script type="text/javascript">
function randomImg()
{
var images = new Array();
images[0] = "img06.jpg";
images[1] = "img07.jpg";
images[4] = "img08.jpg";
images[5] = "img09.jpg";
images[6] = "img10.jpg";
var random = Math.ceil(Math.random()* images.length);
if (random == 0) { random =1; }
document.write('<img src="images[random]">');
}
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Welcome</h1>
<h2>Flower of the day</h2>
</div>
<div id="splash"><img src="virus.jpg" alt="random images"/></div>
<script type="text/javascript">
document.getElementById('splash').firstElementChild.src = 'img09.jpg';
randomImg();
</script>
</div>
</body>
</html>
Update this html:
<div id="splash"><img id='image' src="virus.jpg" alt="random images"/></div>
Instead of document.write('<img src="images[random]">'); put
document.getElementById('image').src=images[random];
Else
Simply replace document.write('<img src="images[random]">'); with
document.getElementById('splash').firstElementChild.src =images[random];
When I run the code on my site it starts off with image jackhammers1 instead of jackhammers0 and won't execute the startBouncing() method. it just displays the form with one image and no animation. It is an example copied from the textbook so I don't see how it shouldn't work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JackHammer</title>
<script type="text/javascript">
/* <![CDATA[ */
var jackhammers = newArray(11);
var curJackhammer = 0;
var direction;
var begin;
jackhammers[0] = "jackhammer0.gif";
jackhammers[1] = "jackhammer1.gif";
jackhammers[2] = "jackhammer2.gif";
jackhammers[3] = "jackhammer3.gif";
jackhammers[4] = "jackhammer4.gif";
jackhammers[5] = "jackhammer5.gif";
jackhammers[6] = "jackhammer6.gif";
jackhammers[7] = "jackhammer7.gif";
jackhammers[8] = "jackhammer8.gif";
jackhammers[9] = "jackhammer9.gif";
jackhammers[10] = "jackhammer10.gif";
function bounce(){
if(curJackhammer == 10)
curJackhammer = 0;
else
++curJackhammer;
document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer].src;
if(curJackhammer == 0)
direction = "up";
else if(curJackhammer == 10)
direction = "down";
document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer];
}
function startBouncing(){
if (begin)
clearInterval (begin);
begin = setInterval("bounce()",90);
}
/* ]]> */
</script>
</head>
<body>
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100" alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>
It starts with jackhammer1 because in the html source you have <img src="jackhammer1.gif"... instead of jackhammer0, and also when the user clicks the button to start bouncing, it will start with jackhammer1 because in the javascript you increment curJackhammer from 0 to 1 before you swap the images.
I think the following code will do what you want... (not sure what you were trying to do with the direction = "up" / "down", though).
And note that curly brackets are usually needed after if and else in javascript, though they are optional if only a single command follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JackHammer</title>
<script type="text/javascript">
var curJackhammer = 0;
var begin;
function bounce() {
document.getElementsByTagName('img')[0].src =
'jackhammer' + curJackhammer + '.gif';
curJackhammer ++;
if (curJackhammer > 10) {
curJackhammer = 0;
}
}
function startBouncing(){
if (begin) {
clearInterval (begin);
}
begin = setInterval(bounce,90);
}
</script>
</head>
<body>
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100"
alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>
How do you assign a class dynamically to a paragraph (via javascript/CSS) IF the paragraph contains the wording "Time Recorded:"?
You'll notice that I have manually assigned the paragraph with class class="dyncontent".
However, I'd like to dynamically assign this class to any paragraph tag which contain the words "Time Recorded:".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">')
document.write('.dyncontent{display:none;}')
document.write('</style>')
}
</script>
<div class="right">
<ul>
<li class="say agent public">
<p>Description line 1</p>
<p class="dyncontent">Time Recorded: 5MIN(S)</p>
<p>Another description line</p>
</li>
</ul>
</div>
</body>
</html>
You could use jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$("p:contains('Time Recorded:')").addClass('dyncontents');
});
</script>
$("p").each(function(ele) {if (this.html().indexOf('TimeRecorded') > 1) {$(this).addClass('dyncontent'))}});
I'd do indexOf because it will match easier than innerText
var allP = document.getElementsByTagName('p'),
pLength = allP.length;
while(pLength--){
if(allP[pLength].innerHTML.indexOf('Time Recorded') != -1){
allP[pLength].addClass('dycontents');
}
}
To explain: first you get all the <p> in the document. Then you loop through them. If any of them contain text of Time Recorded you add your class to it.
The following is solution without Jquery
o = document.getElementsByTagName('p');
for (i = 0; i < o.length; i++) {
if (o[i].innerText.indexOf('Time Recorded:') != -1) {
o[i].className = 'theClassYouWant';
}
}