How to Zoom down text box like Windows Update?

Anyone noticed the fancy zoom down of the text box pretty much to a point
for chosen updates when clicked on Windows Update? I expect its dhtml and
wondered if anyone knew of a script that would do this for my site - I just
can't seem to get at the source for the microsoft page - tricky buggers!

John

All you're really talking about here is a DIV with a 1px border, some
javascript interval script, and a bit of math.

Given: you know how big the area is you want to shrink - offsetWidth,
offsetHeight, offsetLeft, offsetTop. You know how big you and where you
want it to shrink to - style.width, style.height, 0, 0 (or wherever). Now
all you need is a bit of javascript to calculate the steps to get from A to
B, and apply that step using setInterval. Don't hold me to my syntax - I'm
writing from home and in a bit of a rush, but it would be something like:

<div id='divFly' name='divFly' style='display:none; border: 1px solid
black'>&nbsp;</div>

offsetWidth = 200 // set these four to the coords of the div you want to fly
offsetHeight = 100
offsetLeft = 50
offsetHeight = 50

destWidth = 10
destHeight = 10
destLeft = 0
destTop = 0

stepWidth = (offsetWidth - destWidth) / 10 // 10 steps
stepHeight = (offsetHeight - destHeight) / 10
stepLeft = (offsetLeft - destLeft) / 10
stepTop = (offsetTop - destTop) / 10

var flyInterval

function buttonHide_onClick(){
// setup divFly
divFly.style.left = offsetLeft
...top
...width
...height
divFly.style.display = ''
flyInterval = setInterval('divFly_doFly()', 100) // the effect will take
one second
}

function divFly_doFly(){
if ((divFly.offsetLeft - stepLeft) > destLeft) {
divFly.style.left = divFly.offsetLeft - stepLeft
...top
...width
...height
}
else {
clearInterval('flyInterval')
}
}

Regards,

William Morris
Manager, Product Development, Seritas LLC
Kansas City, Missouri
http://www.seritas.com/leadtrack

"john" <news (AT) definitely (DOT) no-spam.org.uk> wrote

Anyone noticed the fancy zoom down of the text box pretty much to a point
for chosen updates when clicked on Windows Update? I expect its dhtml and
wondered if anyone knew of a script that would do this for my site - I
just
can't seem to get at the source for the microsoft page - tricky buggers!

John

Thanks a million William - I'll try it!

John


"William Morris" <seamNOlyneSPAM (AT) hotmail (DOT) com> wrote

All you're really talking about here is a DIV with a 1px border, some
javascript interval script, and a bit of math.

Given: you know how big the area is you want to shrink - offsetWidth,
offsetHeight, offsetLeft, offsetTop. You know how big you and where you
want it to shrink to - style.width, style.height, 0, 0 (or wherever). Now
all you need is a bit of javascript to calculate the steps to get from A
to
B, and apply that step using setInterval. Don't hold me to my syntax -
I'm
writing from home and in a bit of a rush, but it would be something like:

div id='divFly' name='divFly' style='display:none; border: 1px solid
black'>&nbsp;</div

offsetWidth = 200 // set these four to the coords of the div you want to
fly
offsetHeight = 100
offsetLeft = 50
offsetHeight = 50

destWidth = 10
destHeight = 10
destLeft = 0
destTop = 0

stepWidth = (offsetWidth - destWidth) / 10 // 10 steps
stepHeight = (offsetHeight - destHeight) / 10
stepLeft = (offsetLeft - destLeft) / 10
stepTop = (offsetTop - destTop) / 10

var flyInterval

function buttonHide_onClick(){
// setup divFly
divFly.style.left = offsetLeft
...top
...width
...height
divFly.style.display = ''
flyInterval = setInterval('divFly_doFly()', 100) // the effect will
take
one second
}

function divFly_doFly(){
if ((divFly.offsetLeft - stepLeft) > destLeft) {
divFly.style.left = divFly.offsetLeft - stepLeft
...top
...width
...height
}
else {
clearInterval('flyInterval')
}
}

Regards,

William Morris
Manager, Product Development, Seritas LLC
Kansas City, Missouri
http://www.seritas.com/leadtrack

"john" <news (AT) definitely (DOT) no-spam.org.uk> wrote in message
news:Pd9Rb.30054$OA3.10273830 (AT) newsfep2-win (DOT) server.ntli.net...
Anyone noticed the fancy zoom down of the text box pretty much to a
point
for chosen updates when clicked on Windows Update? I expect its dhtml
and
wondered if anyone knew of a script that would do this for my site - I
just
can't seem to get at the source for the microsoft page - tricky buggers!

John

Hey John - I had another thought about this well after I posted, for
something else to try. I don't normally visit the Windows Update website -
I do my updates automatically and don't need to go there - but I went to
take a look and refresh my memory what their interface looks like.

For the record, they've got right-click functionality disabled, BUT it looks
like they're using included javascript files for all the functionality. You
might check your browser cache and see if there are any .js files in there.
Be willing to bet the code is somewhere in there.

But I digress...

I noticed that it isn't just an empty rectangle that zooms away: the text is
in there too, shrinking in the fly-away as well. Seems to me that could be
done just by figuring out the step from the normal font size to the
destination font size. Say from 10 to zero in ten steps would mean stepping
down by 1 each iteration, just like the width, height, etc.

One other thought: on the interim steps while you're setting the sizes, you
might also convert the numbers to integers. I'm not entirely sure how a div
sized to, say, "70.3928374" would work. Same goes for font sizes.
ParseInt, maybe?

Anyway, I'd be really interested to see how this all works out. If you can
post the code publically, please post the link. I'll keep watching the
thread.

- Wm

"john" <news (AT) definitely (DOT) no-spam.org.uk> wrote

Thanks a million William - I'll try it!

John


"William Morris" <seamNOlyneSPAM (AT) hotmail (DOT) com> wrote in message
news:RuPRb.61$f34.30091303 (AT) newssvr11 (DOT) news.prodigy.com...
All you're really talking about here is a DIV with a 1px border, some
javascript interval script, and a bit of math.

Given: you know how big the area is you want to shrink - offsetWidth,
offsetHeight, offsetLeft, offsetTop. You know how big you and where you
want it to shrink to - style.width, style.height, 0, 0 (or wherever).
Now
all you need is a bit of javascript to calculate the steps to get from A
to
B, and apply that step using setInterval. Don't hold me to my syntax -
I'm
writing from home and in a bit of a rush, but it would be something
like:

div id='divFly' name='divFly' style='display:none; border: 1px solid
black'>&nbsp;</div

offsetWidth = 200 // set these four to the coords of the div you want to
fly
offsetHeight = 100
offsetLeft = 50
offsetHeight = 50

destWidth = 10
destHeight = 10
destLeft = 0
destTop = 0

stepWidth = (offsetWidth - destWidth) / 10 // 10 steps
stepHeight = (offsetHeight - destHeight) / 10
stepLeft = (offsetLeft - destLeft) / 10
stepTop = (offsetTop - destTop) / 10

var flyInterval

function buttonHide_onClick(){
// setup divFly
divFly.style.left = offsetLeft
...top
...width
...height
divFly.style.display = ''
flyInterval = setInterval('divFly_doFly()', 100) // the effect will
take
one second
}

function divFly_doFly(){
if ((divFly.offsetLeft - stepLeft) > destLeft) {
divFly.style.left = divFly.offsetLeft - stepLeft
...top
...width
...height
}
else {
clearInterval('flyInterval')
}
}

Regards,

William Morris
Manager, Product Development, Seritas LLC
Kansas City, Missouri
http://www.seritas.com/leadtrack

"john" <news (AT) definitely (DOT) no-spam.org.uk> wrote in message
news:Pd9Rb.30054$OA3.10273830 (AT) newsfep2-win (DOT) server.ntli.net...
Anyone noticed the fancy zoom down of the text box pretty much to a
point
for chosen updates when clicked on Windows Update? I expect its dhtml
and
wondered if anyone knew of a script that would do this for my site - I
just
can't seem to get at the source for the microsoft page - tricky
buggers!

John