JavaScript – DHTML – AJAX

Not quite JavaScript related but a Server 2003 error that may happen to some of my readers.

The wizard could not successfully configure this user account.  The following could not be completed:

• A home folder could not be created for this user.
• Quota information could not be set.

From: Home Folder at Microsoft Support

Folder Name	Users Shared Folders
Share Name	Users
Description	Users Shared Folders

User/Group	Full Control	Change	Read
Domain Admins	Allow	Allow	Allow
Domain Users	Allow	Allow	Allow
SBS Folder Operators	Allow	Allow	Allow

By setting these permissions, I was able to then successfully create a user.  The server with this issue moved the “Users Shared Folders” to a partition with more space.

Tips for Installing Windows 7 in a Dual Boot with XP:

Before you Install for a Dual Boot, Backup your XP boot drive just to be safe.  I used Acronis True Image and Created a Recovery Boot CD.

The XP installation is on my C: drive.  I already had a 2nd partition on my drive where I will install Windows 7.  In “My Computer” I labeled the 2nd partition “Win7″.  If you have a 2nd Drive that will also work or you can use partitioning software like Partition Magic to resize a large drive to have 2 smaller partitions.  Make sure the partition is formated as NTFS.  After cleaning off my 2nd partition I make sure the XP install is not using the 2nd partition for Virtual Memory. — Dual Boot Windows 7

I develop Intranet apps with IE as the supported browser, so how other browsers are effected are unknown. I had an app that displays 1000+ lines on a single page and each line had an inline function “myfunction(’valueID’)” and would render to the page much slower than the actual querry would take to return the data. At first we thought there was just a lot of data and it just took time to render.
Example 1: <img src=”img.gif” mce_src=”img.gif” onclick=”myfunction(’456-12′)”>

Recently we found that if we put the “valueID” in an attribute and referenced it through this.attrName it display much faster.
Example 2: <img src=”img.gif” mce_src=”img.gif” onclick=”myfunction(this.valueID)” valueID=”456-12″>

One of the pages with “ALL” results, returned over 5000 records. This page went from a nearly 2 minute query-load-display time down to a 25-30 second time to display.

I just could NOT have imagined that it would have made such a significant difference. Further testing revealed that if the variable remained constant in the functions it was also very fast, but when they were all unique it slowed down again.  

We concluded: (atleast in IE) The browser has to allocate memory for the variables in the functions as it tries to display the page, but not for the attributes. also posted on Webmaster World : Interesting find: myfunction(’value’) vs myfunction(this.myval)

If you need a “Wait” or “Loading” icon to help your visitors know there is more info about to be displayed on your page and you are not skilled at creating those little spinning icons, you need AjaxLoad.info.

They have a simple interface and multiple image options (some with BIG options) to select from.  The nice thing about the site is that they have an options for Transparent Backgrount, Background Color and Foreground Color.  After selections are made, press the “Generate” button to create your image.  If you are happy with the choices you made, then you can download the image.

http://www.ajaxload.info 

P.S. I also found a review of the site here (Chaos Labratory.com – Ajax Loading Icons)

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)

AJAX is a very nice tool.  It allows us to build web pages that can retrieve bits of information with having to reload the entire page.  But some developers can take this to an extreme.  These developers want to possibly load the whole site’s content through AJAX.  After the user clicks a few links,  the user sees new data and finds something of interest.  The user may want to “Bookmark” the page.  If the user tries to bookmark the current data, they will not be able to.  The URL still has the original landing page location.

This is similar to users wanting to bookmark “Framed Pages”, the URL of a Framed site always stays at the www.domainname.com.  This is not “Good” for the users,  if they go back to the “bookmark” they have to search for that page again(if they remember why they bookmarked it in the first place).  If they can’t find the data they were after or couldn’t remember why they had that site, it will probably get deleted from the users bookmarks.

My Theory for the User:

1. Create bookmarkable page sections.
2. Update Data or Change Data that belongs on that page and will be there (or similar data) in the future.
3. Unrelated or more complex changes/updates to the page deserve their own page.
4.  Don’t make the user “Learn” how to use your site.

Well that seems pretty basic and painless if followed.

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

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>

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>

In the beginning Google created an Algorithm, and it was good. It was based on sites linking between each other, creating a “web” of pathways for users to follow.

Business practices have included “paid” advertising for many many many years. Links today are being purchased for advertising purposes. Google doesn’t like. Why is it now that Google is wanting webmasters to nofollow and to not take money for links that allow users to follow. If you haven’t heard, nofollow is a Link Condom, it protects Google’s Algorithm from skanky, whorish, God Forbid – “Paid Links”.

Google is wanting Fake Link Pimps to tattle on sites with paid links. “Matt Cutts a Link Pimp?“, is a fun Post with a pic of Matt C. in Pimp Clothes.

Just like prostitution paid linking will simply go low profile/underground. As Google has success penalizing paid linking people will simply stop using visible services like Text Link Ads and find new ways of doing business. Buying and selling paid links will become more sophisticated and/or secretive but it won’t disapear.

I am not suggesting to hide the links you are being paid for with JavaScript or AJAX as that is probably not what was the expectation from the purchaser. But if you have Affiliate links or other links that you are not worried about passing “link value” then it might be a technique that could be used.