For anyone that checks my blog, my blog will be limited for the next couple of weeks. 01/24/2005 to 02/04/2005 due to a business trip.
My company is sending my team of developers to Microsoft to look over our .NET application and tell us how to improve it. This is a large scale application that has a lot of parts. It works pretty well, but any car out there can always run better when you upgrade the components under the hood!
I have a feeling that I am going to learn a lot these following weeks. I will have limited access to the internet throughout the next coming weeks. I will make ure to think of ideas to blog about for the next coming weeks!
Have fun!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Poor Heated Marriage
A poor man and woman sat down in their living room and the man said, ''I'm going down to the pub for a bit, so put your coat on.''
The woman replied, ''Oh, sweetie, why? Are you taking me with you?''
The man replied, ''No, I'm turning the heat off.''
Closing Multiple Pop Up Windows
A common question I see on many forums is, I have multiple pop up windows and I want them to all be closed with a click of a button. This can be rather easy if you make sure you open your pop up windows in a wise manner.
The first thing I am assuming is you know how to make a pop up window so I am not going in detail with that. When you create a pop up window you need to set it to a variable to store the object. The reason for this is so you can reference the window. Yesterday I showed how to send data back and forth with this reference. With this reference you can use the close() method to close the child window.
For example the following code opens a window and closes it after a set period of time.
winPop = window.open("about:blank");
var timer = setTimeout("winPop.close()",1000)
If you open up windows with the same object reference (e.g. winPop) it gets overwritten each time so it makes it basically impossible to reference the window from the parent. Therefore we need to attack it from another path. Using an array will make it very easy. Each time you open up a new window you increase the index. To close all of the windows all you need to do is to loop through the array.
Now when you loop through the array you need to make sure that it was created and that it is not closed. You do that with winPop && !winPop.closed. Since we are using an array, all we need to do is add [i] to winPop so we can reference each of the indexes.
Below is an example that opens up three windows and closes them after a set period of time:
var winPop = new Array();
winPop[winPop.length] = window.open("about:blank");
winPop[winPop.length] = window.open("about:blank");
winPop[winPop.length] = window.open("about:blank");
function closePops(){
for(i=0;i<winPop.length;i++){
if(winPop[i] && !winPop[i].closed){
winPop[i].close()
}
}
}
var timer = setTimeout("closePops()",1000);
Hope this helps you out.
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
A Handout
Lem: "I got fired from my job as a bank guard."
Clem: "That's awful. What happened?"
Lem: "Well a thief came in to rob a bank. I drew my gun. I told him that if he
took one more step, I'd let him have it."
Clem: "What did thief do then?"
Lem: "He took one more step so I let him have it. I didn't want that stupid gun
anyhow!"
Passing Data from Parent to Child Form
Passing information back and forth from the child window to the parent window is
rather easy once you learn how to reference the window object. This will allow you
to use a pop up window to grab information from a database, calendar, etc.
You most likely know to open a pop up window you need to use window.open. If you
have trouble making pop up windows, you can always use my generator here. When
you open the window you need to set it to a variable so the object is stored. For
example:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function OpenWindow(){
var winPop = window.open("testPop.html","winPop");
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1">
<input type="button" name="button" value="Grab Info"
onclick="OpenWindow()">
</form>
</body>
</html>
You will need this when you want to pass the information to the child (pop up)
window. In the example above note that I have also added a form with a text field
and a button. The text field will be filled in via the pop up window.
To do this you need to write some code in the pop up window. You can reference the parent window (the one that opened the pop up) with the window object reference window.opener. Then you just reference the document form filed like you normally do.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function SendInfo(){
var txtVal = document.formPop.textPop.value;
window.opener.document.form1.text1.value = txtVal;
window.close();
}
</script>
</head>
<body>
<form name="formPop">
<input type="text" name="textPop">
<input type="button" name="button" value="Send Info"
onclick="SendInfo()">
</form>
</body>
</html>
As you can see I also added window.close to close the pop up window. FYI: You can
not do window.opener.close() without a security warning. That is there so people
do not transfer you away to a site you do not want to go to. There are some ways
to get around that with some browsers, but I am talking about that here.
Now you can pass data from the parent to the child by using the window object reference along with the form name. For example:
winPop.document.formPop.textPop.value = variableData;Now if you want to pass the information as soon as the window opens, you have a slight problem. If you do it right after the window.open statement, you get an error. Reason, the page has not rendered the form elements yet. Therefore you need to add a pause, you can do that with a simple setTimeout.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var winPop;
function OpenWindow(){
winPop = window.open("testPop.html","winPop");
var theDate = new Date();
setTimeout("SendToChild('" + theDate.toLocaleString() + "')",10);
}
function SendToChild(data){
winPop.document.formPop.textPop.value = data;
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1">
<input type="button" name="button" value="Grab Info"
onclick="OpenWindow()">
</form>
</body>
</html>
Now you may say, I want to pass data from the parent to the child so the child
page's server side code can use it. If this is the case, you would need to pass it
with a query string.
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Title : Cross-Platform .NET Development Author/s : M. J. Easton, Jason King Publisher : Apress Category : C# and .NET Rating : 9 horseshoes out of 10I was not sure about this book when I first picked it up. Cross-platform and .NET Development never seemed to go together in my mind. After digging into the well-written book, I saw how .NET development can be used on multiple systems.
This book has great explanations of how to set up your development environment and what it takes to test code on multiple platforms. The book has a great explanation of the .NET architecture and gives C# code that is explained in great detail.
If you want to know the flexibility of the .NET framework than this book is for you. You should have no trouble understanding and applying the information contained in this book.
More info at Amazon.com
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
A little smirk
One day a secretary is leaving on her lunch break, and she notices her boss standing in front of a shredder with a clueless look on his face. The secretary walks up to him and asks if he needs help.
"Yes!" he says looking and sounding relieved, "This is very important."
Glad to help, she turns the shredder on and inserts the paper. Then her boss says, "Thanks, I only need one copy."
Create function like innerText
As you may have figured out innerText is IE only. That means that browsers like Mozilla, Firefox, and Netscape will return undefined. If you do not know what innerText does, it strips out all of the tags so you only see the text.
For example, if a div contains the HTML <span id='span1'>Eric</span>, innerHTML would return <span id='span1'>Eric</span> while innerText will return Eric.
Now to make innerHTML act the same we need to use some regular expressions with the strings replace() method.
Now the basic pattern we need to match is
Now the regular expression we need to use is /<\/?[^>]+>/gi
If you do not know regular expressions here is a quick explanation:
So now the function to replace the text would look like:
<script type="text/javascript">
var regExp = /<\/?[^>]+>/gi;
function ReplaceTags(xStr){
xStr = xStr.replace(regExp,"");
return xStr;
}
</script>
All you need to do is pass it a string and it returns the string stripped of the tags.
An example is shown below to grab the text from a div without the tags.
<html>
<head>
<script type="text/javascript">
var regExp = /<\/?[^>]+>/gi;
function ReplaceTags(xStr){
xStr = xStr.replace(regExp,"");
return xStr;
}
</script>
</head>
<body>
<div id="test">
<span id="span1">Test <u><b>Test</b></u> Test <br/><a href="#">Wow</a>!</span>
</div>
<script type="text/javascript">
var xContent = document.getElementById("test").innerHTML;
var fixedContent = ReplaceTags(xContent);
alert(fixedContent);
</script>
</body>
</html>
Hope this helps
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Birthday Gift
Adam was talking to his friend at the bar, and he said, "I don't know what to get my wife for her birthday - she has everything, and besides, she can afford to buy anything she wants, so I'm stuck."
His friend said, "I have an idea! Why don't you make up a certificate saying she can have 60 minutes of great sex, any way she wants it. She'll probably be thrilled." Adam decided to to his friend's advice.
The next day at the bar his friend said, "Well? Did you take my suggestion?"
"Yes, I did," Adam replied.
"Did she like it?"
"Oh yes! she jumped up , thanked me, kissed me on the forehead and ran out the door, yelling "I'll be back in an hour!!"
Grab the contents of a table cell
Well today is my 25th birthday, hence the joke above. I still feel like a nerd and I know I am going to get nerdy gifts from my fiancee. Well back to the JavaScript part of this blog.
Well The following is in response to a question that was posted on JavaRanch. I thought that this could be useful to other people so here it is.
It is not that hard to grab the text of a table cell as long as you have an id, object reference, or know the position of the cell.
You will need to use innerHTML which allows you to grab the text in the cell.
If the cell you want is named it is rather easy all you need to do is reference the id
var theText = document.getElementById("cellID").innerHTML;
But if you do not have an id to go by, it takes a couple more steps, but it is not that hard as long as you know the number of the row it is in and the number of the cell it is in:
//get the table element object
var theTable = document.getElementById("tableID");
//Grab all of the rows for the table (makes an array)
var theRows = theTable.getElementsByTagName("tr");
//Grab the cells for the 2nd row (remember 0 is first)
var theCells = theRows[1].getElementsByTagName("td"); //Header would be th
//now you have the rows an array
//Grab the 3rd cells text
var theText = theCells[2].innerHTML
If you have the row named, or you have the row object, you can just do:
var theRow = document.getElementById("rowID");
var theCells = theRow.getElementsByTagName("td");
var theText = theCells[2].innerHTML
Hope that helps you out.Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Things you would like to say at work
01. I can see your point, but you're still full of crap.
02. I don't know what your problem is, but I'll bet it's hard to pronouce.
03. I see you've set aside this special time to humiliate yourself in public.
04. I'll try being nicer if you'll try being smarter.
05. Ahh...I see the screw-up fairy has visited us again.
06. I like you. You remind me of when I was young and stupid.
07. I'm already visualizing the duct tape over your mouth.
08. The fact that no one understands you doesn't mean you're an artist.
09. What am I? Flypaper for freaks!?
10. And your cry-baby whiny-assed opinion would be...?
11. This isn't and office. It's Hell with fluorescent lighting.
12. If I throw a stick, will you leave?
13. Whatever kind of look you were going for, you missed.
14. Can I trade this job for what's behind door #1?
15. Chaos, panic, & disorder - my work here is done.
Scroll to an Element
Another common question I see is how do I scroll the window to a certain element on the page? Well you need to use the window.scrollTo() method to do it. The scrollTo() method recieves a x and y position.
For example scrollTo(100,200) would scroll to the 100 pixels to the right and 200 pixels down the page.
Now you are thinking, I do not knw the position of the element. It is just relatively positioned and it can be at a different spot depending on the size of the user's text on the screen.
Well I combined my script to find the position of any element on the page with the scrollTo() function.
The script finds the x and y position of the element that it is passed. You can do this for any element on the page that can be referenced.
The code:
<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
Now you can call the element on the body onload.
A element with an id
<body onload="ScrollToElement(document.formName.elementName)">A form element
<body onload="ScrollToElement(document.formName.elementName)">Also if you want the form element to have focus. Do not forget to add elementReference.focus(). Example:
<body onload="ScrollToElement(document.formName.elementName); document.formName.elementName.focus()">Now I hope this helps you out!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Boxed-In
An engineer, a physicist, and a mathematician are trying to set up a fenced-in area for some sheep, but they have a limited amount of building material. The engineer gets up first and makes a square fence with the material, reasoning that it's a pretty good working solution. "No no," says the physicist, "there's a better way." He takes the fence and makes a circular pen, showing how it encompasses the maximum possible space with the given material.
Then the mathematician speaks up: "No, no, there's an even better way." To the others' amusement he proceeds to construct a little tiny fence around himself, then declares:
"I define myself to be on the outside."
DHTML Ads
When I did not post this yesterday since I got a little busy at work, but I thought I would write it today.
Short and simple.
The new type of pop-up ad is not a pop-up at all. It is a simple DHTML principal that has always been around. It is a layer that is placed on top of the content. Now some browsers/software are able to block these, but they also have the chance of blocking normal content on the screen.
The real fancy one as normally a flash file. The more basic ones are just simple div absolutely positioned on top with a z-index set to the high value. The div then can be designed to have that little x or close link which just hides the element.
<a href="javascript:document.getElementById('theDiv').style.display='none';">close</a>
Other developers use an iframe since it makes it easy to update the content. With an iframe, you just have to change the source of the page that displays the ad. Therefore you never have to update the pages that contain the ad.
<iframe id="theAd" class="advert" src="theAd.html">Only way for these ads to not show is to disable JavaScript/Flash. BUT if the developer has the basic div advertisement shown initially, they will not be able to be hidden since JavaScript is required.
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Old Joke
While going through his wife’s dresser drawers, a farmer discovered three soybeans and an envelope containing $30 in cash. The farmer confronted his wife, and when asked about the curious items, she confessed:
“Over the years, I haven’t been completely faithful to you.”
“When I did fool around, I put a soybean in the drawer to remind myself of my indiscretion,” she explained.
The farmer admitted that he had not always been faithful either, and therefore, was inclined to forgive and forget her few moments of weakness.
“I’m curious though,” he said, “Where did the thirty dollars come from?”
“Oh that, ” his wife replied, “Well, when soybeans hit ten dollars a bushel, I sold out!”
How are people defeating pop up blockers?
I been asked this question and they are really not defeating a pop up blocker. If you go to a site and just view it, the pop up window will not happen. If you exit the site, it does not happen. So how come sometimes the pop up window is there?
The first thing you need to realize is the a popup window is only allowed by this piece of software if it is initialized by the user. AKA: an action has to be performed.
Therefore the better question that you should ask is how are links performing two actions instead of one?
It is rather simple to do and people have done it before pop up ads were the rage.
Now lets break this whole thing done.
We have a regular link that opens a page:
<a href="http://www10.brinkster.com/A1ien51">JavaScript</a>Now lets add an onclick handler that opens up a new window. Now if you click on that link, a pop up should be on top of the page and page should change location.
<a href="http://www10.brinkster.com/A1ien51" onclick="newWin = window.open('http://www.google.com');return true;">JavaScript</a>
The return true also helps browsers out with opening the link. Most likely most browsers will do both functions without the return false, but it is better to be safe.
Now IE normally shows the pop up window on top and Mozilla/Firefox normally shows the pop-up window on the bottom. So if you want the pop up window on the bottom (aka pop-under) you can just make the window loose focus and focus the parent.
<a href="http://www10.brinkster.com/A1ien51" onclick="newWin = window.open('http://www.google.com');newWin.blur();window.opener.focus();return true;">JavaScript</a>
You can make the pop up window on top by just reversing the process
<a href="http://www10.brinkster.com/A1ien51" onclick="newWin = window.open('http://www.google.com');window.opener.blur();newWin.focus();return true;">JavaScript</a>
Now I know I will get hate mail for doing this, but if you search Google you will find this answer. It has been around a long time and there is no way this can be stopped by a pop up blocker if the user allows this type of pop up window. Therefore if you see a site that uses pop up windows, then you should just learn to live with them or do not go to the site. I see it as a wrist exercise!
Tomorrow I will try to blog about the new generation of "pop-up" windows and why it is hard to defeat them.
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages