Re: [Proto-Scripty] Prototype dom
> Hope that helps. > > Walter > > It does, thanks for your time. Agnese -- 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-scriptaculous@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.
Re: [Proto-Scripty] Prototype dom
On Dec 17, 2012, at 5:13 AM, Agnese Camellini wrote:
>
>
> 2012/12/17 Walter Lee Davis
>
> $_POST['id']); ?>
>
> Call that script page.php and modify the JavaScript as follows:
>
>
> var toggles = $$('.toggle').invoke('hide');
>
> is this a way to substitute a CSS property, alternative to setStyle({display:
> 'none'})?
hide() and show() are simplified syntax to hide and show an element. The hide
adds display:none, but show doesn't just add display:block -- it removes
display:none, letting the native element display property (as modified by any
existing CSS) to shine back through.
>
> $('menu').on('click', 'a', function(evt, elm){
> evt.stop();
> toggles.invoke('hide');
> var target = elm.href.split('#').last();
>
> What do the evt and elm arguments represent?
The on() function takes three arguments: the event that it observes, an
(optional) CSS selector to refine the targeting on that event, and the function
body to be wrapped around the event and its triggering element. If you call it
with only two arguments, then the first is the name of the event, and the
second is the function body. See: http://api.prototypejs.org/dom/Element/on/
and more here: http://api.prototypejs.org/dom/Event/on/
If you were to write that line of my example out in pseudocode, here's what it
says:
When #menu receives a click event (which may have bubbled up from one of its
children),
If that click was on an 'a'
Fire this anonymous function, passing it the click event itself and the 'a'
that was clicked.
This code encapsulates a lot of lines of branching code in your example into
that one expression, and spackles over the differences between browsers as it
does so.
>
> new Ajax.Updater(target,
> 'page.php', {
> parameters: {
> id: target
> },
> onSuccess: function(){
> $(target).show();
> }
> });
>
>
>
> Souldn't the element "target" be one of the elements "toggle" hided before? I
> could use the for loop in my script to identify a list of id in sequence.
The target is gathered a few lines before, by splitting the href of the elm
(the link that was clicked). This could be gathered earlier and just once if
you wanted to optimize things further. There is no need to loop over anything,
because elm is already a JavaScript reference to the link that was clicked, so
we have full two-way access to it. Yes, it was hidden before, along with all of
its peers. Inside this anonymous function, the external variable 'toggles' is a
reference to the entire collection of elements you are showing and hiding.
>
> Why don't you call the innerHTML function or others? i mean, why Ajax.Updater?
Read the API. Yes, under the covers that method is being used, but again, a
whole lot of branching conditional logic is encapsulated away from your main
application, so you don't have to worry about different browsers'
implementation details. Ajax.Updater is a combination of the Ajax.Request and
Element.update methods -- a short-cut for those cases where you want to make an
Ajax request and immediately update an on-screen element with the results of
that request. Element.update() does use innerHTML in the browsers that support
it, and something heavier-handed for those that do not implement the spec as
written.
Hope that helps.
Walter
>
>
> Now when you click this link, the ID will be passed to the script. In this
> trivial example, the non-numeric parts will be stripped out, and the result
> will be concatenated with a string and returned through Ajax to populate the
> box on the screen, which will show as soon as that reply is received. In your
> more complex example, you could look up the latest news from Yahoo (using
> PHP, since that doesn't suffer from cross-domain restrictions like JavaScript
> does) and put that in there instead.
>
> Walter
>
> Thanks
> Agnese
>
>
> --
> 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-scriptaculous@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.
--
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-scriptaculous@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.
Re: [Proto-Scripty] Prototype dom
On Dec 16, 2012, at 3:31 PM, Agnese Camellini wrote:
> The page is composed by a list of divs and a simple list, each div is
> associated with a link and should be visible only when you click on the link,
> but the pages loads every div without recognizing the id, i changed the typo
> errors you notified me but it doesn't work anyway.
>
> The php call leaves me a little confused to. For avoiding problems i named
> the file pasted article.php, anyway, it's a book example, that's what i tryed
> to do to make it work.
> Thanks
> Agnese
For the moment, let's ignore the business with the PHP and the Ajax call, let's
just get the divs appearing when their corresponding link is clicked. Consider
this static HTML page:
http://scripty.walterdavisstudio.com/show-hide-divs.html
View source on that page. Just as in your example, there is a collection of
uniquely-identified DIVs, and a list of links to those DIVs. Breaking down the
script line by line, here's what I did:
1. Gather a reference to all of the divs I want to show/hide, and set them each
to hide initially.
2. Set an observer on the menu, watching for a click on any 'a' tag inside it,
and passing that click event and the 'a' tag to a handler function.
3. Stop the link from behaving normally.
4. Hide any currently visible div from the collection.
5. Get a reference to the target element and show it.
6. Close the function reference.
Now that I have the static page working, the dynamic part could be done like
this, assuming that you could pass the ID of the receiving element to your
script and have it make some sense of the request. For purposes of explanation,
we will use this PHP to duplicate what the static example does, but your script
can do whatever you want it to do.
Call that script page.php and modify the JavaScript as follows:
var toggles = $$('.toggle').invoke('hide');
$('menu').on('click', 'a', function(evt, elm){
evt.stop();
toggles.invoke('hide');
var target = elm.href.split('#').last();
new Ajax.Updater(target,
'page.php', {
parameters: {
id: target
},
onSuccess: function(){
$(target).show();
}
});
Now when you click this link, the ID will be passed to the script. In this
trivial example, the non-numeric parts will be stripped out, and the result
will be concatenated with a string and returned through Ajax to populate the
box on the screen, which will show as soon as that reply is received. In your
more complex example, you could look up the latest news from Yahoo (using PHP,
since that doesn't suffer from cross-domain restrictions like JavaScript does)
and put that in there instead.
Walter
>
>
> 2012/12/16 Walter Lee Davis
>
> On Dec 16, 2012, at 8:59 AM, tab1ta wrote:
>
> > Hello.
> > I'm studying, there is a piece of code i cannot get to work, so i was
> > asking myself if you can help, given that all the pastebin doesn't accept
> > the prototype link.
>
> Which ones have you tried? JSFiddle has Prototype as one of its many
> libraries, ready to use. This has the added benefit that the code is rendered
> and runs in your browser while you are working on your example. Others can
> fork your "fiddle" and fix it there, too.
>
> > I'm not exaclty sure of what it does, i assume it goes through the document
> > dom to place every div page in the right order to be viewed. Its a php
> > file, and i can't really understand why php is needed to solve this task,
> > however is a pice of code found in a book, it could be wrong.
> >
> > > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
> > http://www.w3.org/1999/xhtml"; xml:lang="en">
> >
> >
> >
> > function importNode(p_element, p_allChildren) {
> > switch (p_element.nodeType) {
> > case 1:
> > var newNode =
> > document.createElement(p_element.nodeName);
> > if (p_element.attributes &&
> > p_element.attributes.length >0)
> > for (var i = 0, il=p_element.attributes.length;
> > i < il;)
> >
> > newNode.setAttribute(p_element.attributes[i].nodeName,
> > p_element.getAttribute(
> >
> > p_element.attributes[i++].nodeName));
> > if(p_allChildren && p_element.childNotes &&
> > p_element.childNodes.length > 0)
> > for (var i = 0, il =
> > p_element.childNodes.length; i < il;)
> >
> > newNode.appendChild(importNode(p_element.childNodes[i++], p_allChildren));
> > return NewNode;
> > break;
> > case 2:
> > case 3:
> > return document.createTextNode(p_element.nodeValue);
> >
Re: [Proto-Scripty] Prototype dom
On Dec 16, 2012, at 8:59 AM, tab1ta wrote:
> Hello.
> I'm studying, there is a piece of code i cannot get to work, so i was asking
> myself if you can help, given that all the pastebin doesn't accept the
> prototype link.
Which ones have you tried? JSFiddle has Prototype as one of its many libraries,
ready to use. This has the added benefit that the code is rendered and runs in
your browser while you are working on your example. Others can fork your
"fiddle" and fix it there, too.
> I'm not exaclty sure of what it does, i assume it goes through the document
> dom to place every div page in the right order to be viewed. Its a php file,
> and i can't really understand why php is needed to solve this task, however
> is a pice of code found in a book, it could be wrong.
>
> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
> http://www.w3.org/1999/xhtml"; xml:lang="en">
>
>
>
> function importNode(p_element, p_allChildren) {
> switch (p_element.nodeType) {
> case 1:
> var newNode =
> document.createElement(p_element.nodeName);
> if (p_element.attributes &&
> p_element.attributes.length >0)
> for (var i = 0, il=p_element.attributes.length; i
> < il;)
>
> newNode.setAttribute(p_element.attributes[i].nodeName,
> p_element.getAttribute(
> p_element.attributes[i++].nodeName));
> if(p_allChildren && p_element.childNotes &&
> p_element.childNodes.length > 0)
> for (var i = 0, il = p_element.childNodes.length;
> i < il;)
>
> newNode.appendChild(importNode(p_element.childNodes[i++], p_allChildren));
> return NewNode;
> break;
> case 2:
> case 3:
> return document.createTextNode(p_element.nodeValue);
> break;
> }
> };
No Prototype here, could be written much more clearly and concisely with
Prototype idioms.
>
> function turnPage(p_number) {
> var pages = $('article').getElemenetsByTagName('div');
TYPO??? Elemenets !== Elements
(also could be written as $('article').select('div') for added points)
> for (var i = 0, il = pages.length; i< il; i++) {
> $(pages[i]).setStyle({display: 'none'});
> $('l' + (i+1)).innerHTML = '' +(i+1)+'';
> }
> if ($('page' + p_number).innerHTML == '') {
> new Ajax.Request('article.php', {
> method: 'post',
> parameters: {page:p_number },
> onSuccess: function(xhrResponse) {
> var response = xhrResponse.responseXML;
> var newNode;
> if (!window.ActiveXObject) {
> newNode =
>
> document.importNode(response.getElementsByTagName('page')[0].childNodes[1],
> true);
> $('page' + p_number).appendChild(newNode);
> } else {
> newNode =
>
> importNode(response.getElementsByTagName('page')[0].childNodes[0], true);
> $('page' + p_number).appendChild(newNode);
> }
> $('l' + p_number).innerHTML = p_number;
> $('page' + p_number).setStyle({display:
> 'block' });
> },
> onFailure: function(xhrResponse) {
> $('page').innerHTML = xhrResponse.statusText;
> }
> });
> } else {
> $('l' + p_number).innerHTML = p_number;
> $('page'+ p_number).setStyle({display: 'block' });
> }
> return (false);
> }
The rest of this is a salad of Prototype and non-Prototype coding styles.
There's nothing wrong with a for loop, until you try to loop over a collection
of Prototype-extended elements. That's when you meet the "salt" as opposed to
the "syntactic sugar" of Prototype's each() method.
If you can write out, in English as opposed to JavaScript, what it is you're
trying to accomplish here with this code, I might be able to point you toward
another approach that y
[Proto-Scripty] Prototype dom
Hello.
I'm studying, there is a piece of code i cannot get to work, so i was
asking myself if you can help, given that all the pastebin doesn't accept
the prototype link.
I'm not exaclty sure of what it does, i assume it goes through the document
dom to place every div page in the right order to be viewed. Its a php
file, and i can't really understand why php is needed to solve this task,
however is a pice of code found in a book, it could be wrong.
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en">
function importNode(p_element, p_allChildren) {
switch (p_element.nodeType) {
case 1:
var newNode =
document.createElement(p_element.nodeName);
if (p_element.attributes &&
p_element.attributes.length >0)
for (var i = 0, il=p_element.attributes.length;
i < il;)
newNode.setAttribute(p_element.attributes[i].nodeName,
p_element.getAttribute(
p_element.attributes[i++].nodeName));
if(p_allChildren && p_element.childNotes &&
p_element.childNodes.length > 0)
for (var i = 0, il =
p_element.childNodes.length; i < il;)
newNode.appendChild(importNode(p_element.childNodes[i++], p_allChildren));
return NewNode;
break;
case 2:
case 3:
return document.createTextNode(p_element.nodeValue);
break;
}
};
function turnPage(p_number) {
var pages = $('article').getElemenetsByTagName('div');
for (var i = 0, il = pages.length; i< il; i++) {
$(pages[i]).setStyle({display: 'none'});
$('l' + (i+1)).innerHTML = '' +(i+1)+'';
}
if ($('page' + p_number).innerHTML == '') {
new Ajax.Request('article.php', {
method: 'post',
parameters: {page:p_number },
onSuccess: function(xhrResponse) {
var response = xhrResponse.responseXML;
var newNode;
if (!window.ActiveXObject) {
newNode =
document.importNode(response.getElementsByTagName('page')[0].childNodes[1],
true);
$('page' +
p_number).appendChild(newNode);
} else {
newNode =
importNode(response.getElementsByTagName('page')[0].childNodes[0], true);
$('page' +
p_number).appendChild(newNode);
}
$('l' + p_number).innerHTML = p_number;
$('page' + p_number).setStyle({display:
'block' });
},
onFailure: function(xhrResponse) {
$('page').innerHTML =
xhrResponse.statusText;
}
});
} else {
$('l' + p_number).innerHTML = p_number;
$('page'+ p_number).setStyle({display: 'block' });
}
return (false);
}
Paged navigation
Paged Navigation
This is page one.
This is page two.
This is page three.
This is page four.
This is page five.
1
2
3
4
5
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/Ibtlp8ZSnzAJ.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe
Re: [Proto-Scripty] Prototype DOM-traversal methods failing on HTML5 elements in IE < 9 using html5shiv
On Jun 30, 2011, at 12:44 PM, Jonny Nott wrote:
Using html5shiv 1.6.2 (latest) (http://code.google.com/p/html5shiv/)
and Prototype v1.7..
So, html5shiv makes , etc elements work nicely in
IE<9 .. they appear, you can style them etc. All good. The HTML5
elements all exist within the IE DOM tree in Developer Tools.
However, when you try to grab any such HTML5 elements using
Prototype's DOM-traversal methods (e.g. down(), up()), then they
always return undefined in IE8/IE7 (who cares about IE6?). For
example:
..then..
var bar = $('foo').down('div'); // works
var baz = $('foo').down('section'); // undefined
..and..
var theArticle = $('abc123').up('article'); // undefined
Is this a gaping hole/bug?
Code to reproduce: http://pastebin.com/TC1Dp5At
Try adding this line in a dom:loaded callback, inside an IE
conditional comment:
$w('article aside details figcaption figure footer header hgroup menu
nav section').each(function(elm){
new Element(elm);
});
As far as I know, IE won't let you script something unless you build
one such in memory first. Once you do that, you're golden. Not sure if
I'm just duplicating what HTML5shiv is supposed to do, but this is the
way I've done it before.
Walter
--
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-scriptaculous@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] Prototype DOM-traversal methods failing on HTML5 elements in IE < 9 using html5shiv
Using html5shiv 1.6.2 (latest) (http://code.google.com/p/html5shiv/)
and Prototype v1.7..
So, html5shiv makes , etc elements work nicely in
IE<9 .. they appear, you can style them etc. All good. The HTML5
elements all exist within the IE DOM tree in Developer Tools.
However, when you try to grab any such HTML5 elements using
Prototype's DOM-traversal methods (e.g. down(), up()), then they
always return undefined in IE8/IE7 (who cares about IE6?). For
example:
..then..
var bar = $('foo').down('div'); // works
var baz = $('foo').down('section'); // undefined
..and..
var theArticle = $('abc123').up('article'); // undefined
Is this a gaping hole/bug?
Code to reproduce: http://pastebin.com/TC1Dp5At
Jon
--
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-scriptaculous@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.
