Hi fellas,
would someone care to help me out with the following situation:
I have two functions:
highlightHint() When onmouseover a hint box is displayed next to an input form
element
and when onmouseout the hint box disappears.
and highlightPanel()
if you click inside an input element the background color of the
panel changes from white to yellow and the hint box is displayed and
shouldnt disappear onmouseout. and at the same time highlightHint
should work normally for the other input elements.
I tried a number of things but i cant get what i want. The below code
displays the hint box onmouseover and it disappears onmouseout. if i
click inside an input the panel is highlighted. What i want is for
the hint box to appear and stay even onmouseout but for the other
input elements onmouseout and onmouseover should work as normal. can
someone help out with the last bit please.
thanks in advance.
kace
here is the code for highlightPanel :
function highlightPanel() {
addPanelFocus(document.getElementsByTagName("input"));
addPanelFocus(document.getElementsByTagName("textarea"));
}
function addPanelFocus(elements) {
for (i=0; i < elements.length; i++) {
var elem = elements[i];
if (elements[i].type != "button" && elements[i].type
!"submit" &&
elements[i].type != "reset" && elements[i].type
!"checkbox" && elements[i].type != "radio") {
if (!elements[i].getAttribute(''readonly'')
&& !
elements[i].getAttribute(''disabled'')) {
elements[i].onblur=function()
{this.parentNode.className='''';this.parentNode.getElementsByTagName("span")
[1].style.display = "none";};
elements[i].onclick=function()
{this.parentNode.className=''focused'';this.parentNode.getElementsByTagName("span")
[1].style.display = "inline";};
elements[i].onfocus=function()
{this.parentNode.className=''focused'';this.parentNode.getElementsByTagName("span")
[1].style.display = "inline";};
}
}
}
}
and for highlightHint :
function highlightHint() {
addFocusHint(document.getElementsByTagName("li"));
}
function addFocusHint(elements) {
var elem = document.getElementsByClassName("hint");
var elems = document.getElementsByTagName("input");
for (i=0; i < elements.length; i++) {
if (elements[i].getElementsByTagName("span")[2] ) {
elements[i].onmouseover=function()
{this.getElementsByTagName("span")[1].style.display =
"inline"};
elements[i].onmouseout=function()
{this.getElementsByTagName("span")[1].style.display =
"none";}
}
}
}
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Using Event.observe and keeping some really simple state (which field is currently focused?) you can do this in a few lines in Prototype. Look at an example @ http://pastie.caboo.se/92140, with a test html provided (worked on firefox, should work on most other things) Regards, -Nicolas On 8/29/07, kace <z.nuamaan-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> > Hi fellas, > > would someone care to help me out with the following situation: > > I have two functions: > > highlightHint() > When onmouseover a hint box is displayed next to an input form element > and when onmouseout the hint box disappears. > > and highlightPanel() > > if you click inside an input element the background color of the > panel changes from white to yellow and the hint box is displayed and > shouldnt disappear onmouseout. and at the same time highlightHint > should work normally for the other input elements. > > I tried a number of things but i cant get what i want. The below code > displays the hint box onmouseover and it disappears onmouseout. if i > click inside an input the panel is highlighted. What i want is for > the hint box to appear and stay even onmouseout but for the other > input elements onmouseout and onmouseover should work as normal. can > someone help out with the last bit please. > > thanks in advance. > > kace > > > > here is the code for highlightPanel : > > function highlightPanel() { > addPanelFocus(document.getElementsByTagName("input")); > addPanelFocus(document.getElementsByTagName("textarea")); > } > > function addPanelFocus(elements) { > > for (i=0; i < elements.length; i++) { > var elem = elements[i]; > if (elements[i].type != "button" && elements[i].type !> "submit" && > elements[i].type != "reset" && elements[i].type !> "checkbox" && elements[i].type != "radio") { > if (!elements[i].getAttribute(''readonly'') && ! > elements[i].getAttribute(''disabled'')) { > > elements[i].onblur=function() > {this.parentNode.className='''';this.parentNode.getElementsByTagName("span") > [1].style.display = "none";}; > elements[i].onclick=function() > {this.parentNode.className=''focused'';this.parentNode.getElementsByTagName("span") > [1].style.display = "inline";}; > elements[i].onfocus=function() > {this.parentNode.className=''focused'';this.parentNode.getElementsByTagName("span") > [1].style.display = "inline";}; > } > } > } > } > > and for highlightHint : > > function highlightHint() { > > addFocusHint(document.getElementsByTagName("li")); > > } > > function addFocusHint(elements) { > var elem = document.getElementsByClassName("hint"); > var elems = document.getElementsByTagName("input"); > for (i=0; i < elements.length; i++) { > if (elements[i].getElementsByTagName("span")[2] ) { > elements[i].onmouseover=function() > {this.getElementsByTagName("span")[1].style.display = "inline"}; > elements[i].onmouseout=function() > {this.getElementsByTagName("span")[1].style.display = "none";} > } > } > } > > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Thanks Nicolas !! much appreciated... ...kace On Aug 29, 8:17 pm, "Nicolás Sanguinetti" <godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Using Event.observe and keeping some really simple state (which field > is currently focused?) you can do this in a few lines in Prototype. > Look at an example @http://pastie.caboo.se/92140, with a test html > provided (worked on firefox, should work on most other things) > > Regards, > -Nicolas > > On 8/29/07, kace <z.nuam...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > > > Hi fellas, > > > would someone care to help me out with the following situation: > > > I have two functions: > > > highlightHint() > > When onmouseover a hint box is displayed next to an input form element > > and when onmouseout the hint box disappears. > > > and highlightPanel() > > > if you click inside an input element the background color of the > > panel changes from white to yellow and the hint box is displayed and > > shouldnt disappear onmouseout. and at the same time highlightHint > > should work normally for the other input elements. > > > I tried a number of things but i cant get what i want. The below code > > displays the hint box onmouseover and it disappears onmouseout. if i > > click inside an input the panel is highlighted. What i want is for > > the hint box to appear and stay even onmouseout but for the other > > input elements onmouseout and onmouseover should work as normal. can > > someone help out with the last bit please. > > > thanks in advance. > > > kace > > > here is the code for highlightPanel : > > > function highlightPanel() { > > addPanelFocus(document.getElementsByTagName("input")); > > addPanelFocus(document.getElementsByTagName("textarea")); > > } > > > function addPanelFocus(elements) { > > > for (i=0; i < elements.length; i++) { > > var elem = elements[i]; > > if (elements[i].type != "button" && elements[i].type !> > "submit" && > > elements[i].type != "reset" && elements[i].type !> > "checkbox" && elements[i].type != "radio") { > > if (!elements[i].getAttribute(''readonly'') && ! > > elements[i].getAttribute(''disabled'')) { > > > elements[i].onblur=function() > > {this.parentNode.className='''';this.parentNode.getElementsByTagName("span") > > [1].style.display = "none";}; > > elements[i].onclick=function() > > {this.parentNode.className=''focused'';this.parentNode.getElementsByTagName("span") > > [1].style.display = "inline";}; > > elements[i].onfocus=function() > > {this.parentNode.className=''focused'';this.parentNode.getElementsByTagName("span") > > [1].style.display = "inline";}; > > } > > } > > } > > } > > > and for highlightHint : > > > function highlightHint() { > > > addFocusHint(document.getElementsByTagName("li")); > > > } > > > function addFocusHint(elements) { > > var elem = document.getElementsByClassName("hint"); > > var elems = document.getElementsByTagName("input"); > > for (i=0; i < elements.length; i++) { > > if (elements[i].getElementsByTagName("span")[2] ) { > > elements[i].onmouseover=function() > > {this.getElementsByTagName("span")[1].style.display = "inline"}; > > elements[i].onmouseout=function() > > {this.getElementsByTagName("span")[1].style.display = "none";} > > } > > } > > }--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---