i would like my page to have a combo box which act something like MS word where you slect the font type and font size..
anyone has any idea how i can do it???
Printable View
i would like my page to have a combo box which act something like MS word where you slect the font type and font size..
anyone has any idea how i can do it???
HTML has no such controls. As a result you will need to 'emulate' one. You can do this by having a textbox, and a div underneath the textbox, kept hidden. And a 'down arrow' next to the textbox. User clicks on down arrow, the div becomes visible. The div has many rows, each row displays the font to the user in the font's own style.
Keep in mind that you cannot just put any font you want there. Not all users have the same font, so you'll need to stick to a minimum few.
sorry i think my question has some mis understanding..
what i realli wan is a combo box.. one that can has textbox and dropdown list feature merge together
http://www.codeproject.com/aspnet/Multi_Column_Combo_Box.asp
this link should help you
I don't think you understand. There is no such control in HTML. It has to be created. By you. Or you can search for an existing third party control that does this.Quote:
Originally Posted by bczm8703
I also think neeshu's misunderstood your question.
The frog is correct. You need this or something like it.... I've always hated that i can't make my "select" box look as nice as the browser's...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<div id="compositeDHtmlControl" style="font-size:12px;"><!--note the huge error in display heights -->
<script language="javascript" type="text/javascript">
<!--//
function hover(fntDiv)
{
var odiv = document.getElementById(fntDiv);
if(null == odiv) return;
odiv.style.backgroundColor = "black";
odiv.style.color = "red";
}
function unhover(fntDiv)
{
var odiv = document.getElementById(fntDiv);
if(null == odiv) return;
odiv.style.backgroundColor = "white";
odiv.style.color = "black";
}
function select_font(fntBox, fontName)
{
var otxt = document.getElementById(fntBox);
if(null == otxt) return;
otxt.style.fontFamily = fontName;
}
function toggle_list(fntOwnerDiv)
{
var odiv = document.getElementById(fntOwnerDiv);
if(null == odiv) return;
if(odiv.style.display == "none")
{
odiv.style.display = "block";
}
else
{
odiv.style.display = "none";
}
}
//-->
</script>
<input type="text" id="inputText" value="foo-BAR" style="width:90px;height:13px;"/><input type="button" id="down" value="-" style="width:10px;height:20px;" onclick="toggle_list('fontsDiv');" />
<div id="fontsDiv" style="display:none;width:100px;border:solid 1px black;">
<div id="font_arial" onclick="select_font('inputText','arial');toggle_list('fontsDiv');" onmouseover="hover('font_arial');" onmouseout="unhover('font_arial');" style="font-family:Arial;">Arial</div>
<div id="font_serif" onclick="select_font('inputText','sans');toggle_list('fontsDiv');" onmouseover="hover('font_serif');" onmouseout="unhover('font_serif');" style="font-family:Serif;">Serif</div>
<div id="font_sans" onclick="select_font('inputText','serif');toggle_list('fontsDiv');" onmouseover="hover('font_sans');" onmouseout="unhover('font_sans');" style="font-family:Sans;">Sans</div>
</div>
</div>
</body>
</html>
Here is another less complex way. I think they both suck because the display size changes, and that is bad...
Code:<script>
<!--//
function select_font(fntBox, fontName)
{
var otxt = document.getElementById(fntBox);
if(null == otxt) return;
otxt.style.fontFamily = fontName;
}
///-->
</script>
<select id="selbox">
<option onmouseover="select_font('selbox','arial');" value="arial">Arial</option>
<option onmouseover="select_font('selbox','sans');" value="sans">Sans</option>
<option onmouseover="select_font('selbox','serif');" value="serif">Serif</option>
</select>
<select id="selbox2"><option onmouseover="select_font('selbox2','arial');" value="arial">Arial</option><option onmouseover="select_font('selbox2','sans');" value="sans">Sans</option><option onmouseover="select_font('selbox2','serif');" value="serif" style="font-family:Sans;">Serif</option></select>
mendhak a third party control will only allow non commerical use.. but mine is a commerical website...
when i press the enter key on my keyboard while my cursor in is the textfield i receive this error: Object Expected on Ln92Code:<script runat="server">
Public ReadOnly Property Items() As ListItemCollection
Get
Return info2.Items
End Get
End Property
Public ReadOnly Property SelectedItem() As ListItem
Get
If info2.SelectedIndex < 0 Then
Return New ListItem(text2.Text, text2.Text)
Else
Return info2.SelectedItem
End If
End Get
End Property
Public Property SelectedIndex() As Integer
Get
Return info2.SelectedIndex
End Get
Set(ByVal value As Integer)
If (value >= -1) And (value < info2.Items.Count) Then
info2.SelectedIndex = value
text2.Text = info2.Items(SelectedIndex).Text
End If
End Set
End Property
Public Property SelectedValue() As String
Get
Return text2.Text
End Get
Set(ByVal value As String)
text2.Text = value
info2.SelectedIndex = -1
For Each oItem As ListItem In info2.Items
If value.Length <= oItem.Text.Length Then
If String.Compare(oItem.Text.Substring(0, value.Length), value, True) = 0 Then
oItem.Selected = True
Exit For
End If
End If
Next
End Set
End Property
Dim value2, usercon, usercom, userread, usersql
Dim timing, timeHour, msg1
Sub page_load()
Session.Timeout = "10000"
Dim key As String = Me.UniqueID & "_"
info2.Attributes.Add("onclick", "selectList('" & key & "', 'info2', 'text2')")
text2.Attributes.Add("onkeyup", "scrollList('" & key & "', 'info2', 'text2')")
colName.Visible = True
listItems.Visible = False
activateSubmit.Visible = False
tableDisplay.Visible = False
usercon = New OleDbConnection("Provider=SQLOLEDB;Data Source=esaacc;Initial Catalog=TESSA;User Id=sa;Password=*****;")
usercon.Open()
If Not Page.IsPostBack Then
timing = FormatDateTime(Now, DateFormat.ShortTime)
timeHour = Hour(timing)
If Not timeHour >= 12 Then
msg1 = "Good Morning "
ElseIf Not timeHour >= 17 Then
msg1 = "Good Afternoon "
Else
msg1 = "Good Evening "
End If
If Session("username") = "" Then
main.Visible = False
helpLink.Visible = False
loginFalse.Visible = True
Button1.Text = "Login"
Button1.Enabled = True
greeting.Text = msg1 + "Guest"
Else
usersql = "select userRole from member where username ='" & Session("username") & "'"
usercom = New OleDbCommand(usersql, usercon)
userread = usercom.ExecuteReader()
While userread.read()
If userread.GetString(0) = "administrator" Then
register.Text = "<a href='register.aspx'>Administrator Control Panel</a>"
End If
End While
greeting.Text = msg1 + Session("username")
helpLink.Visible = True
main.Visible = True
loginFalse.Visible = False
usercon.Close()
userread.Close()
End If
End If
End Sub
Sub information(ByVal sender As Object, ByVal e As EventArgs)
Dim dbconn, dbcomm, sql, i
Dim schemaAdapter
Dim schemaTable As New DataTable
dbconn = New OleDbConnection("Provider=SQLOLEDB;Data Source=esaacc;Initial Catalog=TESSA;User Id=sa;Password=*****;")
dbconn.Open()
If value1.SelectedValue = "itemdesc" Then
sql = "select distinct itemdesc from iv00101 where ITMCLSCD ='WIP/FG'and itemnmbr like 'w0%' order by itemdesc"
ElseIf value1.SelectedValue = "itemnmbr" Then
sql = "select distinct itemnmbr from iv00101 where itemnmbr like 'w0%' and ITMCLSCD ='WIP/FG' order by itemnmbr"
ElseIf value1.SelectedValue = "custname" Then
sql = "select custname from rm00101 where custnmbr like 'd%' order by custname"
ElseIf value1.SelectedValue = "custnmbr" Then
sql = "select custnmbr from rm00101 where custnmbr like 'd%' order by custnmbr"
End If
If value1.SelectedValue = "cstponbr" Then
sql = "select distinct cstponbr from sop10100 where not cstponbr=''"
End If
If value1.SelectedValue = "sopnumbe" Then
sql = "select distinct sopnumbe from sop10100 where sopnumbe like 'w0%'"
End If
dbcomm = New OleDbCommand(sql, dbconn)
schemaAdapter = New OleDbDataAdapter(dbcomm)
schemaAdapter.Fill(schemaTable)
info2.Items.Clear()
For i = 1 To schemaTable.Rows.Count - 1
info2.Items.Add(schemaTable.Rows(i).Item(value1.SelectedValue).ToString)
Next
schemaTable.Dispose()
dbconn.close()
listItems.Visible = True
activateSubmit.Visible = True
End Sub
</script>
<html>
<body >
<form id="form1" runat="server">
<asp:Panel ID="main" runat=server>
<asp:Panel ID="colName" runat=server> <asp:RadioButtonList runat=server AutoPostBack=true ID="value1" RepeatDirection=Horizontal OnSelectedIndexChanged="information">
<asp:ListItem Value="itemdesc">Item Description</asp:ListItem>
<asp:ListItem Value="itemnmbr">Work Order Number</asp:ListItem>
<asp:ListItem Value="custname">Customer Name</asp:ListItem>
<asp:ListItem Value="custnmbr">Customer Number</asp:ListItem>
<asp:ListItem Value="cstponbr">Customer PO</asp:ListItem>
<asp:ListItem Value="sopnumbe">Sale Order Number</asp:ListItem>
</asp:RadioButtonList></asp:Panel>
<asp:Panel ID="listItems" runat=server>
<asp:TextBox ID=text2 runat=server />
<asp:DropDownList ID="info2" runat=server />
</asp:Panel>
<asp:Panel ID="tableDisplay" runat=server>
<asp:Label ID="selectedName" runat=server />
</asp:Panel>
</asp:Panel>
<table>
<tr>
<td>
<asp:Panel ID="activateSubmit" runat=server>
<asp:Button ID="b2" runat=server Text="Submit" OnClick="submit" CssClass="button" />
</asp:Panel>
</td>
<td><asp:Button ID="Button1" runat=server OnClick="logout" Text="Logout" CssClass="button" />
<asp:Button ID="Button2" runat=server OnClick="clear" Text="Reset All fields" CssClass="button" />
</td>
</tr>
</table>
</asp:Panel>
</form>
</body>
</html>
my ln 92 is in bold
Not all third party controls prevent commercial use. Most likely, you will have to pay for the ones that do allow it.