|
HTML - Preview Code
example_code.html
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example Code</title>
<link rel="stylesheet" href="example_code_styles.css" type="text/css" />
<script type="text/javascript">
function PreviewCode()
{
document.getElementById("output_view").innerHTML=
document.getElementById("input_view").value;
}
// Set desired tab- defaults to four space softtab
var tab = " ";
function checkTab(evt)
{
var t = evt.target;
var ss = t.selectionStart;
var se = t.selectionEnd;
// Tab key - insert tab expansion
if (evt.keyCode == 9)
{
evt.preventDefault();
// Special case of multi line selection
if (ss != se && t.value.slice(ss,se).indexOf("\n") != -1)
{
// In case selection was not of entire lines (e.g. selection begins in the middle of a line)
// we ought to tab at the beginning as well as at the start of every following line.
var pre = t.value.slice(0,ss);
var sel = t.value.slice(ss,se).replace(/\n/g,"\n"+tab);
var post = t.value.slice(se,t.value.length);
t.value = pre.concat(tab).concat(sel).concat(post);
t.selectionStart = ss + tab.length;
t.selectionEnd = se + tab.length;
}
// "Normal" case (no selection or selection on one line only)
else
{
t.value = t.value.slice(0,ss).concat(tab).concat(t.value.slice(ss,t.value.length));
if (ss == se)
{
t.selectionStart = t.selectionEnd = ss + tab.length;
}
else
{
t.selectionStart = ss + tab.length;
t.selectionEnd = se + tab.length;
}
}
}
// Backspace key - delete preceding tab expansion, if exists
else if (evt.keyCode==8 && t.value.slice(ss - 4,ss) == tab)
{
evt.preventDefault();
t.value = t.value.slice(0,ss - 4).concat(t.value.slice(ss,t.value.length));
t.selectionStart = t.selectionEnd = ss - tab.length;
}
// Delete key - delete following tab expansion, if exists
else if (evt.keyCode==46 && t.value.slice(se,se + 4) == tab)
{
evt.preventDefault();
t.value = t.value.slice(0,ss).concat(t.value.slice(ss + 4,t.value.length));
t.selectionStart = t.selectionEnd = ss;
}
// Left/right arrow keys - move across the tab in one go
else if (evt.keyCode == 37 && t.value.slice(ss - 4,ss) == tab)
{
evt.preventDefault();
t.selectionStart = t.selectionEnd = ss - 4;
}
else if (evt.keyCode == 39 && t.value.slice(ss,ss + 4) == tab)
{
evt.preventDefault();
t.selectionStart = t.selectionEnd = ss + 4;
}
}
</script>
</head>
<body>
<table class="column">
<tr>
<td class="header">
Input View
</td>
</tr>
<tr id="input_view_container">
<td>
<textarea
spellcheck="false"
onkeydown="return checkTab(event);"
name="input_view"
id="input_view"
wrap="hard"></textarea>
</td>
</tr>
<tr>
<td id="button_container">
<input type="button"
value="Preview Code"
onClick="PreviewCode()"
id="button" />
</td>
</tr>
</table>
<table class="column" id="output_column">
<tr>
<td class="header">
Output View
</td>
</tr>
<tr id="output_view_container">
<td>
<div id="output_view">
</div>
</td>
</tr>
</table>
</body>
</html>
example_code_styles.css HTML Code: html
{
width:100%;
height:100%;
}
body
{
margin:0px;
width:100%;
height:100%;
}
td
{
padding:0px;
}
.column
{
width:50%;
float:left;
border-collapse:collapse;
width:50%;
height:100%;
background-color:rgb(217,217,217);
overflow:hidden;
}
.header
{
font-size:18pt;
border-bottom:1px solid black;
height:30px;
}
#input_view_container
{
text-align:center;
height:100%;
}
#output_view_container
{
height:100%;
}
#output_view
{
height:100%;
}
#input_view
{
width:95%;
height:95%;
resize:none;
}
#output_column
{
border-collapse:collapse;
border-left:1px solid black;
}
#button_container
{
text-align:center;
height:1em;
padding-bottom:10px;
}
#button
{
width:95%;
}
The Javascript I found at: http://ajaxian.com/archives/handling-tabs-in-textareas First of all, this code could probably be cleaned up a lot, as I just wrote it. Don't worry about that, unless you have lots of extra time on your hands. But, my question is, how can I convert this into only using divs. The idea is, I have a fixed size header and footer, on the left, and a fixed size header on the right. I want the middle to fill the remaining space on the left, and the bottom to fill the remaining space on the right. I do not want to use Javascript for the layout of the page, as I will have alternative code for the user without Javascript. Any ideas? Also, feel free to copy this code for your own purposes. When the code is complete, I will move the code over to the "Peddlers Village" or wherever it needs to be. Similar TutorialsHi guys, pretty new to html coding and stuff. was wondering is it even possible for html to say have a browse button and upon click the image file directly shows the picture in a picture box above or somewhere on the same page ? After hours of figuring out position absolute and position relative code and putting it in a nice div section, I got what I wanted. I previewed my page in my web browser (IE8). I was trying to overlay text on a graphic. It looked perfect. Then I uploaded it to my server and went to my website (again in IE8). None of the words were properly lined up. They were too high and too far to the right. Does anyone know why this would be? I ended up just putting my old pages back up.... I thought some screenshots would be helpful: The first one is how it looked from my harddrive; the second one is uploaded to my server: Hey everyone - can anyone help me to even get started on how to do the following: When i'm searching in google for a website called 4xp.com you can see that on google there is website name+description and under it there is some sort of a list. I'm attaching a file here with an image that will show the result. My question is: Can i do it in HTML, if yes then how? If not - how can i do it?! Thanks, Igal Ok so i have the hover box working i see the pictures I see the text. However I cant figure out how to change the font style please help.
HTML Code: <html>
<head>
<title>MARK-10 Force Gauge Series BG</title>
<link rel=stylesheet href="../../stylesheet2004.css" type="text/css">
<script src="../../jquery.js" type="text/javascript"></script>
<script src="../../main.js" type="text/javascript"></script>
<style type="text/css">
<!--
p{
clear:both;
margin:0;
padding:.5em 0;
font:Arial, Helvetica, sans-serif;
}
pre{
display:compact;
font: 100%, Arial, Helvetica, sans-serif, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li2{
margin:0;
padding:0;
}
li2{
list-style:none;
float:bottom;
display:inline;
margin-right:10px;
font-family:"Arial Black", Gadget, sans-serif;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:inline-table;
color:#fff;
}
title{
font:Arial, Helvetica, sans-serif;
}
-->
</style></head>
<td width="8" class="divid" id="spacer"> </td>
<td width="671" id="content_table">
<h1><strong>QUICK-CHANGE GRIP ADAPTERS</strong></h1>
<p>These unique adapters mount between a force gauge loading shaft and a grip, providing several useful benefits:</p>
<ol>
<li>Simply and quickly change grips, ideal for laboratory and other environments with multiple test applications. </li>
<li>Prevent grip rotation about the loading shaft, eliminating the need to manually adjust grips. </li>
<li>Align grips with respect to the force gauge, ensuring that samples are tested in a consistent manner.</li>
</ol>
<p>Models AC1033-1 and AC1033-2 include all the attachments and hardware necessary to mount one grip to a force gauge loading shaft. Attachments for grips only are also available. </p>
<p><strong style="color: #F00">Note:</strong> These attachments are compatible only with Mark-10 Series 5 digital force gauges.</p>
<h2> </h2>
<table width="658" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="38%"><img src="../accessories/quick-change-3-closeup.jpg" width="250" height="250"></td>
<td width="62%"><p class="menuheader" style="font-weight: bold; color: #0E4AB1;">Photo Gallery (Mouse Over Pictures)</p>
<ul>
<li2><a href="../accessories/quick-change-3lg.jpg" class="preview" title="Shown mounted between a Series 5 force gauge and <br>
a G1021 curved padded attachment." ><img src="../accessories/quick-change-3sm.jpg" alt="gallery thumbnail" /></a></li2>
<li2><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li2>
<li2><a href="3.jpg" class="preview"><img src="3s.jpg" alt="gallery thumbnail" /></a></li2>
<li2><a href="4.jpg" class="preview" title="Lake and a mountain"><img src="4s.jpg" alt="gallery thumbnail" /></a></li2>
</ul></td>
</tr>
<tr>
<td height="195" colspan="2"><p><img src="../../images/hd-ordering.gif" width="280" height="15"></p>
<hr size="1">
<table width="658" >
<tr>
<td width="82" class="tableheader1">Model No.</td>
<td width="480" class="tableheader1">Description </td>
<td width="80" class="tableheader1">US Price</td>
</tr>
<tr>
<td class="model_c">AC1033-1</td>
<td class="data_c">Quick-change adapter, complete kit, #10-32</td>
<td class="price_c">$125.00</td>
</tr>
<tr>
<td class="model_c">AC1033-2</td>
<td class="data_c">Quick-change adapter, complete kit, 5/16-18</td>
<td class="price_c">$125.00</td>
</tr>
<tr>
<td class="model_c">AC1034-1</td>
<td class="data_c">Quick-change adapter, grip attachments only, #10-32</td>
<td class="price_c">$75.00</td>
</tr>
<tr>
<td class="model_c">AC1034-2</td>
<td class="data_c">Quick-change adapter, grip attachments only, 5/16-18</td>
<td class="price_c">$75.00</td>
</tr>
</table></td>
</tr>
</table>
<p>
<p><br>
</p></td>
</tr>
</table>
<table border="0" width="98%" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br><br>
<script language="javascript" src="../../bottomnav.js" type="text/javascript"></script>
<!-- Start SuperStats code version 2.0f. Do not alter this code!
http://www.superstats.com -->
<script language="JavaScript">
var code = " ";
</script>
<script src="http://code.superstats.com/code?u=bfridman">
</script><script language="JavaScript">
document.write(code);
</script><noscript>
<a
href="http://stats.superstats.com/c.cgi?u=bfridman"
target="_top"><img
src="http://stats.superstats.com/b.cgi?u=bfridman&z=1"
border=0></a></noscript>
<!-- End SuperStats tracking code. -->
</body>
</html>
First off I am new to web design, so please take that into consideration. This question is hard for me to word, so here I go.. I apologize in advance. I would like to display a short description + link to content / articles that are on other pages of my website. For example: like on nypost.com - How on the main index page they have very short blurbs about all kinds of articles, then when you click on them they go to the full size article on another page. This is obviously all automatically generated onto the main index page. How can I accomplish this? *Overall goal* I would like to write articles, blog posts, ect.. and have them automatically show up on my main index page? I hope this makes sense.. It has been hard for me to search for an answer, because I don't think I am using the right term, or wording it incorrectly. Thanks! Kyle Is there a way to have an RSS Feed Preview automatically display on a web page without using iFrame? Thank you. Eckersen So I created an html file in text edit and when I try to preview it in Safari or Firefox, they both just show the html code. This is the code, simple right? <html> <body> <h1> Carly Krysak</h1> <p>Marketing Director</p> <h2>Frank's Auto Supermarket</h2> <p>P: 724.430.2000</p> <p>F: 724.438.5990</p> <a href="http://tiny.cc/FbWeSpeakCar">Facebook</a> <a href="www.autosupermarket.com">Website</a> <a href="www.GrindingGearsBlog.com">Blog</a> </body> </html> As long as it's saved as an html file and being opened in a browser it should show right? Help please. Hi EveryBody, I want to add a preview of html page feature in my project. I had created registration form and I need when user click submit button,user should get a preview of registration form after that further operation will b performed. Guys just tell me how can i achieved this. Any clue or sample code so i can learn it and implement in my project. HI, Can anybody recommend a gadget for Previewing / Thumbnailing HTML templates on my hard drive. I have lots of index.html pages in different folders and I'm looking for a way to flick through them, rather than having to go in and open the files individually. I am working on an index page with menu for a friend and originally did the page an menu separately....I was able to get them to work together but when i do the In-Dreamweaver preview does not work...This is very important because she will need the preview to make her changes... Everything looks fine upon viewing in browser but no preview.... I think it probably has something to do with me using two different body tages with two different csses....Can somebody take a look and see if they can find my problem? Any help would be greatly appreciated! You can view an online version at: http://www.firstpresgreenville.org/NEWFPATEST/menu.html Hello, I am a student and working on a simple first project. All I'm doing right now is writing my code in text edit, saving it as "test.html", and dragging and dropping the file onto Safari/Firefox to view my code. Everything works when I'm at my college's computer lab, but when I'm on my own mac notebook, the files load in the browser as my code. I've tried a variety of samples and checked my preferences, but I can't figure out what I'm doing wrong. Sample code I'm using - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Simple Link Example 2</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Creating Relative Reference Links</H> <HR> <P>Open <A HREF="practice1.html">Practice 1</A>.</P> <P> Open <A HREF="practice2.html">Practice 2</A>.</P> <P>Open <A HREF="practice3.html" TARGET="_blank"> Practice 3</A> in a new window.</P> </BODY> </HTML> Please help! I'm trying to wrap up an assignment and have been banging my head against the wall all night. Thanks! cordelia I was curious to find out, where can i find a cool looking shoutbox code where i can put on my message forum? Looking for some neat, and cozy with some advance options. Meaning, i would like to change the colors to match with my forum and stuff. Thanks. Hello! I have a blog on blogger and i want to make a c++ tutorial.. But every time i type "<iostream>" on post, when i see it, it is only "iostream". How can i make a code like the "[code]" from BBcode to cancel the compiling from HTML? Thanx! 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. I want to use the code on this website: http://geekfile.googlepages.com/flvplay.... I have a video that i converted to flv on my computer...what do I do? Please help...I dont know where I put my information in this code Hello, my first posting I have uploaded a script and all is well, except this! On one web page is a word "Select" when clicked on it should open a list Yet it is dead, when the mouse is over is it reads: javascript:; I used :Inspect Element with Firebug" to locate the "Select" corresponding code HTML Code: <tr class="c1">
<td width="150" align="right"></td>
<td class="contentfont" colspan="2"><span id="main_category_display"><?=$main_category_display;?></span>
[ <a href="javascript:;" onClick="select_category(document.getElementById('category_id').value, 'main_category_field', 'main_', false, true, 'wanted');"><?=GMSG_SELECT;?></a> ]</td>
</tr>
your help greatly appreciated Hi im rich very first post but might be a good question. im looking for a code that when you load the page the exclamation windo pops up with the message. i made one for no right mouse clicks. i need one made to when my page laods they will see the message. what kind of working is required to insert image while working with html ? The last paragraph on my code shows up as bold letters. Can someone please tell me why? here are my codes HTML Code: <html>
<head>
<title>Top ten NBA player of all time</title>
<style type="text/css">
h1 {font-size: 30; font-family: arial;}
h2 {font-size: 12; font-family: arial;}
h3 {font-size: 22; font-family: arial;}
h4 {font-size: 16; font-family: arial;}
p {font-size: 14; font-family: arial;}
</style>
</head>
<body>
<h1>This is a list of the top ten NBA players of all time</h1>
<h2> Written by Luke Ritchie</h2>
<br/>
<br/>
<br/>
<h3>The NBA</h3>
<p>The NBA has had millions of players in it long, rich history. <br/>
The NBA started in 1946 as the BAA (Basketball Association of American),<br/>
then merged with the NBL (National Basketball League) and became<br/>
known as the NBA in 1950. Today, I will be listing ten players, who i <br/>
think are the greatest ever.</p>
<hr />
<h3>10. Oscar Robertson</h3>
<img src="http://sportige.com/wp-content/uploads/2010/02/Oscar-Robertson.jpg" width="400" height="400" alt="Oscar Robertson" title="Oscar Robertson" />
<p>Oscar Robertson. His nickname was "The Big O", and he Played for the Cincinnati Royals and the Milwaukee Bucks. <br/>
He was the only player ever to average a triple-doule over the course of a season. <br/>
He played piont guard, and was named to 12 All-Star teams. Oscar was the the key component on the Bucks in the 1970-1971, <br/>
and lead them to win there only NBA title. Robertson was inducted into the <br/>
Naismith Memorial Basketball Hall of Fame in 1980, and was voted one of the 50 Greatest <br/>
Players in NBA History in 1996. Though All of his accomplishments came with plenty strugle, <br/>
His playing career, especially during high school and college, was filled with <br/
racism and hatred toward him, and his fellow black players. Both numbers he <br/>
wore, 14 on the Sacramento Kings, and 1 on the Milwaukee Bucks, were retired. <br/>
He will live forever in the basketball Hall Of Fame. </p><br/>
<hr />
<h3>9. Shaquille O'Neal</h3>
<img src="http://www.clap.name/images/Shaq4.jpg" width="275" height="400" alt="shaquille o'neal" title="shaquille o'neal" />
<p>In his prime, Shaq may have been the best big man in the history of the league. <br/>
There wasnt a person in the league that could stop him in his prime, which was in the early 2000s. <br/>
He won 3 championships with the lakers and Kobe Bryant, despite Kobe and Shaqille butting heads. <br/>
Then went on to win another championship in Miami with Dwayne Wade. Shaqs defense may have been <br/>
equal to his offence, he was an all-around great player, and will undoubtedly end up in the <br/>
Hall Of Fame in his first year of eligibility.</p><br/>
<hr />
<h3>8. Bill Russell<h3>
<img src="http://www.achievement.org/achievers/rus0/photos/rus0-013a.gif" width="350" height="400" alt="Bill Russell" title="Bill Russell" />
<p>Bill Russell is the greatest winner ever. 11 championships in 13 seasons, its a record that will <br/>
likely never be beaten. Most people say championships are the most imporntant thing when judging greatness, <br/>
so it could be argued that Russell should be number one, but the era he played in wasnt nearly as <br/>
competitive as todays game. Bill is also one of the greatest defenders of all time, blocks <br/>
weren't recorded in his time, but he probably would have been at the top of the record books <br/>
if they did. He was inducted into the Hall Of fame in 1975.</p><br/>
<hr />
<h3>7. Tim Duncan</h3>
<p>T</p>
</body>
</html>
|
|||||||