Good morning,

I am working on a website that has 3 versions:

local
development
and the live site (say for example http://www.google.com)

As it can sometimes be confusing for testers which version they are on, I created (with help from this forum) a static footer for the bottom of your screen which tell you which version you are on:

<style>

* html #footer {
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight)); position:absolute;

}

* html {/* stop jitter by adding a 1px transparent gif to background of html*/
    background-image: url(image.jpg);
}

</style>

<script language="javascript">
	var loc = document.location.toString();
	loc = loc.split("//");
	var protocol = loc[0];
	loc = loc[1];
	var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";
</script>

<div id="footer">You are using the<script language="javascript">

document.writeln(finalDisplay);

</script>version of this application</b> </div>

The java script picks up and displays the url at the bottom of the screen, but hides everything after a '/' i.e.:

http://localhost/

However this static footer can not be allowed to be seen on the live site.. Is there anything I can add that could disable to the footer?

You could use an if statement to check the URL. I assume your live version will have www. at the beginning. If not, replace it to whatever the start of the URL for the live site is.

<script language="javascript">
if (location.href.indexOf("www.google.com") == -1)
{
  document.write("<div id=\"footer\">You are using the ");
  document.writeln(finalDisplay);
  document.write(" version of this application</b> </div>";
}
</script>

This will execute the code if the page is NOT www.google.com so it should only show up on non-live pages. If you want the code to execute when it is www.google.com, change the "==" to "!="

Thank you Borzoi for the quick reply,

I updated the code and now it never displays.. This is what the code looks like in case I have misunderstood:

<style>

* html #footer {
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight)); position:absolute;

}

* html {/* stop jitter by adding a 1px transparent gif to background of html*/
    background-image: url(image.jpg);
}

</style>

<script language="javascript">
	var loc = document.location.toString();
	loc = loc.split("//");
	var protocol = loc[0];
	loc = loc[1];
	var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";
</script>

<script language="javascript">
if (location.href.indexOf("www.google.com") == -1)
{
  document.write("<div id=\"footer\">You are using the ");
  document.writeln(finalDisplay);
  document.write(" version of this application</b> </div>";
}
</script>

That was an error on my part, sorry. It's not liking that there are multiple lines of document.write so that will need to be modified.

Try this:

<script language="javascript">
if (location.href.indexOf("www.google.com") == -1)
{
  document.write("<div id=\"footer\">You are using the " , finalDisplay , " version of this application</b> </div>";
}
</script>

Excellent this seems to be working, I will do some more tests and come back to you

Thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.