HTML - Drop Down Text Box

Hello!

I am creating a blog website using Weebly and am trying to insert a code in which an icon at the top of the blog post drops down a hidden bullet list with a summary of what the article is about. I have one that is working, but it has some flaws that I would like to kink out if possible. Here is the code I have:



<meta http-equiv="Content-Type" content="Text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="Text/javascript">
<meta name="Content-Style-Type" content="Text/css">
<title>Karma</title>

<style type="Text/css">
<!--
.hidden {display:none}
-->
</style>

<div>

<img alt="photobucket" onclick="document.getElementById ('karma').className = document.getElementById ('karma').className == 'hidden' ? '' : 'hidden'"
src="http://i1106.photobucket.com/albums/h365/ResourceMJS/shortride.jpg">

</div>
<ul id="karma"><font style="font-family:arial;color:#FF9900;font-size:12px;"><li>Be yourself when dealing with candidate conversations.</li> <li>Don't lie about your interests to make the conversation flow.</li> <li>Recruiting sometimes causes one to have to toughen up and have difficult conversations.</li></font></ul>


The icon does what it is supposed to when clicked, but it has 2 flaws.
1. It doesn't show as clickable. When you mouse over the icon you still get an arrow key instead of the typical button icon.
2. When the page loads, the summary text is already visible and the button collapses it. I want the text to start off hidden and only appear/disappear when the icon is clicked.

Is there anyway to solve these? I am kinda of a novice with HTML and coding, so any help would be greatly appreciated. Thank you!

Hi All,

first post in the forum.
I would like to know if it is possible to create a drop down list from which the user could select a value but could also decide to enter a new one ?

What I want is to offer the user to select an existing company name or enter a new one, but I would like to have only one field to do it instead of two.

Is this possible

Thanks for helping.

ALex

Hello,

I have a drop down menu where one of the items is EXTREMELY long, and because of this, the overall size of the drop down box is the size of this item. I found a way to shrink the size of the drop down box via:

<style type="text/css">
select {height: 12px; width: 50px; max-height: 12px}
</style>


This works in shrinking the overall size, but what happens is that the really long item is now longer than the width of the box and the text for the item doesn't wrap around down to the line below. So you don't actually see the whole item in the list.

Do you know how I can wrap this item so that the text falls down to the line below?

Cheers

Hi All,

I'm trying to create an information page with HTML whereby people can find an address of a store based on the conditional dropdown boxes selected. Based on the choices selected, it would display the results.

E.g.
Dropdown 1: Select State
Dropdown 2: Select Retail Store

Output: Address of the retail store (displayed on the same page)

I came across a solution in one of the threads for making multiple conditional dropdowns for a form. The code given works extremely well but I'm not sure how to have a text output result on the same page. Can anyone help? Thanks a bunch in advance!


HTML Code:

<script type="text/javascript">
// Place in this array the ID of the element you want to hide
var hide=['the_minutemen','Planet_Smashers','crass','Madonna',
'the_misfits','next','id2'];
function setOpt()
{
resetOpt(); // Call the resetOpt function. Hide some elements in the "hide" array.
for(var i=0,sel=document.getElementsByTagName('select');i<sel.length;i++)
	{
	sel[i].onchange=function()
		{
		if(this.parentNode.tagName.toLowerCase()!='div')
			resetOpt(); // Hides the elements in "hide" array when the first select element is choosen
		try
			{
			document.getElementById(this.value).style.display='';
			}
		catch(e){} ; // When the value of the element is not an element ID
		}
	}
}

window.addEventListener?window.addEventListener('load',setOpt,false):
window.attachEvent('onload',setOpt);

function resetOpt()
{
for(var i=0;i<hide.length;i++) 
	document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array
}
</script>
Artist:
<select>
<option value="the_minutemen">The Minutemen</option>
<option value="Planet_Smashers">Planet Smashers</option>
<option value="crass">Crass</option>
<option value="Madonna">Madonna</option>
<option value="the_misfits">The Misfits</option>
</select>

<div id="the_minutemen">
The Minutemen  Album:
<select>
<option value="album">The Minutemen album1</option>
<option value="next">Show next 'select' element</option>
<option value="album">The Minutemen album3</option>
<option value="album">The Minutemen album4</option>
<option value="album">The Minutemen album5</option>
</select>
</div>

<div id="Planet_Smashers">
Planet Smashers Album:
<select>
<option value="album">The Planet Smashers album1</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">The Planet Smashers album3</option>
<option value="album">The Planet Smashers album4</option>
<option value="album">The Planet Smashers album5</option>
</select>
</div>

<div id="crass">
Crass Album:
<select>
<option value="album">Crass Album1</option>
<option value="next">Show next 'select' element</option>
<option value="album">Crass Album3</option>
<option value="album">Crass Album4</option>
<option value="album">Crass Album5</option>
</select>
</div>

<div id="Madonna">
Madonna Album:
<select>
<option value="album">madonna Album1</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">madonna Album3</option>
<option value="album">madonna Album4</option>
<option value="album">madonna Album5</option>
</select>
</div>

<div id="the_misfits">
The Misfits Album:
<select>
<option value="album">the_misfits Album1</option>
<option value="album">the_misfits Album2</option>
<option value="album">the_misfits Album3</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">the_misfits Album5</option>
</select>
</div>

<div id="id2">
Element with an ID of "id2"
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>

<div id="next">
"Next" element
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>

I've looked all over the web and can't find an effective way to do this. Can someone please help?

I need to make text drop down menus when you mouseover my links. This is a perfect example: http://www.stpatrick.org/

Thanks a lot!

Hi All,
I am new to this forum and is expecting an answer for this question. I have implemented a facebook type search to the database which displays the familiar text saved in the database when I type some text in the database. My issue is after I have used the search box for a couple of time the text box starts displaying a similar dropdown from its history which hides my database search. Does anyone know how to disable it using html or css. See the attached Image if my question is not clear.
http://www.htmlforums.com/attachment...1&d=1306715905

I have several websites that I maintain and update. A lot of them are just textual changes and I would think my customers can do these themselves by editing a simple .txt file.

I was hoping my choices are avalable so that I can just insert this tag into my web pages and then give them login info to their edit page or show them how to upload the .txt file.

I hope this is an easy one with several answers.

Is it possible these tags could discipline your rankings in the search engines?

Thanks,
Jason

here is the (ineffective) code currently:

<img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" />
<h1 style="text-align: center;">random text</h1>

the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is.

i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image.

i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon!

thanx in advance for advise/comments/feedback/help.

Hi Can any one help.

I have this form the user is ask to input a message and a number. I want to be able to add a line of text to the message, which the user can not delete. But is sent joined to the message. ie

User input

Message = "Hi Just would like to share this site with you"

with added text:

Message "Hi Just would like to share this site with you" + "mydomain.com"

Can anyone help?

===========================================

Here is my form so far

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
<html>
<body>
<form action="stext.php" method="POST" name="number" id="number" style="width: 384; height: 372; ">
<input name="number" type="text" id="number" style="position: absolute; left: 123; top: 287; color: #FFFFFF; width: 154px; border: 1px solid #ACC61B; background-color: #000000" size="20" tabindex="2"><p style="margin-top: 0; margin-bottom: 0">
<textarea name="message" cols="17" rows="1" id="message" onKeyDown="limitText(message,countdown,140);" onKeyUp="limitText(message,countdown,140);" style="position: absolute; left: 120; top: 105; width: 162px; height: 154px; color: #FFFFFF; font-family: Agency FB; font-size: 14pt; border: 1px solid #ACC61B; background-color: #000000" tabindex="1"></textarea>
<br>
</td>
<input name="Submit" type="submit" id="Submit" value="!" style="position: absolute; left: 121; top: 329; color: #D95503; width: 157px; height: 23px; border: 1px solid #D95503; background-color: #D95503" tabindex="3"></p></form>
<p style="margin-top: 0; margin-bottom: 0"><font size="4" face="Agency FB">Maximum characters: 140. You have
<input readonly type="text" name="countdown" size="3" value="140">
characters left.</font>&nbsp; </font></p>
<p style="margin-top: 0; margin-bottom: 0">nmgnm,</p>
</body>

How do I Link text in a div, h1, h2, p to an external text file or xml file - I don't really know how to ask the question. I think I need an xml file that can be easily edited by a user saved to the server to update an xhtml page text without the user getting bogged down in html.

I don't want to use joomla or cms.

<Any ideas />?

Best wishes,
mas

i have a lot of text files(2-400) all have quite alot of text inside them so is there some software that can help me convert it all into html pages??

somthing that i am doing right now is: copied all of my text files pasted them into other location and editing each file and giving extention html/htm.

now can u tell somthing better??

all the files will open in same frame(obviously one at a time), all have styling n everything same.

Hi, this is appleguy.......6142!
I was wondering how to make a text box display something somewhere else
for example (This does not work)----
------------------------------------------------------------------
[page1.html]
(Pretend this is a text box)>>> [Text Text Text...]

[page2.html]
-This is the text displayed in the text box->>>Text Text Text...

HOW DO I DO THAT

PLEASE HELP!!

hi Everyone,

I have a html form in which i have a text area.I enter some thing in the text area and when i again request for the same html page i want to now display the html page with the changes i made last in the texta area.

Can anyone help me out with this doubt.

Thanks in advance

Hi, I hope I'm posting in the right area as this is my first thread.

The problem I'm facing is I have 7 links in a row
| Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | Link 6 | Link 7 |

and below those links I have nothing.
What I want is for Text to appear on rollover on Link 1 and stay there until Link 2 or another link is hovered over.


Example:
Mouse hovers on Link 1 - called Free Home Survey
Text appears below row of links about Free Home Surveys that the company does

Mouse hovers on Link 3 - called Personalisation
Text appears below the row of links about Personalisation
etc

Any help would be greatly appreciated.
Thanks in advance

I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works?
Thanks