Need help in drag and drop uploading - javascript

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);
?>

Related

parent node undefined after removing last element

I'm trying to make a to do list where you can dynamically append a remove button that appears with each new appended element in a parent div. clicking the remove button is sup[posed to remove the corresponding new element only
This works for the last item on the list, but when I try to remove others the console says it's parent node is null.
any advice as to what's going on here?
var input = document.getElementById("boxInput");
var output = document.getElementById("output")
var submit = document.getElementById("submit")
var i = 0;
function addElement(parentId, elementTag, elementId, html) {
var output = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
output.appendChild(newElement)
}
function removeElement(elementId) {
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
var itemId = 0;
function additem() {
i += 1
itemId++;
const btn = document.createElement("button");
btn.onclick = function() {}
var html = i + ". " + input.value + " " + `<button onclick="javascript:removeElement('item-' + itemId + ''); return false;">X</button>`;
addElement("output", "p", ("item-" + itemId), html);
return itemId
}
submit.addEventListener("click", additem);
#box {
margin:auto;
border-width: 3px;
border-radius:5px;
border-color:black;
border-style:solid;
width:300px;
height:100px;
margin-top:200px;
line-height:100px;
display:flex;
justify-content:center;
align-items:center;
}
#boxInput {
width:150px;
text-align:center;
margin-right:5px;
}
#output {
margin-top:20px;
width:100%;
text-align:center;
}
h1 {
margin:center;
text-align:center;
position:relative;
top:190px;
}
.delete {
margin-left:5px;
}
<h1>To Do List!</h1>
<div id="box">
<input id="boxInput" placeholder="add an item"/>
<button id="submit">Submit</button>
</div>
<div id="output">
</div>
There is no need for itemId or something like that. Just create a div for each todo item. Add a <button> and <span> to it. Add event listener to button in which you remove the whole todo div from the output element
var input = document.getElementById("boxInput");
var output = document.getElementById("output")
var submit = document.getElementById("submit")
function additem() {
const todo = document.createElement('div');
const btn = document.createElement('button');
btn.innerHTML = "Remove"
const text = document.createElement('span');
text.innerHTML = input.value;
todo.appendChild(text);
todo.appendChild(btn);
btn.addEventListener('click', (e) => {
output.removeChild(todo)
})
output.appendChild(todo)
}
submit.addEventListener("click", additem);
#box {
margin:auto;
border-width: 3px;
border-radius:5px;
border-color:black;
border-style:solid;
width:300px;
height:100px;
margin-top:200px;
line-height:100px;
display:flex;
justify-content:center;
align-items:center;
}
#boxInput {
width:150px;
text-align:center;
margin-right:5px;
}
#output {
margin-top:20px;
width:100%;
text-align:center;
}
h1 {
margin:center;
text-align:center;
position:relative;
top:190px;
}
.delete {
margin-left:5px;
}
<h1>To Do List!</h1>
<div id="box">
<input id="boxInput" placeholder="add an item"/>
<button id="submit">Submit</button>
</div>
<div id="output">
</div>

Live search - Ajax, PHP

I have a little problem with the live search form. Below is what I want:
This is what I want. What I have is:
And Screenshot of my problem.
The general problem of Screenshot 3 when I type something in Keyword? field, when I get the result that the field gets bigger and that is what I don't need. The result field is good, exactly what I need. So problem is, I don't need to get a bigger field Keyword? after some user enters some text into that field. Keyword? field the same size, result div size wider.
Bellow, I will paste my code.
HTML:
<div class="header-search-input-item">
<input type="text" name="search" id="search" autocomplete="off" placeholder="Keywords?" value=""/>
<div class="resultDiv"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear:both; }
.sp { clear:both; display:block; margin-bottom:30px; }
.sp a { font-weight:bold; color:#0099FF; }
label { margin-top:20px; margin-bottom:3px; font-weight:bold;}
.searchDiv {
width:130px;
}
.resultDiv {
display:none;
width:auto;
margin-top:40px;
max-height:200px;
overflow:auto;
border:1px solid #0099FF;
padding:5px;
z-index:999;
background-color:#fff;
}
.search {
width: 100%;
float: left;
margin:0;
padding:0;
}
.search .pret {
list-style:none;
clear:both;
width:100%;
height: 60px;
padding:5px 0;
border-bottom: 1px solid #fff;
}
.search .pret:hover, .search .pret:hover > a {
background-color:#0099FF;
color:#fff;
cursor:pointer;
}
.search img {
float:left;
margin:0 5px;
padding:3px;
border:1px solid #ccc;
border-radius:5px;
}
.search a {
text-decoration:none;
color:#666;
display:inline;
}
JS:
$(document).ready(function() {
$("#search").keyup(function() {
var keywords = $(this).val();
if(keywords != "") {
$.ajax({
url: "get_search_result.php",
data: {keywords : keywords},
type: "POST",
success: function(resp) {
if(resp != "") {
$(".resultDiv").html(resp).show();
} else {
$(".resultDiv").html("").hide();
}
}
});
} else {
$(".resultDiv").html("").hide();
}
});
$(document).click(function() {
$("#search").val("");
$(".resultDiv").html("").hide();
});
});
And PHP File:
<?php include("db.php");?>
<?php
if(isset($_POST['keywords'])) {
$keywords_arr = explode(",", mysqli_real_escape_string($con, $_POST['keywords']));
$like = "";
foreach($keywords_arr as $key) {
$key = trim($key);
if($key != "") $like .= " `VehiclesTitle` like '%".$key."%' or";
}
$like = substr($like, 0, -3);
$sql = "select distinct * from `tblvehicles` where ".$like." limit 20";
$res = mysqli_query($con, $sql);
echo "<ul class='search'>";
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
if(file_exists("admin/img/vehicleimages/".$row->Vimage1."")) $img = "admin/img/vehicleimages/".$row->Vimage1."";
else $img = "images/post_images/default.jpg";
echo "<li class='pret'><a href=''><img src='".$img."' width='50' height='50' />".$row->VehiclesTitle."</a></li>";
}
} else {
echo "<li class='pret'>No match found!</li>";
}
echo "</ul>";
echo "<div class='clearfix'></div>";
}
?>

Adding elements to DOM with different coordinates each time

I'm creating a to-do list and I have a constructor function for creating the list items. Each time the user hits enter in the input field I want a new task element to be created just below the first one. As of now, I've tried several methods: looping through the constructor function and looping through the individual command that gives the position of the element within the constructor function.
let addTask = document.getElementById('addItem');
addTask.value = '';
let items = [];
let taskBG;
let taskText;
function Task(){
taskBG = document.createElement('div');
taskBG.style.height = '60px';
taskBG.style.width = '800px';
taskBG.style.marginTop = '-680px';
taskBG.style.marginLeft = '502px';
taskBG.style.backgroundColor = 'red';
taskText = document.createElement('div');
taskText.style.position = 'absolute';
taskText.style.marginTop = '-680px';
taskText.style.marginLeft = '550px';
taskText.style.fontSize = '50px';
taskText.style.fontWeight = 'bold';
taskText.style.color = 'lightgrey';
taskBG.appendChild(taskText);
document.body.appendChild(taskText);
document.body.appendChild(taskBG);
};
addTask.addEventListener('keydown', (ev) => {
if(ev.keyCode == 13){
items.push(addTask.value);
new Task();
addTask.value = '';
for(let i=0; i < items.length; i++){
taskText.textContent = items[i];
};
};
});
body {
background-image:url(backg.jpg);
background-size:2400px, 2400px;
}
#mainBG {
height:900px;
width:900px;
background-color:rgb(72, 73, 73);
opacity:0.6;
display:grid;
margin:0 auto;
}
#mainTitle {
display:grid;
margin:0 auto;
height:100px;
width:700px;
background-color:black;
border-radius:10px;
}
#mainText {
color:white;
font-weight:bold;
display:grid;
margin:0 auto;
font-size:70px;
font-family:"Arial Black", Gadget, sans-serif;
}
#addItem {
display:grid;
margin:0 auto;
height:30px;
width:400px;
margin-top:-360px;
border-radius:10px;
background-color:rgb(128, 201, 201);
color:white;
font-weight:bold;
font-family:"Arial Black", Gadget, sans-serif;
font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> To-Do </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainBG">
<div id="mainTitle">
<div id="mainText">To-Do</div>
</div>
<input id="addItem" type="text" placeholder="Add a Task!">
</div>
<script src="app.js"></script>
</body>
</html>
Try this:
let addTask = document.getElementById('addItem');
addTask.value = '';
let items = [];
let taskBG;
let taskText;
var totalTasks = 0;
function Task(){
taskBG = document.createElement('div');
taskBG.style.height = '60px';
taskBG.style.width = '800px';
if (totalTasks == 0) {
taskBG.style.marginTop = '-680px';
}
taskBG.style.marginLeft = '502px';
taskBG.style.backgroundColor = 'red';
taskText = document.createElement('div');
taskText.style.position = 'absolute';
if (totalTasks == 0) {
taskText.style.marginTop = '-680px';
}
taskText.style.marginLeft = '550px';
taskText.style.fontSize = '50px';
taskText.style.fontWeight = 'bold';
taskText.style.color = 'lightgrey';
taskBG.appendChild(taskText);
document.body.appendChild(taskText);
document.body.appendChild(taskBG);
if (totalTasks == 0) {
totalTasks = 1;
}
};
addTask.addEventListener('keydown', (ev) => {
if(ev.keyCode == 13){
items.push(addTask.value);
new Task();
addTask.value = '';
for(let i=0; i < items.length; i++){
taskText.textContent = items[i];
};
};
});
body {
background-image:url(backg.jpg);
background-size:2400px, 2400px;
}
#mainBG {
height:900px;
width:900px;
background-color:rgb(72, 73, 73);
opacity:0.6;
display:grid;
margin:0 auto;
}
#mainTitle {
display:grid;
margin:0 auto;
height:100px;
width:700px;
background-color:black;
border-radius:10px;
}
#mainText {
color:white;
font-weight:bold;
display:grid;
margin:0 auto;
font-size:70px;
font-family:"Arial Black", Gadget, sans-serif;
}
#addItem {
display:grid;
margin:0 auto;
height:30px;
width:400px;
margin-top:-360px;
border-radius:10px;
background-color:rgb(128, 201, 201);
color:white;
font-weight:bold;
font-family:"Arial Black", Gadget, sans-serif;
font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> To-Do </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainBG">
<div id="mainTitle">
<div id="mainText">To-Do</div>
</div>
<input id="addItem" type="text" placeholder="Add a Task!">
</div>
<script src="app.js"></script>
</body>
</html>
I have just added totalTasks var with the value of 0 and in task() function I am checking if the variable is 0 then add marginTop otherwise do not add it. As marginTop only needed in the first task for the remaining it doesn't be needed.

How should I display a full image, without resizing it in a div?

I have this code example:
$(document).ready(function () {
var msimg = $("#msbgimage");
var full = $("#msbgimagefull");
if (msimg.length && full.length) {
var imageurl = msimg.css('background-image').replace('url(', '');
imageurl = imageurl.substring(0, imageurl.length - 1);
msimg.on('click', function () {
/*window.open(imageurl, "_blank");*/
if (full.css('display') == "none")
full.css('display', 'block');
else
full.css('display', 'none');
});
full.on('click', function () {
full.css('display', 'none');
});
}
});
.msbgimage
{
width:300px;
height:300px;
max-width:80%;
max-height:80%;
border:1px solid black;
border-radius:25px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
margin-right:auto;
margin-left:auto;
margin-top:3px;
background-size:100% 100%;
background-repeat:no-repeat;
cursor:pointer;
}
.msbgimagefull
{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
cursor:pointer;
background-color:White;
background-size:100% 100%;
background-repeat:no-repeat;
display:none;
z-index:1337;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='msbgimage' class='msbgimage' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
<div id='msbgimagefull' class='msbgimagefull' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
It will currently resize the image to the device's full screen, meaning it will stretch it and what not.
What I want to do is show the image in its original size with overflow (if needed). Can I do it without knowing the image's size beforehand? If not, how can I do it with the size?
EDIT:
I managed to show the full image, but now I can't scroll it because it's defined as position:fixed because it should cover the whole screen so you can't see what's behind it. How can I fix it so there's are scroll bars for the image?
$(document).ready(function () {
var msimg = $("#msbgimage");
var full = $("#msbgimagefull");
var full2 = $("#msbgimagefullp");
if (msimg.length && full.length) {
var imageurl = msimg.css('background-image').replace('url(', '');
imageurl = imageurl.substring(0, imageurl.length - 1);
var tmp_image = new Image();
tmp_image.src = imageurl;
tmp_image.onload = function () {
full.css('width', this.width);
full.css('height', this.height);
msimg.on('click', function () {
/*window.open(imageurl, "_blank");*/
if (full2.css('display') == "none")
full2.css('display', 'block');
else
full2.css('display', 'none');
});
full2.on('click', function () {
full2.css('display', 'none');
});
}
}
});
.msbgimage
{
width:300px;
height:300px;
max-width:80%;
max-height:80%;
border:1px solid black;
border-radius:25px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
margin-right:auto;
margin-left:auto;
margin-top:3px;
background-size:100% 100%;
background-repeat:no-repeat;
cursor:pointer;
}
.msbgimagefull
{
background-repeat:no-repeat;
float:left;
}
.msbgimagefullp
{
cursor:pointer;
top:0;
bottom:0;
left:0;
right:0;
position:fixed;
z-index:1337;
display:none;
background-color:White;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='msbgimage' class='msbgimage' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
<div id='msbgimagefullp' class='msbgimagefullp'>
<div id='msbgimagefull' class='msbgimagefull' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
</div>
First, make a new Image object like
var img = new Image();
img.src = 'http://www.online-image-editor.com//styles/2014/images/example_image.png';
then, in the onload
img.onload = function(){
$('.msbgimage').css('width', this.width);
$('.msbgimage').css('height', this.height);
}
Finally, depending on the image size, add
background-size:cover;
$(document).ready(function () {
var img = new Image();
img.src = 'http://www.online-image-editor.com//styles/2014/images/example_image.png';
img.onload = function(){
$('.msbgimage').css('width', this.width);
$('.msbgimage').css('height', this.heightjjjjjj);
}
var msimg = $("#msbgimage");
var full = $("#msbgimagefull");
if (msimg.length && full.length) {
var imageurl = msimg.css('background-image').replace('url(', '');
imageurl = imageurl.substring(0, imageurl.length - 1);
msimg.on('click', function () {
/*window.open(imageurl, "_blank");*/
if (full.css('display') == "none")
full.css('display', 'block');
else
full.css('display', 'none');
});
full.on('click', function () {
full.css('display', 'none');
});
}
});
.msbgimage
{
background-size:cover;
width:300px;
height:300px;
max-width:80%;
max-height:80%;
border:1px solid black;
border-radius:25px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
margin-right:auto;
margin-left:auto;
margin-top:3px;
background-size:100% 100%;
background-repeat:no-repeat;
cursor:pointer;
}
.msbgimagefull
{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
cursor:pointer;
background-color:White;
background-size:100% 100%;
background-repeat:no-repeat;
display:none;
z-index:1337;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='msbgimage' class='msbgimage' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
<div id='msbgimagefull' class='msbgimagefull' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
I don't think you can if you're setting the size of the div. You can try this:
background-size:auto;
Or you may need to get the size onload:
var img = new Image();
var imgSize = {};
img.onload = function(){
//Set size
resizeImg(this.width, this.height)
}
img.src = "url/to/img"

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

Categories

Resources