|
HTML - Changing The Shape Of A Text Area
Hello,
I have a text area which is programmed to be dragged around the screen, and then the coordinates are saved. Would anyone happen to know if there is any way of changing the shape of a text area to be circular? Thanks! Similar TutorialsHi, I've spent a while looking for this answer, and while it's entirely possible I've overlooked it, it seems like a simple concept that someone with the knowledge should be able to explain quickly. I have an image (a map of Pennsylvania), that's a map. Here is the code for said image/map/areas (ignore the odd names for things) Code: <font face="Arial, Helvetica, sans-serif"><img name="map" src="image.gif" border="0" usemap="#stuffName" width="552" height="316" alt="map">
<map name="stuffName">
<area shape="poly" coords="202,184,229,184,242,190,253,183,259,186,263,184,263,187,266,187,268,184,296,170,305,157,313,145,297,151,281,155,274,145,276,142,273,142,271,139,267,137,260,137,254,132,254,129,250,130,245,128,244,120,241,125,238,126,236,129,234,133,231,132,222,136,228,145,226,147,228,150,225,152,225,155,224,157,219,155,217,158,213,161,213,165,209,169,208,168,200,180,202,184" href="javascript:winOpen('address')" title="stuff" alt="altstuff" />
<area shape="poly" coords="382,211,389,217,402,227,405,228,419,240,436,253,439,255,437,257,438,257,443,251,444,251,447,248,448,248,450,246,451,246,452,244,457,237,458,235,468,217,433,188,424,192,422,200,417,200,416,202,412,202,403,208,392,208,382,211" href="javascript:winOpen('address')" title="stuff2" alt="altstuff2" />
The code continues on like this, allowing the user to open a new window when they click within the county bounds on the map (no markings are made to the actual image with the boundaries). What I am trying to do is on a mouseover, have the county they are currently highlighting border on its boundaries (draw poly shape on the image itself). I am unaware if this is even possible with a poly, as an area, in a map. If anyone can explain how to do this, or if it's possible, I'd greatly appreciate it. Thanks. -LastOfTheEld Im new to HTML and web design, although I know a little bit about it, Ive never tried to make a website before. Ive been working on this for a little bit, taking several different ways of achieving the same goal. Ive nearly perfected the design, except for one major flaw, immediately obvious when you view the site. http://www.imagesbyjan.com/Images%20...jantables.html The error lies in the text. When you resize the window, the text changes shape to stay all there. Thats the exact opposite of what I want. When it resizes, it gets longer, and goes off the bottom of the white area of the portfolio. I want it to never change size like that, but rather stay just like an image, never changing size, only getting closer to the edges of the screen as to try and stay there. If it gets to the edge of the screen and cant adjust any farther without changing the text size, it should just stop changing and allow itself to go offscreen. If you have any explanations on how to do this short of making the text into an image, you can stop reading here, but if you want, you can continue reading for the code explanation. Its not a very clean code, so Ill try my best to make it easy to understand. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Images By Jan - Template</title>
<link href="style.css" rel="stylesheet"
type="text/css">
<style type="text/css">
.text { font-family: Bitstream Vera Serif;
font-size: medium;
line-height: normal;
color: rgb(0, 0, 0);
font-weight: normal;
font-style: normal;
text-align: left;
}
</style>
</head>
Basic setup of the page Code: <body style="background-image: url(images/background1.jpg);">
<div align="left">
<table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 140px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 140px;">
<td style="width: 30%;"></td>
<td style="width: 520px;">
<img style="position: relative; left: 2px; top: 0px;"
src="images/layout/logo.png"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This is the first table. It holds the logo at the top of the screen. To keep the logo centered, there are 3 cells to the table. The left and right ones keep 30% of the distance of the edges of the window and the logo between them. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 40px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 110px;" about.blank=""><img
style="border: 0px solid ; width: 110px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/about.png">
</td>
<td style="width: 100px;"><a href="about.blank"><img
style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/gallery.png"></a>
</td>
<td style="width: 100px;"><img
style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/buttons_middle.png">
</td>
<td style="width: 94px;"><a href="about.blank"><img
style="border: 0px solid ; width: 94px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/bio.png"></a>
</td>
<td style="width: 116px;"><a href="about.blank"><img
style="border: 0px solid ; width: 116px; height: 40px; z-index: 3; position: relative; left: 0px;"
src="images/layout/contact.png">
</a></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This is the second table. It holds the links bar. It works the same as the logo, but with 7 cells instead. (30% on left, "About" button, "Gallery" button, blank spot, "Bio" button, "Contact" button) Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 1px;">
<td style="width: 30%;"></td>
<td style="width: 532px;">
<img
style="width: 500px; height: 1px; z-index: 4; position: relative; left: 0px; top: -6px;"
src="images/layout/black_line.png"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This puts a small black line under the link bar. Just for style. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 260px;" about.blank=""><img
style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/white_left.png">
</td>
<td style="width: 260px;"><a href="about.blank"><img
style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/white_right.png"></a>
</td>
<td style="width: 30%;">
</td>
</tr>
</tbody>
</table>
This table holds the main area of the white part of the page. I have no idea why the '" about.blank=""' is there. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 100px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 260px;" about.blank=""><img
style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/bottom_left.png">
</td>
<td style="width: 260px;"><a href="about.blank"><img
style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/bottom_right.png"></a>
</td>
<td style="width: 30%;">
</td>
</tr>
</tbody>
</table>
The bottom part of the white area. Code: <br>
<div
style="position: relative; left: 0px; width: 100%; top: -881px; height: 851px; z-index: 5;">
<table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 800px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 800px;">
<td style="width: 30%;"></td>
<td style="width: 480px; position: relative; left: 30%;">
Jan
is one best known
portrait photographers in the
northern virginia area been
a professional photographer since
1976 for 30 years her
popular style of portraiture
has beautified numerous homes
offices she works extensivley
with business professionals families
children and pets.<br>
<br>
<br>
She is known for investing time with her
clients to understand their personal situation and their individual
style. She then structures the session to capture them in a
way that reflects their true self. This includes the use of
indoor and outdoor settings, formal and informal environments, and many
studio related props. She is gifted at bringing out the
unique inner beauty and personality of her client and capturing it for
all to enjoy.<br>
<br>
In her 30 year career Jan has seen the
technology change significantly and she continues to invest a great
deal of time and energy in being a leader in technology and photo
trends. It is important to remain abreast of how to combine
the latest technology with artistic mastery to create a photograph
people will want to look at for years to come.<br>
<br>
Jan's sensitive and unique style has won
her many awards and loyal clients. In addition to being a
talented photographer, she uses her profits and talents to support
several charities including:<br>
- Loudoun Symphony<br>
- Operation Smile<br>
- Time to Fly<br>
- and El Hogar Orphanage Hondouras<br>
According to her daughter who herself is a succsessful business owner,
"My mother sets a shining example for the business community in her
ethical business practices, commitment to quality products and service,
combined with a strong belief in suppoting the community through
charity.
</td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This holds the text. 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 I have made a layout for guild in an online game i play im new to html because im 14 so im not very good. The text at the top i want as one blog area but i want a second blog area underneath thats under a spaer here is the code i used for the first blog area <div style="position:absolute;left:450;top:330;width:375;height:304;overflow:auto"> But when i use the same code to make a second area but change the pixels to place it elsewere it just keeps messing up please could someone help me with this i need it soon Ok im pulling my hair out, im trying to make a small text area scrollbox. How od I change the font face, color and background color? Thank you, this is what I have so far please help. Quote: <html> <head> <title>Page title</title> </head> <body> <textarea rows="3" cols="10"> </textarea> </body> </html> Hey all, I'm not sure if this goes here, but I believe my question is a combination of both HTML and perl (cgi script). I have a website with multiple forms, one being a text area. The user is going to copy/paste test from a file into that text area. The thing is, it has to keep the formatting, so whatever the user typed in the text area is EXACTLY what gets sent through the email. I have worked around this and when using the unix's mail client, i sent it as a content-type: text/enriched. this kept the formatting of the text area and still allowed me to bold some things on the email. What I WANT to do, is send it using Content-type: text/html but still keep the formatting in the text area. Hope this makes sense, thanks. Ok, I don't have a way to show you how it's not working, but I would like to put text boxes under each comment picture on my comments page (much like you see on comment sites for MySpace and other networking sites), where the user may copy and paste the code into their own pages and use the images I provide. I found out how to do a basic 'form' with the name being "blank" and the value being the link to my desired image in my FTP, with the "ftp://ftp." taken out and replaced with "http://". So far, all attempts have been futile, and I'm not sure just what I'm doing right or wrong anymore...can anyone help me out? Please note that I'm vision impaired, and it may be somthing as small as me not seeing a particular tag or something, but I doubt it, as I've used my screen reader to read th ecode for me both when inputting it and reading it. I also note that my posts are in larger font so I can read them easier, I'm not telling anyone to do this, only asking, to please reply in size 3-4 for me please...and th kindly Here is an example of what I've done, which didn't work: <form> <input type="text" name="blank" value="<center><a href="http://silverwolfden.com"><img src="http://silverwolfden.com/images/comments/compliments/great_pic/great_pic_10_1_sw.gif" alt="Silver Wolf Den" border="0"></a><br><a href="http://www.silverwolfden.com" maxlength=30 maxheight= 5></a></center>"> </form> If you'd like to see my website (even though there's no way to see what the problem is I noticed ppl were asking to have ppl post the sites they work on it's http://www.silverwolfden.com Hi, i have the following text <td><span (some style stuff) ><a href="http://www.mysite.co.uk">We are a company in the UK that blah blah blah <br /> Our website is great blah blah </a> </span> </td> This is sitting in a table, i'd like the area where the text is located to be hyperlinked (e.g if you go anywhere inside this table cell, the mouse turns to a link) to 'www.mysite.co.uk' etc., not just the text itself.. how can i do this? Thanks P&P i am encountering problem when im inserting "%d" charecters in a text area and click submit button... when i insert those two characters individually it is working... but when i insert those two characters together there the browser is giving following error.... Quote: Your browser sent a request that this server could not understand. Is there a way to put text in a type of fixed width and height area? If I make a table that is 100 x 10px and type inside it, if there is too much text it will stretch the table until all the text shows inside. I want it to just cut off everything that is bigger than the demensions specified. Hello Everyone, I know it's been forever since I made a post, but I ran into something I can't figure out on my own and I am hoping that someone here might be able to give me a hand. I recently spoke with a potential client that wants to copy a feature on another website: http://batchgeo.com/ as you can see, on batchgeo.com the end user can paste data from excel into the textarea field, then when the user clicks out of the textarea, it formats the data to look like it is in a table. Does anyone know how they are doing this? Thanks in advance for any help. -A How I can set the scrool bar so that the vertical bar will show? When the typed text exceeds the horizontal space area, cursor will be moved into next line without hitting the Enter key. 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) Is it possible to get the initial value of a text area to be in any tags (like the italics tag for example)? Hi I have a php form on the contact section of my website. It has a Name, Email and Message Box My Problem is in the message box i have made it quite large so they can type in what they need. But the blinking line to show where the start of the text is is in the centre of the box. How can I align this to the top left? Many Thanks Hi, I have hidden text areas which leave spaces in the middle of HTML. I want to remove them. Can anyone let me know how could I do it? Thanks in advance. I'm using a jquery plugin that creates a grid view using a table. Inside the cells i have text areas that i'm manually sizing using the rows attribute, to fill the td. It's not working very cleanly though. Does anyone know of a way to get text areas to automatically size themselves to a containing td? thanks, max hello all, I am facing a wiered pbm on text area resizing in chrome 2 and safari 4. I have on textarea which gets enabled/focus upon completion of one method (init()) . But after successful execution of init() method that text area doesnt enable user to type UNTIL user resizes the text area. I have put a css to disable the resizing of text area with resize:none style. but still the text area on chrome 2 and safari 4 isnt getting snabled/focus after init() method. Any one plz help me to solve this , will be very thank ful to him. I have even tried few options like increase the size of text area but didnt wrk, What worked is if while defining text area if I put default value , then only it focus the text area afyer init() method. But this options clashes with my requirment thanks Ani Hi, this seems simple to me but i cant do it! the buttons do work but when i combine them on the same text area they dont work! heres what i have put together so far, Select all form: <form name="select_all"> <textarea name="text_area" rows="2" cols="80">TEXT TEXT TEXT TEXT</a> </textarea><br /> <input type="button" value="select all" onClick="javascript:this.form.text_area.focus();this.form.text_area.select();"> </form><br /> Copy Text area: <textarea cols=85 rows=20 id='testText'>TEXT TEXT TEXT TEXT</textarea><br> <button onclick='copyToClipboard(document.getElementById("testText").value);'>Copy To Clipboard</button> Copy javascript: <script type='text/javascript'> function copyToClipboard(s) { if( window.clipboardData && clipboardData.setData ) { clipboardData.setData("Text", s); } else { // You have to sign the code to enable this or allow the action in about:config by changing user_pref("signed.applets.codebase_principal_support", true); netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return; // create a transferable var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable); if (!trans) return; // specify the data we wish to handle. Plaintext in this case. trans.addDataFlavor('text/unicode'); // To get the data from the transferable we need two new objects var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } </script> Any sugestions? HI Im making a site at the mo and im looking to keep the menu and a picture stay in the same position constantly. So when then user moves the scoll wheel only the text are will scroll. I dont want there to be any border or scroll bars around the text, so the only visable scroll bar will be the browsers... any ideas? |
|||||||