You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Faisal Mahmoud <fa...@gmail.com> on 2005/10/19 21:01:51 UTC
Adding images to
Hi,
I am creating a drop down list using the HTML <select> and <option>
tags. The items in the list will be color names (ex. red, green, blue,
etc..). I would like a small square image to be next to each color
name text in the list. How would I go about this in my jsp file with
my struts tags?
-Faisal
--
http://www.quidprocode.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
On Wed, October 19, 2005 3:20 pm, Dave Newton said:
> Looks funny when you roll over it. Still and all, kinda handy for
> something, I'm sure.
Yeah, I thought so too... might be some CSS tricks you could play to keep
the color the same when hovered over... I just tried some obvious things,
none worked. Maybe someone smarter than me (I don't set the bar very
high, do I?!?)...
> Dave
Frank
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by Dave Newton <ne...@pingsite.com>.
Frank W. Zammetti wrote:
>Just thought of this... one thing you could do is set the text color of
>each option. That *does* work. Might serve your purpose alright.
>
>You can actually set the color style attribute or background-color, both
>work.
>
>
Looks funny when you roll over it. Still and all, kinda handy for
something, I'm sure.
Dave
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
RE: Adding images to
Posted by Mark Benussi <ma...@hotmail.com>.
And insert a • in front of the text in a larger font size (But same
line height). This will give you a circle, but not a square.
-----Original Message-----
From: Frank W. Zammetti [mailto:fzlists@omnytex.com]
Sent: 19 October 2005 20:13
To: Struts Users Mailing List
Cc: Struts Users Mailing List
Subject: Re: Adding images to <option> items in a <select> drop down list
Just thought of this... one thing you could do is set the text color of
each option. That *does* work. Might serve your purpose alright.
You can actually set the color style attribute or background-color, both
work.
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
MSN: fzammetti@hotmail.com
On Wed, October 19, 2005 3:10 pm, Dave Newton said:
> Faisal Mahmoud wrote:
>
>>I am creating a drop down list using the HTML <select> and <option>
>>tags. The items in the list will be color names (ex. red, green, blue,
>>etc..). I would like a small square image to be next to each color
>>name text in the list. How would I go about this in my jsp file with
>>my struts tags?
>>
>>
> By rewriting the browser.
>
> I've never seen a browser support anything other than text inside a
> select box w/o using a plugin of some sort (flash, applet, etc.)
>
> Dave
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
Just thought of this... one thing you could do is set the text color of
each option. That *does* work. Might serve your purpose alright.
You can actually set the color style attribute or background-color, both
work.
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
MSN: fzammetti@hotmail.com
On Wed, October 19, 2005 3:10 pm, Dave Newton said:
> Faisal Mahmoud wrote:
>
>>I am creating a drop down list using the HTML <select> and <option>
>>tags. The items in the list will be color names (ex. red, green, blue,
>>etc..). I would like a small square image to be next to each color
>>name text in the list. How would I go about this in my jsp file with
>>my struts tags?
>>
>>
> By rewriting the browser.
>
> I've never seen a browser support anything other than text inside a
> select box w/o using a plugin of some sort (flash, applet, etc.)
>
> Dave
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by Dave Newton <ne...@pingsite.com>.
Faisal Mahmoud wrote:
>I am creating a drop down list using the HTML <select> and <option>
>tags. The items in the list will be color names (ex. red, green, blue,
>etc..). I would like a small square image to be next to each color
>name text in the list. How would I go about this in my jsp file with
>my struts tags?
>
>
By rewriting the browser.
I've never seen a browser support anything other than text inside a
select box w/o using a plugin of some sort (flash, applet, etc.)
Dave
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
Actually, based on Joe's suggestion, I just threw it together just now.
This is literally hacked together off the top of my head, and only tested
in IE 6... I can see some things I'd want to fix already, but that's what
you get from 5 minutes of hacking! Might make a good candidate for
inclusion in the UIWidgets taglib of Java Web Parts, but feel free to roll
a custom tag with it yourself (and contribute it back if you wish!),
otherwise I'll add it to my own to-do list...
<html>
<head>
<title>test</title>
<script>
function dropdown() {
obj = document.getElementById("ddspan");
if (obj.style.visibility == "visible") {
obj.style.visibility = "hidden";
} else {
obj.style.visibility = "visible";
}
}
function setVal(inVal) {
document.getElementById("tb").value = inVal;
dropdown();
}
function mOver(inObj) {
inObj.style.backgroundColor = "#ff0000";
}
function mOut(inObj) {
inObj.style.backgroundColor = "";
}
</script>
</head>
<body>
<input name="tb" type="text" size="20" readonly style="border:1 solid
#00000;font-size:12pt;height:28px;"><span onClick="dropdown();"
style="position:relative;top:-2;left:-1;font-size:12pt;height:28px;border:1
solid #000000;">∇</span>
<br>
<span id="ddSpan" style="width:168px;padding:4;border:1 solid
#000000;visibility:hidden;position:relative;top:-3;">
<table border="0" cellpadding="0" cellspacing="0"
style="font-size:12pt;">
<tr onClick="setVal('Lightning');" onMouseOver="mOver(this);"
onMouseOut="mOut(this);">
<td><img src="http://www.omnytex.com/images/si_resume_0.gif"></td>
<td width="100%"> Lightning</td>
</tr>
<tr onClick="setVal('House');" onMouseOver="mOver(this);"
onMouseOut="mOut(this);">
<td><img src="http://www.omnytex.com/images/si_home_0.gif"></td>
<td> House</td>
</tr>
<tr onClick="setVal('Envelope');" onMouseOver="mOver(this);"
onMouseOut="mOut(this);">
<td><img src="http://www.omnytex.com/images/si_contact_0.gif"></td>
<td> Envelope</td>
</tr>
</table>
</span>
</body>
</html>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
MSN: fzammetti@hotmail.com
On Wed, October 19, 2005 4:30 pm, Faisal Mahmoud said:
> Okay, somewhere in my head I can remember seeing an example of this,
> but I can't recall where it was. Sounds like the solution (if one
> exists) is non-trivial. Appreciate the ideas and if I do come across
> or develop some sort of solution I will post back to this thread.
>
> On 10/19/05, Frank W. Zammetti <fz...@omnytex.com> wrote:
>> I was thinking you could build an actual "custom control" to do this,
>> and
>> that's a good start... add a down arrow to the right of it to show the
>> dropdown portion and lock the textbox from editing and you'd have a good
>> start.
>>
>> Thanks Joe!
>>
>> --
>> Frank W. Zammetti
>> Founder and Chief Software Architect
>> Omnytex Technologies
>> http://www.omnytex.com
>> AIM: fzammetti
>> Yahoo: fzammetti
>> MSN: fzammetti@hotmail.com
>>
>> On Wed, October 19, 2005 3:51 pm, Joe Germuska said:
>> > At 3:11 PM -0400 10/19/05, Frank W. Zammetti wrote:
>> >>This isn's something that is possible in straight HTML. There could
>> be a
>> >>way to do it via CSS, but nothing obvious presents itself to me... I
>> >> tried
>> >>setting a background-image, but that didn't work.
>> >>
>> >>Can you find an example of it being done? Unless there's some
>> >> non-obvious
>> >>CSS trick, or perhaps some non-standard browser extension, I'd bet
>> this
>> >>isn't possible.
>> >
>> > Here's an example of something a user might not distinguish from what
>> > is described, although it wouldn't be using <select>
>> >
>> > http://script.aculo.us/demos/ajax/autocompleter_customized
>> >
>> > By using DHTML like this and having an event cause a hidden form
>> > field value to be set, you could achieve the goal.
>> >
>> > Note that Scriptaculous builds upon the Prototype library, which
>> > breaks commons-validator client side javascript validation.
>> >
>> > Joe
>> >
>> > --
>> > Joe Germuska
>> > Joe@Germuska.com
>> > http://blog.germuska.com
>> > "Narrow minds are weapons made for mass destruction" -The Ex
>> >
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>
>
> --
> http://www.quidprocode.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by Faisal Mahmoud <fa...@gmail.com>.
Okay, somewhere in my head I can remember seeing an example of this,
but I can't recall where it was. Sounds like the solution (if one
exists) is non-trivial. Appreciate the ideas and if I do come across
or develop some sort of solution I will post back to this thread.
On 10/19/05, Frank W. Zammetti <fz...@omnytex.com> wrote:
> I was thinking you could build an actual "custom control" to do this, and
> that's a good start... add a down arrow to the right of it to show the
> dropdown portion and lock the textbox from editing and you'd have a good
> start.
>
> Thanks Joe!
>
> --
> Frank W. Zammetti
> Founder and Chief Software Architect
> Omnytex Technologies
> http://www.omnytex.com
> AIM: fzammetti
> Yahoo: fzammetti
> MSN: fzammetti@hotmail.com
>
> On Wed, October 19, 2005 3:51 pm, Joe Germuska said:
> > At 3:11 PM -0400 10/19/05, Frank W. Zammetti wrote:
> >>This isn's something that is possible in straight HTML. There could be a
> >>way to do it via CSS, but nothing obvious presents itself to me... I
> >> tried
> >>setting a background-image, but that didn't work.
> >>
> >>Can you find an example of it being done? Unless there's some
> >> non-obvious
> >>CSS trick, or perhaps some non-standard browser extension, I'd bet this
> >>isn't possible.
> >
> > Here's an example of something a user might not distinguish from what
> > is described, although it wouldn't be using <select>
> >
> > http://script.aculo.us/demos/ajax/autocompleter_customized
> >
> > By using DHTML like this and having an event cause a hidden form
> > field value to be set, you could achieve the goal.
> >
> > Note that Scriptaculous builds upon the Prototype library, which
> > breaks commons-validator client side javascript validation.
> >
> > Joe
> >
> > --
> > Joe Germuska
> > Joe@Germuska.com
> > http://blog.germuska.com
> > "Narrow minds are weapons made for mass destruction" -The Ex
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
--
http://www.quidprocode.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
I was thinking you could build an actual "custom control" to do this, and
that's a good start... add a down arrow to the right of it to show the
dropdown portion and lock the textbox from editing and you'd have a good
start.
Thanks Joe!
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
MSN: fzammetti@hotmail.com
On Wed, October 19, 2005 3:51 pm, Joe Germuska said:
> At 3:11 PM -0400 10/19/05, Frank W. Zammetti wrote:
>>This isn's something that is possible in straight HTML. There could be a
>>way to do it via CSS, but nothing obvious presents itself to me... I
>> tried
>>setting a background-image, but that didn't work.
>>
>>Can you find an example of it being done? Unless there's some
>> non-obvious
>>CSS trick, or perhaps some non-standard browser extension, I'd bet this
>>isn't possible.
>
> Here's an example of something a user might not distinguish from what
> is described, although it wouldn't be using <select>
>
> http://script.aculo.us/demos/ajax/autocompleter_customized
>
> By using DHTML like this and having an event cause a hidden form
> field value to be set, you could achieve the goal.
>
> Note that Scriptaculous builds upon the Prototype library, which
> breaks commons-validator client side javascript validation.
>
> Joe
>
> --
> Joe Germuska
> Joe@Germuska.com
> http://blog.germuska.com
> "Narrow minds are weapons made for mass destruction" -The Ex
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by Joe Germuska <Jo...@Germuska.com>.
At 3:11 PM -0400 10/19/05, Frank W. Zammetti wrote:
>This isn's something that is possible in straight HTML. There could be a
>way to do it via CSS, but nothing obvious presents itself to me... I tried
>setting a background-image, but that didn't work.
>
>Can you find an example of it being done? Unless there's some non-obvious
>CSS trick, or perhaps some non-standard browser extension, I'd bet this
>isn't possible.
Here's an example of something a user might not distinguish from what
is described, although it wouldn't be using <select>
http://script.aculo.us/demos/ajax/autocompleter_customized
By using DHTML like this and having an event cause a hidden form
field value to be set, you could achieve the goal.
Note that Scriptaculous builds upon the Prototype library, which
breaks commons-validator client side javascript validation.
Joe
--
Joe Germuska
Joe@Germuska.com
http://blog.germuska.com
"Narrow minds are weapons made for mass destruction" -The Ex
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
This isn's something that is possible in straight HTML. There could be a
way to do it via CSS, but nothing obvious presents itself to me... I tried
setting a background-image, but that didn't work.
Can you find an example of it being done? Unless there's some non-obvious
CSS trick, or perhaps some non-standard browser extension, I'd bet this
isn't possible.
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
MSN: fzammetti@hotmail.com
On Wed, October 19, 2005 3:01 pm, Faisal Mahmoud said:
> Hi,
>
> I am creating a drop down list using the HTML <select> and <option>
> tags. The items in the list will be color names (ex. red, green, blue,
> etc..). I would like a small square image to be next to each color
> name text in the list. How would I go about this in my jsp file with
> my struts tags?
>
> -Faisal
>
> --
> http://www.quidprocode.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: Adding images to
Posted by Su...@Keane.com.
Faisal,
Why you want to use image, you can use stylesheet. You may refer following
code:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE type="text/css">
OPTION.mar{background-color:maroon; color:white}
OPTION.red{background-color:red; color:maroon}
OPTION.blue{background-color:blue; color:maroon}
</STYLE>
</HEAD>
<BODY>
<select name="obj" style="width:100">
<option value="">Select</option>
<option value="M" class="mar"> </option>
<option value="B" class="red"> </option>
<option value="R" class="blue"> </option>
</select>
</BODY>
</HTML>
Sunil
Faisal Mahmoud <fa...@gmail.com>
10/20/2005 12:31 AM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
Struts Users Mailing List <us...@struts.apache.org>
cc
Subject
Adding images to <option> items in a <select> drop down list
Hi,
I am creating a drop down list using the HTML <select> and <option>
tags. The items in the list will be color names (ex. red, green, blue,
etc..). I would like a small square image to be next to each color
name text in the list. How would I go about this in my jsp file with
my struts tags?
-Faisal
--
http://www.quidprocode.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org