[Proto-Scripty] Re: Prototype - Close div when click off?
Hi,
TJ, you inadvertently disabled Edit using JS Bin for this
example :)
LOL! You're right! Just add /edit to the URL.
Who is JS Bin, is that yours? Very cool.
Not mine, and in fact it drives me nuts, the editor is always getting
in your way. But yes, it's a very handy way to do live examples of
JavaScript, CSS, DOM. Another is jsfiddle.net.
-- T.J. :-)
On Sep 20, 7:13 pm, kstubs kst...@gmail.com wrote:
TJ, you inadvertently disabled Edit using JS Bin for this
example :) Who is JS Bin, is that yours? Very cool.
On Sep 20, 5:12 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Not entirely sure what you're trying to do, but this will fail:
$(document.body).descendants().observe
^-- Problem here
`#observe` is a function Prototype adds to *elements*, not arrays.
`#descendants` returns an array. Although you could fix this via
`#invoke`, here's an alternative:
If you're trying to catch a click wherever it occurs, just watch for
it on `document` -- the click event bubbles up the hierarchy. You can
find out what element the click actually happened on by using the
`Event#findElement` function. That starts with the deepest-down
element on which the event occurred and then searches upward for the
first element matching the selector you give it. So for example, this
code handles a click if it occurs in any `a` element, even if it
actually occurs in a `strong` or `span` or whatever within the `a`
element:
Example:http://jsbin.com/upetu
* * * *
document.observe(click, function(event) {
display(Document clicked);
var a = event.findElement('a');
if (a) {
display(Click was anchor ' + a.id + '!);
event.stop(); // Just for our purposes
a.setStyle({backgroundColor: blue});
}
function display(msg) {
document.body.appendChild(new Element('p').update(msg));
}});
* * * *
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 20, 11:47 am, Jason jasonstanle...@gmail.com wrote:
Hello,
I am modifying this:http://cpicker.com/
I have made good progress, everything is working great. I now need to
make one last modification.
I think I need to do something like this but I am new to prototype and
don't really get it.
$(document.body).descendants().observe('click', function() {
if ($('stroke_color').getStyle('display') == 'block') {
if ({not a decendant of stroke_color}) {
$('stroke_color').hide();
}
}
});
Can anyone help please?
Thanks.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Prototype return limited
On Sep 10, 11:32 pm, chrysanthe m chrysant...@gmail.com wrote: Hi Dave Yes. I know I should not be shoveling out so much data to the client, but I have to for this proof of concept and will restrict it in production. Has anyone parsed return json data larger than 8K? I did. Note that: - I am using the response body (responseJSON) and not the response header. - I noticed that my server uses Transfer-Encoding: chunked (in case it may have an effect, since for shorter replies it uses gzip and give a Content-Length) . HTH Eric On Thu, Sep 2, 2010 at 9:27 AM, Dave Kibble davekib...@gmail.com wrote: just going on the number 8k (IE limit) and the ambiguity of return: do you mean that ajax fails when sending 8k to the server, or when the reply to an ajax request from the server is 8k -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculous%2bunsubscr...@googlegroups.com . For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] IE Issues
Anyone care to look at this page: http://www.meetscoresonline.com/results.aspx?tax=1meetid=11590 On the left is the navigation bar (in blue): - show all S - show session L - show level D - show division On rollover the navigation bar expands, but the problem is the icons shift with the expansion. Also, when you drag over the h2 elements from one section, like session, to the next, like level the mouseleave event is fired but shouldn't be. Everything works as expected in IE and FF (of course). Thanks in advance for any assistance! Karl.. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Prototype - Close div when click off?
Hi,
I want the div to close when the user clicks
on anything BUT the div.
Well, we can't do that with delegation, because the elements
themselves may have click handlers or default behaviors that would
happen before the click bubbled up to the document body.
You *could* do that by setting an observer on every other element
while your div is showing. The code's small, but calling it a
sledgehammer would be an understatement:
* * * *
var list = $$(*);
list.invoke('observe', 'click', handleAllClicks);
function handleAllClicks(event) {
event.stop();
if (this.id != 'the_ID_of_your_special_div') {
// Remove/hide/whatever the special div
...
// Unhook the handlers:
list.invoke('stopObserving', 'click', handleAllClicks);
}
}
* * * *
Example: http://jsbin.com/ukitu3 (http://jsbin.com/ukitu3/edit to
edit)
But that just seems like a really bad idea.
The usual way you handle this is with an iframe shim, which also
handles ensuring your pop-up correctly pops up over plug-ins and OS-
rendered controls. This basically involves creating a transparent
iframe that covers the entire document/viewport (or semi-transparent
if you want that dimmed out effect), giving it a z-index so that it
appears above everything else, and then giving your pop-up div a
higher z-index than the iframe. If you search for iframe shim you'll
find several examples. Then you just use clicks on the iframe to
dismiss your modal popup.
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 20, 9:07 pm, Jason jasonstanle...@gmail.com wrote:
Hi T.J.
Sorry for being unclear. I want the div to close when the user clicks
on anything BUT the div.
What you have written makes sense with the findElement. Can
findElement by used to literally find any element and then compare it
to find out if it is a child or parent of the relevant div. This way I
could determine if the clicked element is part of the open div, if it
isn't I could then hide the div.
On Sep 20, 8:12 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Not entirely sure what you're trying to do, but this will fail:
$(document.body).descendants().observe
^-- Problem here
`#observe` is a function Prototype adds to *elements*, not arrays.
`#descendants` returns an array. Although you could fix this via
`#invoke`, here's an alternative:
If you're trying to catch a click wherever it occurs, just watch for
it on `document` -- the click event bubbles up the hierarchy. You can
find out what element the click actually happened on by using the
`Event#findElement` function. That starts with the deepest-down
element on which the event occurred and then searches upward for the
first element matching the selector you give it. So for example, this
code handles a click if it occurs in any `a` element, even if it
actually occurs in a `strong` or `span` or whatever within the `a`
element:
Example:http://jsbin.com/upetu
* * * *
document.observe(click, function(event) {
display(Document clicked);
var a = event.findElement('a');
if (a) {
display(Click was anchor ' + a.id + '!);
event.stop(); // Just for our purposes
a.setStyle({backgroundColor: blue});
}
function display(msg) {
document.body.appendChild(new Element('p').update(msg));
}});
* * * *
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 20, 11:47 am, Jason jasonstanle...@gmail.com wrote:
Hello,
I am modifying this:http://cpicker.com/
I have made good progress, everything is working great. I now need to
make one last modification.
I think I need to do something like this but I am new to prototype and
don't really get it.
$(document.body).descendants().observe('click', function() {
if ($('stroke_color').getStyle('display') == 'block') {
if ({not a decendant of stroke_color}) {
$('stroke_color').hide();
}
}
});
Can anyone help please?
Thanks.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Prototype - Close div when click off?
Hi,
Actually, sorry, in the quoted code change this:
if (this.id != 'the_ID_of_your_special_div') {
to
if (!event.findElement(#the_ID_of_your_special_div)) {
...to ensure that clicks on child elements of your special div are
handled correctly.
Here's the updated JSBin: http://jsbin.com/ukitu3/2 (http://jsbin.com/
ukitu3/2/edit)
-- T.J.
On Sep 21, 10:42 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
I want the div to close when the user clicks
on anything BUT the div.
Well, we can't do that with delegation, because the elements
themselves may have click handlers or default behaviors that would
happen before the click bubbled up to the document body.
You *could* do that by setting an observer on every other element
while your div is showing. The code's small, but calling it a
sledgehammer would be an understatement:
* * * *
var list = $$(*);
list.invoke('observe', 'click', handleAllClicks);
function handleAllClicks(event) {
event.stop();
if (this.id != 'the_ID_of_your_special_div') {
// Remove/hide/whatever the special div
...
// Unhook the handlers:
list.invoke('stopObserving', 'click', handleAllClicks);
}
}
* * * *
Example:http://jsbin.com/ukitu3(http://jsbin.com/ukitu3/editto
edit)
But that just seems like a really bad idea.
The usual way you handle this is with an iframe shim, which also
handles ensuring your pop-up correctly pops up over plug-ins and OS-
rendered controls. This basically involves creating a transparent
iframe that covers the entire document/viewport (or semi-transparent
if you want that dimmed out effect), giving it a z-index so that it
appears above everything else, and then giving your pop-up div a
higher z-index than the iframe. If you search for iframe shim you'll
find several examples. Then you just use clicks on the iframe to
dismiss your modal popup.
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 20, 9:07 pm, Jason jasonstanle...@gmail.com wrote:
Hi T.J.
Sorry for being unclear. I want the div to close when the user clicks
on anything BUT the div.
What you have written makes sense with the findElement. Can
findElement by used to literally find any element and then compare it
to find out if it is a child or parent of the relevant div. This way I
could determine if the clicked element is part of the open div, if it
isn't I could then hide the div.
On Sep 20, 8:12 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Not entirely sure what you're trying to do, but this will fail:
$(document.body).descendants().observe
^-- Problem here
`#observe` is a function Prototype adds to *elements*, not arrays.
`#descendants` returns an array. Although you could fix this via
`#invoke`, here's an alternative:
If you're trying to catch a click wherever it occurs, just watch for
it on `document` -- the click event bubbles up the hierarchy. You can
find out what element the click actually happened on by using the
`Event#findElement` function. That starts with the deepest-down
element on which the event occurred and then searches upward for the
first element matching the selector you give it. So for example, this
code handles a click if it occurs in any `a` element, even if it
actually occurs in a `strong` or `span` or whatever within the `a`
element:
Example:http://jsbin.com/upetu
* * * *
document.observe(click, function(event) {
display(Document clicked);
var a = event.findElement('a');
if (a) {
display(Click was anchor ' + a.id + '!);
event.stop(); // Just for our purposes
a.setStyle({backgroundColor: blue});
}
function display(msg) {
document.body.appendChild(new Element('p').update(msg));
}});
* * * *
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 20, 11:47 am, Jason jasonstanle...@gmail.com wrote:
Hello,
I am modifying this:http://cpicker.com/
I have made good progress, everything is working great. I now need to
make one last modification.
I think I need to do something like this but I am new to prototype and
don't really get it.
$(document.body).descendants().observe('click', function() {
if ($('stroke_color').getStyle('display') == 'block') {
if ({not a decendant of stroke_color}) {
$('stroke_color').hide();
}
}
});
Can anyone help please?
Thanks.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
Re: [Proto-Scripty] IE Issues
http://validator.w3.org/check?uri=http://www.meetscoresonline.com/results.aspx%3Ftax%3D1%26meetid%3D11590charset=(detect+automatically)doctype=Inlinegroup=0verbose=1
You have some errors here. Not all are important but some I'd be worried about.
character data is not allowed here ✉
You have used character data somewhere it is not permitted to appear.
Mistakes that can cause this error include:
putting text directly in the body of the document without wrapping it
in a container element (such as a paragraph/p), or
forgetting to quote an attribute value (where characters such as %
and / are common, but cannot appear without surrounding quotes), or
using XHTML-style self-closing tags (such as meta ... /) in HTML
4.01 or earlier. To fix, remove the extra slash ('/') character. For
more information about the reasons for this, see Empty elements in
SGML, HTML, XML, and XHTML.
Line 88, column 9: character data is not allowed here
How to Contact MSO
document type does not allow element X here; assuming missing Y start-tag ✉
Line 120, column 18: document type does not allow element OL here;
assuming missing LI start-tag
ol
end tag for X which is not finished ✉
Most likely, you nested tags and closed them in the wrong order. For
example pem.../p is not acceptable, as em must be closed
before p. Acceptable nesting is: pem.../em/p
Another possibility is that you used an element which requires a child
element that you did not include. Hence the parent element is not
finished, not complete. For instance, in HTML the head element must
contain a title child element, lists require appropriate list items
(ul and ol require li; dl requires dt and dd), and so on.
Line 71, column 36: end tag for UL which is not finished
ul class=result/ul
Line 202, column 85: end tag for UL which is not finished
…ul id=level_picker class=sub_menu level style=display:none/ul
Line 204, column 91: end tag for UL which is not finished
… ul id=division_picker class=sub_menu division style=display:none/ul
And
Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8) is
different from the value in the meta element (utf-16). I will use
the value from the HTTP header (utf-8) for this validation.
Line 120, Column 18: document type does not allow element OL here;
assuming missing LI start-tag
ol
--
Richard Quadling
Twitter : EE : Zend
@RQuadling : e-e.com/M_248814.html : bit.ly/9O8vFY
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] getWdith() not working in IE
Hi Crowder,
I am having some problem in implementing a dynamic table and getting the
width of an td element in IE (Safari, FF works ok.)
I am creating the table as :
var myTable = document.createElement(table);
var myThead = document.createElement(thead);
var myTfoot = document.createElement(tfoot);
var myTbody = document.createElement(tbody);
var myRow = document.createElement(tr);
var myCell = document.createElement(td);
myTable.appendChild(myThead);
myTable.appendChild(myTfoot);
myTable.appendChild(myTbody);
myTbody.appendChild(myRow);
myRow.appendChild(myCell);
this.containerElement.appendChild(myTable);
---
I have a css file where I set up the style for the td element.
td.one
{
height:80px;
width:80px;
border: 1px solid #000;
background:#333;
vertical-align:middle;
voice-family: \}\;
voice-family: inherit;
width: 78px; }
td { width:78px; } ,
--
After running the the code, I could see that the table with one cell is
getting created correctly. But if I try to get width, I am not getting
anything.
However, if I create the table in a static html code. At least I can query
the element by :
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = colItem.style.width;
var colWidth = (col.item(0)).getWidth(); // not working in IE. It is dying.
var colWidth = $$('td').getWidth(); // Not working if the table is created
dynamically
This probably already an discussed topic. I am wondering why is this
difference between statically and dynamically created table ? Is there a
way to get width of the td element (created dynamically) that works in IE?
I do not have any problem in getting getWidth() working for dynamically
created table in FF and Safari.
Any help is appreciated.
Thanks so much,
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: getWdith() not working in IE
Hi,
Hi Crowder,
LOL -- so no one else on the list is allowed to answer? ;-)
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = colItem.style.width;
var colWidth = (col.item(0)).getWidth(); // not working in IE. It is dying.
That's because on IE, Prototype can't automagically extend elements.
You have to explicitly extend them by passing them through `$`, or
retrieve them via Prototype (which will extend them for you before
giving them to you). In the code above, you've used raw DOM methods to
get the NodeList and get the Element from it, so it doesn't have
Prototype's syntactic sugar. More here:
http://prototypejs.org/learn/extensions
Or to put all that another way, try this:
var tdElem = this.containerElement.select(td);
//Or var tdElem = $(this.containerElement).select(td); if
this.containerElement hasn't
//already been extended
var colItem = tdElem[0];
var colWidth = colItem.getWidth();
or this:
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = $(col.item(0)).getWidth();
// ^-- change is here
var colWidth = $$('td').getWidth(); // Not working if the table is created
dynamically
That won't work regardless of whether the table was created
dynamically or not. `$$` returns an Array, not an Element, and arrays
don't have a `getWidth` function. You'd need something like this (for
the first one):
var colwidth = $$('td')[0].getWidth();
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 21, 2:41 pm, Somdatta Nath nath.somda...@gmail.com wrote:
Hi Crowder,
I am having some problem in implementing a dynamic table and getting the
width of an td element in IE (Safari, FF works ok.)
I am creating the table as :
var myTable = document.createElement(table);
var myThead = document.createElement(thead);
var myTfoot = document.createElement(tfoot);
var myTbody = document.createElement(tbody);
var myRow = document.createElement(tr);
var myCell = document.createElement(td);
myTable.appendChild(myThead);
myTable.appendChild(myTfoot);
myTable.appendChild(myTbody);
myTbody.appendChild(myRow);
myRow.appendChild(myCell);
this.containerElement.appendChild(myTable);
---
I have a css file where I set up the style for the td element.
td.one
{
height:80px;
width:80px;
border: 1px solid #000;
background:#333;
vertical-align:middle;
voice-family: \}\;
voice-family: inherit;
width: 78px; }
td { width:78px; } ,
--
After running the the code, I could see that the table with one cell is
getting created correctly. But if I try to get width, I am not getting
anything.
However, if I create the table in a static html code. At least I can query
the element by :
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = colItem.style.width;
var colWidth = (col.item(0)).getWidth(); // not working in IE. It is dying.
var colWidth = $$('td').getWidth(); // Not working if the table is created
dynamically
This probably already an discussed topic. I am wondering why is this
difference between statically and dynamically created table ? Is there a
way to get width of the td element (created dynamically) that works in IE?
I do not have any problem in getting getWidth() working for dynamically
created table in FF and Safari.
Any help is appreciated.
Thanks so much,
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] having trouble with periodic execution with a map
Not sure if my problem is the javascript function, or how i have the
PeriodicalExecuter set up. The action works, the element is updated
with new info, but the old contents are not removed.
map.addOverlay(weather_table_one);
// action when map is moved
function replace_weather_table(){
map.removeOverlay(weather_table_one);
zoomy = map.getZoom();
new Ajax.Request('/pivrain2/update_weather_tables', {
parameters: {
zoom: zoomy
}
})
};
new PeriodicalExecuter(replace_weather_table, 30);
would appreciate any help
skrite
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: having trouble with periodic execution with a map
Hi,
What's the wider context of that code? In particular, what happens to
`weather_table_one` after the code you've shown? Because if you're
modifying it (for instance, in a loop), that's your problem. The
`replace_weather_table` function is a closure over the
`weather_table_one` variable, which means it has a *live* reference to
it (not a copy of it).
Here's a simple example of the effect: http://jsbin.com/ujera3
* * * *
document.observe(dom:loaded, function() {
var index, div;
for (index = 0; index 5; ++index) {
div = new Element('div');
div.update(I'm div # + index + . Click me.);
div.observe('click', function(event) {
event.stop();
alert(Index = + index);
});
document.body.appendChild(div);
}
});
* * * *
You might thing that if you clicked div #0, it would say Index = 0,
and if you clicked div #1, it would say Index = 1. But it doesn't.
It always says Index = 5, because that's the *current* value of the
`index` variable as of the time the click handler is called.
You can break that link so that the function deals with the value at a
point in time. The usual way is to do it with a function call:
http://jsbin.com/ujera3/2
* * * *
document.observe(dom:loaded, function() {
var index, div;
for (index = 0; index 5; ++index) {
div = new Element('div');
div.update(I'm div # + index + . Click me.);
// Create a function that accepts an argument
(function(thisIndex) {
div.observe('click', function(event) {
event.stop();
// Use the argument
alert(thisIndex = + thisIndex);
});
})(index); // == pass in the current value of `index` as the
argument
document.body.appendChild(div);
}
});
* * * *
The event handler is still a closure. In fact, it's a closure over two
things: 1. The execution context of the main code, and 2. The
execution context of *that particular call* to the anonymous function
we added. Since the event handler is using the `thisIndex` argument
*of a particular call context*, and that argument is never changed, it
works as you expect. Mind you, I wouldn't recommend the above code
literally, it's a bit expensive in terms of creating extra contexts,
I'd usually try to find some other way to get the information to the
handler. But for these purposes, it's useful for showing how the
closure works.
More here:
http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 21, 5:22 pm, nephish neph...@gmail.com wrote:
Not sure if my problem is the javascript function, or how i have the
PeriodicalExecuter set up. The action works, the element is updated
with new info, but the old contents are not removed.
map.addOverlay(weather_table_one);
// action when map is moved
function replace_weather_table(){
map.removeOverlay(weather_table_one);
zoomy = map.getZoom();
new Ajax.Request('/pivrain2/update_weather_tables', {
parameters: {
zoom: zoomy
}
})
};
new PeriodicalExecuter(replace_weather_table, 30);
would appreciate any help
skrite
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: having trouble with periodic execution with a map
Hey thanks for your help. The particular block i am having trouble
with is not part of a loop of placing many objects, but where the
contents of a table need to change. This is for a page using google
maps to display weather data, The zoom level effects what style to
apply to a table (weather table one). Also, since the data is
changing, i need to update the data values in the table.
here is the bigger scope.
I am almost certain it is a simple syntax issue that eludes me.
Thanks for the links too, I am always looking for folks who share
there experience. I am not new to programming, but i am new to
javascript.
shawn
script type=text/javascript
var rainGroup = new GMarkerGroup(true,[
addInfoWindowToMarker(
new GMarker((new GLatLng(36.132016, -101.729908)),{icon :
addOptionsToIcon(new GIcon(),
{infoWindowAnchor : new GPoint(0,0),image : '/
images/rain_markers/rain_marker_0.00.png' ,
iconSize : new GSize(38,23),iconAnchor : new
GPoint(0,0)}), title : 'Stampede - 11', zIndexProcess: function()
{return 90;} }),
div style='height:400px; width:800px;'br a
href='/pivrain/multigraph/23' img src='/pivrain/getchart/?
id=23use_gmap=1' /abr /div ,{}),
addInfoWindowToMarker(
new GMarker(new GLatLng(35.92363,-102.308768),{icon :
addOptionsToIcon(new GIcon(),{infoWindowAnchor : new GPoint(0,0),
image : /images/rain_markers/
rain_marker_0.00.png,iconSize : new GSize(38,23),iconAnchor : new
GPoint(0,0)}),title : Danny Ford - J1}),
div style='height:400px; width:800px;'br a href='/
pivrain/multigraph/4' img src='/pivrain/getchart/?id=4use_gmap=1'
/abr /div,{})
],
{});
var map;
window.onload = addCodeToFunction(window.onload,function() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(map_div));
map.setCenter(new GLatLng(35.5,-102),
11);map.setMapType(G_HYBRID_MAP);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
map.addOverlay(rainGroup);
var radar = 'img src=/images/radarmap.gif ';
var radar_label = new EInsert(new GLatLng(35.2, -101.835),
/images/radarmap.gif, new GSize(400,300), 12 );
map.addOverlay(radar_label);
var site_marker = new EInsert(new GLatLng(36.0146,
-102.451931), /images/rain_markers/red_circle.png, new GSize(97.0,
97.0), 13 );
map.addOverlay(site_marker);
var site_marker = new EInsert(new GLatLng(36.567959,
-103.073581), /images/rain_markers/red_circle.png, new GSize(53.0,
53.0), 13 );
map.addOverlay(site_marker);
var site_marker = new EInsert(new GLatLng(42.4668,
-99.7005), /images/rain_markers/red_circle.png, new GSize(57.0,
57.0), 13 );
map.addOverlay(site_marker);
var site_marker = new EInsert(new GLatLng(39.26715,
-102.3809), /images/rain_markers/red_circle.png, new GSize(64.0,
64.0), 13 );
map.addOverlay(site_marker);
var weather_table_one = new ELabel(new GLatLng(35.5,-102),
span style='background-color: rgb(153,153,153)' a href='/
pivrain/weather_graph_index'
onclick='window.open(this.href,'new_window','height=700,width=1050,
scrollbars=yes');return false;'weather graphs/a/span br table
Class='zoom2' border='1' tr td nowrap colspan='4'
style='background-color: rgb(153, 153, 153);' weather
station 5 miles SE of Dalhart/td /tr tr td
nowrap style='background-color: rgb(153, 153, 153);'
reading/td td nowrap style='background-color:
rgb(192, 192, 192)' current/td td nowrap
style='background-color: rgb(153, 153, 153);' 24hr high/
td td nowrap style='background-color: rgb(153, 153,
153);' 24hr low/td /tr tr td
nowrap style='background-color: rgb(153, 153, 153);' wind
speed/td td nowrap style='background-color: rgb(192, 192,
192)' 2.9 mph/td td nowrap
style='background-color: rgb(153, 153, 153);' 15.7
mph/td td nowrap style='background-color: rgb(153,
153, 153);' 0.1 mph/td /tr
tr td nowrap style='background-color: rgb(153, 153,
153);' humidity/td td nowrap
style='background-color: rgb(192, 192, 192)' 35.0
%/td td nowrap style='background-color: rgb(153,
153, 153);' 90.2 %/tdtd nowrap
style='background-color: rgb(153, 153, 153);' 35.0
%/td /tr tr td nowrap style='background-
color: rgb(153, 153, 153);' temperature/td td
nowrap style='background-color: rgb(192, 192, 192)' 93.3
deg F/td
[Proto-Scripty] Re: IE Issues
OK, I've been through and cleaned up a number of the issues. If the
remaining issues seem to be the culprit to such miss behaviors in IE,
please let me know. Otherwise, I'm going to assume that the issues
are related to unsupported (or miss-supported) CSS in IE.
Any help would be great!
Karl..
On Sep 21, 5:32 am, Richard Quadling rquadl...@gmail.com wrote:
http://validator.w3.org/check?uri=http://www.meetscoresonline.com/res...
You have some errors here. Not all are important but some I'd be worried
about.
character data is not allowed here ✉
You have used character data somewhere it is not permitted to appear.
Mistakes that can cause this error include:
putting text directly in the body of the document without wrapping it
in a container element (such as a paragraph/p), or
forgetting to quote an attribute value (where characters such as %
and / are common, but cannot appear without surrounding quotes), or
using XHTML-style self-closing tags (such as meta ... /) in HTML
4.01 or earlier. To fix, remove the extra slash ('/') character. For
more information about the reasons for this, see Empty elements in
SGML, HTML, XML, and XHTML.
Line 88, column 9: character data is not allowed here
How to Contact MSO
document type does not allow element X here; assuming missing Y start-tag ✉
Line 120, column 18: document type does not allow element OL here;
assuming missing LI start-tag
ol
end tag for X which is not finished ✉
Most likely, you nested tags and closed them in the wrong order. For
example pem.../p is not acceptable, as em must be closed
before p. Acceptable nesting is: pem.../em/p
Another possibility is that you used an element which requires a child
element that you did not include. Hence the parent element is not
finished, not complete. For instance, in HTML the head element must
contain a title child element, lists require appropriate list items
(ul and ol require li; dl requires dt and dd), and so on.
Line 71, column 36: end tag for UL which is not finished
ul class=result/ul
Line 202, column 85: end tag for UL which is not finished
… ul id=level_picker class=sub_menu level
style=display:none/ul
Line 204, column 91: end tag for UL which is not finished
… ul id=division_picker class=sub_menu division
style=display:none/ul
And
Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8) is
different from the value in the meta element (utf-16). I will use
the value from the HTTP header (utf-8) for this validation.
Line 120, Column 18: document type does not allow element OL here;
assuming missing LI start-tag
ol
--
Richard Quadling
Twitter : EE : Zend
@RQuadling : e-e.com/M_248814.html : bit.ly/9O8vFY
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: IE Issues
OK, I solved the worst of it by rearranging the div objects, moving
absolute items up to the top of the containers. I have one remaining
issue. When expanded and you roll over the h2 tags it fires the
mouseleave event (in IE). Any ideas? I think I can solve this by
observing the the element rolled over and ignoring h2 items but I'd
like to report this as a possible bug before fixing.
Karl..
On Sep 21, 8:13 pm, kstubs kst...@gmail.com wrote:
OK, I've been through and cleaned up a number of the issues. If the
remaining issues seem to be the culprit to such miss behaviors in IE,
please let me know. Otherwise, I'm going to assume that the issues
are related to unsupported (or miss-supported) CSS in IE.
Any help would be great!
Karl..
On Sep 21, 5:32 am, Richard Quadling rquadl...@gmail.com wrote:
http://validator.w3.org/check?uri=http://www.meetscoresonline.com/res...
You have some errors here. Not all are important but some I'd be worried
about.
character data is not allowed here ✉
You have used character data somewhere it is not permitted to appear.
Mistakes that can cause this error include:
putting text directly in the body of the document without wrapping it
in a container element (such as a paragraph/p), or
forgetting to quote an attribute value (where characters such as %
and / are common, but cannot appear without surrounding quotes), or
using XHTML-style self-closing tags (such as meta ... /) in HTML
4.01 or earlier. To fix, remove the extra slash ('/') character. For
more information about the reasons for this, see Empty elements in
SGML, HTML, XML, and XHTML.
Line 88, column 9: character data is not allowed here
How to Contact MSO
document type does not allow element X here; assuming missing Y start-tag ✉
Line 120, column 18: document type does not allow element OL here;
assuming missing LI start-tag
ol
end tag for X which is not finished ✉
Most likely, you nested tags and closed them in the wrong order. For
example pem.../p is not acceptable, as em must be closed
before p. Acceptable nesting is: pem.../em/p
Another possibility is that you used an element which requires a child
element that you did not include. Hence the parent element is not
finished, not complete. For instance, in HTML the head element must
contain a title child element, lists require appropriate list items
(ul and ol require li; dl requires dt and dd), and so on.
Line 71, column 36: end tag for UL which is not finished
ul class=result/ul
Line 202, column 85: end tag for UL which is not finished
… ul id=level_picker class=sub_menu level
style=display:none/ul
Line 204, column 91: end tag for UL which is not finished
… ul id=division_picker class=sub_menu division
style=display:none/ul
And
Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8) is
different from the value in the meta element (utf-16). I will use
the value from the HTTP header (utf-8) for this validation.
Line 120, Column 18: document type does not allow element OL here;
assuming missing LI start-tag
ol
--
Richard Quadling
Twitter : EE : Zend
@RQuadling : e-e.com/M_248814.html : bit.ly/9O8vFY
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: getWdith() not working in IE
On Sep 21, 7:09 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Hi Crowder,
LOL -- so no one else on the list is allowed to answer? ;-)
LOL! LOL! I have been following the group for around a year though
this is my first email. I generally read most of your replies as those
are very well explained. (Did I boosted up someone's ego ?? :) ) I
really did not want to get any reply on the work-around as I thought
of few work arounds already. I knew I was missing something but was
not sure how to extend an array element (since Safari and FF working
fine, I was thinking that it was IE glitch). Thanks for all your three
solutions. I knew that the $$('td') will not work as it returns an
array but I was so exhausted by that time and not sure how to get an
element from the array which will work with getWidth().
Thanks again. Appreciate your prompt reply.
Somdatta Nath
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = colItem.style.width;
var colWidth = (col.item(0)).getWidth(); // not working in IE. It is dying.
That's because on IE, Prototype can't automagically extend elements.
You have to explicitly extend them by passing them through `$`, or
retrieve them via Prototype (which will extend them for you before
giving them to you). In the code above, you've used raw DOM methods to
get the NodeList and get the Element from it, so it doesn't have
Prototype's syntactic sugar. More here:http://prototypejs.org/learn/extensions
Or to put all that another way, try this:
var tdElem = this.containerElement.select(td);
//Or var tdElem = $(this.containerElement).select(td); if
this.containerElement hasn't
//already been extended
var colItem = tdElem[0];
var colWidth = colItem.getWidth();
or this:
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = $(col.item(0)).getWidth();
// ^-- change is here
var colWidth = $$('td').getWidth(); // Not working if the table is created
dynamically
That won't work regardless of whether the table was created
dynamically or not. `$$` returns an Array, not an Element, and arrays
don't have a `getWidth` function. You'd need something like this (for
the first one):
var colwidth = $$('td')[0].getWidth();
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Sep 21, 2:41 pm, Somdatta Nath nath.somda...@gmail.com wrote:
Hi Crowder,
I am having some problem in implementing a dynamic table and getting the
width of an td element in IE (Safari, FF works ok.)
I am creating the table as :
var myTable = document.createElement(table);
var myThead = document.createElement(thead);
var myTfoot = document.createElement(tfoot);
var myTbody = document.createElement(tbody);
var myRow = document.createElement(tr);
var myCell = document.createElement(td);
myTable.appendChild(myThead);
myTable.appendChild(myTfoot);
myTable.appendChild(myTbody);
myTbody.appendChild(myRow);
myRow.appendChild(myCell);
this.containerElement.appendChild(myTable);
---
I have a css file where I set up the style for the td element.
td.one
{
height:80px;
width:80px;
border: 1px solid #000;
background:#333;
vertical-align:middle;
voice-family: \}\;
voice-family: inherit;
width: 78px; }
td { width:78px; } ,
--
After running the the code, I could see that the table with one cell is
getting created correctly. But if I try to get width, I am not getting
anything.
However, if I create the table in a static html code. At least I can query
the element by :
var tdElem = this.containerElement.getElementsByTagName(td);
var colItem = tdElem.item(0);
var colWidth = colItem.style.width;
var colWidth = (col.item(0)).getWidth(); // not working in IE. It is dying.
var colWidth = $$('td').getWidth(); // Not working if the table is created
dynamically
This probably already an discussed topic. I am wondering why is this
difference between statically and dynamically created table ? Is there a
way to get width of the td element (created dynamically) that works in IE?
I do not have any problem in getting getWidth() working for dynamically
created table in FF and Safari.
Any help is appreciated.
Thanks so much,- Hide quoted text -
- Show quoted text -
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
