|
HTML - Switch Content Without Refreshing Whole Page [was 'new Girl, Not Sure How To......']
Ello
I'm a complete newb so sorry if I'm posting in the wrong place guys. Could anybody out there help me make a field / box like the one on this site. http://www.laptopsdirect.co.uk/Acer_...62/version.asp Below the laptop is a large field, if you click things like "technical specification" etc, it changes only that field. Then if you press the back button it backs up to the last page, rather than the last configuration of the current page. Phew.. confusing myself now lol. Anyhoo, just want to know how I would make such a box, with tabs that change that box only? Thanx Sarah Similar TutorialsI found this script that I found very interesting and would probably be very helpful to me, but I have little idea on how to use it. Could someone break it down for me and explain how I can use it on my website? The code can be found here the 8th post down by Bill Posters. Thank you very much. I need an HTML code to refresh a certain page every few seconds for a specified time. Example: Refresh a page every 5 seconds for 15 minutes then it stops. Hi, I have converted an jsp page to an html page using a C# program. The whole purpose of this practice was to change the old boring look of our video wall page display. The page colors on the jsp page are green, yellow and red showing the status of the monitored data center resources. I extracted this info from the old jsp page and created a new HTML page with a totally new look but with the same colors. But the problem now is the HTML page does not refresh the colors accordingly. I don't know why. Every 5 minutes the C# program is scheduled to run and read the jsp page and creates a new file in HTML which is use as the new display. Please help me out any advise i can get, i have tried my best but now i'm seeking advise from other people. Thanks Eric Hello. I'm putting together my first website, and trying to learn HTML basics. One specific problem I'm having is getting an image hyperlink to refresh my web page, rather than opening a new browser tab/window. For example, the code I'm using is... <a href="http://mywebsite.com" target="_blank"><img src="http://mywebsite.com/image.jpg" border="0" alt="My website"></a> When a visiter clicks on the image, a new browser tab/window opens. I want the page to refresh, instead. Can someone provide me with a solution? Thank you. I've got a user interface written in html, with various parameters for iperf in various textboxes. When the submit button is pressed, I call a .php file which takes the parameters and passes them to a java programme which runs iperf. Using a form action pointing to the .php file, I can call the .php file and get the output (the data collected by iperf) to be printed to the screen, it just isn't in real time and refreshes the page completely. How would I redirect this output to a textbox on the original page? I was thinking about calling a javascript function upon submission of the form which would start an XMLHttprequest, but can't seem to get this to work... Current code which doesn't seem to do anything: Code: <head>
<script language="javascript" type="text/javascript">
function ajaxFunction()
{
var ajaxRequest
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return false
}
}
ajaxRequest.onreadystatechange = function()
{
if (ajaxRequest.readystate == 4)
{
this.iperfClientParameters.results.value = ajaxRequest.responseText;
}
};
ajaxRequest.open("GET","iperfRunningFile.php",true)
ajaxRequest.send(null);
}
</script>
</head>
<body>
<form name="iperfClientParameters" onSubmit="return ajaxFuntion()" method="get">
//form contents
</form>
</body>
Thanks in advance for any responses. Hi all, I hope I'm in the right place, I'm completely new to html and web related things but due to lack of funds have decided to try to make my own website in notepad with the help of a free template and some html and css for dummies books from the library. I currently have a gallery on my front page www.familyhistoryhelpers.co.uk and would like to change it to a slideshow. The code below is for a slideshow I have been attempting to put together with help of browsing forums and 'trial and error' editing. I have swapped out the images as the ones I will be using are still currently sitting on my desktop. My aim is to make the below slide show look kind of like the gallery on my front page - with the thumbnails underneath and maybe a small border around the whole thing. Any help at all would be very very greatly appreciated! Kind regards, Danika Grace <!DOCTYPE html> <html> <head> <title>JQuery Cycle Plugin</title> <style type="text/css"> #slideshow { left: 75px } #nav { width: 100%; height: 50px; margin: 25px; } #nav li { width: 60px; float: left; margin: 8px; list-style: none } #nav a { width: 65px; padding: 3px; display: block; border: 1px solid #ccc; } #nav a.activeSlide { background: #88f } #nav a:focus { outline: none; } #nav img { border: none; display: block } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script> <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script> <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script> <script type="text/javascript"> jQuery(function($){ $('#slideshow').before('<ul id="nav">').cycle({ fx: 'fade', speed: 1000, timeout: 5000, pager: '#nav', pagerAnchorBuilder: function(idx, slide){ return '<li><a href="#"><img src="' + slide.src + '" width="65" height="50" /></a></li>'; } }); $('#nav a').click(function(){ $('#slideshow').cycle('pause'); }); }); </script> </head> <body> <div id="main"> <div id="slideshow" class="pics"> <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" title="My Great Great Grandparents, John and Sarah, with my Great Grandfather, Leslie, and his sister, Margaret" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" title="Certified Copy of an 1895 Marriage Certificate" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" title="My Great Great Aunts and Uncles" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" title="Certified Copy of an 1882 Birth Certificate" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" title="My Great Great Grandparents, Fred and Carrie" width="600" height="340" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" title="An 1851 Census Report" width="600" height="340" /> </div> </div> </body> </html> I was wondering if there is a way to display a section of another webpage, such as a table, through a separate site. Obviously I could just copy the code from one of my pages to the other, but I would prefer if it would automatically take the code from one page and display on another? I hope I am making a bit of sense. Nick C. Rather than re-write this page and the css, I'd just like to fix what I'm working with, please. This page is not lining up correctly, as you can see from the attached image. All the text content should be to the right of the (left) red column and the red column is supposed to be the width of the gray bar above it. (The header is a separate piece of this page) Can you help me get the left red column to the correct width and all the text content to the right of the red column? thanks. Here's my code: Code: <table valign='top' align="right" cellpadding="0" width="100%" height="80%"> <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:100% height:80%> <table width="770" border="0" cellpadding="0" cellspacing="0" id="maintable" align="center"> <link href="custom.css" rel="stylesheet" type="text/css"> <tr><td id="menu" align="left"> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="index.php"><font color="#DDCEA2"><font face="Arial" size="2">Home</a></font><br> <img src="images/bullet.gif" alt="" width="10" height="10"><A href='index.php?command=signup_page'><font color="DDCEA2"><font face="Arial" size="2">Sign Up</font></A><br /> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="faq.html"><font color="DDCEA2"><font face="Arial" size="2">FAQ</a><br> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="legal.html"><font color="DDCEA2"><font face="Arial" size="2">Terms of Use</a><br><br><br><br><br><br><br><br> </tr> <form method="POST" action="index.php"> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='renew'> <input class='field' type='hidden' name='account_id' value='[account_id]'> <td colspan='2' class='pageTitle'><div class='hLine'><font face="Arial" color="#EE7600" size="3"> Choose a Transaction</font></div></tr></td> <tr><td class='fieldLabel' width="30%"><font face="Arial" color=#000000" size="3" Style="padding: 5px;"> <font face="Arial" color="#000000" size="2"> Transaction Type:</font></td> <td align="left"><font face="Arial" color="#EE7600" size="2">[account_type_panel]</font></tr> <tr> <tr><td> </td></tr> <tr><td align="left"> </td> <td align="left"><input name="submit" type='submit' class='button' value='Next' /> </td> </tr> </form> <tr height='30%' ><td colspan="2"><div class='hLine'> </div></td></tr> </table> Sorry, my title is unclear see if I can explain it better he ok when I click from any of the other pages to the menu page, the name and address (which is on every page in the same place) moves to the left slightly. the name and address stay in the same place when clicking to and from any of the other pages, its just the menu page with this hiccup. This happens both in IE and Firefox. Any ideas on how to correct this?? HTML of home page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <meta name="author" content="xxxxxxx"> <meta name="description" content="Kabasa Guest House and Restaurant - Online"> <meta name="copyright" content="2011"> <meta name="keywords" content="Kabasa Guest House and Restaurant, Places to stay in Kenya, Accomdation in Kenya"> <title>Kabasa Guest House and Restaurant</title> <link rel="stylesheet" type="text/css" href="styles6.css"> </head> <body> <ul id="navbar"> <li><a href="home.html">HOME</a></li> <li><a href="menu.html">MENU</a></li> <li><a href="room.html">ROOMS</a></li> <li><a href="rates.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1>Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxxx xxxxxxx xxxxxxxxx Tel: +00000000000 </pre> </div> </div> <br> <p class="center"> The Kabasa guest house and restaurant is situated just a<br> few metres from the worlds second largest fresh water<br> Lake Victoria. We welcome you to come and experience our<br> accommodation with excellent service at affordable rates.<br> </p> <br> <img src="Images/d4.jpg" class="center"/> <br> <div id="footer"> <p>Copyright 2011 © Kabasa Guest House and Restaurant. All rights reserved</p> </div> </body> </html> HTNL of the menu page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <meta name="author" content="xxxxxx"> <meta name="description" content="Kabasa Guest House and Restaurant - Online"> <meta name="copyright" content="2011"> <meta name="keywords" content="Kabasa Guest House and Restaurant, Places to stay in Kenya, Accomdation in Kenya"> <title>Kabasa Guest House and Restaurant</title> <link rel="stylesheet" type="text/css" href="styles6.css"> </head> <body> <ul id="navbar"> <li><a href="home.html">HOME</a></li> <li><a href="menu.html">MENU</a></li> <li><a href="room.html">ROOMS</a></li> <li><a href="rates.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1>Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxxxxx xxxxxxxx xxxxxxxxx Tel: +0000000000 </pre> </div> </div> <h2>Menu</h2> <div id="menucenter"><b>We offer a full continental buffet breakfast table service by order.</b> <b>We also offer room service.</b></div> <div id="menu"> <pre> <u>Full Breakfast</u> Our full breakfast gives you a choice of the following: Fruits : Pineapple, Watermelon, Sweet Banana, Pawpaw, Oranges Fresh Juice : Passion, Mango, ****tail Cereal : Weetabix or Corn flakes served with cold or warm milk Toast, sausages, eggs and bacon <u>Beverages</u> Drinking chocolate, Tea, Nescafe, Milo <u>Snacks</u> Sandwiches (by order), chips, sausages, beef rolls, samosas (chicken, beef and vegetables), meat pie, cakes. <u>Main meals/courses</u> Chicken Curry, Chicken Masala, chicken stew, butter chicken, boiled chicken, chicken biriani, chicken wet fry. All served with Rice, ugali, chapatti, pasta, spaghetti and vegetables with garnishing Beef Stroganoff, beef stew, beef curry, fried beef, boiled beef, beef masala Whole (stewed or fried) tilapia, Fish fillet in coconut source, Fresh (stewed Tilapia), Whole (masala) Tilapia All Served with rice, ugali, chapatti and vegetable garnishing <u>Soups</u> Vegetable cream, Tomato cream, French onion soup, Served with Crotons. Traditional Kenyan Vegetables served with Ugali, Rice, Mash Potatoe, Boiled Potatoes, Baked Potatoes and fried vegetable rice <u>Salads</u> Kachumbari, we also have a number of assorted fruits and vegetable salads. <u>Burgers</u> Cheese beef burgers, Egg beef burgers, Beef burgers <u>Choma Zone</u> T-bone steak (400gms), pork chops, barbeque chicken, prime fillet steak <u>Beers</u> Tusker, White Cap (Tusker Malt), Guinness, Smirnoff ice (black and red) <u>Juices</u> Soda, Alvaro, Novida, Mineral water, Passion, Avocado </pre> </div> <div id="footer"> <p>Copyright 2011 © Kabasa Guest House and Restaurant. All rights reserved</p> </div> </body> </html> CSS: Code: body {
margin:2% 4%;
font-family:'lucida grande',tahoma,helvetica,sans-serif;
font-size:11pt;
color:#006;
background:#ffc;
}
#navbar {
float:left;
width:12%;
margin:0;
padding:0;
font-size:20px;
list-style-type:none;
}
#navbar li {
margin-bottom:2px;
}
#navbar a {
display:block;
padding-left:8px;
background-color:#cff;
}
#navbar a:hover {
color:#000;
background-color:#fff;
}
#header {
margin-left:%;
}
h1 {
text-align:center;
margin-right: 10%;
}
#address {
width:182px;
padding:0 4px;
margin: auto;
font-family:arial,sans-serif;
font-size:10pt;
font-weight: bold;
background-color:#fff;
filter:alpha(opacity=75);
opacity: 0.75;
}
h2 {
clear:both;
margin-top:3%;
margin-left:%;
text-align:center;
}
h3 {
clear:both;
margin-top:3%;
margin-left:%;
text-align:center;
}
h6 {
margin: auto;
left:0;
right:0;
width: 655px;
font-weight: bold;
font-size: 10pt;
font-family: arial, sans-serif;
}
#rates {
padding:8px;
background-color:#fff;
filter:alpha(opacity=75);
opacity: 0.75;
}
#rates span {
text-decoration:underline;
font-weight:bolder;
}
#menu {
margin: auto;
left:0;
right:0;
width: 675px;
background-color:#fff;
filter:alpha(opacity=75);
opacity: 0.75;
}
#menucenter {
text-align: center;
}
p.center {
text-align: center;
}
img.center {
margin-left: auto;
margin-right: auto;
display: block;
}
#footer {
clear: both;
width: 100%;
font-family: Arial Unicode MS;
font-size: 8pt;
text-align: center;
}
Many thanks Jackie I'm trying to set up an affiliate popup for my buddies and each time someone clicks a certain link, there will be a popup, but each time you click the link the content on the popup is different. I was wondering if this is possible. At the bottom of each of my many pages I like to put a set of various buttons/links and I like to center them all, beginning with my email addy. I'm using the identical html on every page and so far, on every page it all has centered correctly. On the one I'm working on now, though, they are "left-justified." You can see it at http://www.sticksite.com/fishing/indexNEW.html at the bottom, directly below the horizontal line, and starting with my email addy. Can anyone please tell me why, on THIS page, that stuff will not center, when I did use the tag: <div style="text-align: center> which has worked on every other page so far? THANKS! (maybe fishing is not compatible with centering?) Problem solved. This can be deleted. I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please? Hiii experts, I am creating 2 HTML pages when click on 1st page hyperlink, we will go to 2nd page 2nd page contains an image. when clicking on image i want to go to 1st page with new content and want to remove privious content. also when 2nd page open 1st page is visible but when cliking on image , new content should be visible on 1st page. please help me its urgent!! I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html>
<head>
<title>Official Site of Premier Security Group, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centerContainer { margin: 0 auto; }
body
{
background-image:url(images/bkgd2.png)
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1200px;
}
#PSindex-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:69px;
}
#PSindex-02 {
position:absolute;
left:0px;
top:69px;
width:20px;
height:174px;
}
#PSindex-03 {
position:absolute;
left:20px;
top:69px;
width:760px;
height:174px;
}
#PSindex-04 {
position:absolute;
left:780px;
top:69px;
width:20px;
height:174px;
}
#PSindex-05 {
position:absolute;
left:0px;
top:243px;
width:800px;
height:13px;
}
#PSindex-06 {
position:absolute;
left:0px;
top:256px;
width:20px;
height:35px;
}
#PSindex-07 {
position:absolute;
left:20px;
top:256px;
width:126px;
height:35px;
}
#PSindex-08 {
position:absolute;
left:146px;
top:256px;
width:129px;
height:35px;
}
#PSindex-09 {
position:absolute;
left:275px;
top:256px;
width:125px;
height:35px;
}
#PSindex-10 {
position:absolute;
left:400px;
top:256px;
width:1px;
height:944px;
}
#PSindex-11 {
position:absolute;
left:401px;
top:256px;
width:123px;
height:35px;
}
#PSindex-12 {
position:absolute;
left:524px;
top:256px;
width:130px;
height:35px;
}
#PSindex-13 {
position:absolute;
left:654px;
top:256px;
width:126px;
height:35px;
}
#PSindex-14 {
position:absolute;
left:780px;
top:256px;
width:20px;
height:35px;
}
#PSindex-15 {
position:absolute;
left:0px;
top:291px;
width:400px;
height:909px;
}
#PSindex-16 {
position:absolute;
left:401px;
top:291px;
width:399px;
height:909px;
}
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div class="centerContainer">
<div>
<div id="Table_01">
<div id="PSindex-01">
<img src="images/PSindex_01.png" width="800" height="69" alt="">
</div>
<div id="PSindex-02">
<img src="images/PSindex_02.png" width="20" height="174" alt="">
</div>
<div id="PSindex-03">
<img src="images/PSindex_03.png" width="760" height="174" alt="">
</div>
<div id="PSindex-04">
<img src="images/PSindex_04.png" width="20" height="174" alt="">
</div>
<div id="PSindex-05">
<img src="images/PSindex_05.png" width="800" height="13" alt="">
</div>
<div id="PSindex-06">
<img src="images/PSindex_06.png" width="20" height="35" alt="">
</div>
<div id="PSindex-07">
<img src="images/PSindex_07.png" width="126" height="35" alt="">
</div>
<div id="PSindex-08">
<img src="images/PSindex_08.png" width="129" height="35" alt="">
</div>
<div id="PSindex-09">
<img src="images/PSindex_09.png" width="125" height="35" alt="">
</div>
<div id="PSindex-10">
<img src="images/PSindex_10.png" width="1" height="944" alt="">
</div>
<div id="PSindex-11">
<img src="images/PSindex_11.png" width="123" height="35" alt="">
</div>
<div id="PSindex-12">
<img src="images/PSindex_12.png" width="130" height="35" alt="">
</div>
<div id="PSindex-13">
<img src="images/PSindex_13.png" width="126" height="35" alt="">
</div>
<div id="PSindex-14">
<img src="images/PSindex_14.png" width="20" height="35" alt="">
</div>
<div id="PSindex-15">
<img src="images/PSindex_15.png" width="400" height="909" alt="">
</div>
<div id="PSindex-16">
<img src="images/PSindex_16.png" width="399" height="909" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
Hey there, I'm very new to HTML, but I can't figure out why the content area of my page is overlapping with my top frame. It's most obvious just to the right of the right angle formed by the place where the top and left frames each other. The website www.fourseasonssunrooms.ca. Any ideas as to how to move the content area down so this overlap does not occur?? I don't have the ability to add an anchor to the page, it's not mine, but I'd like to link to a specific area on the page. Is that possible without that page having some sort of anchor already on it? hello, everyone I know this is a pretty basic one on the account that it is currently everywhere on the internet now. But you know how you are on a page and you decide to click a link and the PAGE stays the same mean it doesn't reload but the content changes and loads... for example ... facebook... or http://diettogo.com/menu-nutrition/l...an-1600/week-4 when you click week one or week 2 the content changes but the entire layout doesn't reload... what is causing this.. how can I set my llinks up in this way.. is smooth and clean. |
|||||||