Anyone know of, or have a custom effect for showing/hiding borders on a DIV? I cannot see one in the Effects lib? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Maybe use the Prototype AddClass RemoveClass stuff? Walter On Jan 8, 2007, at 11:11 AM, The Manhatten Project wrote:> > Anyone know of, or have a custom effect for showing/hiding borders on a > DIV? I cannot see one in the Effects lib? > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
You can use Effect.Morph for that On Jan 8, 2007, at 5:21 PM, Walter Lee Davis wrote:> > Maybe use the Prototype AddClass RemoveClass stuff? > > Walter > > On Jan 8, 2007, at 11:11 AM, The Manhatten Project wrote: > >> >> Anyone know of, or have a custom effect for showing/hiding borders >> on a >> DIV? I cannot see one in the Effects lib? >> >> >> > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hmmm, my idea is that I could potentially create a new effect (if one does not already exist) which when onMouseOver creates a border around a span/div. I could like that onMouseOut it removes said border. I have done it "normally" by creating normal functions for the two mouse events but I was hoping/wondering is the library could provide a cleaner more efficient way... ;-) any help mucho appreciated especially on the creation of the effect if I have to go down that route as this is the beginning of my long journey into scriptacuville... --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The Manhatten Project wrote:> > Hmmm, my idea is that I could potentially create a new effect (if one > does not already exist) which when onMouseOver creates a border around > a span/div. I could like that onMouseOut it removes said border. I > have done it "normally" by creating normal functions for the two mouse > events but I was hoping/wondering is the library could provide a > cleaner more efficient way... ;-)This type of effect can be achieved quickly with Prototype rc2 using css classes or css styles, but scriptaculous 1.7 provides an even more exciting effect: Effect.Morph. Here is a short function with a classic css-class approach: <html><head> <script language="javascript" type="text/javascript" src="/js/libs/prototype/prototype.js"></script> <style media="screen" type="text/css"> #test { padding: 2px } .borderOn { padding: 0px !important; border: 2px solid #f00 } </style> </head> <body> <div id="test">Mouseover Me</div> <script language="javascript" type="text/javascript"> function addCssEffect(element, cssClass) { $(element).observe(''mouseover'',function(evt) { Event.element(evt).addClassName(cssClass); }.bindAsEventListener()) .observe(''mouseout'',function(evt) { Event.element(evt).removeClassName(cssClass); }.bindAsEventListener()); } addCssEffect(''test'',''borderOn''); </script> </body></html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The Manhatten Project a écrit :> > Hmmm, my idea is that I could potentially create a new effect (if one > does not already exist) which when onMouseOver creates a border around > a span/div. I could like that onMouseOut it removes said border. IIf you don''t need IE <=6 support (OK, this is unlikely if your page is public-facing), use 100% CSS for this (the :hover pseudo-class serves this very purpose). -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Ken/Christophe,
I actually did this in the end ..
Event.observe(''mydiv'', ''mouseover'',
function(e){
Element.setStyle(''mydiv'', { border: ''1px solid
red;'' } ); });
Event.observe(''mydiv'', ''mouseout'',
function(e){
Element.setStyle(''mydiv'', { border: ''0px solid
red;'' } ); });
I am sure it can be cleaned up ;) but it does work....
Christophe, I am a long time watcher of this list and I must say I am
amazed at the clarity and speed at which you post your answers - you
are a credit to any list. Thank you for this and all posts which help
me understand Prototype/SAU better !!
I will look into using the hover class directly as well.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
The Manhatten Project wrote:> Hi Ken/Christophe, > > I actually did this in the end .. > > Event.observe(''mydiv'', ''mouseover'', function(e){ > Element.setStyle(''mydiv'', { border: ''1px solid red;'' } ); }); > > Event.observe(''mydiv'', ''mouseout'', function(e){ > Element.setStyle(''mydiv'', { border: ''0px solid red;'' } ); }); > > I am sure it can be cleaned up ;) but it does work.... > > Christophe, I am a long time watcher of this list and I must say I am > amazed at the clarity and speed at which you post your answers - you > are a credit to any list. Thank you for this and all posts which help > me understand Prototype/SAU better !! > > I will look into using the hover class directly as well.In fact, do you have an example of using "pure" CSS? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The Manhatten Project wrote:> The Manhatten Project wrote: > > > Hi Ken/Christophe, > > > > I actually did this in the end .. > > > > Event.observe(''mydiv'', ''mouseover'', function(e){ > > Element.setStyle(''mydiv'', { border: ''1px solid red;'' } ); }); > > > > Event.observe(''mydiv'', ''mouseout'', function(e){ > > Element.setStyle(''mydiv'', { border: ''0px solid red;'' } ); }); > > > > I am sure it can be cleaned up ;) but it does work.... > > > > Christophe, I am a long time watcher of this list and I must say I am > > amazed at the clarity and speed at which you post your answers - you > > are a credit to any list. Thank you for this and all posts which help > > me understand Prototype/SAU better !! > > > > I will look into using the hover class directly as well. > > In fact, do you have an example of using "pure" CSS?In fact again....forget it I realised I need IE6 support ;-p so pure CSS will not work..! thanks again...i am off to zzzz! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The Manhatten Project wrote:> Hi Ken/Christophe, > > I actually did this in the end .. > > Event.observe(''mydiv'', ''mouseover'', function(e){ > Element.setStyle(''mydiv'', { border: ''1px solid red;'' } ); }); > > Event.observe(''mydiv'', ''mouseout'', function(e){ > Element.setStyle(''mydiv'', { border: ''0px solid red;'' } ); }); > > I am sure it can be cleaned up ;) but it does work....You are much better off to change the class rather than the border directly, and to just change the colour rather than add/remove it - otherwise you''ll see a ''jump'' as it''s added and removed, e.g. <style type="text/css"> .whiteBorder {border: 1px solid white;} .redBorder {border: 1px solid red;} </style> Give your div a class of ''whiteBorder'' (or some other colour, whatever suits), then use mouseover/out events to add/remove the redBorder class: function addBorderEffect(){ var i=0, el; while ((el = arguments[i++])){ $(el).onmouseover = function (){ Element.classNames(this).add(''redBorder''); }; $(el).onmouseout = function (){ Element.classNames(this).remove(''redBorder''); }; } } window.onload = function(){ addBorderEffect(''id0'',''id1'');}; Give the call as many IDs as you like. If you want to do it completely without Prototype then try: function addClass(el, cssClass){ var re = new RegExp(''(^|\\s)'' + cssClass + ''(\\s|$)''); if (!re.test(el.className)) el.className += '' '' + cssClass; } function remClass(el, cssClass){ var re = new RegExp(''(^|\\s)'' + cssClass + ''(\\s|$)'',''g''); el.className = el.className.replace(re,'' '') .replace(/\s+/g,'' '') .replace(/(^\s|\s$)/g,''''); } function addBorderEffect(){ var i=0, el; while (( el = document.getElementById(arguments[i++]) )){ el.onmouseover = function (){addClass(this, ''redBorder'');}; el.onmouseout = function (){remClass(this, ''redBorder'');}; } } window.onload = function(){ addBorderEffect(''d0'',''d1'');}; -- Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Instead of the color white, why not "transparent". =D -Andrew Martinez -----Original Message----- From: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org [mailto:rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org]On Behalf Of RobG Sent: Monday, January 08, 2007 11:53 PM To: Ruby on Rails: Spinoffs Subject: [Rails-spinoffs] Re: Borders The Manhatten Project wrote:> Hi Ken/Christophe, > > I actually did this in the end .. > > Event.observe(''mydiv'', ''mouseover'', function(e){ > Element.setStyle(''mydiv'', { border: ''1px solid red;'' } ); }); > > Event.observe(''mydiv'', ''mouseout'', function(e){ > Element.setStyle(''mydiv'', { border: ''0px solid red;'' } ); }); > > I am sure it can be cleaned up ;) but it does work....You are much better off to change the class rather than the border directly, and to just change the colour rather than add/remove it - otherwise you''ll see a ''jump'' as it''s added and removed, e.g. <style type="text/css"> .whiteBorder {border: 1px solid white;} .redBorder {border: 1px solid red;} </style> Give your div a class of ''whiteBorder'' (or some other colour, whatever suits), then use mouseover/out events to add/remove the redBorder class: function addBorderEffect(){ var i=0, el; while ((el = arguments[i++])){ $(el).onmouseover = function (){ Element.classNames(this).add(''redBorder''); }; $(el).onmouseout = function (){ Element.classNames(this).remove(''redBorder''); }; } } window.onload = function(){ addBorderEffect(''id0'',''id1'');}; Give the call as many IDs as you like. If you want to do it completely without Prototype then try: function addClass(el, cssClass){ var re = new RegExp(''(^|\\s)'' + cssClass + ''(\\s|$)''); if (!re.test(el.className)) el.className += '' '' + cssClass; } function remClass(el, cssClass){ var re = new RegExp(''(^|\\s)'' + cssClass + ''(\\s|$)'',''g''); el.className = el.className.replace(re,'' '') .replace(/\s+/g,'' '') .replace(/(^\s|\s$)/g,''''); } function addBorderEffect(){ var i=0, el; while (( el = document.getElementById(arguments[i++]) )){ el.onmouseover = function (){addClass(this, ''redBorder'');}; el.onmouseout = function (){remClass(this, ''redBorder'');}; } } window.onload = function(){ addBorderEffect(''d0'',''d1'');}; -- Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---