Ajax.Autocompleter does not work properly in IE 6
76 views
Skip to first unread message
barkokhba
Oct 2, 2008, 12:04:49 PM10/2/08
to Prototype & script.aculo.us
Everything works fine in Firefox 3.
When I click on the scrollbar of the Autocompleter list, the list is
closed. The mouse scoll wheel works though. The cursor arrow down and
up work not as expected in IE 6, i.e. they don't just scroll one entry
but 2 or 3. Any ideas how I could fix this?
Thanks for your interest in my problem.
When I click on the scrollbar of the Autocompleter list, the list is
closed. The mouse scoll wheel works though. The cursor arrow down and
up work not as expected in IE 6, i.e. they don't just scroll one entry
but 2 or 3. Any ideas how I could fix this?
Thanks for your interest in my problem.
barkokhba
Oct 7, 2008, 8:11:15 AM10/7/08
to Prototype & script.aculo.us
Hi,
I have isolated my problem. I am using prototype.js 1.6.0.1,
scriptaculous.js v1.8.1, controls.js v1.8.1.
In IE 6, if you click the scrollbar in the following autocomplete
popup, it vanishes and does not allow you to scroll through the list
items.
Everything works as it should in FF 3.
Any help and/or pointers are appreciated :-)
---begin testpage.html---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<html>
<head>
<link rel="stylesheet" href="css/autocomplete.css" type="text/
css" />
</head>
<body>
<input id="gpkauto" />
<div class="autocomplete" id="gpkchoices" style="visibility:
none"></div>
<script type="text/javascript">
//<![CDATA[
new Ajax.Autocompleter(
'gpkauto',
'gpkchoices',
'content.html',
{});
//]]>
</script>
</body>
</html>
---end testpage.html---
--- begin content.html ---
<ul>
<li>otto1</li><li>otto2</li><li>otto3</li><li>otto4</li>
<li>otto1</li><li>otto2</li><li>otto3</li><li>otto4</li>
<li>otto1</li><li>otto2</li><li>otto3</li><li>otto4</li>
</ul>
--- endcontent.html ---
---begin autocomplete.css ---
div.autocomplete {
background: #00ff00;
}
div.autocomplete ul {
list-style-type: none;
border: 1px solid #7f9db9;
margin: 2px 0px;
padding: 0px;
width: 554px;
min-height: 18px;
max-height: 180px;
height: expression(this.scrollHeight > 179 ? "180px" : "auto");
background-color: #ff0000;
overflow: auto;
}
div.autocomplete ul li {
list-style-type: none;
margin: 0px;
padding: 0px 2px;
background: #fff;
}
div.autocomplete ul li.selected {
background-color: #fddfc2;
font-weight: bold;
}
div.autocomplete ul strong.highlight {
background-color: #fdbf82;
margin: 0px;
padding: 0px 2px;
}
---end autocomplete.css ---
I have isolated my problem. I am using prototype.js 1.6.0.1,
scriptaculous.js v1.8.1, controls.js v1.8.1.
In IE 6, if you click the scrollbar in the following autocomplete
popup, it vanishes and does not allow you to scroll through the list
items.
Everything works as it should in FF 3.
Any help and/or pointers are appreciated :-)
---begin testpage.html---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<html>
<head>
<link rel="stylesheet" href="css/autocomplete.css" type="text/
css" />
</head>
<body>
<input id="gpkauto" />
<div class="autocomplete" id="gpkchoices" style="visibility:
none"></div>
<script type="text/javascript">
//<![CDATA[
new Ajax.Autocompleter(
'gpkauto',
'gpkchoices',
'content.html',
{});
//]]>
</script>
</body>
</html>
---end testpage.html---
--- begin content.html ---
<ul>
<li>otto1</li><li>otto2</li><li>otto3</li><li>otto4</li>
<li>otto1</li><li>otto2</li><li>otto3</li><li>otto4</li>
<li>otto1</li><li>otto2</li><li>otto3</li><li>otto4</li>
</ul>
--- endcontent.html ---
---begin autocomplete.css ---
div.autocomplete {
background: #00ff00;
}
div.autocomplete ul {
list-style-type: none;
border: 1px solid #7f9db9;
margin: 2px 0px;
padding: 0px;
width: 554px;
min-height: 18px;
max-height: 180px;
height: expression(this.scrollHeight > 179 ? "180px" : "auto");
background-color: #ff0000;
overflow: auto;
}
div.autocomplete ul li {
list-style-type: none;
margin: 0px;
padding: 0px 2px;
background: #fff;
}
div.autocomplete ul li.selected {
background-color: #fddfc2;
font-weight: bold;
}
div.autocomplete ul strong.highlight {
background-color: #fdbf82;
margin: 0px;
padding: 0px 2px;
}
---end autocomplete.css ---
Walter Lee Davis
Oct 7, 2008, 9:58:30 AM10/7/08
to prototype-s...@googlegroups.com
This might be part of the problem. If you include scriptaculous, it
will include all the rest of the scripty libraries. If you only want
controls, then include prototype and controls. That's the reason why
there are separate libraries -- to cut down on the overall size of
things.
will include all the rest of the scripty libraries. If you only want
controls, then include prototype and controls. That's the reason why
there are separate libraries -- to cut down on the overall size of
things.
Walter
barkokhba
Oct 7, 2008, 12:10:52 PM10/7/08
to Prototype & script.aculo.us
Thanks for taking an interest.
When I delete the scriptaculous.js import, Autocompleter does not work
at all, so I guess it is needed.
The way I understand the libraries are organized is that you always
need scriptaculous.js, but the other libraries, e.g. effects.js,
only when needed.
When I delete the scriptaculous.js import, Autocompleter does not work
at all, so I guess it is needed.
The way I understand the libraries are organized is that you always
need scriptaculous.js, but the other libraries, e.g. effects.js,
only when needed.
Walter Lee Davis
Oct 7, 2008, 12:23:24 PM10/7/08
to prototype-s...@googlegroups.com
No, if you include scriptaculous, you get EVERYTHING. If you just
want one extra library, then you can use it. I can't recall what
Autocompleter needs, but I think it might be Controls, maybe Effects.
If you read the source of scriptaculous.js, you'll see that it's just
a loader, and nothing more. It guarantees that all of the libraries
are loaded in the correct order.
want one extra library, then you can use it. I can't recall what
Autocompleter needs, but I think it might be Controls, maybe Effects.
If you read the source of scriptaculous.js, you'll see that it's just
a loader, and nothing more. It guarantees that all of the libraries
are loaded in the correct order.
Walter
barkokhba
Oct 7, 2008, 1:34:53 PM10/7/08
to Prototype & script.aculo.us
Walter you are right. But even if I just include effects.js and
controls.js
the popup still vanishes when I click the scrollbar. I just tested
this on my Mac at home
and the popup vanishes in Safari and Opera as well when I click the
scrollbar.
Only Firefox on the Mac allows me to scroll the list.
controls.js
the popup still vanishes when I click the scrollbar. I just tested
this on my Mac at home
and the popup vanishes in Safari and Opera as well when I click the
scrollbar.
Only Firefox on the Mac allows me to scroll the list.
Walter Lee Davis
Oct 7, 2008, 2:30:19 PM10/7/08
to prototype-s...@googlegroups.com
This may actually be a CSS issue more than anything else. Try making
a single page example, with nothing but the "approved" CSS from the
Scripty Wiki. It really does work here, no kidding, in all browsers
that matter.
a single page example, with nothing but the "approved" CSS from the
Scripty Wiki. It really does work here, no kidding, in all browsers
that matter.
Walter
1. http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter
barkokhba
Oct 7, 2008, 3:32:55 PM10/7/08
to Prototype & script.aculo.us
I copied the example, but had to change the css by adding a height
and overflow attribute,
otherwise I don't get scrollbars.
This is the new css that I changed (last two attributes):
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
height:100px;
overflow: scroll;
}
When I click on the scrollbar, the popup closes.
Do you have a working example somewhere?
On Oct 7, 8:30 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> This may actually be a CSS issue more than anything else. Try making
> a single page example, with nothing but the "approved" CSS from the
> Scripty Wiki. It really does work here, no kidding, in all browsers
> that matter.
>
> Walter
>
> 1.http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter
and overflow attribute,
otherwise I don't get scrollbars.
This is the new css that I changed (last two attributes):
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
height:100px;
overflow: scroll;
}
When I click on the scrollbar, the popup closes.
Do you have a working example somewhere?
On Oct 7, 8:30 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> This may actually be a CSS issue more than anything else. Try making
> a single page example, with nothing but the "approved" CSS from the
> Scripty Wiki. It really does work here, no kidding, in all browsers
> that matter.
>
> Walter
>
Walter Lee Davis
Oct 7, 2008, 4:04:27 PM10/7/08
to prototype-s...@googlegroups.com
I've never tried having a scrollbar on the results -- that's where
your problem is happening, I'm pretty sure -- clicking on the scroll
area is technically clicking outside of the results list, which
causes it to lose focus and die. My own hack around this problem is
to only return 20 results.
your problem is happening, I'm pretty sure -- clicking on the scroll
area is technically clicking outside of the results list, which
causes it to lose focus and die. My own hack around this problem is
to only return 20 results.
Walter
barkokhba
Oct 7, 2008, 5:24:18 PM10/7/08
to Prototype & script.aculo.us
Walter, thanks for your interest.
I just tested with IE 7 and it shows the same behavior. FF 3 seems to
be the odd one (the only one working).
I think I give up with scriptaculous and try something else. Do you
think JQuery might work? Or is this entirely a CSS problem?
I just tested with IE 7 and it shows the same behavior. FF 3 seems to
be the odd one (the only one working).
I think I give up with scriptaculous and try something else. Do you
think JQuery might work? Or is this entirely a CSS problem?
Walter Lee Davis
Oct 7, 2008, 6:06:31 PM10/7/08
to prototype-s...@googlegroups.com
I think this is something that comes down to how the individual
browsers communicate with JavaScript. It seems as though clicking on
a scrollbar takes focus away from the autocompleter in the browsers
you've tried.
browsers communicate with JavaScript. It seems as though clicking on
a scrollbar takes focus away from the autocompleter in the browsers
you've tried.
I can't say whether this is solved in JQuery or not, if they use a
different event to cancel the suggestion then maybe so.
What does work for sure is not making the suggestion list scrollable.
But that seems to be off the table for you for design reasons.
Walter
Reply all
Reply to author
Forward
0 new messages