Develop Reference

How can i check if an input field is empty or not when a variable is inserted in this field by jquery?

I want to check if an input field is empty or not and then add/remove class from another element (div). As it is now i am using jquery "input" handler so i can check if the field is empty or not when someone is typing text in it or even if he is copy/paste something in there.
My issue is that when i try to pass text in the field using the code below it doesnt work as it should.
Kindly check my code below:
$('.home-page-address-field').on('input', function(){
if($('#s').val() == '' ) {
$("#location-btn").addClass('disable2');
}else {
$("#location-btn").removeClass('disable2');
}
});
var cityA = "London";
alert('The var "cityA" will be inserted to the field and the class "disable2" should be removed from the Browse button but it is not !');
$(function () {
$('.home-page-address-field').val(cityA);
});
.home-page-address-field {
height:30px;
margin-right:15px;
border:1px solid #ccc;
padding:0px 8px;
}
.browse-button {
padding:5px;
height:25px;
background:#0088cc;
color:#fff;
display:inline-block;
width:120px;
text-align:center;
}
.disable2{
opacity:0.4;
pointer-events:none;
background:gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="s" placeholder="Enter your city..." class="home-page-address-field"/>
<div id="location-btn" class="disable2 browse-button">BROWSE</div>

Changing the val() programatically doesn't trigger any event handlers. For that, you can use .trigger():
$('.home-page-address-field').on('input', function(){
if($('#s').val() == '' ) {
$("#location-btn").addClass('disable2');
}else {
$("#location-btn").removeClass('disable2');
}
});
var cityA = "London";
alert('The var "cityA" will be inserted to the field and the class "disable2" should be removed from the Browse button but it is not !');
$(function () {
$('.home-page-address-field').val(cityA).trigger('input');
});
.home-page-address-field {
height:30px;
margin-right:15px;
border:1px solid #ccc;
padding:0px 8px;
}
.browse-button {
padding:5px;
height:25px;
background:#0088cc;
color:#fff;
display:inline-block;
width:120px;
text-align:center;
}
.disable2{
opacity:0.4;
pointer-events:none;
background:gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="s" placeholder="Enter your city..." class="home-page-address-field"/>
<div id="location-btn" class="disable2 browse-button">BROWSE</div>

Need help in drag and drop uploading

When I select and drag and drop multiple files in the drop files area, it goes to Uploads folder but I see only one item under the drop files area each time when uploading.
I want to show multiple files instead of one file/item under the drop files area when uploading.
How can I do that?
if(file_exists($serverpath)) is not working. I don't know why.
Can you people look into it?
I want the same uploaded file rename from 0 to 1,2,3 when I upload files when files exist(if(file_exists($serverpath))) in Uploads folder.
When I click on a image it shows a image box.
I need the .Crop-Box resizable and draggable.
I am using mozilla firefox and google chrome.
Here is the code:
*{margin:0; padding:0;}
body{background:black;}
#Container{
margin:200px auto;
width:620px;
padding-bottom:20px;
background:#ffffff;
color:black;
border:1px solid gray;
border-radius:5px;
}
#Text{
margin:20px;
color:green;
font-family:verdana;
font-size:12pt;
}
#Drop{
margin:20px auto;
padding:20px;
color:gray;
width:500px;
height:40px;
background:#f1f1f1;
border:1px dotted #ccc;
border-radius:5px;
}
.progressbar{
margin:20px auto;
width:80%;
height:20px;
background:#ddd;
border-radius:5px;
display:none;
}
.progress{
width:0%;
height:20px;
border-radius:5px;
background:linear-gradient(to bottom, lightblue, #2196f3);
}
.progresstext{
float:right;
}
.InsertInto{
margin-top:20px;
}
.image{
margin:20px;
width:15%;
height:20%;
display:none;
}
.FileDiv{
margin-bottom:20px;
}
.filenam{
position:absolute;
margin-top:-57px;
margin-left:140px;
}
#RealFile{
margin:20px;
display:none;
}
#UploadImage{
margin-left:100px;
padding:20px 200px;
background:#2196f3;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}
button:focus{
outline:none;
}
#Submit{
margin-left:100px;
padding:20px 200px;
background:#219549;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}
.Crop-Main{
position:relative;
width:600px;
min-width:600px;
height:520px;
margin:100px auto;
padding:20px;
background:#f1f1f1;
color:black;
border:1px solid #ccc;
border-radius:5px;
z-index:1;
display:none;
}
#Close{
background:#2196f3;
color:white;
padding:10px;
font-family:verdana;
font-size:12pt;
cursor:pointer;
border-radius:5px;
margin:20px;
margin-right:0px;
float:right;
user-select:none;
}
.Crop-Container{
position:relative;
width:600px;
margin:80px auto;
min-height:300px;
}
.Crop-Container img{
width:600px;
user-select:none;
}
.Crop-Box{
position:absolute;
width:200px;
height:200px;
top:0;
left:0;
background:rgba(69,69,69,0.6);
border:1px solid white;
z-index:2;
cursor:move;
}
#Save{
position:absolute;
padding:20px 80px;
background:green;
color:white;
border:none;
border-radius:5px;
font-family:verdana;
font-size:12pt;
cursor:pointer;
margin:-70px 200px;
}
.InsertInto img{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery.min.js"></script>
<body>
<div class="Crop-Main">
<span id="Close">X</span>
<div class="Crop-Container">
<img src=""/>
<div class="Crop-Box"></div>
</div>
<button id="Save" onclick="save()">Save</button>
</div>
<div id="Container">
<div id="Text">Advanced File Uploader</div>
<div id="Drop">Drop files here</div>
<div class="progressbar">
<div class="progress"></div>
<div class="progresstext">0%</div>
</div>
<div class="InsertInto">
</div>
<input type="file" name="realfile" id="RealFile" multiple="true"><br/><br/>
<button id="UploadImage" type="button">Upload</button>
<br/><br/>
<form action="uploads.php" method="POST" id="myForm" enctype="multipart/form-data">
<input type="submit" name="submit" id="Submit" value="Submit">
</form>
</div>
<script>
var obj = document.querySelector("#Drop");
var realf = document.querySelector("#RealFile");
obj.ondragover = function(e){
$(this).css("border-color","green");
return false;
}
obj.ondragleave = function(e){
return false;
$(this).css("border","none");
}
obj.ondrop = function(e){
e.preventDefault();
$(this).css("border-color","#2196f3");
var files = e.dataTransfer.files;
upload(files);
console.log(files);
}
realf.onchange = function(e){
var files = e.currentTarget.files;
upload(files);
console.log(files);
}
function upload(e){
var formdata = new FormData();
var xhttp = new XMLHttpRequest();
var i;
for(i=0; i < e.length; i++){
formdata.append("realfile[]", e[i]);
}
if(xhttp.upload){
xhttp.open("POST", "upload.php", true);
xhttp.upload.addEventListener("progress", function(e){
var parcent = (e.loaded / e.total) * 100;
document.querySelector(".progressbar").style.display = "block";
document.querySelector(".progress").style.width = parcent+"%";
document.querySelector(".progresstext").innerHTML = parcent+"%";
});
xhttp.onreadystatechange = function(){
if(xhttp.readyState == 4 && xhttp.status == 200){
var result;
result = this.responseText;
var newresult = JSON.parse(result);
var i;
document.querySelector(".progressbar").style.display = "none";
var insertinto = document.querySelector(".InsertInto");
var filediv = document.createElement("DIV");
filediv.className = "FileDiv";
insertinto.appendChild(filediv);
var img = document.createElement("IMG");
img.className = "image";
filediv.appendChild(img);
img.setAttribute("src",newresult.url);
img.setAttribute("width","100%");
img.setAttribute("height","100%");
img.style.display = "block";
img.addEventListener("click", function(e){
var cropmain = document.querySelector(".Crop-Main");
cropmain.style.display = "block";
document.querySelector("#Container").style.display = "none";
var imgsrc = $(this).attr("src");
$(".Crop-Container img").attr("src", imgsrc);
});
var close = document.querySelector("#Close");
close.addEventListener("click", function(e){
document.querySelector(".Crop-Main").style.display = "none";
document.querySelector("#Container").style.display = "block";
});
var filenam = document.createElement("DIV");
filenam.className = "filenam";
filenam.innerHTML = newresult.name;
insertinto.appendChild(filenam);
if(newresult != "" && newresult != "Not Ok"){
for(i=0; i<newresult.length; i++){
if(newresult[i].status == true){
}
}
}
console.log(xhttp.responseText);
}
}
xhttp.send(formdata);
}
}
$("#UploadImage").click(function(e){
$("#RealFile").click();
});
$(".InsertInto").on("click", ".InsertInto img", function(){
var img = $(this).attr("src");
$(".Crop-Container").find("img").attr("src", img);
var w = $(".Crop-Container img").width();
var h = $(".Crop-Container img").height();
$(".Crop-Container").width(w);
$(".Crop-Container").height(h);
document.querySelector(".Container").style.display = "none";
document.querySelector(".Crop-Main").style.display = "block";
});
</script>
</body>
</html>
PHP
<?php
$status = array();
$allow = array("image/jpeg", "image/png");
//print "<pre>"
//print_r($_FILES["file"]);
//print "</pre>"
foreach($_FILES["realfile"]["name"] as $pos => $val){
if(!in_array(strtolower($_FILES["realfile"]["type"][$pos]), $allow)){
$status = array(
"name" => $_FILES["realfile"]["name"],
"type" => $_FILES["realfile"]["type"],
"url" => "",
"message" => "Invalid file type",
"status" => false
);
}
else{
$tmpname = $_FILES['realfile']['tmp_name'][$pos];
$filename = $_FILES["realfile"]["name"][$pos];
//$path = "Uploads/".$filename;
$addition = 0;
$serverpath = $_SERVER['DOCUMENT_ROOT']."Uploads/".$filename;
if(file_exists($serverpath)){
while(file_exists($serverpath)){
$addition = $addition + 1;
$info = pathinfo($serverpath);
$directory = $info["dirname"];
$oldname = $info["filename"];
$oldext = $info["extension"];
$serverpath = $directory."/".$oldname.$addition.".".$oldext;
}
$serverpath = "Uploads/".$oldname.$addition.".".$oldext;
}
else{
$serverpath = "Uploads/".$filename;
}
move_uploaded_file($tmpname, $serverpath);
$status = array(
"name" => $_FILES["realfile"]["name"][$pos],
"type" => $_FILES["realfile"]["type"][$pos],
"url" => $serverpath,
"message" => "File Uploaded",
"status" => true
);
}
}
echo json_encode($status);
?>

Tumblr theme posts - hidden date and tags not working

EDITED MAY, 26TH:
I'm using the coding you'll see below as an answer from #AchrafJEDAY (I'll also include it here as well). The coding as broke somehow, and when I click on the date or tag buttons to show the date or tag for ANY post, it freaks out; you see it for just a moment before the whole page refreshes with "/?" at the end of the URL and the date and tags are both hidden again. I'm not sure why this is, but I'd SUPER appreciate ANY help anyone has! Thank you!!
CODING:
CSS
.postdatebutton{
float:left;
position:relative;
top:0px;
left:0px;
width:50px;
height:15px;
border:1px #83174C solid;
background-color:rgba(255, 230, 240, 0.8);
font-family: 'Indie Flower', cursive;
letter-spacing:2px;
text-align:center;
padding-top:5px;
color:black;
font-size:14px;
text-decoration:underline;
}
.postdatebutton button{
font-family: 'Indie Flower', cursive;
text-decoration:underline;
}
.postdate{
width: 100%;
text-align: center;
display:none;
}
/*TAGS*/
.tags {
width:415px;
text-transform:uppercase;
line-height:120%;
font-size:15px;
text-align:center;
padding:2px;
text-decoration:underline;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
.tags a {
color:#BB0B20;
letter-spacing:1px;
padding:1px;
}
.posttagbutton{
float:left;
position:relative;
top:0px;
left:0px;
width:50px;
height:15px;
border:1px #83174C solid;
background-color:rgba(255, 230, 240, 0.8);
font-family: 'Indie Flower', cursive;
letter-spacing:2px;
text-align:center;
padding-top:5px;
color:black;
font-size:14px;
text-decoration:underline;
}
.posttagbutton button{
font-family: 'Indie Flower', cursive;
text-decoration:underline;
}
.posttag {
width: 100%;
text-align: center;
display:none;
}
#stuff table{
position:relative;
width:100%;
text-align:center;
}
HTML
<table>
<tbody>
<tr>
<!---LIKE---->
<td><div class="postlike">{LikeButton}</div> </td>
<!---REBLOG---->
<td><div id="postreblog">Reblog</div> </td>
<!---NOTES---->
<td><div class="postnote">{block:NoteCount} Notes{/block:NoteCount}</div> </td>
<!---VIA---->
<td><div class="postfrom">{block:RebloggedFrom}From{/block:RebloggedFrom}</div> </td>
<!---SOURCE---->
<td><div class="postsource"> {block:ContentSource}Orig-Poster{/block:ContentSource}</div> </td>
<!---DATE BUTTON---->
<td><div class="postdatebutton"><button onclick="myFunction6(this)">Date</button></div></td>
<!---TAGS BUTTON---->
<td><div class="posttagbutton"><button onclick="myFunction7(this)">Tags</button></div></td></tr></tbody></table>
<!---HIDDEN DATE---->
<div class="postdate" style="display:none;"><p>{block:Date} {MonthNumberWithZero}-{DayOfMonthWithZero} {24Hour}:{Minutes}{/block:Date}</p></div>
<!---HIDDEN TAGS---->
<div class="posttag" style="display:none;"><div class="tags"><p>{block:Tags}# {Tag}{/block:Tags}</p></div></div>
JS
<!---SCRIPT FOR DATE AND TAGS---->
<script>
function myFunction6 ( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("postdate");
if (x[0].style.display === 'block') {
x[0].style["display"] = "none";
}
else {
x[0].style["display"] = "block";
}
}
</script>
<script>
function myFunction7( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("posttag");
if (x[0].style.display === 'block') {
x[0].style.display = 'none';
}
else {
x[0].style.display = 'block';
}
}
</script>

function myFunction1 ( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("postdate");
if (x[0].style.display === 'block') {
x[0].style["display"] = "none";
}
else {
x[0].style["display"] = "block";
}
}
function myFunction2( event ) {
var node = event.parentNode;
for (i = 0; i < 5; i++) {
node = node.parentNode;
}
var x = node.getElementsByClassName("posttag");
if (x[0].style.display === 'block') {
x[0].style.display = 'none';
}
else {
x[0].style.display = 'block';
}
}
<div id="stuff"><div class="picsize"><div class="textpost"><h3> Testing Text Post - Title </h3><p><span>allystestblog1818</span>:</p><blockquote><h2>Headline</h2><h2><b>Headline Bold</b></h2><h2><i>Headline Italic</i></h2><p><b>Bold text,</b> <i>Italic text,</i> <span>Link text</span></p><ol><li>Numbered <br></li><li>List<br></li></ol><ul><li>Bullet<br></li><li>List<br></li></ul><blockquote><p>Indented text</p></blockquote><p>Regular text</p><p>Line break<br></p><hr><p>Picture</p><figure class="tmblr-full"><img src="https://68.media.tumblr.com/1250d273b9e9b4860d73aa893361ec20/tumblr_inline_oogr5xEk1J1txz9li_540.jpg" class=""></figure><p class=""><span>Keep reading</span></p></blockquote></div></div><div class="picsize"></div><p></p><table><tbody><tr><td><div class="postlike"><div class="like_button" data-post-id="160506016653" data-blog-name="wisdomsprydethemetestblog" id="like_button_160506016653"><iframe id="like_iframe_160506016653" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=wisdomsprydethemetestblog&post_id=160506016653&color=black&rk=4ktb4Bma&root_id=159609010143" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_160506016653"></iframe></div></div> </td><td><div id="postreblog">Reblog</div> </td><td><div class="postnote"> Notes</div> </td><td><div class="postfrom">From</div> </td><td><div class="postsource"> Orig-Poster</div> </td><td><div class="postdatebutton"><button onclick="myFunction1(this)">Date</button></div></td><td><div class="posttagbutton"><button onclick="myFunction2(this)">Tags</button></div></td></tr></tbody></table><div class="postdate" style="display:none;"><p>05-10 1:52</p></div><div class="posttag" style="display:none;"><div class="tags"><p># Test text post# tags tags tags</p></div></div>
</div>

Mapbox tooltips being disabled by code

Can anyone see what in this code is preventing the tooltips in my map from functioning? Ie they function in normal map but not when I add the layers to this map with a toggle button. I assume it's something with the onclick function, but can't figure it out specifically, and what a workaround might be.
Thank you
<style>
.menu-ui {
background:#fff;
position:absolute;
bottom:10px;left:10px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:13px;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active {
background:#3887BE;
color:#FFF;
}
.menu-ui a.active:hover {
background:#3074a4;
}
</style>
<nav id='menu-ui' class='menu-ui'></nav>
<div id='map'></div>
<script>
var map = L.map('map').setView([10.8229,-84.2116], 12);
var layers = document.getElementById('menu-ui');
addLayer(L.mapbox.tileLayer('XXXX.XXXX'), 'Photo Points', 4);
addLayer(L.mapbox.tileLayer('XXXX.XXXX'), 'River KMs', 3);
addLayer(L.mapbox.tileLayer('XXXX.XXXXX'), 'December 2013 (0.5m)', 2);
addLayer(L.mapbox.tileLayer('XXXXXX.XXXXXX'), 'February 2014 (1.5m)', 1);
function addLayer(layer, name, zIndex) {
layer
.setZIndex(zIndex)
.addTo(map);
// Create a simple layer switcher that
// toggles layers on and off.
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.innerHTML = name;
link.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
if (map.hasLayer(layer)) {
map.removeLayer(layer);
this.className = '';
} else {
map.addLayer(layer);
this.className = 'active';
}
};
layers.appendChild(link);
}
</script>

Did you add interactivity via TileMill? If so, you'll need to add the gridLayer and gridControl to the map, not just a tileLayer.

javascript not setting innerHTML

I'm working on a website for a client and I am using ajax to get the contents of a file, html specifically, and then I am trying to insert that html into a div so that i can display the content. i know that i am getting the contents of the file because i have alerts set to display the request's readyState, status, and responseText, and it is showing the contents of the file in the alert. however when i attmept to insert it into the div using this line: document.getElementsByClassName('content').innerHTML = response; nothing happens. can anyone help me figure this out?
CODE:
JAVASCRIPT:
<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
document.getElementsByClassName('content').innerHTML = response;
}
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
document.getElementsByClassName('content').innerHTML = response;
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function home() {
getData("home");
}
function about() {
getData('about');
}
function proof() {
getData('contact');
}
function contact() {
getData('proof');
}
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject){
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i]);
}
catch(e){
alert(e.description);
}
}
}
else
return false
}
HTML:
<body>
<div class="container">
<div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home -->
<span id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about -->
<span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof -->
<span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->
<div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
<div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
<div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
<div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower -->
</div><!-- end logo-->
<div class="content"></div><!-- end content -->
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->
CSS:
#charset "UTF-8";
/* CSS Document */
* {
margin:auto;
}
html, body {
height: 100%;
}
.container {
position:relative;
min-height: 100%;
width:800px;
}
.logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
.content {
position:relative;
top:0px;
left:0px;
padding-top:20px;
padding-bottom: 75px !important;
}
.footer {
position:relative;
height: 75px;
margin-top:-75px;
background-color:#06F;
bottom:0px;
left:0px;
}
.large{
font-size:36px;
}
.fltright {
position:relative;
float:right;
top:0px;
left:0px;
width:auto;
height:auto;
}
.fltleft {
position:relative;
float:left;
top:0px;
left:0px;
width:auto;
height:auto;
}
span.glow {
text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
color:#999;
text-align:center;
}
span.noglow {
color:#999;
text-align:center;
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
line-height:20px;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#link-home{
position:absolute;
width:75px;
height:30px;
top:110px;
left:419px;
}
#link-about{
position:absolute;
width:75px;
height:30px;
top:110px;
left:515px;
}
#link-proof{
position:absolute;
width:75px;
height:30px;
top:100px;
left:609px;
}
#link-contact{
position:absolute;
width:75px;
height:30px;
top:110px;
left:708px;
}
#home-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:442px;
background:url(images/home-flower.png);
}
#about-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:540px;
background:url(images/about-flower.png);
}
#proof-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:635px;
background:url(images/proof-flower.png);
}
#contact-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:733px;
background:url(images/contact-flower.png);
}

document.getElementByClassName is returning an array. You cannot set the innerHtml of an array you need to loop through the array and set each individual elements inner html;
Working example: http://jsfiddle.net/CYZUL/
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
}

Why not using the jQuery's $.load(); function and save your self a lot of pain and time