From skip at bigskypenguin.com  Tue Mar 11 23:19:34 2008
From: skip at bigskypenguin.com (Skip Evans)
Date: Tue, 11 Mar 2008 23:19:34 -0500
Subject: [Javascript] Changin pop up location?
Message-ID: <47D759D6.8050606@bigskypenguin.com>

Hey all,

Just joined the list so I'll preempt your 
"welcomes" now:

Thank you, thanks, great to see you all. I'm here 
all weekend at the Flamingo Lounge, enjoy the buffet.

Now here's my question. I'm using Scriptaculous to 
create a pop up with the following class definition:

.popup_panel {
     position: absolute;
     text-align: left;
     top: 100px;
     left: 180px;
     margin: 0 0 1px 0;
     border: 2px solid #555;
     z-index: 100;
     background-color: #fff;
     color: #999;
}

The HTML code used to create the template has an 
id value of the same name:

<div id="popup_panel" class="popup_panel">...</div>

Then in the javascript I try to adjust the 
position of the pop up with the following

var xpos=e.pageX;
var ypos=e.pageY;

// set the position of the pop up in the browser.
var popup=document.getElementById('popup_panel');
popup.style.top=xpos-50;
popup.style.left=ypos-50;

It gets the pageX and pageY values fine (tested 
with a call to alert function), but does not 
adjust the popup's position beyond what is set in 
the CSS.

Any help would be greatly appreciated.

-- 
Skip Evans
Big Sky Penguin, LLC
503 S Baldwin St, #1
Madison, WI 53703
608-250-2720
http://bigskypenguin.com
=-=-=-=-=-=-=-=-=-=
Check out PHPenguin, a lightweight and versatile
PHP/MySQL, AJAX & DHTML development framework.
http://phpenguin.bigskypenguin.com/

From peter at brunone.com  Wed Mar 12 01:02:17 2008
From: peter at brunone.com (Peter Brunone)
Date: Tue, 11 Mar 2008 23:02:17 -0700
Subject: [Javascript] Changin pop up location?
Message-ID: <47f7f68231a949e08d8a82e0c09e46c5@maila15.webcontrolcenter.com>

Hi Skip,

    I haven't looked lately, but are pageX and pageY integers or do they include units?  If the former, then you may need to add the units since the current standards require them.

Just typing out loud here...

Peter

----------------------------------------

From: Skip Evans skip at bigskypenguin.com

Hey all,

Just joined the list so I'll preempt your 
"welcomes" now:

Thank you, thanks, great to see you all. I'm here 
all weekend at the Flamingo Lounge, enjoy the buffet.

Now here's my question. I'm using Scriptaculous to 
create a pop up with the following class definition:

.popup_panel {
position: absolute;
text-align: left;
top: 100px;
left: 180px;
margin: 0 0 1px 0;
border: 2px solid #555;
z-index: 100;
background-color: #fff;
color: #999;
}

The HTML code used to create the template has an 
id value of the same name:

...

Then in the javascript I try to adjust the 
position of the pop up with the following

var xpos=e.pageX;
var ypos=e.pageY;

// set the position of the pop up in the browser.
var popup=document.getElementById('popup_panel');
popup.style.top=xpos-50;
popup.style.left=ypos-50;

It gets the pageX and pageY values fine (tested 
with a call to alert function), but does not 
adjust the popup's position beyond what is set in 
the CSS.

Any help would be greatly appreciated.

-- 
Skip Evans
Big Sky Penguin, LLC
503 S Baldwin St, #1
Madison, WI 53703
608-250-2720
http://bigskypenguin.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080311/17e41abd/attachment.htm 

From skip at bigskypenguin.com  Wed Mar 12 09:41:21 2008
From: skip at bigskypenguin.com (Skip Evans)
Date: Wed, 12 Mar 2008 09:41:21 -0500
Subject: [Javascript] Changin pop up location?
In-Reply-To: <47f7f68231a949e08d8a82e0c09e46c5@maila15.webcontrolcenter.com>
References: <47f7f68231a949e08d8a82e0c09e46c5@maila15.webcontrolcenter.com>
Message-ID: <47D7EB91.8080209@bigskypenguin.com>

Hey Peter & all,

Yup! That did it. I don't know I missed that since 
I did use +'px' for the width!!!

D'oh!!!

Thanks much!
Skip

Peter Brunone wrote:
> Hi Skip,
> 
>     I haven't looked lately, but are pageX and pageY integers or do they include units?  If the former, then you may need to add the units since the current standards require them.
> 
> Just typing out loud here...
> 
> Peter
> 
> ----------------------------------------
> 
> From: Skip Evans skip at bigskypenguin.com
> 
> Hey all,
> 
> Just joined the list so I'll preempt your 
> "welcomes" now:
> 
> Thank you, thanks, great to see you all. I'm here 
> all weekend at the Flamingo Lounge, enjoy the buffet.
> 
> Now here's my question. I'm using Scriptaculous to 
> create a pop up with the following class definition:
> 
> .popup_panel {
> position: absolute;
> text-align: left;
> top: 100px;
> left: 180px;
> margin: 0 0 1px 0;
> border: 2px solid #555;
> z-index: 100;
> background-color: #fff;
> color: #999;
> }
> 
> The HTML code used to create the template has an 
> id value of the same name:
> 
> ...
> 
> Then in the javascript I try to adjust the 
> position of the pop up with the following
> 
> var xpos=e.pageX;
> var ypos=e.pageY;
> 
> // set the position of the pop up in the browser.
> var popup=document.getElementById('popup_panel');
> popup.style.top=xpos-50;
> popup.style.left=ypos-50;
> 
> It gets the pageX and pageY values fine (tested 
> with a call to alert function), but does not 
> adjust the popup's position beyond what is set in 
> the CSS.
> 
> Any help would be greatly appreciated.
> 
> 
> 
> ------------------------------------------------------------------------
> 
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript

-- 
Skip Evans
Big Sky Penguin, LLC
503 S Baldwin St, #1
Madison, WI 53703
608-250-2720
http://bigskypenguin.com
=-=-=-=-=-=-=-=-=-=
Check out PHPenguin, a lightweight and versatile
PHP/MySQL, AJAX & DHTML development framework.
http://phpenguin.bigskypenguin.com/

From chettinger at visionary.com  Wed Mar 12 16:48:02 2008
From: chettinger at visionary.com (Chris Hettinger)
Date: Wed, 12 Mar 2008 16:48:02 -0500
Subject: [Javascript] Point me to the path,
	resize a div to fill window upon resize
Message-ID: <20080312214759.3B253560086@pop.visionary.com>

Good afternoon, I am new to the list.

 

I am working on a project for a client, for which I will be drawing a page
with a Microsoft Virtual Earth map as the main element after the page
header. Below the map will be grid of data.

 

An illustration of what I am looking for can be viewed by visiting
www.redfin.com <http://www.redfin.com/> . Complete a real estate search in
one of their markets; you will be taken to a results page that fills the
browser with a map, a summary box to the right and grid of data below.

 

I need to recreate one aspect of what they are doing, that is on window
resize, I must grow/shrink the map div to fill the browser window.

 

What I am hoping for is that someone could point me to a good resource
article, tutorial size, or bit of pseudo code. 

 

. I'm comfortable digging through doc and language references for more
detail. I've not know exactly the best keywords to search for find relevant
results.

 

Thanks in advance,

 

-- 
Chris Hettinger 
Project Manager 
 <mailto:chettinger at visionary.com> chettinger at visionary.com 
Visionary Service, Inc. 
 <http://www.visionary.com/> www.visionary.com 
p: 515.369.3545 x 113 
t: 888.303.2848 x 113

f: 515.369.3546

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080312/31326685/attachment.html 

From rer at datacompusa.com  Wed Mar 12 20:14:13 2008
From: rer at datacompusa.com (Roger Roelofs)
Date: Wed, 12 Mar 2008 21:14:13 -0400
Subject: [Javascript] Point me to the path,
 resize a div to fill window upon resize
In-Reply-To: <20080312214759.3B253560086@pop.visionary.com>
References: <20080312214759.3B253560086@pop.visionary.com>
Message-ID: <47D87FE5.4030202@datacompusa.com>

Chris,

Chris Hettinger wrote:
> An illustration of what I am looking for can be viewed by visiting 
> www.redfin.com <http://www.redfin.com/>. Complete a real estate search 
> in one of their markets; you will be taken to a results page that 
> fills the browser with a map, a summary box to the right and grid of 
> data below.
>
>  
>
> I need to recreate one aspect of what they are doing, that is on 
> window resize, I must grow/shrink the map div to fill the browser window.
>
Using the css width property in percent

#map {
  width: 100%;
}

will get the layout you want.  Although you will probably need to 
specify a minimum width, which is more challenging in css assuming you 
want to support ie6.  The other issue is that you will probably want to 
recompute the map, so you will need to attach a handler to the window's 
resize event

By the way, redfin is doing a poor job of browser sniffing and giving me 
a fixed width layout in firefox 3 because it says I'm using an 
'unsupported' browser.  and I should go download firefox :-).

-- 
Roger Roelofs
Datacomp Appraisal Services
3215 Eaglecrest, NE            E: rer at datacompusa.com
Grand Rapids, MI  49525        W: http://www.datacompusa.com

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080312/23822fa9/attachment.htm 

From philthathril at gmail.com  Thu Mar 13 09:00:37 2008
From: philthathril at gmail.com (Philip Thompson)
Date: Thu, 13 Mar 2008 09:00:37 -0500
Subject: [Javascript] Point me to the path,
	resize a div to fill window upon resize
In-Reply-To: <20080312214759.3B253560086@pop.visionary.com>
References: <20080312214759.3B253560086@pop.visionary.com>
Message-ID: <2565F116-1A72-485F-B23A-20BE77ED4BAC@gmail.com>

On Mar 12, 2008, at 4:48 PM, Chris Hettinger wrote:

> Good afternoon, I am new to the list.
>
> I am working on a project for a client, for which I will be drawing  
> a page with a Microsoft Virtual Earth map as the main element after  
> the page header. Below the map will be grid of data.
>
> An illustration of what I am looking for can be viewed by visiting www.redfin.com 
> . Complete a real estate search in one of their markets; you will be  
> taken to a results page that fills the browser with a map, a summary  
> box to the right and grid of data below.
>
> I need to recreate one aspect of what they are doing, that is on  
> window resize, I must grow/shrink the map div to fill the browser  
> window.
>
> What I am hoping for is that someone could point me to a good  
> resource article, tutorial size, or bit of pseudo code.
>
> ? I?m comfortable digging through doc and language references for  
> more detail. I?ve not know exactly the best keywords to search for  
> find relevant results.
>
> Thanks in advance,
>
> -- 
> Chris Hettinger


I'll start off by saying that I'm no expert by any means - PHP is my  
forte. Now that that's out of the way, I do this exact thing in the  
application I'm working on now. This seems to work in FF2 (haven't  
tested 3), IE 6 and 7 and Safari.

I begin with a page that has a div ("alert") that I initially set  
display:none. Upon an alert being prompted, I call promptAlert, which  
grabs window dimensions and displays whatever message I'm needing to  
display. Example...

[html]
<div id="alert" style="display:none;">
     <div id="alertContent">
         <div id="alertMsg"></div>
         <form name="alertForm" id="alertForm"  
action="javascript:processAlert()">
             ...blah blah blah...
         </form>
     </div>
</div>
[/html]

[CSS]
#alert {
     background: #FFF url('../images/background-line.gif') repeat;
     border: solid 3px red;
     left: 0;
     opacity: .7;
     filter:alpha(opacity=70);
     margin: 0;
     padding: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1000;
}

#alertContent {
     background: #000;
     border: solid 3px red;
     color: #FFF;
     font-size: 12pt;
     font-weight: bold;
     margin: auto;
     opacity: 1;
     filter:alpha(opacity=100);
     padding: 10px;
     position: relative;
     text-align: left;
     width: 40%;
     z-index: 1001;
}
[/CSS]

[js]
var SHOW_ALERT = true;
var ALERT_MSG = '';

function promptAlert (cancel, fields)
{
     var theWindow = windowDimensions();
     var scrolling = getScrollXY();

     var msg = document.getElementById('alertMsg');
     msg.innerHTML = ALERT_MSG;

     var alertDiv = document.getElementById('alert');
     resizeElement (alertDiv, theWindow['w'] + scrolling['x'],  
theWindow['h'] + scrolling['y']);
     alertDiv.style.position = 'absolute';
     alertDiv.style.display = '';

     opacity ('alert', 0, 70, 0);
     opacity ('body', 100, 50, 300);

     var alertContent = document.getElementById('alertContent');
     var alertDims = elementDimensions('alertContent');
     alertContent.style.top = ((theWindow['h'] / 2) - alertDims['h'])  
+ 'px';

     if (SHOW_ALERT) {
         SHOW_ALERT = false;
         window.onresize = promptAlert;
     }
}

function resizeElement (element, w, h)
{
     if (!element) { return false; }
     element.style.width = w+'px';
     element.style.height = h+'px';
}

function processAlert ()
{
     changeOpacity (100, 'body');
     opacity ('alert', 100, 0, 100);

     if (!SHOW_ALERT) {
         SHOW_ALERT = true;
         window.onresize = null;
         ALERT_MSG = '';
     }

     document.getElementById('alert').style.display = 'none';
     var form = document.alertForm;

     if (form.call_method && document.pressed == 'okAlertBtn') {
         window[form.call_method.value]();
     }

     return;
}
[/js]

The opacity function does a transition of element opacity from the  
specified values - it's just for *looks*. Notice in the last line of  
promptAlert I specify the onresize event: window.onresize =  
promptAlert. Be sure to unset this value when it's no longer needed.  
Otherwise, every time your user resizes, this alert will pop up. I  
unset mine in processAlert by specifying: window.onresize = null.

There is one bug in this which I can't quite figure out. Let's say  
your page scrolls. If you're at the top of the page (not scrolled  
down), then the partially-transparent message that covers the page  
only covers the current viewing area - not the area below. So, if you  
scroll down, then it's not covered by the alert window.

Anyway, I'm sure that was way more than anyone needed. Hope it helps.  
If you need help with the functions for setting the opacity or  
whatever, lemme know.

~Philip

From chettinger at visionary.com  Thu Mar 13 09:29:47 2008
From: chettinger at visionary.com (Chris Hettinger)
Date: Thu, 13 Mar 2008 09:29:47 -0500
Subject: [Javascript] Point me to the path,
	resize a div to fill window upon resize
In-Reply-To: <2565F116-1A72-485F-B23A-20BE77ED4BAC@gmail.com>
Message-ID: <20080313142947.C3E75560093@pop.visionary.com>

Thank you Roger and Philip for your responses.

Roger, you hit the nail on the head with "The other issue is that you will
probably want to recompute the map, so you will need to attach a handler to
the window's resize event". This is the hurdle for me right now, which
functions to use to get and compute the pixel measurements of available
space and the current map div.

Perhaps I'll find some of that in Philips examples.

Philip, I will work with this and your examples today and report back. Thank
so much for taking the time to share this code.

-- 
Chris Hettinger  
chettinger at visionary.com 
Visionary Service, Inc.
515-369-3545 x 113 

-----Original Message-----
From: javascript-bounces at lists.evolt.org
[mailto:javascript-bounces at lists.evolt.org] On Behalf Of Philip Thompson
Sent: Thursday, March 13, 2008 9:01 AM
To: JavaScript List
Subject: Re: [Javascript] Point me to the path,resize a div to fill window
upon resize

On Mar 12, 2008, at 4:48 PM, Chris Hettinger wrote:

> Good afternoon, I am new to the list.
>
> I am working on a project for a client, for which I will be drawing  
> a page with a Microsoft Virtual Earth map as the main element after  
> the page header. Below the map will be grid of data.
>
> An illustration of what I am looking for can be viewed by visiting
www.redfin.com 
> . Complete a real estate search in one of their markets; you will be  
> taken to a results page that fills the browser with a map, a summary  
> box to the right and grid of data below.
>
> I need to recreate one aspect of what they are doing, that is on  
> window resize, I must grow/shrink the map div to fill the browser  
> window.
>
> What I am hoping for is that someone could point me to a good  
> resource article, tutorial size, or bit of pseudo code.
>
> . I'm comfortable digging through doc and language references for  
> more detail. I've not know exactly the best keywords to search for  
> find relevant results.
>
> Thanks in advance,
>
> -- 
> Chris Hettinger


I'll start off by saying that I'm no expert by any means - PHP is my  
forte. Now that that's out of the way, I do this exact thing in the  
application I'm working on now. This seems to work in FF2 (haven't  
tested 3), IE 6 and 7 and Safari.

I begin with a page that has a div ("alert") that I initially set  
display:none. Upon an alert being prompted, I call promptAlert, which  
grabs window dimensions and displays whatever message I'm needing to  
display. Example...

[html]
<div id="alert" style="display:none;">
     <div id="alertContent">
         <div id="alertMsg"></div>
         <form name="alertForm" id="alertForm"  
action="javascript:processAlert()">
             ...blah blah blah...
         </form>
     </div>
</div>
[/html]

[CSS]
#alert {
     background: #FFF url('../images/background-line.gif') repeat;
     border: solid 3px red;
     left: 0;
     opacity: .7;
     filter:alpha(opacity=70);
     margin: 0;
     padding: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1000;
}

#alertContent {
     background: #000;
     border: solid 3px red;
     color: #FFF;
     font-size: 12pt;
     font-weight: bold;
     margin: auto;
     opacity: 1;
     filter:alpha(opacity=100);
     padding: 10px;
     position: relative;
     text-align: left;
     width: 40%;
     z-index: 1001;
}
[/CSS]

[js]
var SHOW_ALERT = true;
var ALERT_MSG = '';

function promptAlert (cancel, fields)
{
     var theWindow = windowDimensions();
     var scrolling = getScrollXY();

     var msg = document.getElementById('alertMsg');
     msg.innerHTML = ALERT_MSG;

     var alertDiv = document.getElementById('alert');
     resizeElement (alertDiv, theWindow['w'] + scrolling['x'],  
theWindow['h'] + scrolling['y']);
     alertDiv.style.position = 'absolute';
     alertDiv.style.display = '';

     opacity ('alert', 0, 70, 0);
     opacity ('body', 100, 50, 300);

     var alertContent = document.getElementById('alertContent');
     var alertDims = elementDimensions('alertContent');
     alertContent.style.top = ((theWindow['h'] / 2) - alertDims['h'])  
+ 'px';

     if (SHOW_ALERT) {
         SHOW_ALERT = false;
         window.onresize = promptAlert;
     }
}

function resizeElement (element, w, h)
{
     if (!element) { return false; }
     element.style.width = w+'px';
     element.style.height = h+'px';
}

function processAlert ()
{
     changeOpacity (100, 'body');
     opacity ('alert', 100, 0, 100);

     if (!SHOW_ALERT) {
         SHOW_ALERT = true;
         window.onresize = null;
         ALERT_MSG = '';
     }

     document.getElementById('alert').style.display = 'none';
     var form = document.alertForm;

     if (form.call_method && document.pressed == 'okAlertBtn') {
         window[form.call_method.value]();
     }

     return;
}
[/js]

The opacity function does a transition of element opacity from the  
specified values - it's just for *looks*. Notice in the last line of  
promptAlert I specify the onresize event: window.onresize =  
promptAlert. Be sure to unset this value when it's no longer needed.  
Otherwise, every time your user resizes, this alert will pop up. I  
unset mine in processAlert by specifying: window.onresize = null.

There is one bug in this which I can't quite figure out. Let's say  
your page scrolls. If you're at the top of the page (not scrolled  
down), then the partially-transparent message that covers the page  
only covers the current viewing area - not the area below. So, if you  
scroll down, then it's not covered by the alert window.

Anyway, I'm sure that was way more than anyone needed. Hope it helps.  
If you need help with the functions for setting the opacity or  
whatever, lemme know.

~Philip
_______________________________________________
Javascript mailing list
Javascript at lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript




From java.script at cutterscrossing.com  Thu Mar 13 09:37:06 2008
From: java.script at cutterscrossing.com (Cutter (JSRelated))
Date: Thu, 13 Mar 2008 09:37:06 -0500
Subject: [Javascript] Point me to the path,
 resize a div to fill window upon resize
In-Reply-To: <20080313142947.C3E75560093@pop.visionary.com>
References: <20080313142947.C3E75560093@pop.visionary.com>
Message-ID: <47D93C12.2050809@cutterscrossing.com>

Perhaps you can look at JQuery and it's Dimensions plugin for assistance?...

Steve "Cutter" Blades
Adobe Certified Professional
Advanced Macromedia ColdFusion MX 7 Developer
_____________________________
http://blog.cutterscrossing.com

Chris Hettinger wrote:
> Thank you Roger and Philip for your responses.
> 
> Roger, you hit the nail on the head with "The other issue is that you will
> probably want to recompute the map, so you will need to attach a handler to
> the window's resize event". This is the hurdle for me right now, which
> functions to use to get and compute the pixel measurements of available
> space and the current map div.
> 
> Perhaps I'll find some of that in Philips examples.
> 
> Philip, I will work with this and your examples today and report back. Thank
> so much for taking the time to share this code.
> 


From tedd at sperling.com  Thu Mar 13 15:37:41 2008
From: tedd at sperling.com (tedd)
Date: Thu, 13 Mar 2008 16:37:41 -0400
Subject: [Javascript] Point me to the path,
 resize a div to fill window upon resize
In-Reply-To: <2565F116-1A72-485F-B23A-20BE77ED4BAC@gmail.com>
References: <20080312214759.3B253560086@pop.visionary.com>
	<2565F116-1A72-485F-B23A-20BE77ED4BAC@gmail.com>
Message-ID: <p06240806c3ff409e1733@[192.168.1.101]>

At 9:00 AM -0500 3/13/08, Philip Thompson wrote:

>-snip- a lot of good looking code
>
>Anyway, I'm sure that was way more than anyone needed. Hope it helps. 
>If you need help with the functions for setting the opacity or
>whatever, lemme know.


~Philip:

I'm not sure what your code was trying to do -- I tried it and zip. 
Can you explain?

Cheers,

tedd
-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From philthathril at gmail.com  Thu Mar 13 16:44:51 2008
From: philthathril at gmail.com (Philip Thompson)
Date: Thu, 13 Mar 2008 16:44:51 -0500
Subject: [Javascript] Point me to the path,
	resize a div to fill window upon resize
In-Reply-To: <p06240806c3ff409e1733@[192.168.1.101]>
References: <20080312214759.3B253560086@pop.visionary.com>
	<2565F116-1A72-485F-B23A-20BE77ED4BAC@gmail.com>
	<p06240806c3ff409e1733@[192.168.1.101]>
Message-ID: <CB529F82-1BE9-4B12-A515-B408CAA95B7B@gmail.com>

On Mar 13, 2008, at 3:37 PM, tedd wrote:

> At 9:00 AM -0500 3/13/08, Philip Thompson wrote:
>
>> -snip- a lot of good looking code
>>
>> Anyway, I'm sure that was way more than anyone needed. Hope it helps.
>> If you need help with the functions for setting the opacity or
>> whatever, lemme know.
>
>
> ~Philip:
>
> I'm not sure what your code was trying to do -- I tried it and zip.
> Can you explain?
>
> Cheers,
>
> tedd


Nice to see you over here, Tedd. ;)

Well, I didn't include all the code, so it's not going to work.  
However, if you'd like all of it, then write me off-list.

~Philip


From tam_soft at yahoo.co.in  Fri Mar 14 02:46:46 2008
From: tam_soft at yahoo.co.in (Tamilarasi Elumalai)
Date: Fri, 14 Mar 2008 13:16:46 +0530 (IST)
Subject: [Javascript] doubt about page height
Message-ID: <701088.11530.qm@web94611.mail.in2.yahoo.com>

An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080314/d6fc1238/attachment.html 

From rer at datacompusa.com  Fri Mar 14 05:54:44 2008
From: rer at datacompusa.com (Roger Roelofs)
Date: Fri, 14 Mar 2008 06:54:44 -0400
Subject: [Javascript] doubt about page height
In-Reply-To: <701088.11530.qm@web94611.mail.in2.yahoo.com>
References: <701088.11530.qm@web94611.mail.in2.yahoo.com>
Message-ID: <98446871-20B9-4007-8C6E-D6B929DBB81F@datacompusa.com>

Welcome!

On Mar 14, 2008, at 3:46 AM, Tamilarasi Elumalai wrote:

>  am using div control to place all my web page content and set its  
> width as 80% and center align. but i couldnot set page height for  
> all size of browser.
>

This is more likely a css question, and you will get more complete  
answers on the CSS-D mailing list at http://css-discuss.org/.    The  
short answer is that you must set height: 100%; on html, body and any  
other element that contains the div you are trying to position.

In most cases I recommend against setting the height because it puts  
the scroll bar on your content rather than on the window where users  
expect it.

hth
--
Roger Roelofs
Datacomp/MHVillage
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080314/87215b06/attachment.htm 

From davidh126 at writeme.com  Sat Mar 15 16:04:06 2008
From: davidh126 at writeme.com (David Hucklesby)
Date: Sat, 15 Mar 2008 14:04:06 -0700
Subject: [Javascript] doubt about page height
In-Reply-To: <98446871-20B9-4007-8C6E-D6B929DBB81F@datacompusa.com>
Message-ID: <20083151446.821866@DAVIDS>

On Fri, 14 Mar 2008 06:54:44 -0400, Roger Roelofs wrote:
> Welcome!
> On Mar 14, 2008, at 3:46 AM, Tamilarasi Elumalai wrote:
>>
>>
>> am using div control to place all my web page content and set its width as 80% and
>> center align. but i couldnot set page height for all size of browser. 
>>
>
> This is more likely a css question, and you will get more complete answers on the CSS-D
> mailing list at http://css-discuss.org/.    The short answer is that you must set
> height: 100%; on html, body and any other element that contains the div you are trying
> to position.    
>
>
> In most cases I recommend against setting the height because it puts the scroll bar on
> your content rather than on the window where users expect it.
>

Roger is correct if you use "height" on the content DIV, except for 
IE 5.x and 6, which tend to treat "height" similar to "min-height".

Solution: Use 100% on html and body as suggested, then add:

  #wrapper {min-height: 100%;}  /* for modern browsers */
  * html #wrapper {height: 100%;} /* for IE 5 and 6 Win */

(Assuming your centered DIV has an ID of "wrapper".)

Cordially,
David
--


From peter at brunone.com  Mon Mar 17 09:03:56 2008
From: peter at brunone.com (Peter Brunone)
Date: Mon, 17 Mar 2008 07:03:56 -0700
Subject: [Javascript] "Click to activate" for Quicktime in IE7
Message-ID: <8673716cbea248809078e8f7648c418a@maila15.webcontrolcenter.com>

I've recently come up against this problem and none of the purported solutions seem to work.  Basically, I have a quicktime ActiveX control on the page and I want to assign a .mov file to it using the SetURL method.

The problem, of course, is that the QT control must be clicked before I can do this (some stupid patent lawsuit that forced MS to change the way they implement this functionality).  This makes for a jerky user experience.

I've tried the replacing the object's outerHTML, I've tried writing the entire tag with Javascript, and I've tried a simple object.focus() or object.select() call -- even tried calling the click event on the object itself -- and nothing seems to get around this little roadblock (or perhaps it's more of a speed bump).

Has anyone gotten IE7 to play the movie without a user click?

TIA,

Peter
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080317/00dd11e1/attachment.html 

From tam_soft at yahoo.co.in  Tue Mar 18 07:20:44 2008
From: tam_soft at yahoo.co.in (Tamilarasi Elumalai)
Date: Tue, 18 Mar 2008 17:50:44 +0530 (IST)
Subject: [Javascript] how to get browser height
Message-ID: <323220.70893.qm@web94614.mail.in2.yahoo.com>

An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080318/d4d0a068/attachment.htm 

From peter at brunone.com  Tue Mar 18 08:07:31 2008
From: peter at brunone.com (Peter Brunone)
Date: Tue, 18 Mar 2008 06:07:31 -0700
Subject: [Javascript] how to get browser height
Message-ID: <8dc35e032a904a1a839bf330623ab3cf@maila15.webcontrolcenter.com>


    You know, everywhere I look I see "use document.body.clientHeight or document.body.offsetHeight", but those don't seem to do the job.  In IE, they don't account for some of the browser chrome, and in Firefox, they measure the entire scroll height of the body element.

    The best I can find is window.resizeTo(width, height) which will set the window's dimensions to the integers that you specify.  That isn't what you asked for, but maybe it will help a little...?

Peter

----------------------------------------

From: Tamilarasi Elumalai <tam_soft at yahoo.co.in>
Sent: Tuesday, March 18, 2008 7:24 AM
To: javascript at lists.evolt.org
Subject: [Javascript] how to get browser height 

hi friends,

            i am trying to get browser height using java script.  I have used screen.availHeight. but it doesn't return correct height of the browsers. when i resized my browser it seems the same value even the height is very lower .. is there any way to find exact browser height . its should be excluded the task bar.

 

please help me. its urgent

 

thanks & regards 

Tamilarasi.E	 

----------------------------------------

Unlimited freedom, unlimited storage. Get it now

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080318/64664652/attachment.html 

From schneegans at internetique.com  Tue Mar 18 09:49:30 2008
From: schneegans at internetique.com (Claude Schneegans)
Date: Tue, 18 Mar 2008 10:49:30 -0400
Subject: [Javascript] how to get browser height
In-Reply-To: <323220.70893.qm@web94614.mail.in2.yahoo.com>
References: <323220.70893.qm@web94614.mail.in2.yahoo.com>
Message-ID: <47DFD67A.7030209@internetique.com>

I'm using this at my satisfaction for a slide show page:
maxHeight = (window.innerHeight ? window.innerHeight : 
document.body.offsetHeight);

-- 
_______________________________________
REUSE CODE! Use custom tags;
See http://www.contentbox.com/claude/customtags/tagstore.cfm
(Please send any spam to this address: piegeacon at internetique.com)
Thanks.


From tam_soft at yahoo.co.in  Tue Mar 18 23:23:05 2008
From: tam_soft at yahoo.co.in (Tamilarasi Elumalai)
Date: Wed, 19 Mar 2008 09:53:05 +0530 (IST)
Subject: [Javascript] how to get browser height
In-Reply-To: <47DFD67A.7030209@internetique.com>
Message-ID: <349881.10527.qm@web94602.mail.in2.yahoo.com>

An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080319/ba818b7e/attachment.htm 

From lester at denhaag.org  Wed Mar 19 06:51:57 2008
From: lester at denhaag.org (J. Lester Novros II)
Date: Wed, 19 Mar 2008 12:51:57 +0100
Subject: [Javascript] how to get browser height
In-Reply-To: <349881.10527.qm@web94602.mail.in2.yahoo.com>
References: <349881.10527.qm@web94602.mail.in2.yahoo.com>
Message-ID: <47E0FE5D.1030405@denhaag.org>

Tamilarasi Elumalai wrote:
>  thank you for your reply. but this maxHeight always returns 24. i think 
> its cant be  a browser's height.

Assuming you want the height of the viewport [the area where a browser 
displays its pages], try document.documentElement.clientHeight.

l8R lES
-- 
Trotting out new, unfinished technologies and dropping older, unfinished
technologies and charging for it is Microsoft's bread and butter. It's
one big hamster wheel.                                        /. comment
                   http://www.supermarionation.tv

From tam_soft at yahoo.co.in  Wed Mar 19 07:01:28 2008
From: tam_soft at yahoo.co.in (Tamilarasi Elumalai)
Date: Wed, 19 Mar 2008 17:31:28 +0530 (IST)
Subject: [Javascript] how to get browser height
In-Reply-To: <47E0FE5D.1030405@denhaag.org>
Message-ID: <878310.4075.qm@web94616.mail.in2.yahoo.com>

An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080319/371db4cc/attachment.html 

From info at professionalwebpages.biz  Sun Mar 23 20:18:33 2008
From: info at professionalwebpages.biz (Professional Web Pages - Information)
Date: Mon, 24 Mar 2008 12:18:33 +1100
Subject: [Javascript] Javascript and CSS
Message-ID: <003001c88d4c$fabc8970$6401a8c0@hawkeye>

To whom it may concern,

I am trying to obtain an element with Javascript but would also like to include certain classs with the element to weed out the specific element

For example

in css you can do this 

" #CntOverlayExpandedInformationContainer .InformationContainer"

and that will identify a certain div with a specific class on it.

Currently I do not know how to do this with javascript - could someone please make a recommendation.


my current code is(but it only returns that div not the div with the class)

        var eEicShowContainerHider;
        eEicShowContainerHider    = document.getElementById("CntOverlayExpandedInformationContainer");
        
Thank you for any responses 

Regards
GT
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080324/f5d91c40/attachment.htm 

From paul at juniperwebcraft.com  Mon Mar 24 00:24:00 2008
From: paul at juniperwebcraft.com (Paul Novitski)
Date: Sun, 23 Mar 2008 22:24:00 -0700
Subject: [Javascript] Javascript and CSS
In-Reply-To: <22470836.1206321627285.JavaMail.root@m04>
References: <22470836.1206321627285.JavaMail.root@m04>
Message-ID: <3289180921-366887459@mail.columbiawireless.ca>

At 3/23/2008 06:18 PM, Professional Web Pages - Information wrote:
>I am trying to obtain an element with Javascript but would also like 
>to include certain classs with the element to weed out the specific element
>
>For example
>
>in css you can do this
>
>" #CntOverlayExpandedInformationContainer .InformationContainer"


Hi GT,

You can retrieve the class of an element with the className property, e.g.

         var eEicShowContainerHider = 
document.getElementById("CntOverlayExpandedInformationContainer");

                 // not found?
                 if (!eEicShowContainerHider) return alert('Hider not found');

         // get the element's class (will be null if no class name exists)
         var sClass = eEicShowContainerHider.className;

         // locate the desired class name as a discrete word
         var rRegExp = /(^|\s)InformationContainer(\s|$)/;

                 // if there is a class and it's the one we're seeking...
                 if (sClass  && rRegExp.test(sClass))
                 {
                         ...
                 }

I've used a regular expression to test for the desired class name to 
accommodate the fact that an element's class attribute can contain 
more than one class name, e.g.:

         <div class="active InformationContainer hidden">

so I'm checking for the desired class at the beginning of the string 
(^InformationContainer) or after whitespace (\sInformationContainer) 
and before either whitespace (InformationContainer\s) or the end of 
string (InformationContainer$).


It's worth mentioning that an id must be unique on a page,* so you 
should have only one instance of 
#CntOverlayExpandedInformationContainer in your document.  The only 
reason I can think of why you'd need to verify the identity of an 
element by checking its class when you already know its id is if the 
markup changes dynamically, either client-side or server-side, 
depending on circumstances, so that a given element with a known id 
will have a class sometimes and not others.  But in any one page-view 
that id must be unique.

Many of us have written getElementsByClassName() functions in which 
you pass the sought-after class name and optionally an element such 
as 'div' and it will return an array of all such elements on the page 
with the given class.  However this sort of logic would be redundant 
in your situation because you can't have more than one 
#CntOverlayExpandedInformationContainer.

* The uniqueness of an element id is described here:

HTML 4.01 Specification
7 The global structure of an HTML document
7.5.2 Element identifiers: the id and class attributes
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

and here;

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
5 Selectors
5.9 ID selectors
http://www.w3.org/TR/CSS21/selector.html#id-selectors

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 


From davidh126 at writeme.com  Wed Mar 26 15:41:33 2008
From: davidh126 at writeme.com (David Hucklesby)
Date: Wed, 26 Mar 2008 13:41:33 -0700
Subject: [Javascript] Javascript and CSS
In-Reply-To: <003001c88d4c$fabc8970$6401a8c0@hawkeye>
Message-ID: <2008326134133.906699@DAVIDS>

On Mon, 24 Mar 2008 12:18:33 +1100, Professional Web Pages - Information wrote:
> To whom it may concern,
>
> I am trying to obtain an element with Javascript but would also like to include certain
> classs with the element to weed out the specific element
>

Using document.getElementById() - as you suggest - will get you the
one and only element in the document having that ID. You can then
see if that element has the class name you want, like this, perhaps:

function hasClass(element, myClass) {
  var myClass = myClass.replace(/\-/g, "\\-");   // escape hyphens
  var re = new RegExp("\\b ?"+myClass+"\\b");
  if (!element.className) return false;
  return re.test(element.className);
}


Cordially,
David
--



From info at professionalwebpages.biz  Wed Mar 26 17:12:20 2008
From: info at professionalwebpages.biz (=?utf-7?Q?Information?=)
Date: Wed, 26 Mar 2008 22:12:20 +0000
Subject: [Javascript] =?utf-7?q?Javascript_and_CSS?=
In-Reply-To: 2008326134133.906699@DAVIDS
Message-ID: <MimeParser.NewMessage.1206569540-90.6512.sylph@sylph>

Dear David,

Thank you for your response.

So there is no way that is built into JS to get classes?

Regards

Gavin
----- Original Message -----
From:    David Hucklesby +ADw-davidh126+AEA-writeme.com+AD4-
Subject: Re: +AFs-Javascript+AF0- Javascript and CSS
Date:    Wed, 26 Mar 2008 20:41:33 -00:00

On Mon, 24 Mar 2008 12:18:33 +-1100, Professional Web Pages - Information wrote:
+AD4- To whom it may concern,
+AD4-
+AD4- I am trying to obtain an element with Javascript but would also like to include certain
+AD4- classs with the element to weed out the specific element
+AD4-

Using document.getElementById() - as you suggest - will get you the
one and only element in the document having that ID. You can then
see if that element has the class name you want, like this, perhaps:

function hasClass(element, myClass) +AHs-
  var myClass +AD0- myClass.replace(/+AFw--/g, +ACIAXABc--+ACI-)+ADs-   // escape hyphens
  var re +AD0- new RegExp(+ACIAXABc-b ?+ACIAKw-myClass+-+ACIAXABc-b+ACI-)+ADs-
  if (+ACE-element.className) return false+ADs-
  return re.test(element.className)+ADs-
+AH0-


Cordially,
David
--


+AF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXw-
Javascript mailing list
Javascript+AEA-lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript


From paul at juniperwebcraft.com  Wed Mar 26 20:48:00 2008
From: paul at juniperwebcraft.com (Paul Novitski)
Date: Wed, 26 Mar 2008 18:48:00 -0700
Subject: [Javascript] Javascript and CSS
In-Reply-To: <14363188.1206569634708.JavaMail.root@m04>
References: <14363188.1206569634708.JavaMail.root@m04>
Message-ID: <3289427146-366887920@mail.columbiawireless.ca>

At 3/26/2008 01:41 PM, David Hucklesby wrote:
>Using document.getElementById() - as you suggest - will get you the
>one and only element in the document having that ID. You can then
>see if that element has the class name you want, like this, perhaps:
>
>function hasClass(element, myClass) {
>   var myClass = myClass.replace(/\-/g, "\\-");   // escape hyphens
>   var re = new RegExp("\\b ?"+myClass+"\\b");
>   if (!element.className) return false;
>   return re.test(element.className);
>}



At 3/26/2008 03:12 PM, =?utf-7?Q?Information?= wrote:
>So there is no way that is built into JS to get classes?


As David points out, there very definitely is a way to get the class 
name of a page element using JavaScript.  It isn't built into 
JavaScript, it's built into the DOM (Document Object Model) which 
JavaScript can access.

The class of an element is held in its className property, cf. 
http://developer.mozilla.org/en/docs/DOM:element.className

You can get the class of a known element simply by referencing its className:

         var oExample = document.getElementById('example');
         var sClass = oExample.className;

You can get a list of all the elements on the page with a given class 
by cycling through them:

         var aElements = document.getElementsByTagName('*');

         for (var iElement=0; iElement < aElements.length; iElement++)
         {
                 var sClass = aElements[iElement].className;

                         if (sClass && re.test(sClass)
                         {
                                 aSelected[] = aElements[iElement];
                         }
         }

(Where re is a regular expression such as the ones David and I have suggested.)

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 


From info at professionalwebpages.biz  Wed Mar 26 20:56:26 2008
From: info at professionalwebpages.biz (=?utf-7?Q?Information?=)
Date: Thu, 27 Mar 2008 01:56:26 +0000
Subject: [Javascript] =?utf-7?q?Javascript_and_CSS?=
In-Reply-To: 3289427146-366887920@mail.columbiawireless.ca
Message-ID: <MimeParser.NewMessage.1206582986-49.508.sylph@sylph>

Dear Paul,

Thank you

Regards

----- Original Message -----
From:    Paul Novitski +ADw-paul+AEA-juniperwebcraft.com+AD4-
Subject: Re: +AFs-Javascript+AF0- Javascript and CSS
Date:    Thu, 27 Mar 2008 01:48:00 -00:00

At 3/26/2008 01:41 PM, David Hucklesby wrote:
+AD4-Using document.getElementById() - as you suggest - will get you the
+AD4-one and only element in the document having that ID. You can then
+AD4-see if that element has the class name you want, like this, perhaps:
+AD4-
+AD4-function hasClass(element, myClass) +AHs-
+AD4-   var myClass +AD0- myClass.replace(/+AFw--/g, +ACIAXABc--+ACI-)+ADs-   // escape hyphens
+AD4-   var re +AD0- new RegExp(+ACIAXABc-b ?+ACIAKw-myClass+-+ACIAXABc-b+ACI-)+ADs-
+AD4-   if (+ACE-element.className) return false+ADs-
+AD4-   return re.test(element.className)+ADs-
+AD4AfQ-



At 3/26/2008 03:12 PM, +AD0-?utf-7?Q?Information?+AD0- wrote:
+AD4-So there is no way that is built into JS to get classes?


As David points out, there very definitely is a way to get the class 
name of a page element using JavaScript.  It isn't built into 
JavaScript, it's built into the DOM (Document Object Model) which 
JavaScript can access.

The class of an element is held in its className property, cf. 
http://developer.mozilla.org/en/docs/DOM:element.className

You can get the class of a known element simply by referencing its className:

         var oExample +AD0- document.getElementById('example')+ADs-
         var sClass +AD0- oExample.className+ADs-

You can get a list of all the elements on the page with a given class 
by cycling through them:

         var aElements +AD0- document.getElementsByTagName('+ACo-')+ADs-

         for (var iElement+AD0-0+ADs- iElement +ADw- aElements.length+ADs- iElement+-+-)
         +AHs-
                 var sClass +AD0- aElements+AFs-iElement+AF0-.className+ADs-

                         if (sClass +ACYAJg- re.test(sClass)
                         +AHs-
                                 aSelected+AFsAXQ- +AD0- aElements+AFs-iElement+AF0AOw-
                         +AH0-
         +AH0-

(Where re is a regular expression such as the ones David and I have suggested.)

Regards,

Paul
+AF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXw-

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

+AF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXwBfAF8AXw-
Javascript mailing list
Javascript+AEA-lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript


From davidh126 at writeme.com  Wed Mar 26 21:02:09 2008
From: davidh126 at writeme.com (David Hucklesby)
Date: Wed, 26 Mar 2008 19:02:09 -0700
Subject: [Javascript] Javascript and CSS
In-Reply-To: <2008326134133.906699@DAVIDS>
Message-ID: <20083261929.954240@DAVIDS>

On Wed, 26 Mar 2008 22:12:20 +0000, GT wrote:
> Dear David,
>
> Thank you for your response.
>
> So there is no way that is built into JS to get classes?
>

JavaScript "element.className" returns the value of all classes defined
on "element", but for getting all elements having a certain class then,
no, there is no built-in JavaScript function. Plenty of solutions exist
if you need one - google "javascript getelements by class name"
for a few.

In your example problem, though, you don't need this. An ID is, by
definition, unique in a document, so using getElementById() then
checking its className value(s) should work just fine.

Cordially,
David
--


From scott at randomchaos.com  Wed Mar 26 22:24:20 2008
From: scott at randomchaos.com (Scott Reynen)
Date: Wed, 26 Mar 2008 21:24:20 -0600
Subject: [Javascript] Javascript and CSS
In-Reply-To: <3289427146-366887920@mail.columbiawireless.ca>
References: <14363188.1206569634708.JavaMail.root@m04>
	<3289427146-366887920@mail.columbiawireless.ca>
Message-ID: <3CE5D45B-291E-43A3-AC23-6BCBED5A506C@randomchaos.com>

On Mar 26, 2008, at 7:48 PM, Paul Novitski wrote:

> You can get the class of a known element simply by referencing its  
> className:
>
>         var oExample = document.getElementById('example');
>         var sClass = oExample.className;


"The class" may be somewhat misleading; despite what the name  
suggests, className contains a space-separated list of classes, not  
just one.  So if you're testing this against a given class, you should  
either split it up first or use a regular expression.

On Mar 26, 2008, at 8:02 PM, David Hucklesby wrote:

> for getting all elements having a certain class then,
> no, there is no built-in JavaScript function.

This is also a bit misleading; Safari 3.1 and Firefox 3 both have  
getElementsByClassName built-in.

And since I'm being pedantic already, I'll go ahead and comment on the  
subject as well.  The class attribute is not exclusive to CSS.  We can  
do many useful things with classes (e.g. in JavaScript) that have  
nothing to do with CSS.

Peace,
Scott


From kmi at advances.ch  Thu Mar 27 16:02:14 2008
From: kmi at advances.ch (kmi at advances.ch)
Date: Thu, 27 Mar 2008 22:02:14 +0100
Subject: [Javascript] Kiyoshi MIKAMI is out of the office.
Message-ID: <OFD0B47EE1.D0665FAA-ONC1257419.00738FAB-C1257419.00738FAB@advances.ch>


Je serai absent(e) du  25.03.2008 au 30.03.2008.

I will respond to your message when I return.
Other contact Mr Liechti (aliechti at advances.ch), Mr Jaeggi
(rjaeggi at advances.ch) or Mr Tinchant (jt at advances.ch)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080327/2eda48cc/attachment.html 

From tedd at sperling.com  Fri Mar 28 12:48:52 2008
From: tedd at sperling.com (tedd)
Date: Fri, 28 Mar 2008 13:48:52 -0400
Subject: [Javascript] A Timed removal of DOM elements
Message-ID: <p06240801c412ddedd4a7@[192.168.1.101]>

Hi:

I would like to remove DOM elements from a web page in a timed sequence.

These elements are identified with ID's in both html and a css sheet, 
such as those appearing at the end of this email. But, I would like 
to set these elements to "display: none;" in a timed sequence, such 
as #q31 disappears after one second, #q32 after two seconds, and #q31 
after three seconds.

Can that be done?

Thanks,

tedd

--- the css

#q31
	{
	position: relative;
	top: 0px;
	left: 40px;
	}

#q32
	{
	position: relative;
	top: 59px;
	left: -64px;
	}

#q33
	{
	position: relative;
	top: 59px;
	left: -64px;
	}


-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From peter at brunone.com  Fri Mar 28 13:12:00 2008
From: peter at brunone.com (Peter Brunone)
Date: Fri, 28 Mar 2008 11:12:00 -0700
Subject: [Javascript] A Timed removal of DOM elements
Message-ID: <032955daf8914b6581d3cf353786a5ad@maila15.webcontrolcenter.com>

Hi Tedd,

    It's a computer; you can do anything :)

    Seriously, though, if you have the IDs, then you just need to define your rules for parsing them (I assume you meant that #q33 would disappear after 3 seconds, rather than having #q31 disappear twice).  Take the last character of the ID -- or just replace the #q3 part if your sequence goes into the double digits -- and then call parseInt to convert it to an integer.  Use a function that recursively calls itself with setTimeout if there's another element left in the sequence, and you should be all set.

Does that make any sense?  I haven't slept much lately.

Peter

----------------------------------------

From: tedd tedd at sperling.com 

Hi:

I would like to remove DOM elements from a web page in a timed sequence.

These elements are identified with ID's in both html and a css sheet, 
such as those appearing at the end of this email. But, I would like 
to set these elements to "display: none;" in a timed sequence, such 
as #q31 disappears after one second, #q32 after two seconds, and #q31 
after three seconds.

Can that be done?

Thanks,

tedd

--- the css

#q31
{
position: relative;
top: 0px;
left: 40px;
}

#q32
{
position: relative;
top: 59px;
left: -64px;
}

#q33
{
position: relative;
top: 59px;
left: -64px;
}


-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080328/cf54e4b6/attachment.htm 

From bader at tcbader.com  Fri Mar 28 13:59:36 2008
From: bader at tcbader.com (Terry Bader)
Date: Fri, 28 Mar 2008 11:59:36 -0700
Subject: [Javascript] A Timed removal of DOM elements
Message-ID: <c6f59dd8ac5c41f3baee404ee7384b86@mailb12.webcontrolcenter.com>

use setTimeOut

~Terry

----------------------------------------
From: "tedd" <tedd at sperling.com>
Sent: Friday, March 28, 2008 1:50 PM
To: "JavaScript List" <javascript at lists.evolt.org>
Subject: [Javascript] A Timed removal of DOM elements 

Hi:

I would like to remove DOM elements from a web page in a timed sequence.

These elements are identified with ID's in both html and a css sheet, 
such as those appearing at the end of this email. But, I would like 
to set these elements to "display: none;" in a timed sequence, such 
as #q31 disappears after one second, #q32 after two seconds, and #q31 
after three seconds.

Can that be done?

Thanks,

tedd

--- the css

#q31
	{
	position: relative;
	top: 0px;
	left: 40px;
	}

#q32
	{
	position: relative;
	top: 59px;
	left: -64px;
	}

#q33
	{
	position: relative;
	top: 59px;
	left: -64px;
	}

-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com
_______________________________________________
Javascript mailing list
Javascript at lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript


-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080328/68f1edad/attachment.html 

From paul at juniperwebcraft.com  Fri Mar 28 16:15:07 2008
From: paul at juniperwebcraft.com (Paul Novitski)
Date: Fri, 28 Mar 2008 14:15:07 -0700
Subject: [Javascript] A Timed removal of DOM elements
In-Reply-To: <8630671.1206728212138.JavaMail.root@m04>
References: <8630671.1206728212138.JavaMail.root@m04>
Message-ID: <3289583565-483007907@mail.columbiawireless.ca>

At 3/28/2008 11:12 AM, Peter Brunone wrote:
>     Seriously, though, if you have the IDs, then you just need to 
> define your rules for parsing them (I assume you meant that #q33 
> would disappear after 3 seconds, rather than having #q31 disappear 
> twice).  Take the last character of the ID -- or just replace the 
> #q3 part if your sequence goes into the double digits -- and then 
> call parseInt to convert it to an integer.

Make your life easier -- either take everything after the first 
character or use leading zeroes on your id numbers, e.g. q01 through q99.


>   Use a function that recursively calls itself with setTimeout

One of my pet peeves is pages that run continuous javascript timeout 
loops, gobbling great gobs of CPU cycles, usually for little benefit 
except to strut the developer's stuff.  If you do go this route, 
please build in a natural termination for the process so it doesn't 
just continue as long as the page is loaded, or only runs while the 
page has focus.  Especially in these days of tabbed browsing it's 
cruel and unusual punishment to design pages that assume they are the 
only thing on the visitor's desktop, particularly noticeable with 
self-starting audio.

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 


From tedd at sperling.com  Sat Mar 29 10:16:40 2008
From: tedd at sperling.com (tedd)
Date: Sat, 29 Mar 2008 11:16:40 -0400
Subject: [Javascript] A Timed removal of DOM elements
In-Reply-To: <c6f59dd8ac5c41f3baee404ee7384b86@mailb12.webcontrolcenter.com>
References: <c6f59dd8ac5c41f3baee404ee7384b86@mailb12.webcontrolcenter.com>
Message-ID: <p06240806c4140dc329d4@[192.168.1.101]>

>use setTimeOut
>
>~Terry

I figured that -- I was hoping for an example.

But, I'll write one.

Thanks,

tedd
-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From tedd at sperling.com  Sat Mar 29 10:18:02 2008
From: tedd at sperling.com (tedd)
Date: Sat, 29 Mar 2008 11:18:02 -0400
Subject: [Javascript] A Timed removal of DOM elements
In-Reply-To: <032955daf8914b6581d3cf353786a5ad@maila15.webcontrolcenter.com>
References: <032955daf8914b6581d3cf353786a5ad@maila15.webcontrolcenter.com>
Message-ID: <p06240804c4140c9ae43b@[192.168.1.101]>

At 11:12 AM -0700 3/28/08, Peter Brunone wrote:
>Hi Tedd,
>
>     It's a computer; you can do anything :)
>
>     Seriously, though, if you have the IDs, then you just need to 
>define your rules for parsing them (I assume you meant that #q33 
>would disappear after 3 seconds, rather than having #q31 disappear 
>twice).  Take the last character of the ID -- or just replace the 
>#q3 part if your sequence goes into the double digits -- and 
>then call parseInt to convert it to an integer.  Use a function that 
>recursively calls itself with setTimeout if there's another element 
>left in the sequence, and you should be all set.
>
>Does that make any sense?  I haven't slept much lately.


It was a typo on my part. I meant to say that elements q31, q31, and 
q33 would disappear in order and one second apart. Unfortunately, I 
said q31 when I meant to say q33. However, my css was pretty clear 
and consistent.

Thanks,

tedd

-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From tedd at sperling.com  Sat Mar 29 10:21:54 2008
From: tedd at sperling.com (tedd)
Date: Sat, 29 Mar 2008 11:21:54 -0400
Subject: [Javascript] A Timed removal of DOM elements
In-Reply-To: <3289583565-483007907@mail.columbiawireless.ca>
References: <8630671.1206728212138.JavaMail.root@m04>
	<3289583565-483007907@mail.columbiawireless.ca>
Message-ID: <p06240803c4140a7b64ea@[192.168.1.101]>

>Make your life easier -- either take everything after the first
>character or use leading zeroes on your id numbers, e.g. q01 through q99.

No, there's a method to my madness -- see below. I'll provide the 
results to this list when I'm done.


>  >   Use a function that recursively calls itself with setTimeout
>
>One of my pet peeves is pages that run continuous javascript timeout
>loops, gobbling great gobs of CPU cycles, usually for little benefit
>except to strut the developer's stuff.  If you do go this route,
>please build in a natural termination for the process so it doesn't
>just continue as long as the page is loaded, or only runs while the
>page has focus.  Especially in these days of tabbed browsing it's
>cruel and unusual punishment to design pages that assume they are the
>only thing on the visitor's desktop, particularly noticeable with
>self-starting audio.

Paul:

I agree, but what I want is to have from one to five items (actually 
links) disappear from view in a timed fashion.

This is a game I'm designing as a web application and I want to show 
the user what the computer did. You see, I wrote the original 
Quarters game for the Macintosh (OS9) in 1997 (see: 
http://sperling.com/freeware.php ) and now I'm rewriting it for the 
web.

So, it's not some goofy web lunacy thing, but rather a way to show 
the user what happened.

Thanks,

tedd
-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From tedd at sperling.com  Sun Mar 30 12:07:32 2008
From: tedd at sperling.com (tedd)
Date: Sun, 30 Mar 2008 13:07:32 -0400
Subject: [Javascript] Timed demo doesn't work as expected, why?
Message-ID: <p06240807c415744e319b@[192.168.1.101]>

Hi gang:

Here's a demo of the problem I'm having:

http://www.webbytedd.com/cc/timed-toggle/

The trigger code is:

<input type="checkbox" onclick="toggleDiv('hide1'); 
toggleDiv('hide2'); toggleDiv('hide3'); ">Toggle this

My thought was that when someone un-clicks "Toggle this" box, that 
the sequence should be:

1. Wait one second and set DOM "hide1" to "display: none;" and hide 
that DOM segment.

2. Wait one second and set DOM "hide2" to "display: none;" and hide 
that DOM segment.

3. Wait one second and set DOM "hide3" to "display: none;" and hide 
that DOM segment.

However, what it does is wait for three seconds and then hides everything.

Why does it do that?

And knowing what I'm trying to do, how can I make it work as I want?

Thanks,

tedd

-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From david at dorward.me.uk  Sun Mar 30 12:14:58 2008
From: david at dorward.me.uk (David Dorward)
Date: Sun, 30 Mar 2008 18:14:58 +0100
Subject: [Javascript] Timed demo doesn't work as expected, why?
In-Reply-To: <p06240807c415744e319b@[192.168.1.101]>
References: <p06240807c415744e319b@[192.168.1.101]>
Message-ID: <87C82A80-CA5B-4C4D-8AF0-14E14CADCB8F@dorward.me.uk>


On 30 Mar 2008, at 18:07, tedd wrote:
>
> However, what it does is wait for three seconds and then hides  
> everything.
> Why does it do that?

setTimeout is non-blocking. You have three counters counting down  
simultaneously, not one after the other.

-- 
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/



From david at dorward.me.uk  Sun Mar 30 13:36:21 2008
From: david at dorward.me.uk (David Dorward)
Date: Sun, 30 Mar 2008 19:36:21 +0100
Subject: [Javascript] Timed demo doesn't work as expected, why?
In-Reply-To: <p06240809c4158d2904da@[192.168.1.101]>
References: <p06240807c415744e319b@[192.168.1.101]>
	<87C82A80-CA5B-4C4D-8AF0-14E14CADCB8F@dorward.me.uk>
	<p06240809c4158d2904da@[192.168.1.101]>
Message-ID: <671A0A3B-0BB0-4B7F-9854-09F4F4CF0908@dorward.me.uk>


On 30 Mar 2008, at 19:33, tedd wrote:
>> setTimeout is non-blocking. You have three counters counting down  
>> simultaneously, not one after the other.

>> I was afraid of something like that.
>
> How can I get it to be sequential?

Have one delayed function start the next countdown at the end of its  
run.

-- 
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/



From tedd at sperling.com  Sun Mar 30 13:33:46 2008
From: tedd at sperling.com (tedd)
Date: Sun, 30 Mar 2008 14:33:46 -0400
Subject: [Javascript] Timed demo doesn't work as expected, why?
In-Reply-To: <87C82A80-CA5B-4C4D-8AF0-14E14CADCB8F@dorward.me.uk>
References: <p06240807c415744e319b@[192.168.1.101]>
	<87C82A80-CA5B-4C4D-8AF0-14E14CADCB8F@dorward.me.uk>
Message-ID: <p06240809c4158d2904da@[192.168.1.101]>

At 6:14 PM +0100 3/30/08, David Dorward wrote:
>On 30 Mar 2008, at 18:07, tedd wrote:
>>
>>  However, what it does is wait for three seconds and then hides 
>>  everything.
>>  Why does it do that?
>
>setTimeout is non-blocking. You have three counters counting down 
>simultaneously, not one after the other.
>
>--
>David Dorward

David:

I was afraid of something like that.

How can I get it to be sequential?

Cheers,

tedd
-- 
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

From peter at brunone.com  Sun Mar 30 14:00:01 2008
From: peter at brunone.com (Peter Brunone)
Date: Sun, 30 Mar 2008 12:00:01 -0700
Subject: [Javascript] Timed demo doesn't work as expected, why?
Message-ID: <2b13d4d3608d4b889c575b64c46b8253@maila15.webcontrolcenter.com>

From: tedd   tedd at sperling.com 

> How can I get it to be sequential?

This is what I was talking about when I mentioned a function that calls itself recursively with a setTimeout and then checks to see if the next element exists.  If the element does exist, the function would hide it, up the counter, and call itself again with another setTimeout.  When it finds that there is no current element to hide/show, it stops calling itself and you're done.

The difference with this method is that you use only the non-integer part of the ID to call the function, e.g. timedLayer("hide").  I haven't tested this so it may have a bug or two, but hopefully you get the idea.

var iLayer = 0;

function HideTimedLayer(id) {
   if(iLayer > 0) && document.getElementById(id + iLayer)) {
      document.getElementById(id).style.display = "none";
      setTimeout("HideTimedLayer(\"" + id + "\")", 1000);
      }
   else if(iLayer == 0) { iLayer++; }
   }

HTH,

Peter
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080330/9d5d0058/attachment.htm 

From alaneaston666 at hotmail.com  Mon Mar 31 17:26:10 2008
From: alaneaston666 at hotmail.com (Alan Easton)
Date: Mon, 31 Mar 2008 23:26:10 +0100
Subject: [Javascript] Grab close window call
Message-ID: <BLU110-W434C2F89F044CAAEABEE21F9FA0@phx.gbl>


Hi All,
 
I have a problem, which I am not sure is solvable.
 
I have a pop up window on my site, that launches a chat window. Now, I would like to set a flag in my database, when someone ends the chat. Easy done, if someone clicks the "End Session" link in the window, but what if someone simply closes the window by the normal means of clicking "close" icon in the top right of the window.
 
Ideally, I would like to grab that call, and set an Ajax call to update my database.
 
Is this possible?
 
Any thoughts/help would be greatly appreciated.
 
Thanks,
 
Alan...
_________________________________________________________________
Welcome to the next generation of Windows Live
http://www.windowslive.co.uk/get-live
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.evolt.org/pipermail/javascript/attachments/20080331/c87c9045/attachment.html 

From davidh126 at writeme.com  Mon Mar 31 22:45:23 2008
From: davidh126 at writeme.com (David Hucklesby)
Date: Mon, 31 Mar 2008 20:45:23 -0700
Subject: [Javascript] Grab close window call
In-Reply-To: <BLU110-W434C2F89F044CAAEABEE21F9FA0@phx.gbl>
Message-ID: <2008331204523.239359@DAVIDS>

On Mon, 31 Mar 2008 23:26:10 +0100, Alan Easton wrote:
> Hi All,
>
> I have a problem, which I am not sure is solvable.
>
> I have a pop up window on my site, that launches a chat window. Now, I would like to
> set a flag in my database, when someone ends the chat. Easy done, if someone clicks the
> "End Session" link in the window, but what if someone simply closes the window by the
> normal means of clicking "close" icon in the top right of the window.
>
> Ideally, I would like to grab that call, and set an Ajax call to update my database.
>
> Is this possible?
>

I believe the "window.onunload" event is the one you are looking for.

Cordially,
David
--