|
HTML - Display Content Preview? Help ?
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 Similar TutorialsHow do i display the text contents of a txt file in ip addresses box after i clicked the send button? here is my website http://ip2url.tk/ code: <html> <head> <title>IP TO URL Converter</title> </head> <body> <h1>IP TO URL Converter</h1> Please specify a log file:<br> <input type="file" name="datafile" size="40"> </p> <div> <input type="submit" value="Send"> </p> IP addresses:<br> <form method="post" action=""> <textarea name="comments" cols="40" rows="5"> </textarea><br> </form> </p> <button type="button">Convert</button> </p> URLs:<br> <form method="post" action=""> <textarea name="comments" cols="40" rows="5"> </textarea><br> </form> </div> </form> </body> </html> I have a lot of content on a page, and it is being added to every day. Because of the constant adding, the page becomes longer & longer. Instead of this happening, is there a script I could use that would make the content AUTOMATICALLY move to a new page when neccessary? Example: Page 1 can only have 30 tables. Someone adds 5 more tables to page one- CAUSING the older tables to be moved to another page. I can make the pages(page 1, page 2, page 3) beforehand, but is there a script that will let the content automatically go from page 1 to page 2 when page 1 is overflowing? Is the ANY way I could do this? Through PHP? or even Javascript? I'm having trouble making IE display the content the same in other browsers the same. Like google chrome and firefox. Do I have to use css for this. Here is my website address: http://www.con10th.com Hello Are there any valid HTML tags that you can embed in a page that do not display content on the page? I am looking to store data that a RSS feed can retrieve on a news page, but I don't want the content to display on the news page, only be pulled for the RSS feed. Paul 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. Hi 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: 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>
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 Is there a way to have an RSS Feed Preview automatically display on a web page without using iFrame? Thank you. Eckersen 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. 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. 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 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. Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Hi guyz, i have a query Mouse over the datagrid cell display tooltip or panel to display information but only using HTML and CSS not using javascript. can anyone help me. because im gonna use it on htmleditor on c# desktop application thax before Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. First I would like to know if there is a better way of doing this. <div></div> is the only way I know of doing it although others have told me they didn't even know it could be done with <div></div>. Second I would like to know if there's some way to control the speed at which the box scrolls. Third If the content is text then I want the scroll function to be vertical. There's other times I need the scroll to be horizontal. Here is the code: HTML Code: <div style="background-color: black; border-bottom-color: rgb(212, 47, 212); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(212, 47, 212); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(212, 47, 212); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(212, 47, 212); border-top-style: solid; border-top-width: 2px; font-size: 11px; height: 200px; overflow-x: auto; overflow-y: auto; width: 200px;"> <span style="color:#ffffff;">CONTENT HERE</span></div> This is what the code looks like when viewed in Chrome and Firefox. However when used in IE the content can often move through the boarders. Hi How do i resize the website that fits in to an iframe? Thanks mrdeleigh |
|||||||