|
HTML - Need Help With Drop Down Text Code
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! Similar TutorialsHello! I recently started a blog on the weebly website and I want to convert it over to wordpress. The only problem is that wordpress does not allow javascript, so I was wondering if there is a way to generate an html code without javascript that allows the user to click a button to drop down text. I have a custom script on my current site: http://www.resourceblog.weebly.com It's the short ride button and it allows the user to click on the button in order to drop down a summary of the blog article. Here is the script: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Bad Rep</title> <style type="text/css"> #bad { font-family:arial,sans-serif; font-size:12px; color:#ff6600; } #rep { cursor:pointer; } .hidden { display:none; } </style> <script type="text/javascript"> function init(){ var obj=document.getElementById('bad'); obj.className='hidden'; document.getElementById('rep').onclick=function() { obj.className=obj.className=='hidden'?'':'hidden'; } } window.addEventListener? window.addEventListener('load',init,false): window.attachEvent('onload',init); </script> <div> <img id="rep" src="http://i1106.photobucket.com/albums/h365/ResourceMJS/shortride-2.jpg" alt="photobucket"> </div> <ul id="bad"> <li>Recruiters often get a bad reputation because many people do not understand what they do.</li> <li>It is up to the recruiter to build the trust of the candidate by being honest and genuine.</li> <li>Follow up and keep in contact with your candidates so that they continue to hold a strong value in you.</li> </ul> Any help would be appreciated. This forum has answered a lot of my questions and so I love turning to you all for advice hi i need some help with this im not a html wizard not a drop down nav bar what i would like is a button that when pressed will show more info ill be more brief lets say im selling a box of condoms i have a picture to the left of the screen and a bit of info about the product at the right of the screen if people want to see more info about the product they click the drop down botton and more info is displayed. What I have is a text box for a user to change the back ground & text for a generated page ------------------------------------------------------------------------------------------------------ <font color="#003300"> <b>Color for background</b><BR> </font><font face="Arial,Helvetica" color="#003300"><input type="text" size="6" maxlength="6" name="color1" value="ffffff"></font><font color="#003300"><BR> <b>Color for text </b><BR> <input type="text" size="6" maxlength="6" name="color2" value="000000"></font><font color="#003300"><br> <b>Color inside</b><BR> <input type="text" size="6" maxlength="6" name="color3" value="ffffff"><br> <b>Color outside</b><BR> <input type="text" size="6" maxlength="6" name="color4" value="000000"></br> </font> ------------------------------------------------------------------------------------------------------- I would like to change the text box with a drop down box with pre selected colors for the 4 options any help would be greatly appreciated above is the text Im using Hi there, I am trying to align the text of a drop down box , so that it appears in the centre across all browsers. In the code below I have sucessfully indented the text from the left by 5px and sucessfully aligned it in the centre (vertically) However as I ahve used padding-top, it has also affected the drop down icon (v). Is there a way to align the text in the drop down without the drop down icon being affected across IE7, 8 , FF, and chrome ? I have tried adding line-height to the text and that doesnt work either. Thanks for your help HTML Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text align center</title>
<style type="text/css">
#selection
{
color: #999999;
display: block;
font-family: Arial;
font-size: 11px;
height: 24px;
padding: 0;
width: 382px;
line-height:20px;
padding-left:5px;
}
</style>
</head>
<body>
<select id="selection">
<option value="0">Selection 1</option>
<option value="1">Selection 2</option>
<option value="2">Selection 3</option>
<option value="3">Selection 4</option>
<option value="4">Selection 5</option>
</select>
</body>
</html>
Programs ----------------------- Photoshop CS4 Dreamweaver CS3 ----------------------- Anyways I used photoshop to make most of the site image, slice it up made it to a HTML and images file. I have trouble get text to go in the right place. Im not to sure if im even doing it right. Drop down menu im not sure where to start there.(but mostly having truble with textso any thing will help ( what I need help with. Is how to do text with my work with photoshop. I know how to it with out just not with.) Is there a way to wrap text in a drop down selection box without increasing the height attribute? Otherwise very long text just cut off. Thanks. p.s. of course the solution should be compliant and especially work in the dreaded IE7. Hi I'm trying to convince my work to change the design of their website. I have been told that if i can design something better, then they may consider it. However, I have no web building software here, and I have been told I am not able to work from home and get paid for it. I am able to write HTML and CSS in notepad, but I need a script to set up a horizonal drop down link menu. i.e. when you roll over the first link, it displays a list of options underneath... I need to have about 6-8 links with more options underneath. Can anybody suggest a reliable FREE script that I can use to demonstrate my idea?? LEROY 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! I have a website where I want to make a drop down menu that will bring you to different pages. It is a very basic, sort of old-fashioned website that relies entirely on html. What I'm trying to do is make a drop-down menu that will be used as navigation for a section of a website and I want to have it in each internally linked page in that section, but I'm going to be adding more pages to it over time so I want to be able to put the drop-down menu code in a separate text file and then substitute it into the pages that I make that the options in the menu link to and then just edit the code in the text file when I add another page so that I don't have to go back and edit the code every single individual page whenever I add a new one among them. Basically all I'm asking is how I can put html code in a text file and then substitute that code into an html page by referring to the file. Thanks in advance for any help. How do you display code as text on the page, rather than running it? Like you do here in between [*code][*/code] tags. Thanks. I have an ip verification code here and i need to make the txt disappear or at least make their browser refresh so they can access the site. here is a bit of the code http://screencast.com/t/VYQveMr8P Hello Guys, I need HTML code to blink text message. I have tried <B l i n k> tag but it's not working. I'm using IE8 version. Hello again I need to open a page of text from a text link as its too much on one page What is the code please to do it and I gues I have to find the page address too and upload the page with ftp? Thanks Can someone please try and help me with this code. I'm trying to center text below this image with a certain color. Here are the codes and text: Image Code: <style> body div td td {height:700px; vertical-align:top; background-image:url(http://i80.photobucket.com/albums/j1...-2007-14.jpg); background-repeat:no-repeat; background-position:center top;} td.text td, td.text div td td {background-image:none; height:auto;} </style> Color Code: <p style="color:FFFFFF;"> The Text: Many a man curses the rain that falls upon his head, and knows not that it brings abundance to drive away the hunger. Thanks for the help I was just wondering if this here was the right code: HTML Code: textarea {
resize:none;
I'm just checking because my editor seems to have a problem with this code. (Coffe Cup) Hello what is the HTML code for text wrapping, As whenever I put a html banner link to amazon, it puts it on the next line down And I would like it to appear at the side of text. So what is the html code for text wrapping? Thanks James |
|||||||