[Rails-spinoffs] Re: Borders

[Martinez, Andrew]

Instead of the color white, why not "transparent".

=D

-Andrew Martinez

-----Original Message-----
From: rubyonrails-spinoffs@googlegroups.com [mailto:[EMAIL PROTECTED] 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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---