|
JavaScript - Detecting Div Overflow
I have an html page that contains a div that has overflow:auto. Is there a way to detect if the scrollbar is displayed on the div? If the scrollbar is present then I want a message to be displayed inside another div. If there is no scrollbar then I don't want any message to appear.
Thanks Similar TutorialsIs it possible to detect keystrokes on the keyboard? I want to detect the arrow keys in particular. I'm going through the online reference links in the sticky now, great resource! Hi guys, i would like a script that detects if quicktime is installed like this one here http://developer.apple.com/internet/...lplugins.shtml but i want it to offer the link to quicktime if not installed, and continue to load the player if quicktime is installed. Im thinking something like this.. Code:
<script type="text/javascript"
src="http://developer.apple.com/internet/webcontent/examples/detectallplugins.shtml "></script>
<script>
if (detectQuickTime == true) {
setTimeout('Redirect()',0);
}
else
{
setTimeout('Redirect2()',0);
}
function Redirect()
{
location.href = 'http://www.mysite.com/player.htm';
}
function Redirect2()
{
location.href = 'http://www.mysite.com/error-install-quicktime.htm';
}
</script>
But i cant make it work. Can anyone help? I am trying to detect the parent URL on a page for a Facebook application so that if the user is on my site rather than accessing the application via Facebook they will be redirected to the FB App page. In PHP I can use: if(strstr($parenturl,"mysite.com")){header("location:fbapp.com");exit;} Is it possible to do this in JS also? Because with FB Apps the URL is not always the same so instead of detecting a full URL I just want to search for my domain name within document.location.href to see if it exists and IF yes > Redirect back to FB. Hi, I have do a calculation when an user enters the value in the textbox during onblur event. But during the onblur event I need to capture the tabkey (keyCode) and if it is 9 do the calculate else not do that. But the problem is we cannot detect a keyCode for tab in onblur. But for sure I need to use onblur in this case and cannot use onkeydown as this will have impact on the UI screen for this particular scenario. How to go about this? in the textbox I am calling onblur = "test()" Please provide a helping hand. Thanks. Hi, Wondering if anyone can help me out with some javascript. How do I check upon clicking a random object on the page that the object onmousedown is an image or not? Any help is much appreciated. -cantonboi My credit card processing service will only accept English characters. I need to detect entries in the form that are using non English characters. Is there a way in Javascript to create a function to force a string to UTF-8? My idea is to do something like function forceUTF8(X){ Y = ???? X; return Y; } if ( stringA != forceUTF8(stringA) alert ("You must use English Characters"); I want to detect the double-press of the space key. However, I want a single press of a space key to have a different function. The double-tap of space should only count if the taps of space are no more than, say, a half second apart. For example: The user hits space once, and javascript begins performing one action. 1/3rd of a second later, they hit the space bar again, and since that is within our threshold of 1/2 of a second, the action that began because the user hit the spacebar once should be cancelled, or undone (which I can write later) and the action when the user hits the spacebar twice should begin. Anyone have an idea how to do this? Thanks! I have an input box and I want it to function so that when the user presses the enter/return key, it runs a js function. I have the following code: Code: input.onkeydown = function () {
if (event.keyCode === 13) {
// do something
}
}
This works in Safari, Opera, Chrome, and even IE, but not in firefox. Any idea how I could fix this? Thanks, Julian I am new to Javascripting but am teaching myself and have written this script from my portfolio site in an effort to detect the users screen resolution so that my art is viewed properly. I have ran the code through a debugger and it has comback as "free of errors" but when I run the webpage on my local machine it does nothing, the page displays as if I had written nothing and due to my limited knowledge of Javascript I am at a loss and hoping for someone to say, "look you screwed this part up fix this and it's good to go"... I'm hoping. Thank You all in advance.. Here is the code Code: <script language="Javascript">
function detect(){
if(screen.width<1280||screen.height<720){
alert("This web page is best viewed with a screen resolution of 1280 by 720 or higher. Your current resolution is "+screen.width+" by "+screen.height+". If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution. Nice Job!")
}
}
</script>
Is it possible to call a function when user clicks on an (x,y) point (or a small area). I can't place a new object and just set the "onclick" value, so is it possible to do it without that? Thanks for the help. Hi there. I'm considering using the script below to detect the screen resolution of the user and then call a specific CSS for that user. The main aim is so that I can design the website at a fixed width for a larger resolution (used by most people), but if the user has a 980px resoltion then they can be catered for as well. Code: <SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>
I don't want to use liquid layouts as I think it looks messy, and I don't want to design to a width of 960px as I don't like the blank space at the sides on larger resolutions. Is this an acceptable method, or do you think i'll run into problems? Any advice would be great. Cheers. Pat. Hello there, This seems to be a bit of a sore topic on the forums but at least I think I have good reason for wanting to do it - I've written a script that displays tooltips when your mouse hovers over a link - all this is fine, but when I click on the link and move to another page, then click the back button on the browser to go back, the tooltip for the link I clicked is still visible! It'd be great if there was a way of detecting the button had been pressed so that I can hide it... p.s. I tried onclick = "tooltips.hideToolTip(4); return true;" for the links but no joy... Many thanks Edd function doUnload() { if (window.event.clientX < 0 && window.event.clientY < 0) { alert("Window is closing..."); } } i get window.event undefined by using var evt =window.event? event : e i get e undefuned var evt =window.event? event : e if (evt.clientX < 0 && evt.clientY < 0) { alert(evt.clientX +"Window is closing..."); } Hi, I'm writing a page scraper in javascript which involves loading a page to scrape, detecting when the page has loaded successfully and then scraping the data. I can get the 'page loading detection' to work if I load the page in a sub-frame. But this is no good as some sites include frame-buster code which breaks my scraper and I cant get any of the framebuster-buster solutions to work. So instead I decided to look at loading the page in a separate tab. Does anyone know how to reliably detect when a page has finished loading in a tab please? I am using Firefox only and I dont mind if the solution requires some extension or greasemonkey script (I have already added the configuration/commands to allow access to pages from different domains). The code below shows an attempt. It sometimes detects when the initial page has loaded but when I press 'submit' it doesnt detect the second loading. Thanks. Code: <html>
<head>
<script type="text/javascript">
currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");
currentPageObj.addEventListener("load", function(){alert("loaded")}, false);
</script>
</head>
<body>
<form action="http://www.example.com" rel="nofollow" target="currentPage">
<input type="submit">
</form>
</body>
</html>
Hi... Is there anyway to differentiate between refreshing a window and closing the browser. It seems both events are handled by onUnload event. Thanks Hi 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 URL: https://medicard1.com/services.html Site also employs CodeIgniter from original developer. Code below sets up a table with a form and script in separate cells of the same row. Looks good and click on check box works ok, but script seems to only run when the page is initially loaded. Does not change variable 'c' and display the change. Am in a bind for this one. My developer is away for the holiday and CEO wants it done ASAP. Anyone have an idea? <!-- Setup a table to hold the elements where I want them without conflicting with CodeIgniter - K.I.S.S.--> <table style="border:0px;"> <tr> <td style="width:600px; text-align:left;"> <!-- Un-submitted form with legend and checkbox input to acknowledge terms and display discount code --> <form name="acknowledge" action="" method=""> <legend>I acknowledge that I have read and understand the content of this page <!-- onClick should execute display_code() script --> <input style="border:0px; width:40px;" type="checkbox" name="investor" onClick="display_code()"/> </legend> </form> </td> <td style="width:200px; text-align:right;"> <!-- Script should check checked state of checkbox investor and set c to appropriate value --> <script type="text/javascript"> <!-- set c="" after get this working --> var c="NOT SET"; function display_code() { if (document.acknowledge.investor.checked) { var c="INVESTOR"; } else { <!-- set c="" after get this working --> var c="NO CODE"; } } document.write('Your code is: ' + c); </script> </td> </tr> </table> AC_ActiveX.js & AC_RunActiveContent.js is for java app that detect my client mac address I have java application running on my computer. I've tested on several pc, sometimes it detect the mac address, but sometimes nothing came out. In create_users.php, somehow im not able to store the mac address into a variable..( var mac = getMacAddress(); ) 1) Are my java coding would run on every pc? 2) I'm able to print out the mac address with "document.write(getMacAddress());" but why isit having stored in the variable is an issue? 3) which explorer would be the best to have the java running? IE/FF/Opera? create_users.php PHP Code: <script src="Scripts/AC_ActiveX.js" type="text/javascript"></script> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <!--[if !IE]> Firefox and others will use outer object --> <embed type="application/x-java-applet" name="macaddressapplet" width="0" height="0" code="MacAddressApplet" archive="macaddressapplet.jar" pluginspage="http://java.sun.com/javase/downloads/index.jsp" style="position:absolute; top:-1000px; left:-1000px;"> <noembed> <!--<![endif]--> <!----> <script type="text/javascript"> AC_AX_RunContent( 'classid','clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA','type','application/x-java-applet','name','macaddressapplet','style','position:absolute; top:-1000px; left:-1000px;','code','MacAddressApplet','archive','macaddressapplet.jar','mayscript','true','scriptable','true','width','0','height','0' ); //end AC code </script><noscript><object classid="clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA" type="application/x-java-applet" name="macaddressapplet" style="position:absolute; top:-1000px; left:-1000px;" > <param name="code" value="MacAddressApplet"> <param name="archive" value="macaddressapplet.jar" > <param name="mayscript" value="true"> <param name="scriptable" value="true"> <param name="width" value="0"> <param name="height" value="0"> </object></noscript> <!--[if !IE]> Firefox and others will use outer object --> </noembed> </embed> <script> function getMacAddress(){ document.macaddressapplet.setSep( "-" ); return (document.macaddressapplet.getMacAddress()); } var mac = getMacAddress(); </script> AC_ActiveX.js Code: function AC_AX_RunContent(){
var ret = AC_AX_GetArgs(arguments);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_AX_GetArgs(args){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args[i].toLowerCase();
switch (currArg){
case "pluginspage":
case "type":
ret.embedAttrs[args[i]] = args[i+1];
break;
case "data":
case "codebase":
case "classid":
case "id":
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblClick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
ret.objAttrs[args[i]] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
break;
default:
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
}
}
return ret;
}
AC_RunActiveContent.js Code: var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
function ControlVersion()
{
var version;
var axo;
var e;
// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
try {
// version will be set for 7.X or greater players
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
version = axo.GetVariable("$version");
} catch (e) {
}
if (!version)
{
try {
// version will be set for 6.X players only
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
// installed player is some revision of 6.0
// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
// so we have to be careful.
// default to the first public version
version = "WIN 6,0,21,0";
// throws if AllowScripAccess does not exist (introduced in 6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 4.X or 5.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 3.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3,0,18,0";
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 2.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
version = "WIN 2,0,0,11";
} catch (e) {
version = -1;
}
}
return version;
}
// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
// NS/Opera version >= 3 check for Flash plugin in plugin array
var flashVer = -1;
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
var descArray = flashDescription.split(" ");
var tempArrayMajor = descArray[2].split(".");
var versionMajor = tempArrayMajor[0];
var versionMinor = tempArrayMajor[1];
var versionRevision = descArray[3];
if (versionRevision == "") {
versionRevision = descArray[4];
}
if (versionRevision[0] == "d") {
versionRevision = versionRevision.substring(1);
} else if (versionRevision[0] == "r") {
versionRevision = versionRevision.substring(1);
if (versionRevision.indexOf("d") > 0) {
versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
}
}
var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
else if ( isIE && isWin && !isOpera ) {
flashVer = ControlVersion();
}
return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
versionStr = GetSwfVer();
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
// Given "WIN 2,0,0,11"
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
tempString = tempArray[1]; // "2,0,0,11"
versionArray = tempString.split(","); // ['2', '0', '0', '11']
} else {
versionArray = versionStr.split(".");
}
var versionMajor = versionArray[0];
var versionMinor = versionArray[1];
var versionRevision = versionArray[2];
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if (versionMajor > parseFloat(reqMajorVer)) {
return true;
} else if (versionMajor == parseFloat(reqMajorVer)) {
if (versionMinor > parseFloat(reqMinorVer))
return true;
else if (versionMinor == parseFloat(reqMinorVer)) {
if (versionRevision >= parseFloat(reqRevision))
return true;
}
}
return false;
}
}
function AC_AddExtension(src, ext)
{
if (src.indexOf('?') != -1)
return src.replace(/\?/, ext+'?');
else
return src + ext;
}
function AC_Generateobj(objAttrs, params, embedAttrs)
{
var str = '';
if (isIE && isWin && !isOpera)
{
str += '<object ';
for (var i in objAttrs)
{
str += i + '="' + objAttrs[i] + '" ';
}
str += '>';
for (var i in params)
{
str += '<param name="' + i + '" value="' + params[i] + '" /> ';
}
str += '</object>';
}
else
{
str += '<embed ';
for (var i in embedAttrs)
{
str += i + '="' + embedAttrs[i] + '" ';
}
str += '> </embed>';
}
document.write(str);
}
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_SW_RunContent(){
var ret =
AC_GetArgs
( arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
, null
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args[i].toLowerCase();
switch (currArg){
case "classid":
break;
case "pluginspage":
ret.embedAttrs[args[i]] = args[i+1];
break;
case "src":
case "movie":
args[i+1] = AC_AddExtension(args[i+1], ext);
ret.embedAttrs["src"] = args[i+1];
ret.params[srcParamName] = args[i+1];
break;
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblClick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
case "type":
case "codebase":
case "id":
ret.objAttrs[args[i]] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
break;
default:
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
}
}
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
}
Hi, I am doing some work, where I want to have a table heading that remains in a fixed position, when the window is scrolled (I will ultimately have a very long table). I have written the code below, which fixes the heading. I am trying to make it so that each body row of the table gets hidden, when the window is scrolled such that the row passes above the heading row. To do this I need to somehow detect the distance of each row from the top of the window as the window is scrolled so I can detect when it goes above the fixed heading row. I have tried to do this using offsetTop and scrollTop in the code below, but it doesn't seem to be working (in Safari at least, which I am using for my main testing). Does anyone know a simple way of detecting the distance to the top of the window so I can use it in my code below, which will work in all browsers? (I don't really want to use div, and overflow-y:auto to achieve the fixed heading scrollable table, because I don't want to have a sub-section with its own scrollbar. I just want to have the main page scrollbar when the list gets long enough to require it.) Thanks for your help. Cheers, Laudrup Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test simple scroller</title>
<style type="text/css">
.myvisible
{
visibility:visible;
}
.myinvisible
{
visibility:hidden;
}
table#mytable td
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table#mytable th
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table#mytable thead
{
position:fixed;
top:50px;
background:white;
z-index:+1;
}
</style>
<script language="JavaScript">
<!-- Beginning of JavaScript -
var rows;
function hideoverflow() {
rows = document.getElementById("mytable").getElementsByTagName("tr");
for (i=1; i<rows.length; i++){
if((rows[i].ScrollTop - rows[i].offsetTop)>50){
rows[i].className="myinvisible";
}
else{
rows[i].className="myvisible";
}
}
}
// - End of JavaScript - -->
</script>
</head>
<body onScroll='hideoverflow();'>
<p>My heading</p><br>
<table id="mytable" border="0" cellspacing="0"bordercolor="black">
<thead>
<tr>
<th width="100" bgcolor="white">HeadA</th>
<th width="140" bgcolor="white">HeadB</th>
<th width="120" bgcolor="white">HeadC</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">row1</td>
<td width="140">row1</td>
<td width="120">row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
<td>row4</td>
</tr>
<tr>
<td>row5</td>
<td>row5</td>
<td>row5</td>
</tr>
<tr>
<td>row6</td>
<td>row6</td>
<td>row6</td>
</tr>
<tr>
<td>row7</td>
<td>row7</td>
<td>row7</td>
</tr>
<tr>
<td>row8</td>
<td>row8</td>
<td>row8</td>
</tr>
<tr>
<td>row9</td>
<td>row9</td>
<td>row9</td>
</tr>
<tr>
<td>row10</td>
<td>row10</td>
<td>row10</td>
</tr>
<tr>
<td>row11</td>
<td>row11</td>
<td>row11</td>
</tr>
<tr>
<td>row12</td>
<td>row12</td>
<td>row12</td>
</tr>
<tr>
<td>row13</td>
<td>row13</td>
<td>row13</td>
</tr>
<tr>
<td>row14</td>
<td>row14</td>
<td>row14</td>
</tr>
<tr>
<td>row15</td>
<td>row15</td>
<td>row15</td>
</tr>
<tr>
<td>row16</td>
<td>row16</td>
<td>row16</td>
</tr>
<tr>
<td>row17</td>
<td>row17</td>
<td>row17</td>
</tr>
<tr>
<td>row18</td>
<td>row18</td>
<td>row18</td>
</tr>
</tbody>
</table>
</body>
</html>
|
|||||||