This is my first real go in Prototype - so the answer is probably simple. But it's illuding me so far.
Basically I'm cobbling a couple things together based on the prototype framework. I've got a form with validation based on Protoform (http:// cssrevolt.com/upload/files/protoformclass/), and I'm trying to fire the validation errors to a Growler, so each message comes up as a 1 growl bubble This is the Growler, and you can see it's normal operation here: http://examples.kevinandre.com/growler1.0.0/index.html I can create new Growler instances from the form validation... too well. For each error message I end up with a whole new instance - so they just end up sitting on top of each other in the z-axis, as opposed to getting a set of message windows in one Growler If I were mocking up on a single page - this get's me the proper result: <script type="text/javascript"> document.observe("dom:loaded", function() { var g = new k.Growler({location:"tl"}); g.growl("Long lasting notice (15s)", {life: 15}); g.growl("Long lasting notice (20s)", {life: 20}); }); </script> This is,in effect, what I'm ending up with: <script type="text/javascript"> document.observe("dom:loaded", function() { var g = new k.Growler({location:"tl"}); g.growl("Long lasting notice (15s)", {life: 15}); }); </script> <script type="text/javascript"> document.observe("dom:loaded", function() { var g = new k.Growler({location:"tl"}); g.growl("Long lasting notice (20s)", {life: 20}); }); </script> I'm just not sure how to fire something from my form validation or php email at something that can create a single Growler to display the various growls I want... or to have the growler script looking for page events as a trigger. Just as an FYI there's the JS that's used in the example - you can see it creates one Growler and then the growl messages are triggered from a click. document.observe("dom:loaded", function() { dp.SyntaxHighlighter.HighlightAll('code'); var g = new k.Growler({location:"tr"}); $("e1").observe("click", function(e){ g.growl("Simple notice"); }); $("e2").observe("click", function(e){ g.growl("...with header", {header: "Growler Notice"}); }); $("e3").observe("click", function(e){ g.growl("Long lasting notice (20s)", {life: 20}); }); $("e4").observe("click", function(e){ g.growl("Sticky notice", {sticky: true}); }); $("e5a").observe("click", function(e){ g.growl("Candy is good", {header: "Candybar Theme", className: "candybar", sticky: true}); }); $("e5b").observe("click", function(e){ g.growl("Visit <a href='http://kproto.googlecode.com' target='_blank'>kProto</a> for more Prototype classes.", {className: "plain"}); }); $("e5c").observe("click", function(e){ g.growl("The funnest iPod ever. Millions of songs. Thousands of movies. Hundreds of games. <a target='_blank' href='http:// www.apple.com/ipodtouch/whatsnew.html'>Learn more</a>", {header: "iPod Touch", className: "macosx", sticky: true}); }); $("e5d").observe("click", function(e){ g.growl("This is a test to see how well the theme handles text that is long. It should stretch height-wise.", {header: "At Work Theme", className: "atwork"}); }); $("e6").observe("click", function(e){ g.info("Something good happended", {life: 10}); }); $("e7").observe("click", function(e){ g.warn("Take heed", {life: 10}); }); $("e8").observe("click", function(e){ g.error("Something bad happened", {life: 10}); }); $("e9").observe("click", function(e){ g.growl("Notice w/Events", {created: function(){ $("noticeevents").innerHTML = "<div>Notice created...</ div>"; }, destroyed: function(){ $("noticeevents").innerHTML = "<div>...Notice destroyed</ div>"; }}); }); }); Hope someone can help, Thanks - Ian -- 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
