[Proto-Scripty] Re: hide/show div id not working - HELP!
Well U Better Stick 2One Library, Personally i think JQUERY will
satisfy u anyway, It has a lot of features and got amazin'
community .
Otherwise U could stick to Prototype hard codin' =)
Bye
On Sep 5, 12:16 pm, Nelson Hernandez nels...@gmail.com wrote:
Thanks for the fast response and information. I didn't understand how
prototype, jquery, mootools, and dojo were extending javascript
differently, I get it a little better now. Since I have both jquery
and prototype used in my project, i was able to accomplish my task
with the following code so that they play nicely together:
script type=text/javascript
$(document).ready(function(){
$j= jQuery.noConflict();
$j('.bio_button').click(function(event) {
$j('.bio').hide();
var element = Event.element(event);
var id = element.id.substring(0,element.id.length-1);
var idt = document.getElementById(id)
$j(idt).show();
});});
/script
Thanks for your help ! It would have taken me forever to figure it
out without it. It would be cool if there were a language translator
between these javascript extensions.
-Nelson
On Aug 31, 3:22 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
$(document).ready(function(){
$(.bio_button).click(function(event) { //when a user clicks on
Both of those look like jQuery, not Prototype. Prototype's equivalent
of the jQuery ready function is the dom:loaded event[1]:
document.observe('dom:loaded', yourCallbackGoesHere);
Similarly, $()[2] looks up elements by ID, it does not search for them
by selector. $$()[3] does that.
It may be worth your taking a step back and reading the Prototype API
[4] through from beginning to end. It takes about an hour, and will
save you at least that much time across the life of your project
(heck, probably even in the coming week).
[1]http://prototypejs.org/api/document/observe
[2]http://prototypejs.org/api/utility/dollar
[3]http://prototypejs.org/api/utility/dollar-dollar
[4]http://prototypejs.org/api
HTH,
--
T.J. Crowder
tj / crowder software / comwww.crowdersoftware.com
On Aug 31, 1:48 am, Nelson Hernandez nels...@gmail.com wrote:
I have a very simple script that is intended to show an employees
biography on click, and hide all other biography's (since they occupy
the same space). I have two issues I can't resolve, and for the life
of me can't figure out why. I'm using Ruby on Rails and I have
included the default javascrip which includes Prototype. I'm testing
in FireFox.
Here's the code with comments for reference, exact problems detailed
below:
script type=text/javascript
$(document).ready(function(){
$(.bio_button).click(function(event) { //when a user clicks on
div with class bio_button, do:
$(.bio).hide(); //hide all divs that
have a
class of bio
var element = Event.element(event); //get the div id
for the
element clicked
var id = element.id.substring(0,element.id.length-1);
//remove the
last letter of that div id, which
//
corresponds to the div which contains the
//
biography text
//alert(id); //used to make sure the
substring was
working, it is.
$(id).show(); //this doesn't work for some reason
HELP,
please :(
});});
/script
...
div class=bio_button id=timBclick to show Tims bio/div
div class=bio_button id=bethBclick to show Beths bio/div
...
div class=bio id=tim style=display:none;tim's awesome
biography/div
div class=bio id=beth style=display:none;beth's awesome
biography/div
PROBLEM(s) (using a click on tim as example):
1) The above does indeed hide all bio's, and will output an alert of
tim if I click on tim. However, it won't change the display style
to show.
2) In the javascript, if I replace $(id).show(); with $(tim).show();
it still doesn't workunless I use tim as one of the class
definitions in the html instead of a div id. If I specify tim as a
class, and use tim explicitly in the javascript, it works perfectly.
Sorry if this is the wrong forum, i'm losing my mind over what seems
should be very simple. Thanks to anyone that can help.
-Nelson
--~--~-~--~~~---~--~~
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,
[Proto-Scripty] Re: execution order in IE
*IN*teresting. Thanks for posting back, JoJo.
-- T.J.
On Sep 6, 6:14 am, JoJo tokyot...@gmail.com wrote:
I wanted everyone to know that I was stupid to be testing this in
IE8's IE7 backwards compatability mode. This error never occurs in
the real IE7. It's just a warning for everyone, never use IE8's
backwards mode when web designing.
On Sep 4, 2:22 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi JoJo,
Excellent example of a pared-down test case, thanks for that.
I don't have time right now to try this, but just quickly: You say
that the code in the load event never runs, are you sure you haven't
interrupted it by clicking the button really early and causing the
error? The window.load event happens quite late in the overall load
process; you might consider using
document.observe(dom:loaded, function() {
// ...
});
instead, it happens earlier and might reduce the window of time in
which a user can cause the problem...
(This is speculation at present.)
--
T.J. Crowder
tj / crowder software / comwww.crowdersoftware.com
On Sep 4, 9:22 pm, JoJo tokyot...@gmail.com wrote:
So I did quite a lot of tests with the above script. Whenever the
error occurs, the Event.observe was never run. You can stick other
code in that event, and it will not run. Now that I'm testing on
another computer, it seems to only fail 10% of the time on IE8 in IE7
mode.
On Sep 4, 10:01 am, JoJo tokyot...@gmail.com wrote:
Hi TJ,
This is the simple script which will say MYAPP.class1 is null or not
an object - Line 33 about 25% of the time on IE8 in IE7-compatability-
mode. You must hit refresh a few times and then click the button to
see the error. Maybe we need to find out what makes IE7 and 6's JS
engine different from IE8's.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html
head
script src=scripts/lib/prototype.js type=text/
javascript/script
script src=scripts/src/scriptaculous.js type=text/
javascript/script
script type=text/javascript
//![CDATA[
var MYAPP = {
Class1: null,
class1: null
}
MYAPP.Class1 = Class.create({
initialize: function() {
this.myValue = 'my value';
},
speak: function() {
alert(this.myValue);
}
});
Event.observe(window, 'load', function() {
MYAPP.class1 = new MYAPP.Class1();
});
//]]
/script
/head
body
button onclick=MYAPP.class1.speak() /make class1 speak/
button
/body
/html
+
On Sep 4, 12:51 am, T.J. Crowder t...@crowdersoftware.com wrote:
Hi JoJo,
I suspect there's some small (but important) piece of information or
understanding that you don't have, being a beginner, but we're
shooting a bit in the dark trying to identify it.
Can you create an example of the problem using one very simple HTML
file and (say) two script files? (Three if you need it to make the
problem occur.) Paste them in Pastie[1] and drop us a link here, and
we'll try to figure it out.
FWIW, I've never had a problem with files getting loaded and executed
out of order. I find it very, very hard to believe that that's
actually happening (Alex, if you have a reference for your earlier
comment, please do share it), the number of sites that would break is
legion.
If that really _is_ happening, another way to solve it is to combine
all of your JavaScript files into one file as part of a build
process. There are good reasons for doing that anyway; more here.[2]
[1]http://pastie.org
[2]http://proto-scripty.wikidot.com/prototype:tip-minimizing-download-times
HTH,
--
T.J. Crowder
tj / crowder software / comwww.crowdersoftware.com
On Sep 4, 7:17 am, JoJo tokyot...@gmail.com wrote:
My classes are just class definitions.
MYAPP.Class1= Class.create({...});
MYAPP.Class2= Class.create({...});
I don't create the objects until I get to main.js, which creates
them
after the window has loaded. Why is IE7 not giving an error when I
access MYAPP in Class1.js and Class2.js, but is giving an error
when I
access it in main.js? This native and function object talk just went
straight over my head. I am only a beginner to JS.
On Sep 3, 10:51 pm, RobG robg...@gmail.com wrote:
On Sep 4, 3:43 pm, RobG robg...@gmail.com wrote:
On Sep 4, 4:40 am,
[Proto-Scripty] Re: How can this be done in Drag Drop?
Drag / Drop allows you to set an accept field which is based on a classname HTH Alex Mcauley http://www.thevacancymarket.com - Original Message - From: Script-N00b dean.el...@gmail.com To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com Sent: Saturday, September 05, 2009 7:52 PM Subject: [Proto-Scripty] How can this be done in Drag Drop? I seem to be able to setup a one-to-one relationship but not able to fully able to accomplish what I am looking for. Mostly because I am still a novice to script.aculo.us... I have the following items (Draggables): item_A_1 item_A_2 item_A_3 item_B_1 item_B_2 item_B_3 item_C_1 item_C_2 item_C_3 And the following groups (Drop Targets): group_A group_B group_C I would like to accomplish a few things: 1 - Lock each item to their respective group (IE: only A items in group_A, only B items in group_B, etc..) 2 - Define amount of items in each group (IE: only one item in group_A, three items in group_B, 2 items in group_C) 3 - Submit the form when complete I would like to be able to switch out the items if desired (IE drag item_A_2 into group_A to replace item_A_3 and item_A_3 goes back into the list) is this a pipe dream? Any help or shove in the right direction would be most awesome! 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-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] InPlaceCollectionEditor : loadCollectionURL data format
Hey, I have a small problem with Scriptaculous and InPlaceCollectionEditor : I can use inline collections like this : var collection_1 = [['twelve', '12.00'], ['twenty-four.00', '24.00'], ['thirty-six.00', '36.00']]; var collection_2 = ['Alan', 'Bill', 'Carl', 'Dave', 'Erik', 'Fran', 'Gene']; Both work well ! But, when I want to use a distant collection, with the loadCollectionURL, the doc is not as helpful as I wish... It's only told that the answer has to be JSON... I precise that my URL is OK. I tried many things like this in the called page : ?php echo var collection = ['bh', 'col', 'corb', 'dukes', 'house', 'iow', 'ps']; ? or this : ?php echo [['12.00', '12.00'], ['24.00', '24.00'], ['36.00', '36.00']]; ?... but the only answer on my main page is : Loading options in the option box... I use PHP, and just need to have an example of the syntax and the format to use. Did one of you encountered and solved this problem ? Thanks for any help. Michel L'HUILLIER --~--~-~--~~~---~--~~ 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] Re: InPlaceCollectionEditor : loadCollectionURL data format
Hey,
After a new attempt, whereI changed my PHP called page to :
?php echo '[{key:Al, value:Alan}, {key:Bi,
value:Bill}, {key:Ca, value:Carl}, {key:Da,
value:Dave}, {key:Er, value:Erik}, {key:Fr,
value:Fran}, {key:Ge, value:Gene}]'; ?
I don't get the message Loading options in my select box anymore, but
a list where all elements are called [object Object] ...
All option items look like this : option value=[object
Object][object Object]/option
I progress, but I'm still expecting a bit of help. Thanks a lot.
Regards.
Michel L'HUILLIER
mlh a écrit :
Hey,
I have a small problem with Scriptaculous and InPlaceCollectionEditor :
I can use inline collections like this :
var collection_1 = [['twelve', '12.00'], ['twenty-four.00', '24.00'],
['thirty-six.00', '36.00']];
var collection_2 = ['Alan', 'Bill', 'Carl', 'Dave', 'Erik', 'Fran',
'Gene'];
Both work well !
But, when I want to use a distant collection, with the
loadCollectionURL, the doc is not as helpful as I wish...
It's only told that the answer has to be JSON...
I precise that my URL is OK.
I tried many things like this in the called page :
?php echo var collection = ['bh', 'col', 'corb', 'dukes', 'house',
'iow', 'ps']; ?
or this :
?php echo [['12.00', '12.00'], ['24.00', '24.00'], ['36.00',
'36.00']]; ?...
but the only answer on my main page is :
Loading options in the option box...
I use PHP, and just need to have an example of the syntax and the format
to use.
Did one of you encountered and solved this problem ?
Thanks for any help.
Michel L'HUILLIER
--~--~-~--~~~---~--~~
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] Re: How can this be done in Drag Drop?
Thanks Alex I was able to define the drop targets using the class, so it seems I have #1 covered (Figured that out yesterday reading the docs), but I am still not sure how to accomplish #2 3. I have been all over the docs on GetHub as well as the random sites google pulled up when searching... Still stuck.. On Sep 6, 5:16 am, Alex McAuley webmas...@thecarmarketplace.com wrote: Drag / Drop allows you to set an accept field which is based on a classname HTH Alex Mcauley http://www.thevacancymarket.com - Original Message - From: Script-N00b dean.el...@gmail.com To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com Sent: Saturday, September 05, 2009 7:52 PM Subject: [Proto-Scripty] How can this be done in Drag Drop? I seem to be able to setup a one-to-one relationship but not able to fully able to accomplish what I am looking for. Mostly because I am still a novice to script.aculo.us... I have the following items (Draggables): item_A_1 item_A_2 item_A_3 item_B_1 item_B_2 item_B_3 item_C_1 item_C_2 item_C_3 And the following groups (Drop Targets): group_A group_B group_C I would like to accomplish a few things: 1 - Lock each item to their respective group (IE: only A items in group_A, only B items in group_B, etc..) 2 - Define amount of items in each group (IE: only one item in group_A, three items in group_B, 2 items in group_C) 3 - Submit the form when complete I would like to be able to switch out the items if desired (IE drag item_A_2 into group_A to replace item_A_3 and item_A_3 goes back into the list) is this a pipe dream? Any help or shove in the right direction would be most awesome! Thanks!- 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-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] Re: How can this be done in Drag Drop?
I know it's sloppy (Because I am still learning) but here is what I
have so far...
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
html
head
titleUntitled/title
script src=../../lib/prototype.js type=text/javascript/script
script src=../../src/scriptaculous.js type=text/javascript/
script
style type=text/css
#DropDiv_G1
{
height:200px;
width:200px;
background-color:yellow;
}
#DropDiv_G2
{
height:200px;
width:200px;
background-color:yellow;
}
#DropDiv_G3
{
height:200px;
width:200px;
background-color:yellow;
}
.DropHover
{
border:1px dashed green;
}
#Message
{
position:relative;
left:110px;
}
.Handle
{
cursor: move;
}
/style
/head
body
script type=text/javascript language=javascript charset=utf-8
window.onload = function()
{
for (i=1; i=31; i++){
EntMembers = 'DragDiv' + i
if($(EntMembers)){
new Draggable(EntMembers,{revert:true});
}
}
Droppables.add('DropDiv_G1', {
accept: [G1],
onDrop:function(e){DropHandler(e,'DropDiv_G1')}
});
Droppables.add('DropDiv_G2', {
accept: [G2],
onDrop:function(e){DropHandler(e,'DropDiv_G2')}
});
Droppables.add('DropDiv_G3', {
accept: [G3],
onDrop:function(e){DropHandler(e,'DropDiv_G3')}
});
function DropHandler(element,el){
$('itemPost').innerHTML = ('input type=text name='+ element.id
+' value='+ element.id +'');
element.parentNode.removeChild(element);
}
}
/script
p
a href=# onClick=$('G1').show();$('G2').show();$('G3').show(); /
All/anbsp;nbsp;|nbsp;
a href=# onClick=$('G1').show();$('G2').hide();$('G3').hide(); /
Group 1/anbsp;nbsp;|nbsp;
a href=# onClick=$('G1').hide();$('G2').show();$('G3').hide(); /
Group 2/anbsp;nbsp;|nbsp;
a href=# onClick=$('G1').hide();$('G2').hide();$('G3').show(); /
Group 3/anbsp;nbsp;
/p
table
tr
td valign=top
table
tr
td valign=top
div id=G1
div align=center
class=G1 id=DragDiv1div
class=HandleItem 1/div/div
div align=center
class=G1 id=DragDiv2div
class=HandleItem 2/div/div
div align=center
class=G1 id=DragDiv3div
class=HandleItem 3/div/div
/div
div id=G2
div align=center
class=G2 id=DragDiv4div
class=HandleItem 4/div/div
div align=center
class=G2 id=DragDiv5div
class=HandleItem 5/div/div
div align=center
class=G2 id=DragDiv6div
class=HandleItem 6/div/div
/div
div id=G3
div align=center
class=G3 id=DragDiv7div
class=HandleItem 7/div/div
div align=center
class=G3 id=DragDiv8div
class=HandleItem 8/div/div
div align=center
class=G3 id=DragDiv9div
class=HandleItem 9/div/div
/div
/td
/tr
/table
/td
td valign=top
table
tr
tddiv id=DropDiv_G1/div/td
tddiv id=DropDiv_G2/div/td
tddiv id=DropDiv_G3/div/td
/tr
/table
/td
/tr
/table
form action=POST
div id=itemPost/div
/form
/body
/html
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
