Entries Tagged 'JavaScript' ↓
September 11th, 2007 — JavaScript
Ok, I was coding some javascript for an intranet application and I kept getting this error: “Object doesn’t support this property or method”. I was just using a button with an onclick event to call a function to close a record through a AJAX call. I reduced the function down to just an alert(”hello”) and still was getting this error.
Stepping forward to the issue, I was calling a function, “closeRec(var1,var2)” and had a form with an ‘id=”closeRec”. For some reason, maybe a good reason, in IE this causes this very generic ERROR. This is a case sensitive issue as ‘id=”CloseRec” does not initiate the error.
If you have a good explanation for this error “Object doesn’t support this property or method” in IE please respond. (I Didn’t try FireFox)
August 4th, 2007 — JavaScript
WOW, usually my preference for the way things work in a browser is the “Way of FireFox“. Like the boxModel, I prefer the box to stay the same size. If I set it to 100px wide, and then add 10px of padding, I don’t like that IE makes the actual size of the box 120px wide. But now in FireFox, I have found that the JavaScript function nextSibling to include “whitespace” as a TextNode.
This means, if you have code like this:
<div id=’first’>Text here</div>
<div id=’second’>More Text</div>
In FireFox: document.getElementById(”first”).nextSibling.tagName would return ‘undefined’. This is because FireFox sees the whitespace as a TextNode, but IE will see the nextSibling and return ‘div’.
Here is a little work around for the FireFox “WAY”:
function myFunction() {
vSibling = document.getElementById("first").nextSibling
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode vSibling = vSibling.nextSibling;
};
Node Type Chart:
| Value |
Node Type |
| 1 |
ELEMENT_NODE |
| 2 |
ATTRIBUTE_NODE |
| 3 |
TEXT_NODE |
NodeType chart Complete List -> javascriptkit.com
July 10th, 2007 — JavaScript, User Interface (UI)
Here is a generic script to show/hide a DIV or other element via “nextSibling” of the DOM. This example script uses a IMG as the click object within an “H?” tag as its Parent Object. The “CLICK” of the image activates the script passing “this” to the function. The function then with the DOM gets that image “Parent” object. Next is identifying the “nextSibling” of that parent object.
With the “nextSibling” we check to see if the “display” of the element is “none”. If it is “none” we set “vSibling.style.display = ‘block’;” to enable the element to be visible. If it is not “none” then we set it to “vSibling.style.display = ‘none’;”
Images needed:
Show/Hide Example
<H4> <!– Parent of trigger element (img) –>
<img src=”img/expand.gif” alt=”Show Div” border=”0″ style=”cursor:pointer;” onclick=”showHide(this);” />
Title #1 with H tag and DIV
</h4>
<div style=”display:none;”> <!– Effected Element (sibling of H4) – “display:none;” needs to be inline –>
<p> This is the content of the #1 div</p>
</div>
Here is the HTML and Javascript
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>SHOW/HIDE Div with Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script type="text/javascript">
function showContent(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
if(vSibling.style.display == "none")
{
vThis.src="/img/collapse.gif";
vThis.alt = "Hide Div";
vSibling.style.display = "block";
} else {
vSibling.style.display = "none";
vThis.src="/img/expand.gif";
vThis.alt = "Show Div";
}
return;
}
</script>
<body>
<h3>Show/Hide Div Example</h3>
<div style="margin-top:5px;">
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #1</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #1 div</p>
</div>
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #2</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #2 div</p>
</div>
</div>
</body>
</html>
June 22nd, 2007 — JavaScript, User Interface (UI)
Here is a simple javascript click and drag example. It contains a “Drag Handle” and gets the parentNode as the whole object to drag. So the “handle” could be an image in a div to click and drag around the window.
I used global variables and really the main criteria to use the script is to have your “drag handle” defined class=”dragHandle” as the global event handler “mousedown” does the rest.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
<!--
.regular {
background-color: #0099FF;
border: 2px solid #000066;
}
.drag {
background-color: #0099FF;
border: 2px solid #000066;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
z-index:100;
}
.dragHandle {
cursor:move;
background-color:#003399;
color:#FFFFFF;
display:block;
padding:2px 0;
width:150px;
text-align:center;
}
-->
</style>
<script type="text/javascript">
document.onmousemove=getMouseMove
document.onmousedown=getMouseDown
document.onmouseup=getMouseUp
var clicked = false;
var x;
var y;
var element;
var clickX;
var clickY;
reg = new RegExp("([0-9]*)px", "i");
function getMouseDown()
{
clickItem = event.srcElement;
if(clickItem.className && clickItem.className == "dragHandle")
{
clicked = true;
element = clickItem.parentNode;
if(event.offsetX || event.offsetY) {
clickX=event.offsetX;
clickY=event.offsetY;
}
else {
clickX=event.pageX;
clickY=event.pageY;
}
element.className = 'drag';
}
}
function getMouseMove() {
if(clicked == true) {
elementX = parseInt(reg.exec(element.style.left)[1]);
elementY = parseInt(reg.exec(element.style.top)[1]);
if(event.offsetX || event.offsetY) // IE
{
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY;
x=elementX + (event.offsetX - clickX);
y=elementY + (event.offsetY - clickY);
if(x < 0){x=0;event.pageX = clickX;}
if(y < 0){y=0;event.pageY = clickY;}
} else { // Netscape or FireFox
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY ;
x=elementX + (event.pageX - clickX);
y=elementY + (event.pageY - clickY);
if(x < 0) x=0;
if(y < 0) y=0;
}
element.style.left = x +'px';
element.style.top = y +'px';
document.getElementById('xval').innerHTML = x;
document.getElementById('yval').innerHTML = y;
}
return;
}
function getMouseUp() {
if(clicked == true)
{
clicked = false;
element.className = 'regular';
element = null;
}
}
</script>
</head>
<body>
<div id="dragContainer" class="regular" style="position:absolute; top: 34px; left: 135px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="dragContainer2" class="regular" style="position:absolute; top: 34px; left: 467px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="dragContainer3" class="regular" style="position:absolute; top: 148px; left: 303px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="data">
<br>X: <span id="xval"></span>
<br>Y: <span id="yval"></span>
<br>
<br>Xtop: <span id="xtopval"></span>
<br>Ytop: <span id="ytopval"></span>
<br>
<br>x: <span id="x"></span>
<br>y: <span id="y"></span>
</div>
<body>
</body>
</html>
June 14th, 2007 — JavaScript, User Interface (UI)
IE Select Box Bug: this is when you have a dropdown <select> box and you need to place an element over it temporarily like a pop up navigation menu similar to the ypslideout menu or any other <div> element. I mention the ypslideoutmenu because I was just using it because of it being “Search Engine Friendly” and needed to make one of the menus longer to add an additional page, but it went into a select box that I used for filtering data on multiple but similar pages.
I did not want to modify all the pages and place the select’s in a “less user friendly” location, nor did I want to change the menu system that users were comfortable with. With a fair amount of researching the issue, I found a potential solution. That was the “Iframe Select Box Hack and Bug Fix”. Here is a version using JavaScript to create the Iframe and get ride of it when you don’t need it here is the Javascirpt Iframe link.
Below is my static version that I got to work for my needs. The object is to create an IFrame (which actually can cover the select box) and then place your other code and text in front of the Iframe. You don’t actually load anything in the Iframe. I found that the Iframe could not be “visibility:hidden;” or “display:none;” and still cover the select item, so I turned the “alpha(opacity=0)” so that it is invisible to the user.
<div id="menu4Container" style="">
<!--IFRAME IE HACK to cover SELECT dropdown list boxes. Iframe needs to be resized for menu height and width. -->
<iframe id="menu4iframe" src="javascript:'';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" style="position:absolute; left:0; top:0px; display:block; filter:alpha(opacity=0);" ></iframe>
<div id="menu4Content" class="menu">
<div class="navlist" >
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</div>
</div>
<br> </div>
June 9th, 2007 — JavaScript
Is it “Old School” Java Scripting yet to traverse the Document Object Model (DOM) of the form to get to your data?
Is there a reason that someone would recommend to use the Form DOM like “document.formName.element.—”?
function DropDownSelectAll()
{
for(var i = 0; i < document.formName.selectName.options.length; i++) // cycle through the object list
{
document.formName.selectName.options[i].selected = true; // select each item
}
document.formName.submit();
return false;
}
Why Not use getElementById(”id”)? Is not the attribute name=”elementName” being depricated to using the id=”uniqueID”?
function DropDownSelectAll()
{
for(var i = 0; i < document.getElementById(”selectid”).options.length; i++) // cycle through the object list
{
document.getElementById(”selectid”).options[i].selected = true; // select each item
}
document.formName.submit();
return false;
}