HTML Tutorial


 /help/HTML Help Forum   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Imitating multiple pages with only one, is it possible?
Post new topic   Reply to topic    HTML Help Forum -> HTML Form
View previous topic :: View next topic  
Author Message
MavidYaldares



Joined: 12 Sep 2009
Posts: 4

PostPosted: Sat Sep 12, 2009 1:42 pm     Imitating multiple pages with only one, is it possible? Reply with quote

PictureAlbumLink: http://s737.photobucket.com/albums/xx12/MavidYaldares/

PS: If you wish to skip a long story on the past few days of my life and move right away to the problem, simply skip the fenced text.
________________________________________________________________________

Hi, over the past weeks I have been trying to make a website and miraculously, without any coding skills or knowledge, I was able to get fairly far with almost no interruption or difficulties. That is, up till now.

When I tried to set up my site/codes on my free host (weebly), I encountered total chaos Exclamation . Pages wouldn’t link to each other, images laid scattered a bit everywhere, and I was left under the impression that all those long hours of work had been for nothing. Crying or Very sad

Luckily, a friend of mine, who was slightly more skill than me in the matter, decided to look over my site’s script and codes. After rearranging most of them and telling me to never try making a website again, he than explained to me what was the only thing that could be done if I was to ever be able to post my work. Unfortunately, he had no idea how to complete this last step although he was pretty sure that it could be done.

So, this is, in short, why I’m now seeking the help of whoever is willing to offer it.
________________________________________________________________________

I require an html code/script that would permit me to have multiple pages of information while only actually having one webpage.

What I mean by this is that, (because of various reasons), I can only have one page on my website, so I need to find a way to counter this.

I was proposed to turn my entire webpage into only one background image, within which my banner and buttons would be drawn. This background would also have a large, blank, box shaped area were one would assume text should be. (Please refer to the pictures)

What I need is a code that would do the following; when someone clicks on one of the intended buttons on the left side of the page, a text box would appear in the large box shaped area. This should be a scrolling text box, able to have pictures or videos from exterior sources embedded into it.

Also, another script would be required so that when the Webpage first loads, one is presented with the text that would be showed by the HOME button.

I already have a code for a scrolling text box;
<div style="width: 615px;height: 575px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">

What I would need is one that would place the box in the desired space/area, be activated when the proper button is pressed (just like with a page link), and be erased when another button is pressed, so that it leaves room for a new text box.

Hopefully, someone will be able to understand what I’m trying to say.

Attached to this message are 2 pictures; one is the actual background page, the other one is meant to clarify this mess of a request.
(http://i737.photobucket.com/albums/xx12/MavidYaldares/TheHelpMeTemplate.gif)
(http://i737.photobucket.com/albums/xx12/MavidYaldares/ParanoiaSecretPage.gif)


Thanks in advance Wink


(Hopefully I've posted this in the right cattegory Shocked )
sticks464



Joined: 31 Dec 2006
Posts: 2631

PostPosted: Sat Sep 12, 2009 3:36 pm     Reply with quote

You can actually do this a couple of ways. You can use php to call external pages into the content area or you can use something like jquery scrollto and Ajax which scrolls to different panes all set up on one page.
Demo here.
MavidYaldares



Joined: 12 Sep 2009
Posts: 4

PostPosted: Sun Sep 13, 2009 5:50 am     Reply with quote

That looks like exactly what I needed, a thousand thanks 'sticks464'. I'll probably spend quite some time trying to figure out how this works, but I'm sure it will be worth it.

Thanks again! Very Happy
sticks464



Joined: 31 Dec 2006
Posts: 2631

PostPosted: Sun Sep 13, 2009 6:15 am     Reply with quote

I do have a page already set up from an old site if you need it.
MavidYaldares



Joined: 12 Sep 2009
Posts: 4

PostPosted: Sun Sep 13, 2009 10:00 am     Reply with quote

I'll gladly take it then, it'll probably save me quite some time.
sticks464



Joined: 31 Dec 2006
Posts: 2631

PostPosted: Sun Sep 13, 2009 10:57 am     Reply with quote

Ok, here's the page
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<title>Title</title>
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />

<script type='text/javascript' src='js/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-1.4.0-min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-1.2.6-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>


</head>
<body>
<div id="outer">
<div id="header">
<h1 id="logo"><a href="index.php"><span></span>Logo here</a></h1>
</div>

<div id="wrapper">
<div id="navigation">
<dl id="menu">
   <dt>Navigation</dt>
   <dd><a href="#section1" title="">link #1</a></dd>
    <dd><a href="#section2" title="">link #2</a></dd>
   <dd><a href="#section3" title="">link #3</a></dd>
   <dd><a href="#section4" title="">link #4</a></dd>
    <dd><a href="#section5" title="">link #5</a></dd>
</dl>
</div>
                                             
<div id="content">
<div class="section">
<ul>
<li class="sub" id="section1">
<div class="new">
<p>Lorem ipsum dolor sit amet, ullamco laboris nisi cupidatat non proident. Quis nostrud exercitation sunt in culpa velit esse cillum dolore. Mollit anim id est laborum.</p>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ullamco laboris nisi eu fugiat nulla pariatur. Quis nostrud exercitation ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Mollit anim id est laborum.</p>
</div>
</li>                        
</ul>
</div>


<div class="section">
<ul>

<li class="sub" id="section2">
<div class="new">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
    <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
</li>
</ul>
</div>

<div class="section">
<ul>
<li class="sub" id="section3" >
<div class="new">
    <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div>
</li>                        
</ul>
</div>

<div class="section">
<ul>
<li class="sub" id="section4">
<div class="new">
<p>Quis nostrud exercitation duis aute irure dolor ullamco laboris nisi. Excepteur sint occaecat ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, qui officia deserunt sed do eiusmod tempor incididunt.</p>

<p>Consectetur adipisicing elit, eu fugiat nulla pariatur. Duis aute irure dolor velit esse cillum dolore mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut enim ad minim veniam.</p>

<p>Eu fugiat nulla pariatur. Velit esse cillum dolore cupidatat non proident, sed do eiusmod tempor incididunt. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation mollit anim id est laborum.</p>
</div>
</li>                        
</ul>
</div>

<div class="section">
<ul>
<li class="sub" id="section5">
<div class="new">
<p>Consectetur adipisicing elit, eu fugiat nulla pariatur. Duis aute irure dolor velit esse cillum dolore mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut enim ad minim veniam.</p>

<p>Eu fugiat nulla pariatur. Velit esse cillum dolore cupidatat non proident, sed do eiusmod tempor incididunt. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation mollit anim id est laborum.</p>
</div>
</li>
</ul>
</div>
</div>
</div>

<div id="footer">
<p class="middle">&copy; 2008 ~ All rights reserved</p>
</div>
</body>
</html>


and here's the stylesheet
Code:
* {
   margin:0;
   padding:0;
   border:none;
}
:focus {outline:none;}

body{
   font-family: Verdana, sans-serif;
   background-color: #000;
   font-size:1.2em;
}
ul, li, h3, h2, h1, p{
   padding:0;
   margin:0;
   list-style:none;
}
h2.title{
   color:#933;
   margin-bottom:10px;
   text-align:right;
}
.clear{
   clear:left;
}
html body{
   f\ont-size:small;/* for ie7*/
}
* html body{
   font-size:small;/* for ie5.+*/
   f\ont-size:small;/* for ie6*/
}

a {color: #f80;}
a:hover {color: #ddd;}

/*----- Layout -----*/
#outer {
   width:768px;
   margin:0 auto;
}
#wrapper {
   width:100%;
   margin:20px 0;
}

/*----- Header -----*/
#header {
   width:300px;
   height:190px;
   margin:0 auto;
   background:#000;
   color:#fff;
   padding-top:10px;
}
#logo, #logo span {
    width: 300px;
    height: 190px;
    background: url('../images/moray_logo.png') no-repeat;
}
#logo span { margin-bottom: -150px; }
/* non-repeated code */
h1 span {
    display: block;
    position: relative;
    z-index: 1;
}
/* IE5 Mac Hack \*/
h1 { overflow: hidden; }
/*/
h1 { text-indent: -100em; }
/* End Hack */


/*----- Navigation -----*/
#navigation, #content,.section{
   padding:0;
   margin:0;
   list-style:none;
}
#navigation{
   float:left;
   width:160px;
   height:460px;
   background:#000;
}
#navigation dl {
   width: 160px;
   margin: 0;
   padding: 0 0 10px 0;
   background: #000 url('../images/bottom.png') no-repeat bottom left;

}
#navigation dt {
   margin:0;
   padding: 10px;
   width:130px;
   font-size: 1.4em;
   font-weight:bold;
   color: #ddd; 
   border-bottom:1px solid #ddd;
   background: #000 url('../images/top.png') no-repeat top left;
}
#navigation dd {
   margin:0;
   padding:0;
   width:150px;
   color: inherit;
   font-size: 1em;
   border-bottom:1px solid #ddd;
   background: #47a;
}
#menu a, #menu a:visited {
   color:#fff;
   font-weight:bold;
   text-decoration:none;
   display:block;
   padding:5px 5px 5px 20px;
   background: #a00 url('../images/menuBg.gif') no-repeat;
}
#menu a:focus {outline:none;}
#menu a:hover {
   background: #f20 url('../images/current.gif') no-repeat;
   color:#ddd;
}

/*----- Panels -----*/
#content{
   overflow:hidden;
   width:608px;
   background:#000;
   color:#aaa;
   position:relative;
   height:460px;
   float:left;
   margin-bottom:10px;
}
.new h3{
   color:#fff;
   margin:10px 0 10px 10px;
}
.section{
   width:610px;
   position:relative;
}
.section .sub{
   position:relative;
   float:left;
   padding:9px 20px 42px 20px;
   width:567px;
   height:460px;
}
.new {
   width:98%;
   border-top:1px dotted #ddd;
   padding-top:20px;
   margin-top:20px;
}

.new p {
   padding:5px 10px;
   font-style:italic;
}
 
br {clear: left;}
p span {color:#FF0000;}


/*----- Footer -----*/
#footer {
   clear: both;
   border-top: 3px solid #000066;
   text-align: center;
   font-size: 50%;
   font-weight: bold;
   color: #aaa;
   padding-top:10px;
}
#footer .middle {margin-top:0; margin-bottom:5px;}


You will need the javascripts listed in the head section. You should be able to get them from the link I gave earlier.
MavidYaldares



Joined: 12 Sep 2009
Posts: 4

PostPosted: Mon Sep 14, 2009 3:48 am     Reply with quote

Thanks! With this, I should be ok. Very Happy
I really appreciate the time you took to help me.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum -> HTML Form All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
DARFUR
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial