dougv.com « Doug Vanderweide

Recently asked on Yahoo! Answers:

Is there an equivalent of “window.print()” in JavaScript for printing individual elements out of a whole page?
For example:

Whole page: window.print
Individual Element: document.getElementById(‘element’).print…

I don’t want to print a whole page, just an individual element.

This really intrigued me because it’s the first time I’ve had cause to use remote scripting with JavaScript. We’re going to use two standard XHTML pages — one, a parent, the other, a helper contained in a hidden iFrame, each with its own JavaScript function.

Let’s get to it, shall we? As always, a link to a working demo appears at the end of the article.

Continue reading: Printing Sections Of A Web Page Using DIVs And JavaScript Remote Scripting »

Recently asked on Yahoo! Answers:

Is it possible to create a mouse over image that doesn’t use javascript?
And if not, is it possible to create one that doesn’t use the <a> link tag? I need to insert a mouse over image into a product page but the module I’m using already defines the <a> link for the potential button/mouse over image. ??? I just need to create a no-hassle, simple mouse over image that doesn’t use the <a> tag. If I use the <a> tag, it will override the link in the module. Help!

This is fairly easy to do with CSS alone, except rather than placing your image with an IMG tag, you use a DIV tag, and set the background-image property of that DIV to be the image you want to use.

Let’s start with the DIV itself, which calls a class we will call myRollover:

To make this work, we need a base style for the myRollover class that sets the height and width of the DIV to be those of the image; I’m also going to place a black scribe around the image.

The image is set as the background image of the DIV. So long as we don’t put any text or other content inside the containing DIV, it will appear like any other image on the page. To prove that, I’m going to float this “image” to the left, wrapping text around it, and set the margin of the DIV to 10px on the right and bottom to set the text off.

div.myRollover {
	float: left;
	margin: 0 10px 10px 0;
	width: 376px;
	height: 490px;
	border: solid 1px #000;
	background-image: url(3.jpg);
}

We need a CSS class that changes the background image when we hover over the image:

div.myRollover:hover {
	background-image: url(2.jpg);
}

Finally, we want to pre-load the rollover image so that the effect is seamless; we do that with an img tag that takes the class noshow, and by defining the noshow class as display: none.

img.noshow {
	display: none;
}

You can see this in action here:

http://www.dougv.com/demo/css_image_swap_mouseover/

I distribute code under the GNU GPL version 3.

Recently asked on Yahoo! Answers:

How do I make a link that takes the user to a random page?

I’ve seen a lot of sites that takes the user to a random page, like Wikipedia, or any site that does it, but I look at the link in the taskbar and it says something like www.example.com/example.html#, does the # have significance in something? Then how do I make a link that takes the user to a list of certain sites I have?

This is easily done in any Web programming language:

1. Create an array of URLs you want to use as “random” elements.
2. Generate a random number between 0 and one less than the length of the array.
3. Select that array cell and echo it out as the href attribute of a link element.

For this demo, I will use JavaScript, since it doesn’t involve a server technology.

Continue reading: A Simple Random Link JavaScript »

Recently received in my e-mail:

Hi There

Found your email on your blog via the contact me which is linked to on your [Yahoo! Answers] profile.

I was curious as to what languages you program in as I am keen to get into programming and wanted any advise or recomendations for books.

I have done quite a bit of visual basic 6 which I know is not OOP.

Would be good to either do vb 2005 or c++ or java

Thanks

Shane

My response to this e-mail follows.

Continue reading: An Open Letter To A Programming Noob »

Recently asked on Yahoo! Answers:

What are the MS Office Frontpage JavaScript codes needed to calculate the number of days between two dates?

I am not a programmer, but i need the codes and add it to an existing webpage format. What i need exactly is to show in the page a kind of table identifying a date in the future, the current date, and the number of days (the difference between the two dates) from the current date to the mentioned future day. Its like a countdown on how many days are left before that future date comes…

This is very easy to accomplish via JavaScript; because JavaScript treats time as an integer, it’s all just math, plus changing the values of a couple of DIVs via JavaScript’s DOM manipulation abilities. So let’s get right to it.

Continue reading: Displaying The Days Between Two Dates Via JavaScript / DOM »