13 replies [Last post]
Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

Hey,

I've been trying to look for a solution to this but I can't seem to find the right results on google.

This is an image of what I want to make because I'm not very good at explaining things!
http://img413.imageshack.us/img413/5892/example2sk.png
Basically I've written some javascript to insert database entries to the box, once somebody enters in a character, but I can't seem to style it properly, and I was wondering if some of you guys can help me.

http://beta.team-space.co.uk/service/ Here is the page I want to use it on. If you enter in a "p" in the first field you will see what I am trying to achieve.

Thanks.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi This is a javascript

Hi

This is a javascript problem, so another forum may be more suitable (like web developer). However.

Your input box needs to be a select box.

You would attach js code to it to monitor keystrokes and re-populate the select box

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

I know what you're saying,

I know what you're saying, but the javascript is only showing and hiding the fake drop down box, I could do that with CSS. I'm just trying to find out how you would style the fields and then box so that it overlaps everything.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 2 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

are you trying to make an

are you trying to make an AJAX script like google suggest?

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

Indeed I am, but I want to

Indeed I am, but I want to have it on multiple forms on one page.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 51 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Are you asking how to style

Are you asking how to style the span that drops down below the input? And it's s'posed to look green like in the screenshot? The only thing I can see in your stylesheet is span ul but the thing that drops down doesn't have a ul in it does it?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

I've re-written the form

I've re-written the form now, so that it's easier to use.

I want the div underneath the show field to be the same width as the field with a border, and directly underneath it.

http://beta.team-space.co.uk/service/form.html

I hope this helps.

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

No help even with the new

No help even with the new page?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

and how is this new page

and how is this new page better? it seems to be a step back, doesn't seem to work? or am I mad?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

It doesn't work because you

It doesn't work because you guys don't deal with javascript, as I've been told.

All of the javascript stuff is done, all I need is a form layout, with these boxes overlapping the other elements below it.

Sorry if this is sounding annoying. No doubt you guys get hundreds of questions every week, but hopefully this one is a little bit more thought provoking than some others.

cmanciero
cmanciero's picture
Offline
Regular
East Haven, CT USA
Last seen: 9 years 10 weeks ago
East Haven, CT USA
Timezone: GMT-4
Joined: 2006-10-11
Posts: 13
Points: 0

I am working on something like this

I am working on something like this, you can view my page at http://www.chrismanciero.com/autosuggest.aspx, if you type the letter "m" you will see choices, if that is something you are looking to do, I got the information on how to do it from http://www.webreference.com/programming/javascript/ncz/4.html(Part 1) and http://www.webreference.com/programming/javascript/ncz/column2/(Part 2), the guy gives a good tutorial on how to do it and how to make the CSS show correctly.

Hopes this helps on what you are looking to do.

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

Thanks for the links

Thanks for the links cmanciero, but I've done the javascript bit, I just need to know how I can style the form. This is the part I'm having trouble with, as I need to have a drop down for about 7 fields in the form.

cmanciero
cmanciero's picture
Offline
Regular
East Haven, CT USA
Last seen: 9 years 10 weeks ago
East Haven, CT USA
Timezone: GMT-4
Joined: 2006-10-11
Posts: 13
Points: 0

Styling of the items

In Part 2 http://www.webreference.com/programming/javascript/ncz/column2/index.html, the author describes the styling in the first section, that might be what you are looking for.

Twisted Chaz
Offline
Regular
Last seen: 12 years 51 weeks ago
Timezone: GMT+1
Joined: 2006-11-29
Posts: 15
Points: 4

For anyone that cares, I

For anyone that cares,

I solved this by using bloated markup. I enclosed the label and input box in an outer div. the outer div had the relative position style, but with no actual measurements for it to be positioned by, so it just sits in with the normal flow of the document. Within this wrapper div was my drop down box div. This was positioned absolutely.

http://beta.team-space.co.uk/service/ type P into the first field.