including an external html file questions

renzema · Joined: 03 Sep 2009 Posts: 10

ok so to start off if I ask any dumb questions my apologizes. I have just started writing HTML code. I have done quite a bit of C++ but its been years and html is much different.

Well here is my question I have made a dynamic sidebar for my webpages so I can cut out all those blocky link buttons at the top of the page. So I created an external html file and wrote the code for the side bar, but I can't figure out how to get it into my webpage html files. I am sure its something minor but I can't seem to figure it out.

I have been able to get it on the page by using iframe but I really don't like iframe.

One of the really big things is I want it locked to the right side of the browser screen so if you scroll it stays there. Also it needs to float above everything else so it will open on top of the webpage and no disrupt the content.

I am sorry if this is a simple thing but I have spent 2 days reading everything I can on it and can't get it to work. I have tried it as a PHP file with include wouldn't for. I tried link didn't work. I know I could just include all the code on the pages but I am trying to learn how to use template correctly so as to make my pages as clean and SE friendly as possible.

Well thanks in advance, this will make my day if I get this dang side bar to work.

Thanks
J

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

A link to page where the code is or give us something to work with here without guessing would help immensely towards maybe solving your problem.

There are floating "menu" JavaScripts if that's what you want. Depending on the sidebar code, you could style it with something like this:

renzema · Joined: 03 Sep 2009 Posts: 10

I was guessing you would need to see the code. Not at home so I will upload the files when I get home I have the webpage up now but not the sidebar.

renzema · Joined: 03 Sep 2009 Posts: 10

So this is the code for the sidebar. Sorry that its not formatted well, but posting the code on here kind of messed it up.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Side Bar</title>

<style media="all" type="text/css">

body{
position:relative;
padding:0px;
font-size:100%;
}

h2{
color:#FFFFFF;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold;
}

h2 span{
font-size:105%;
font-weight:normal;
}

ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#FF6600;
width:177px;
}

li a{
width:100%;
}

li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

li a:hover{
color:#FFFFFF;
text-decoration:underline;
}

#sideBar{
position: absolute;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(../images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:200px;
}

</style>

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="side-bar.js"></script>

</head>

<body>

<div id="sideBar">

<a href="#" id="sideBarTab"><img src="slide-button.gif" alt="sideBar" /></a>

<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>

<ul>
<li><a href="../../Pages/index.html">Home</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>

</div>
</div>

</div>

</body>
</html>

renzema · Joined: 03 Sep 2009 Posts: 10

This is my care sheet page, it simple and I can figure out how to add it to the other pages. So the area I am replacing is what is in italics.
<head>
<meta name="keywords" content="Crested Geckos and Garygoyle Geckos Breeder" />
<meta name="description" content="Caledonian Exotic's, a gecko breeder located in Corvallis, Oregon" />
<META NAME="ROBOTS" CONTENT="ALL">
<title>Caledonian Gecko Care Sheets</title>
<style type="text/css">
<!--
body {background-color: #000000;}
.style13 {color: #990000; font-size: 24px;}
.style15 {color: #FFFFFF}
</style>
</head>
<body>
<center>
<img src="../Name1.jpg" alt="Caledonian Exotic Geckos Name" width="257" height="124" />
<br />
<a href="index.html"><img src="../Buttons/Home button.jpg" alt="Caledonian's Home" border="0"/></a>|
<a href="available.html"><img src="../Buttons/Available button.jpg" alt="Available Geckos" border="0"/></a>|
<a href="breeders.html"><img src="../Buttons/Breeders Button.jpg" alt="Crested Gecko breeders" border="0"/></a>|
<a href="caresheet.html"><img src="../Buttons/Care Sheet button.jpg" alt="Crested Gecko Care" border="0"/></a>|
<a href="contact.php"><img src="../Buttons/Contacts button.jpg" alt="Contact Caledonia" border="0"/></a>|
<a href="terms.html"><img src="../Buttons/Terms button.jpg" alt="Caledonian's Terms" border="0"/></a>
<br />
<h1 class="style13">Gecko Care Sheets</h1>
<h3 class="style15">Select which type of Rhacodactylus gecko you would like info on.</h3>
<a href="crestedcaresheet.html"><img src="../Cresteds/Crested Care Sheet.jpg" alt="Crested Gecko Care Sheet" border="0" />
</a>|
<a href="gargcaresheet.html"><img src="../Cresteds/Garg Care Link.jpg" alt="Gargoyle Gecko Care Sheet" border="0" /></a>
</center>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2308

As I understand you want the menu to stick to the right side, always visible even if the user scrolls. From this menu you want to dynamically open content pages and have them appear and be scrollable.

This can be done using the code Ron gave to stick the menu to the left or right side using fixed positioning. To get the content to open dynamically from the menu links will take php. Php includes can also be used to get static content such as the header and footer. I'll work up a little tutorial for you to follow to set all this up. From the code you posted it looks as if you are doing something else like maybe sliding the menu out (that's why mootools is being used) or some other animated effect. Can you supply the url for the mootools menu?

renzema · Joined: 03 Sep 2009 Posts: 10

Thank you sticks. I already have it saved as a php since I assumed that would be what I would need to have a dynamic side bar.

Once again thank you all for your help. This has been very helpful already. I was very frustrated about this being this is the first thing I am struggling with.

sticks464 · Joined: 31 Dec 2006 Posts: 2308

Is this the sidebar menu you are talking about?
If so you should be aware that newer mootools scripts and this script are not compatable and mootools is not compatable with jquery or scriptulicous. This menu uses mootools1.1 and the use of any other script may stop it from working. I am doing a site at this time and have had to change multiple elements because of incompatibility between newer and older mootools scripts. But if this is the only script you use you will be fine.

It may take me a couple of hours as I have a client conference shortly.

I forgot to ask, are you using a local server on your machine or are you coding and uploading to a host server to see the results?

renzema · Joined: 03 Sep 2009 Posts: 10

This will be the only mootools script. It is a simple webpage that I am trying to add a little extra to and trying to make look cleaner.

sticks464 · Joined: 31 Dec 2006 Posts: 2308

Right now as I am testing, it is only working correctly in Fiefox. I have tried recommended fixes but nothing is working for all modern browsers.

Will keep testing and see if this is not done in jquery.

sticks464 · Joined: 31 Dec 2006 Posts: 2308

I have this working in all modern browsers but you need a different version. You'll need to go here and download this version.
Delete all you had before, this one uses different javascript. You will need the images and scripts.

Create a master folder (if you haven't already got one) to hold all your files. Within this folder create the following folders
css...to contain css stylesheets
js...to contain javascript files
inc...to contain included pages
pages...to contain all pages that will display in the content div
images...to contain all images

Your index.php file will be the only file not in a sub-folder.

Once you have the sub-folders created and the menu downloaded and unzipped, move the three images from the downloaded images folder to the new images folder you created. Do the same with the three javascript files, from the downloaded js folder to the new js folder. Once you have moved the files you no longer need the any of the remaining files or folders you downloaded (delete the folder sliding-side-bar).
Now you are ready to add a new index file, the menu and set up a dynamic site.

I will post the next steps in a few.

sticks464 · Joined: 31 Dec 2006 Posts: 2308

Now you have folders created, it's time to get some files.
This set of files go into the inc folder and will make up the elements of the index file.
Save this file as head.php

sticks464 · Joined: 31 Dec 2006 Posts: 2308

Now it time to make it all happen with an index file. We will pull files from the inc folder to make the index.php file.

Save this as index.php in the main folder.

renzema · Joined: 03 Sep 2009 Posts: 10

ok so I copied it word for word. Should all the php files have a head and body or at they partial code that come together in the end?
This is for sure far beyond me, but hopefully all your hard work isn't a waist.
So once I copied and pasted the code and set up files correctly. I am just getting errors when I try to test it. Nothing shows up other than an error

This is the error and the file is upload on my site to test. Just its not finding it.
Not Found
The requested URL /Templates/Sidebar/index.php was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Once again I can't thank you enough for this help, I am willing to follow whatever you want me to try.

Thanks
J

sticks464 · Joined: 31 Dec 2006 Posts: 2308

Your gonna have to tell me how your files are set up. Are you only interested in the sidebar menu? The way I set it up is the index.php file is the actual template. All files that you want to appear that will look identical to this page are called from the pages folder with the php function.

When all this coding comes together, this is what you will have