How can I create a link box in html?

Question

Like how youtube has a box next to their videos, with the url to the video and the embed code. I want to create a box like that for my webpages on my site. So on each page I can include a url box, preferably where it automatically copies the url when someone clicks on it (or at least highlights the entire url the way it does in youtube's link box). Anybody know how to do this?

Basically I want to encourage my website visitors to share my pages with others. I know they can just go up and copy the url from the browser url window up top, but I also want to encourage them to do it this way as well.

Answer 1

The select box:



HTML:

Select Al l
Your Text Here

Added unnecessary spaces to keep YA from truncating the code, but this part had to be done separately:



onclick= "document .getElementById ('postemail') .select(); return false"



If using the Select All function in more than one text box on the same page, just change "onclick="document.getElementById('postemail')" to "onclick="document.getElementById('postemail2')" and change "<br /> <br /><br />How to put HTML code in a textarea or scroll box so it can be copied/pasted: <br /><br /> <br /><br />You MUST deactivate the HTML code by making it appear as text in whichever box you use. The code I show below WILL work as it's been tested. To have active code to be clickable inside the scroll box, you MUST use a div type scroll box and not one using the "textarea" tags. <br /><br /> <br /><br />Change all the opening tag symbols, "<", to the character entity, & lt ; (without spaces) as & lt ; (without spaces) = <. This will deactivate the HTML code in the textarea/scroll box, but allow users viewing the page to copy/paste the code. <br /><br /> <br /><br />Example: <br /><br /> <br /><br /><textarea style="background: transparent;" rows="8" cols="70"> & lt;img style="width: XXpx; width: YYpx; border: 0; src"pic link" alt="Text Description"> There is no closing tag for the image tag unless you are using an XHTML DocType then the image tag is closed with a space and a "/":



Example:



& lt;img style="width: XXpx; width: YYpx; border: 0; src"pic

link" alt="Text Description" /&' gt;



&' lt; without spaces = < and &' gt; without spaces = >



Ron

Answer 2

The key to finding out how others do it on their web pages is to look at the "page source," namely the HTML. From there you may need to recover more information.



For example, I went to this page: http://www.youtube.com/watch?v=azkTU_H93sU&feature=mpt%3Atop_stories



Then in my Firefox http client, I did View->Page Source. In all that mess, I wanted to quickly locate in the HTML markup where the URL form control was, so I had a FF add-on that helps web developers by showing me all the ID and CLASS attributes in the web document. I noticed and ID attribute value of "watch-url-field" near the URL textbox control you described. Within the Page Source window, I activated search/find with the text "watch-url-field" and it immediately went to lines 436-440 of YouTube's horribly unvalidated HTML source. These lines read as follows:

URL


value="http://www.youtube.com/watch?v=azkTU_H93sU"

onClick="javascript:document.urlForm.video_link.focus();document.urlForm.video_link.select();" onmousedown="yt.analytics.urchinTracker('/Events/VideoWatch/CopyPasteLinkFromMoreInfo');" readonly>

I have reformatted them somewhat.



So YouTube web developers created an HTML form which contains only one control, the text box specified by INPUT element. Notice that the INPUT element has EIGHT attributes:



1. name="video_link"

2. id="watch-url-field"

3. type="text"

4. class="email-video-url"

5. value="http://www.youtube.com/watch?v=azkTU_H93sU"

6. onClick="javascript:document.urlForm.video_link.focus();document.urlForm.video_link.select();"

7. onmousedown="yt.analytics.urchinTracker('/Events/VideoWatch/CopyPasteLinkFromMoreInfo');"

8. readonly



The IMPORTANT attribute here is the *value* attribute. This is the URL of the web page, and it was assigned to the value attribute using MOST LIKELY and onload event handler in Javascript, which you can do easily.



Put a SCRIPT element contained in the HEAD element of your web page, and define an onload event handler within it. In order to assign the 'value' attribute of the INPUT element, you will use the standard script function 'document.getElementById() call, with the argument being the value of the 'id' attribute of the INPUT element. In this page, the value is 'watch-url-field' (case sensitive!).



So here is your web page:

URL:

=====



This is untested code, but I believe it is correct. Note that the value is assigned the URL, which is Javascript should be the href property of the location object.



Also, the onload attribute is properly ONLY an attribute of the BODY element in the DOM. So after the page loads, the function initPage() is called, and your input element has its value assigned and should appear.



Also note that in strict HTML, an input can be disabled from the user changing it by using the 'disabled' attribute. You can organize the rest of your HTML from there.

Answer 3

It's not hard to read their HTML to see how they did it. It's just an with a bit of JavaScript to select the whole URL when you click it.

Answer 4

You mean just a box and that's it? You can use a table:

[your images here]

Change the color of the box, the width, the style of box, spacing, etc by changing the various values in the code.