Rails spinoffs - Sep 2006 - Page moving when selecting autocomplete option with keyboard!

Hi all, I am posting my second time in as many days (according to my
n00bness).

I have a scriptaculous autocomplete that works well there is another
problem, though.

In Firefox: When I use the ''down arrow'' to cycle through the
choices,
it works fine. But when I try to go up, the page scrolls down so that
the autocomplete box is at the top of the page! (trying to fit the
whole div into the page?)

In IE: When I go down, the screen scrolls right so that the
autocomplete suggestions are all the way at the LEFT of the screen,
then when  go up, the screen scrolls DOWN and LEFT!

I thought it was working before, but now it is not.

Anyone else having these problems? Should I post some code in this
thread?

Thanks,

--mobrien118


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Hey,

First, try limiting as much as possible your style info in the CSS for
the completions DIV.  s.a.us will auto-adjust most style info for you.
You would only need to style the *contents* of this DIV.  Try with no
style whatsoever (except the inline style with "display: none")!

It is likely your weighty custom CSS that goes wrong.

-- 
Christophe Porteneuve aka TDD
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
-~----------~----~----~----~------~----~------~--~---

Okay, removed all style information so that it is just the browser
default styles (just shows up like an un-styled <ul>) and it is still
happening! Whenever the ''up arrow'' key is pressed, the page
moves!

Has anyone else had this experience?


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

I''ve experienced it as well but haven''t looked into it. So, I
can''t
really help you other than saying "You''re not going crazy",
which can be
pretty helpful sometimes...

mobrien118 wrote:
> Okay, removed all style information so that it is just the browser
> default styles (just shows up like an un-styled <ul>) and it is still
> happening! Whenever the ''up arrow'' key is pressed, the
page moves!
>
> Has anyone else had this experience?
>
>
> >
>
>   

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

I have the same problem. I''m using two auto completion textfields and
the page moves up when I use the arrow keys while selecting..

Let me know if you have the solution..


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Thanks for posting, I am going to tediously disect the interface until
I find a workaround. I figure it must be caused by a quirk in the
layout of the page because a very few people are experiencing the
problem. My layout has an autosuggest box immediately followed (below)
by 2 other text inputs with no gap between them. The
''suggestions'' box
is directly below the first box but, obviously, starts out being
hidden. What does your interface look like?

Here is my interface. It is just an image since the tool is on a
private network. (The autosuggest is the "DCO Number" one):
http://mobrien118.sytes.net/MyInterface.jpg

I won''t have time to tweak it until the end of next week, but
I''ll post
any info/potential solution when I get there.

Thanks,

--mobrien

On Oct 6, 7:14 am, "joost"
<joosthietbr...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I have the same problem. I''m using two auto completion textfields
and
> the page moves up when I use the arrow keys while selecting..
> 
> Let me know if you have the solution..

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

I have this problem as well.
If it''s any help, I''ve posted a screenshot of my autocompleter
and
pasted the code below.

http://colin.mollenhour.com/autocomplete.jpg

Thanks,
Colin

HTML, Javascript  and CSS:
----------------
<form action="">
<h3>Search</h3>
<select name="field">
    <option value="name">Person</option>
    <option value="company_name">Company</option>
    <option value="person_notes">Notes</option>
</select>
<select name="position">
    <option value="starts_with">starts with</option>
    <option value="contains">contains</option>
</select>
<input type="text" id="searchbox"
class="autocomplete" name="searchstring"/>
</form>
<span id="indicator" style="display: none"><img 
src="/images/indicator.gif" alt="Working..."
/></span>
<div id="autocomplete_choices"
class="autocomplete"></div>
<div id="contact_details"
style="display:none;"></div>
<script type="text/javascript">
    new 
Ajax.Autocompleter(''searchbox'',''autocomplete_choices'',''people.php'',
{
        minChars: 2,
        frequency: 0.3,
        indicator: ''indicator'',
        callback: function(element, entry){
            var form = element.form;
            return Form.serialize(form);
        },
        afterUpdateElement: function(field,element){
            Element.show(''indicator'');
            new
Ajax.Updater(''contact_details'',''people.php'',{
                parameters:''id=''+element.id,
                onComplete: function(xhr,obj){
                    var container = $(''contact_details'');
                    Element.hide(''indicator'');
                    if(!Element.visible(container))
                        new Effect.SlideDown(container,{duration: 0.3});
                }
            });
        }
    });
    $(''searchbox'').focus();
</script>
<style type="text/css">
input.autocomplete {
    width: 200px;
}
div.autocomplete {
    background-color:white;
    border:1px solid #888;
}
ul.contacts    {
    list-style-type: none;
    margin:0px;
    padding:0px;
    cursor:pointer;
}
ul.contacts li.selected { background-color: #ffb; }
li.contact {
    list-style-type: none;
    display:block;
    margin:0;
    padding:2px;
}
li.contact div.image {
    float:left;
    width:32px;
    height:32px;
    margin-right:8px;
}
li.contact div.field {
    font-weight:bold;
    font-size:12px;
    line-height:1.2em;
}
li.contact div.extra {
    font-size:10px;
    color:#888;
}
</style>
------------------
response example:
--------------

<ul class="contacts">
	<li class="contact" id="2">
		<div class="field">Colin Mollenhour</div>
		<div class="extra">Mollenhour Homes</div>
	</li>
	<li class="contact" id="340">
		<div class="field">Collett, Dave </div>
		<div class="extra">Collett Excavation, Inc.<br/>Dozer
Bobcat 2-3 Komatsu, CAT...</div>
	</li>
	<li class="contact" id="442">
		<div class="field">Mac Cole</div>
		<div class="extra">84 Lumber<br/>Truss Design
Contact</div>
	</li>
	<li class="contact" id="390">
		<div class="field">Mollenhour, Colin</div>
		<div class="extra">Customers<br/>Picky as hell
customer</div>
	</li>
	<li class="contact" id="167">
		<div class="field">Seitz, Colette </div>
		<div class="extra">Customers<br/>Customer for SP 4
>From Chicago</div>
	</li>
	<li class="contact" id="208">
		<div class="field">Troutt, Nicole </div>
		<div class="extra">First Priority Title</div>
	</li>
</ul>



--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Your link doesn''t seem to be working. Got another?


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Actually, Third try was a charm :-)

On 10/6/06, Marty O''Brien
<mobrien118-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> Your link doesn''t seem to be working. Got another?
>

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

I almost did it! First thing: What doctype are you using? I am using
XHTML Strict. Maybe that is causing some problems. Let me know.

At first I tried removing everything from the page except for the
doctype declaration and the COLDFUSION debugging information. The thing
still didn''t work.

Note: I said ColdFusion! I assume you are using ColdFusion, too,
because when I turned off the debugging information (using <cfsetting
ShowDebugOutput="No">) The problem stopped...almost.

This solved the problem in Firefox. I can go up and down the list
without a problem. IE is a different story. In IE when I go up in the
list it still scrolls down. I am willing to settle for this. It is a
vast improvement.

hypothesis: If you look at the code for the CF Debugging stuff, it
begins with MANY MANY HTML end tags (i.e.
</tr></div></strong>...). I
think that these mess up the browser''s ''processing''.
I I looked really
closely when the screen would ''jump'' i would see that it
actually, for
a split second, went WAY down the page, then returned so that the form
field is visible again (it is at the top).

I''m not sure why IE is still acting up, but if anyone figures it out,
please let me know. Until then, I am going to try to get my HTML to
validate and see if that helps.

Later,

--mobrien


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Okay, It''s not really fixed. Just a little better. Anyone else having
any luck? 

This is really, really frustrating!!!!!!!!!!


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

The problem can be ''fixed'' by commenting a few lines in the
controls.js file:

  markPrevious: function() {
    if(this.index > 0) this.index--
      else this.index = this.entryCount-1;
    //this.getEntry(this.index).scrollIntoView(false); //THIS LINE WAS COMMENTED
  },

  markNext: function() {
    if(this.index < this.entryCount-1) this.index++
      else this.index = 0;
    //this.getEntry(this.index).scrollIntoView(false); //THIS LINE WAS COMMENTED
  },

the scrollIntoView ''feature'' was added to the autocompleter
sometime
after v1.5.1.
Although, it seems to cause more problems in most cases than it''s
worth.
for example, I took Colin Mollenhour''s code and modified it a little
to show that the above ''fix'' solves the scrolling problem but
breaks
functionality in another case, where the autocomplete_choices box does
not scroll accordingly.
here is the example:
http://www.brianpeiris.com/RubySpinoffTemp/
http://www.brianpeiris.com/RubySpinoffTemp/javascripts/controls.js

On 10/18/06, mobrien118
<mobrien118-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> Okay, It''s not really fixed. Just a little better. Anyone else
having
> any luck?
>
> This is really, really frustrating!!!!!!!!!!
>
>
> >
>

-- 
===========================Brian Peiris
Waterloo, Ontario, Canada
brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@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
-~----------~----~----~----~------~----~------~--~---

Thanks Brian! Commenting out those 2 lines worked like a champ!

I didn''t really see the problem with your example site (at least in
firefox) but I appreciate your help with this. It is BY FAR an
acceptable fix for my problem.

It would be nice if the page could move to the items when it actually
should, but I guess the code just needs a little work. If I had more
time/experience I would contribute to that effort. It is a good feature
but obviously still needs a little tweaking.

Thanks again!

--mobrien


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Thank you!  That works for me as well!

Now, does anyone know if this will be fixed in a future release?

mobrien118 wrote:
> Thanks Brian! Commenting out those 2 lines worked like a champ!
>
> I didn''t really see the problem with your example site (at least
in
> firefox) but I appreciate your help with this. It is BY FAR an
> acceptable fix for my problem.
>
> It would be nice if the page could move to the items when it actually
> should, but I guess the code just needs a little work. If I had more
> time/experience I would contribute to that effort. It is a good feature
> but obviously still needs a little tweaking.
> 
> Thanks again!
> 
> --mobrien

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---