Nov 19 2008

Scrollable, non-editable text box

Category: Web Development — cindy @ 1:55 pm

I think I just spent like 1.5 – 2 hours of my (work) time, figuring out how to make a scrollable, non-editable text box that displays code. If you look at my previous post, I had black boxes that display a single line of code in each. I had trouble displaying multiple lines of code on here. At one point, I would get it to scroll but it was editable and then after that it would not scroll but it’d be non-editable. INSANE.

The code you want displayed probably looks like this “<html>” with the arrows. If you wanted to display this (instead of rendering it), you’d have to replace the less than sign with the character entity &lt; and the same with the greater than sign &gt;. If you did “<html>”, it’ll get rendered and that’s not what you want.

Here is some (sample) code that makes the scrollable, non-editable text box:

<pre class="code">  &lt;html&gt;    &lt;head&gt;      &lt;title&gt;Welcome to my site!&gt;&lt;/title&gt;    &lt;/head&gt;    &lt;body&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;      &lt;p&gt;HELLO WORLD&lt;/p&gt;    &lt;/body&gt;  &lt;/html&gt;</pre>

The results that will be displayed on your page:

<html>  <head>    <title>Welcome to my site!></title>  </head>  <body>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>    <p>HELLO WORLD</p>  </body></html>

To make it look nice, we’ll use some CSS. Feel free to use my code and modify to your own liking. My “code” class looks like this: 

.code {  width: 450px;  height: auto;  background-color: #000000;  color: #FFFFFF;  font-family: Georgia, "Times New Roman", Times, serif;    border: 1px dashed #FFFFFF;  padding: 6px 3px 6px 3px;  margin-left: 15px;  overflow: auto;}

So, today, I’ve learned two new things already… favicons and scrollable, non-editable text boxes displaying code!!! KEWLIEZ!

If you happen to understand my tutorial, I’d appreciate you dropping me a comment and letting me know. Thanks!

乾杯!
Cheers!

Nov 19 2008

Favicon

Category: Web Development — cindy @ 11:48 am

A favicon is short for “Favorites Icon.” Many professionally developed websites include a favicon. The original favicon was created by Microsoft for Internet Explorer. In IE, the favicon is shown in the navigation bar (where the URL is) and also in the Favorites menu. Even though other browsers like Mozilla Firefox have a “Bookmarks” menu instead of “Favorites”, the name “favicon” stuck.

As you would have assumed, the image is pretty simple since it would be difficult to create a fancy picture for something so small. Implementing the favicon is relatvely simple. The favicon image must be 16×16. Then, you would upload the file (.ico, .gif, .png all work) to the root directory of your website and it will automatically display for you. If you can’t see it right away, you’ll probably just have to clear your cache – that’s what I had to do. If you can’t upload to a root directory, you can type a block of code into your html page in the <head&> tag.

.ico image: 

<link rel="icon" href="/favicon.ico">

OR

<link rel="icon" href="/favicon.ico" type="image/x-icon">

.png image: 

<link rel="icon" href="/favicon.png" type="image/png">

.gif image: 

<link rel="icon" href="/favicon.gif" type="image/gif">

For favicons on Google Blogger (Blogspot), you’d have to insert this code just before the </head> tag:

"<link href='http://pathto.youricon.png' rel='icon' type='image/vnd.microsoft.icon'/>

Favicon.com is a great resource for favicons!

乾杯!
Cheers!