|
JavaScript - Detect Screen Idle Time
Dear all,
I would like to know if javascript can detect the screen idle time, if certain time come up in idle, then it will redirect to another page, any help will be appreciate, thanks! Eddie Similar TutorialsHi i want to find out the idle time when there is no http request is going on... i dont want to track any mouse or key board events... i dont want that... i read these thread but it is only about screen idle time http://www.codingforums.com/showthre...t=33068&page=2 i am trying to track the time when there is no transaction going between client and server and no http request is sending . if i will get that time then that time i can use to load my additional javascript files... so further transaction of user will become speed up.... i appreciate your help THANKS Hi all, I'm trying to detect the screen resolution of the client's computer. I've been using the following example: PHP Code: <HTML> <TITLE>screen resolution</TITLE> <HEAD> </HEAD> <BODY> <?php if(isset($_COOKIE["users_resolution"])) $screen_res = $_COOKIE["users_resolution"]; else //means cookie is not found set it using Javascript { ?> <script language="javascript"> <!-- writeCookie(); function writeCookie() { var today = new Date(); var the_date = new Date("December 31, 2023"); var the_cookie_date = the_date.toGMTString(); var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height; var the_cookie = the_cookie + ";expires=" + the_cookie_date; document.cookie=the_cookie location = 'get_resolution.php'; } //--> </script> <?php } ?> <?php echo "Your screen resolution is set at ". $screen_res; ?> </BODY> </HTML> This all works fine except it doesn't factor in if the user changes their screen resolution for any reason. In my own experience I often change resolutions depending on what I'm doing. I posted the question in there PHP forum http://www.codingforums.com/showthread.php?t=192440 but it looks like I'm needing a pure JS solution. Fou-Lu kindly offered their approach: Quote: Originally Posted by Fou-Lu As for detecting changes, only javascript can do that. Instead of using PHP to check that, use pure javascript and alter you're function to check if its cookies are not existant OR the sizes have changed compared to the cookie, update them. And as mentioned, they will still only take effect after the next page load. Could someone help me with this? I want the end result to be something like http://www.screenresolution.org/ in that if you change your resolution then refresh the page, the screen resolution is updated. I hope I've explained this clearly? Let me know if you need any more information. The next challenge is then getting my PHP functions to work in the following manner: PHP Code: if ($screen_width > 1024){ function('1280'); else { function('1024'); } I have set javasscript code to detect and store into variable screen resolution. How to store this javascript into variable PHP? PHP Code: <script type="text/javascript"> var ScreenWidth=screen.width; var ScreenHeight=screen.height; var ScreenResolution=ScreenWidth+"x"+ScreenHeight; document.write("<span style=\"color:red;text-transform: capitalize;\">your current screen resolution is " + ScreenResolution + "</span>"); --></script> } </script> <?PHP $screen=str_replace("#","",$resolution); echo "screen width is:".$screen; ?> Hi All, I am using jFlow slider for my website and in the head there is that function <script type="text/javascript"> $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "706px", height: "420px", duration: 500, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); </script> What i want to do is detect the browser window (max width 1024 ) and change the width and height attribute of this function...something like this : <SCRIPT language="JavaScript"> <!-- if ((screen.width<=1024) && (screen.height<=768)) { $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "706px", height: "420px", duration: 500, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); } else { $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "706px", height: "420px", duration: 500, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); } //--> </SCRIPT> But can't get this to work...any help please?? //Sam I want to create a javascript that will have two butterflies flying across the screen at the same time. One will go from the bottom left to the top right and the other will go from the top left to the bottom right. I have the first part of the code, but can't figure out how to get the second part of the code. I know I need to add another variable, but after that i get confused. Thanks for any help. <--------------------------- BEGIN CODE ------------------------------> <!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> <title>Butterfly</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <script type="text/javascript"> /* <![CDATA[ */ var a; var topPosition = 150; var leftPosition = 0; function flyButterfly() { var butterfly = document.getElementById("butterfly"); butterfly.style.left = leftPosition + "px"; butterfly.style.top = topPosition + "px"; butterfly.style.visibility = "visible"; topPosition -= 3; leftPosition += 10; if (topPosition <= 0) { topPosition = 150; leftPosition = 0; } } /* ]]> */ </script> </head> <body onload="a = setInterval('flyButterfly()', 100);"> <p><img src="butterfly.gif" id="butterfly" style="position: absolute; left: 0px; top: 0px; visibility:hidden" alt="Image of a butterfly" height="120" width="150" /></p> <h1>Butterfly</h1> <p>According to Wikipedia:</p> <blockquote><p>A butterfly is an insect of the order Lepidoptera, it belongs to either the Hesperioidea (the skippers) or Papilionoidea (all other butterflies) Superfamilies. Some authors have also suggested the inclusion of the superfamily Hedyloidea, the American butterfly moths. They are notable for their unusual life cycle with a larval caterpillar stage, an inactive pupal stage and a spectacular metamorphosis into a familiar and colourful winged adult form. The diverse patterns formed by their brightly coloured wings and their erratic-yet-graceful flight have made butterfly watching a popular hobby.</p></blockquote> </body> </html> <--------------------------- END CODE ------------------------------> So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("cloud").style.top = y+'px';
document.getElementById("cloud").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("plane").style.top = y+'px';
document.getElementById("plane").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.
I really want to learn a way determine whether custom fonts via @font-face got downloaded by the client machine and then set styles differently depending on whether they got the fonts or not. To start I could run a fonts-inactive.css file to setup the styles to look nice without custom-fonts (this is the base style which should look fine without any JS, flash, custom fonts, etc.). Then run a JS that will run the font-face-rules.css (which attempts to load the fonts via @font-face css rules) - this way if JS isn't active then no fonts will be loaded and the document will default to its fonts-inactive.css. If the JS does run then font-face-rules.css will try to send the fonts. So the JS needs to somehow determine whether the fonts worked or not. If the fonts worked then the JS would run the fonts-active.css which would alter some style rules to make the page look better with the custom fonts (since we know they got the fonts we can tweak the page a little to look better with them). If the fonts didn't work then the JS needs to not run the fonts-active.css and instead just exit out leaving the document with its original, unaltered rules from fonts-inactive.css. (since we know they didn't get the fonts we leave them with the baseline stylesheet which optimizes the appearance for default fonts). Sadly I don't know the first thing about Javascript so I am hoping that you guys might be able to help me come up with something that works. Cheers, line I am attempting to make an page on my website where visitors can set my website as their homepage. I am trying to make my website read which browser my visitors are using and then redirects them to the page for the right browser where I can tell them how they can set my website as their homepage. Basically I need exactly the same thing as THIS. Could you explain to me in plain English how I can realize this. This is what I know have: Code: <table width="759" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<td width="378" height="28" align="right">Selecteer jouw browser </td>
<td width="16"></td>
<td width="365" align="left"><form id="browserSelection" name="browserSelection" action="customizeBrowser" method="GET"><select name="browser" size="1" id="browser" onchange="document.browserSelection.submit();"><option value="ff" selected>Firefox</option><option value="ie">Internet Explorer</option><option value="chrome">Chrome</option><option value="opera">Opera</option><option value="safari">Safari</option></select></form></td>
</tr>
</table>
________________________________________ Please tell me if I make any English mistakes in my posts. I am trying to write as perfectly possible. I have been searching for a way to accomplish a unique task for a while. Here's the situation: We have several users who are in locations where YouTube is blocked for various reasons. On our homepage we would like to embed a YouTube video except for when YouTube is blocked and then embed an alternative video that is hosted off one of our servers. Is there a way to use JavaScript to detect whether or not YouTube is available and then put in the correct video? Thanks in advance! hey all is there a code where I can detect if the browser is IE6 or IE7 and send them to another webpage? my current design is not compatible with IE6 or 7 and i want to make a new page that's compatible. thanks! hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...
i have a problem. i want to check that whether an element with a specific id exist on page or not. example Code:
<script type="text/javascript">
function bgcolo()
{
if(document.getElementById("jj") == null)
{
return red;
}
else
{
return green;
}
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="oo" bgcolor="return bgcolo();">bvbv</td>
</tr>
</table>
<div id="jj">fggftrytyyyyyyyyy</div>
</body><
Hi once again! Is it possible to detect was the mouse on the move or not in the moment when button is released ? |
|||||||