Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Server Side Includes - I need help please 2

Status
Not open for further replies.

JennyW

Technical User
Mar 1, 2001
323
CA
SERVER SIDE INCLUDES

I want to make a site that has loads of pages.
The borders, menu and logo of this site are all images and all appear on every page on my site.

Right now, if I don’t use SSI and if I want to make changes to any re-appearing images on my site then I’d have to edit those changes individually - on every single page.

However, if I do use SSI, then I can edit those images once and my changes will be applied to every page.

I’m not too sure how I can go about doing this. Does anyone know how I can get started?

Thanks for reading,
Jenny
 
Ok, here's your problem. That code above is not DHTML, but rather, CSS, or Cascading Style Sheets. DHTML is JavaScript that can manipulate CSS.

CSS is called with a style tag like so:

[tt]
<html>
<head>
<title>css demo</title>
<style>
BODY {
scrollbar-face-color:#75EA00;
scrollbar-arrow-color:brown;
scrollbar-track-color:#333333;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
</style>
</head>
[/tt]

That is how you would use CSS in your page.

If you wanted to put that CSS in an external file and call it, you would save it in a file, say style.css, and then link it in like so:

[tt]
<html>
<head>
<title>CSS Linking Demo</title>
<link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;>
</head>
[/tt]

So, if you want to combine your JavaScript and CSS into one page, you could do something like this:

[tt]
<html>
<head>
<title>CSS and JavaScript Linking Demo</title>
<script type=&quot;text/javascript&quot; src=&quot;java.js&quot;></script>
<link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;>
</head>
[/tt]

That should do it.

If you have any more questions, just ask.
Hope this helps.
-Vic vic cherubini
krs-one@cnunited.com
====
Knows: Perl, HTML, JavScript, C/C++, PHP, Flash
====
 
Hi v-bini!

I followed your CSS directions and they worked perfectly!

Here's my page:


========================

Does DHTML use / interact with anything else other than Javascript and CSS?

========================

Lastly, what's the difference between the below:

[tt]<script language=&quot;JavaScript1.2&quot;>

<script language=&quot;JavaScript&quot;>[/tt]


Thanks,
Jenny
 
Hey Jenny:
There's nothing different between the two.

As a matter of fact, they are both deprecated by the web standards, so there is no point in using either of them really.

One just says that you are using Javascript 1.2, the other one just tells the browser to get ready to parse some Javascript.

DHTML is used to interact not only with CSS, but with HTML elements as well.

Here's an example.

Say you have a [tt]<div>[/tt] on your page and you want to change the location of it depending on the size of the page.

(I know this is getting out of CGI, but I just wanna help :)).

Here is the code for setting up the [tt]<div>[/tt]:

[tt]
<div id=&quot;myDiv&quot; style=&quot;position:absolute; top:100px; left:100px&quot;>this is myDiv</div>
[/tt]

Ok, say you want to move the div to the middle of the screen if the resolution was 1024 x 768.

You could write some javascript like this:

[tt]
<!-- javascript ahead
function move_div(divname) {
var y = screen.height;
var x = screen.width;
thisdiv = document.getElementById(divname);
if ((x == 1280) && (y == 1024)) { // they are in 1280 x 1024
thisdiv.style.top = y/2;
thisdiv.style.left = x/2;
thisdiv.style.background = &quot;blue&quot;;
}
}
// end script -->
[/tt]


And then, if you wanted to combine all that together to create a simple page, you could set it up like this:

[tt]
<html>
<head>
<title>test</title>
<script>
function move_div(divname) {
var y = screen.height;
var x = screen.width;
thisdiv = document.getElementById(divname);
if ((x == 1280) && (y == 1024)) { // they are in 1280 x 1024
thisdiv.style.top = y/2;
thisdiv.style.left = x/2;
thisdiv.style.background = &quot;blue&quot;;
}
}
</script>
</head>
<body>

<div id=&quot;myDiv&quot; onClick=&quot;javascript:move_div('myDiv')&quot; style=&quot;position:absolute; visibility:visible; top:100px; left:100px; border:1px solid black;&quot;>this is myDiv</div>

</body>
</html>
[/tt]


When you click on the div, it will move to the center of the screen and make the div have a background color of blue.

Thats a basic DHTML script (very basic, trust me), but you can get started with that.

Here is another small script that Microsoft were the first to have and now everyone is copying them:

[tt]
<html>
<head>
<title>test</title>
<script>
function move_div(divname) {
var y = screen.height;
var x = screen.width;
thisdiv = document.getElementById(divname);
if ((x == 1280) && (y == 1024)) { // they are in 1280 x 1024
thisdiv.style.top = y/2;
thisdiv.style.left = x/2;
thisdiv.style.background = &quot;blue&quot;;
}
}

function rollover(divname) {
thisdiv = document.getElementById(divname);
if (thisdiv.style.visibility == &quot;hidden&quot;) {
thisdiv.style.visibility = &quot;visible&quot;;
} else {
thisdiv.style.visibility = &quot;hidden&quot;;
}
}
</script>
</head>
<body>

<div id=&quot;myDiv&quot; onMouseOver=&quot;javascript:rollover('overdiv')&quot; style=&quot;position:absolute; visibility:visible; top:100px; left:100px; border:1px solid black;&quot;>this is myDiv</div>

<div id=&quot;overdiv&quot; onRollOff=&quot;javascript:rollover('overdiv')&quot; style=&quot;position:absolute; visibility: hidden; top:120px; left:100px; border:1px solid black&quot;>rollover the above<br> div to make me<br> go away</div>
</body>
</html>
[/tt]

Thats in its simplicity, and very buggy, but you get the general gist of the idea. As you can see, DHTML can be used for many things.

As always, hope this helps.

-Vic
vic cherubini
krs-one@cnunited.com
====
Knows: Perl, HTML, JavScript, C/C++, PHP, Flash
====
 
Hi v-bini!

You wrote:
There's nothing different between the two.

<script language=&quot;JavaScript1.2&quot;>
<script language=&quot;JavaScript&quot;>

One just says that you are using Javascript 1.2, the other one just tells the browser to get ready to parse some Javascript.

I’m having difficulty understanding. If there’s nothing different between the two then if Javascript 1.2 says that you’re using Javascript 1.2 and Javascript tells the browser to get ready to parse Javascript, then wouldn’t that be two different functions?

======================

As a matter of fact, they are both deprecated by the web standards, so there is no point in using either of them really.

Why is there no point in using either Javascript1.2 or Javascript?

======================

Thanks for the brief DHTML lesson!

Was the last script a mouseover and mouseout script that shows and hides a division?

======================

Thanks v-bini!!
Jenny
 
Ok, here ya go:

1. JavaScript1.2 also tells the browser to get ready to parse JavaScript, it just also includes the version, which in this case, is 1.2. I believe 1.5 is out now. So JavaScript1.2 and JavaScript do the same thing, but 1.2 just tells the reader/browser what version you are using.

2. Well, I was kinda wrong. There is a point to use them, thats to help an actual reader of your code (a human) tell that you are using javascript (in case they could not tell). But, if you want to follow the Web Standards, which can come in handy sometimes, then I would just leave them out.

3. Yes, that last script was a mouseover and mouse out script that shows and hides a div when you rollon and off another div.

Hope this helps.

-Vic

P.S. This thread has gotten kinda long is and probably taking up quite some space on the server, if you don't mind, could you email with any further questions? Thanks!

email: krs-one@cnunited.com
vic cherubini
krs-one@cnunited.com
====
Knows: Perl, HTML, JavScript, C/C++, PHP, Flash
====
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top