Solved

Creating a combobox with images

Posted on 2004-03-28
12
295 Views
Last Modified: 2012-05-04
Hi there,

I'm looking to have a combo box (drop down box) which contains a list of smiley faces which the users on my site can select.  When they select a smiley from the combo box the smiley is put into the corresponding message textbox below - note: i don't expect the picture to be inserted, just the smiley is ASCII e.g. :-)

Has anyone got a solution for this?  I'm looking for some code, not links for the 500 points to be given.

Thanx in advance,

Colin
0
Comment
Question by:whos_wee_dug
  • 5
  • 5
  • 2
12 Comments
 

Author Comment

by:whos_wee_dug
ID: 10698995
Oh, It doesn't nessasarily need to be written in php, my site is primarily php but javascript, xhtml, xml anything like these are perfectly acceptable.

Cheers,

Colin.
0
 
LVL 6

Expert Comment

by:Reapz
ID: 10699218
It is possible to do this using CSS styles but it's only supported by Mozilla and very recent versions of Netscape apparently. It's probably going to be a lot easier just to have a small table above, below or to the side of your textarea with all your smileys in.

If you want to do it that way...

Example...

Insert your images on your page like this...

<a name="emoticon" href style="cursor:hand" onclick="return InsertText('[:)]')"><img src="gfx/smilies/icon_smile.gif" width="15" height="15"></a>      
<a name="emoticon" href style="cursor:hand" onclick="return InsertText('[:]]')"><img src="gfx/smilies/icon_biggrin.gif" width="15" height="15"></a>      
<a name="emoticon" href style="cursor:hand" onclick="return InsertText('[:>]')"><img src="gfx/smilies/icon_cheesygrin.gif" width="15" height="15"></a>

The ASCII symbol you are using for each one goes in InsertText('HERE'). The style="cursor:hand" bit just changes the cursor to the little hand like it does over a link so the user knows they can do something by clicking on the image. Oh, and make sure they are all called the same thing (in the above example it's emoticon).

And in the head section of your page put...

<script language="javascript">
<!--
var Submitted = false;            
var subject = true;
function InsertText( text )
{
      if (Submitted) return false;
      var TextArea = document.form1.Message;     <<----------- Replace Message with the name of your textarea!
      if (TextArea)
      {
            TextArea.value += text;
            TextArea.focus();
      }
      return false;
}
//-->
</script>

So now when a user clicks on one of your smileys then the appropriate ASCII is entered into the text area at the current cursor position.

Hope that helps!      
0
 

Author Comment

by:whos_wee_dug
ID: 10700362
Hey Reapz,

Thanks for the fast response.  I like your solution and I might use it if no one else can suggest an exact solution to my problem, if I do use your option then I'll give you the points.

In the mean time I'll wait and see what other alternatives i have.

Cheers,

Colin
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10702261
I have another solution, give me 10 minutes to put all together and upload it to my server... :)
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10702426
I have made an example for you using a library, and uploaded it to my website, the only thing left is to make a simple preloader (not necesary but fine) of the smileys. Just tell me if that is what you need. The example: http://www.e-scola.org/combobox/
0
 
LVL 2

Accepted Solution

by:
MarcosBL earned 500 total points
ID: 10704579
Server down.. X) Sorry.. try here : http://www.cfutura.com/~akb/
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:whos_wee_dug
ID: 10706704
Nice 1 Marcos, that looks exactly like what I'm looking for!  Do you have any idea how compatiable it is with various browsers?  I'm on IE 6 and it looks great, I'll check it on Mozilla later tonight on my unix box but will it be compatible with IE4, IE5 and Netscape?  It's critical because my site will attract a varied audience.

I'm gonna try out your code on my site just now, if you can advise me on the compatibility issues (a rough idea) then I'll give you the points.

Thanks very much,

Colin.
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10711311
It should be very compatible (no one is 100%) because just uses divs and mouse events.

No idea, i don't have anything to test other than my IE5. Anyway... my personal website have had up to 100,000 unique visits a day, with a 98% of Internet Explorer 6 & 5 users... so... the bigest part of the audience will be covered.

For the other... you can always check browser version and show a simple combo if not IE. Only a very little part of the users will see that normal combo, and "extrange browser users" will not be surprised of it. : )
0
 
LVL 6

Expert Comment

by:Reapz
ID: 10711627
Most browsers pretend to be IE that's why stats pages always say 98-99% IE users. :)
0
 

Author Comment

by:whos_wee_dug
ID: 10719740
Thanks for everything Reapz, it's working and looking great!  I'm not going to worry to much about the compatibility (not as much as I was a few days ago) because its not a critical feature of my website.  

Just one thing, is there any way that the combobox's width could be changed?  It could do with being narrower.  I had a look at the code and couldn't work it out, if you can't change the width easily don't worry too much about it though.

Cheers,

Colin.
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10721503
For the width take a look in the css file, for example:

.combo-input  {
      border:                  1px solid rgb(120,172,255) !important;
      width:                  138px !important;
      vertical-align:      baseline;
}

There you can change the visual apperance of the combo. And sorry for the bad english, i'm spanish :)
0
 

Author Comment

by:whos_wee_dug
ID: 10723000
Ah, right, I looked everywhere but that file!  Thanks for your help, I had no trouble understanding what you were saying, your english is  v. good!

Cheers,

Colin
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now