javascript not setting innerHTML - javascript

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

Related

Capture selection inside contenteditable div after clicking bold button

I am trying to get the selected text inside a contenteditable div once a button is clicked and so far nothing I try is working. :( Here is the code I have thus far:
html
<html>
<head>
</head>
<body>
<div class="toolbar">
<span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>
</body>
</html>
css
html, body {
margin:0;
padding:0;
}
#my_textarea {
height:20rem;
width:20rem;
resize:none;
border:1px solid #000;
}
.toolbar {
display:flex;
flex-direction:row;
height:50px;
align-items:center;
border:1px solid #000;
width:200px;
padding:10px;
}
.tool {
border:1px solid #000;
width:1em;
height:1em;
line-height:1em;
text-align:center;
cursor:pointer;
}
.tool.bold {
font-weight:bold;
}
javascript
function saveSelection() {
if(window.getSelection) {
sel = window.getSelection();
if(sel.getRangeAt && sel.rangeCount){
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if(window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
var selection;
window.addEventListener("load", function(){
var textarea = document.getElementById("my_textarea");
var boldTool = document.getElementById("tool-bold");
textarea.addEventListener("blur", function(event){
selection = saveSelection();
});
boldTool.addEventListener("click", function(event){
console.log(selection);
});
});
I managed to only get the desired result if clicking inside an iframe.. If anyone could please help I would so much appreciate it. Thank you in advance and please go easy on me... :)
You may use selectionchange event
var selection;
window.addEventListener("DOMContentLoaded", function(){
var textarea = document.getElementById("my_textarea");
var boldTool = document.getElementById("tool-bold");
document.addEventListener("selectionchange", function(event){
var sel = document.getSelection();
if (sel.anchorNode.parentElement.id == 'my_textarea') {
selection = sel.toString();
}
});
boldTool.addEventListener("click", function(event){
console.log(selection);
});
});
html, body {
margin:0;
padding:0;
}
#my_textarea {
height:20rem;
width:20rem;
resize:none;
border:1px solid #000;
}
.toolbar {
display:flex;
flex-direction:row;
height:50px;
align-items:center;
border:1px solid #000;
width:200px;
padding:10px;
}
.tool {
border:1px solid #000;
width:1em;
height:1em;
line-height:1em;
text-align:center;
cursor:pointer;
}
.tool.bold {
font-weight:bold;
}
<div class="toolbar">
<span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>

How can I toggle between json files in javascript without page reload

I am playing around a hangman game (found on the web) using json file as a quizbank processed by js controller. There is only one file with quiz-words (quizbank.json) connected to the controller. I want to add some options like level, topic etc. by putting each option into separate json file and connecting them to the controller. Suppose, I have some files (quizbank1.json, quizbank2.json etc.) What is the best way to switch between them, preferably on the same page i.e. without reloading html. Below is the entire code. The JS:
$(document).ready(function () {
var questionBank=new Array;
var wordArray=new Array;
var previousGuesses=new Array;
var currentWord;
var currentClue;
var wrongAnswerCount;
$.getJSON('quizbank.json', function(data) {
for(i=0;i<data.wordlist.length;i++){
questionBank[i]=new Array;
questionBank[i][0]=data.wordlist[i].word;
questionBank[i][1]=data.wordlist[i].clue;
}
titleScreen();
})//gtjson
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN</div><div id="startButton" class="button">BEGIN</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN1</div><div id="startButton" class="button">BEGIN1</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN2</div><div id="startButton" class="button">BEGIN2</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function gameScreen(){
$('#gameContent').empty();
$('#gameContent').append('<div id="pixHolder"><img id="hangman" src="man.png"></div>');
$('#gameContent').append('<div id="wordHolder"></div>');
$('#gameContent').append('<div id="clueHolder"></div>');
$('#gameContent').append('<div id="guesses">Previous guesses:</div>');
$('#gameContent').append('<div id="feedback"></div>');
$('#gameContent').append('<form><input type="text" id="dummy" ></form>');
getWord();
var numberOfTiles=currentWord.length;
wrongAnswerCount=0;
previousGuesses=[];
for(i=0;i<numberOfTiles;i++){
$('#wordHolder').append('<div class="tile" id=t'+i+'></div>');
}
$('#clueHolder').append("HINT: "+currentClue);
$(document).on("keyup",handleKeyUp);
$(document).on("click",function(){$('#dummy').focus();});
$('#dummy').focus();
}//gamescreen
function getWord(){
var rnd=Math.floor(Math.random()*questionBank.length);
currentWord=questionBank[rnd][0];
currentClue=questionBank[rnd][1];
questionBank.splice(rnd,1);
wordArray=currentWord.split("");
}//getword
function handleKeyUp(event) {
//this line deals with glitch in recent versions of android
if(event.keyCode==229){event.keyCode=$('#dummy').val().slice($('#dummy').val().length-1,$('#dummy').val().length).toUpperCase().charCodeAt(0);}
if(event.keyCode>64 && event.keyCode<91){
var found=false;
var previouslyEntered=false;
var input=String.fromCharCode(event.keyCode).toLowerCase();
for(i=0;i<previousGuesses.length;i++){if(input==previousGuesses[i]){previouslyEntered=true;}}
if(!previouslyEntered){
previousGuesses.push(input);
for(i=0;i<wordArray.length;i++){
if(input==wordArray[i]){found=true;$('#t'+i).append(input);}
}//for
if(found){checkAnswer();}
else{wrongAnswer(input);}
}//if
}//if
}//handlekeyup
function checkAnswer(){
var currentAnswer="";
for(i=0;i<currentWord.length;i++){
currentAnswer+=($('#t'+i).text());
}
if(currentAnswer==currentWord){
victoryMessage();
};
}//checkanswer
function wrongAnswer(a){
wrongAnswerCount++;
var pos=(wrongAnswerCount*-75) +"px"
$('#guesses').append(" "+a);
$('#hangman').css("left",pos);
if(wrongAnswerCount==6){
defeatMessage();}
}//wronganswer
function victoryMessage(){
document.activeElement.blur();
$(document).off("keyup", handleKeyUp);
$('#feedback').append("CORRECT!<br><br><div id='replay' class='button'>CONTINUE</div>");
$('#replay').on("click",function (){
if(questionBank.length>0){
gameScreen()}
else{finalPage()}
});
}//victory
function defeatMessage(){
document.activeElement.blur();
$(document).off("keyup", handleKeyUp);
$('#feedback').append("You've Lost!<br>(answer= "+ currentWord +")<div id='replay' class='button'>CONTINUE</div>");
$('#replay').on("click",function (){
if(questionBank.length>0){
gameScreen()}
else{finalPage()}
});
}//defeat
function finalPage(){
$('#gameContent').empty();
$('#gameContent').append('<div id="finalMessage">You have finished all the words in the game!</div>');
}//finalpage
});//doc ready
The json:
{"wordlist":[
{
"word":"kangaroo",
"clue":"an animal"
},
{
"word":"starbucks",
"clue":"a company"
},
{
"word":"macaroni",
"clue":"a kind of food"
}
]
}
The html:
<!DOCTYPE html>
<head>
<title>Hangman Game</title>
<link href="main.css"rel="stylesheet"type="text/css"/>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div id="topbar">Hangman Game</div>
<div class="spacer"></div>
<div id="gameContent">
</div>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
background-color:#ECD69D;
font-family: Arial, Helvetica, sans-serif;
}
#topbar{
height:50px;
margin:auto;
margin-top:50px;
color:#FFF;
font-size:36px;
width:800px;
border-bottom:solid white 1px;
}
#gameContent{
margin:auto;
width:800px;
height:600px;
position:relative;
overflow:hidden;
background-color:#A98F4C;
border-radius:15px;
}
.spacer{
height:30px;
}
#gameTitle{
margin-top:100px;
text-align:center;
font-size:40px;
color:#fff;
}
.button{font-size:17px;
width:100px;
margin:auto;
margin-top:20px;
cursor:pointer;
border:solid 1px white;
border-radius:4px;
text-align:center;
color:#fff;
}
.button:hover{
background-color:#6AB0FD;
}
#replay{
margin-left:0px;}
#wordHolder{
margin-top:50px;
margin-left:150px;
}
#clueHolder{
margin-top:130px;
margin-left:150px;
}
#guesses{
margin-top:20px;
margin-left:150px;
}
#pixHolder{
margin-left:30px;
width:75px;
float:left;
overflow:hidden;
}
#pixHolder img{
position:relative
}
#feedback{
margin-top:20px;
margin-left:150px;
font-size:34px;
color:#fff;
}
.tile{
height:40px;
width:40px;
float:left;
margin-right:10px;
background-color:white;
text-align:center;
font-size:24px;
color:#333;
padding-top:5px;
}
#finalMessage{
text-align:center;
font-size:40px;
color:#fff;
width:90%;
margin:auto;
margin-top:100px;
}
#dummy{
position:absolute;
left:-200px;
top:0px;
}
Any help deeply appreciated.

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

Scroll from div to next div (different height)

I have got page with 5 div's. My div's have different heigh (it's adaptive). How I can go to next div by mouse when I scroll half of the current div?
I trying fullpage.js and onepage.js but it not working for me, because my div must be different height
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<div id="first">1 div</div>
<div id="second">2 div</div>
<div id="third">3 div</div>
<div id="fourht">4 div</div>
<div id="fiveth">5 div</div>
you're need get the height current active elem, and give for container transform translate( 0, -height ) on scroll, onepage and fullpage for there are work with this.
var $container = $('.container');
var $elem = $container.find('.elem');
var $active = $container.find('.active').height();
$(window).on('scroll',function(){
$container.css({"transform":"translate(0, -" + $active + "px)"});
});
body{
height: 100%;
}
.container{
transition: 1s all;
}
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="elem active">1 div</div>
<div id="second" class="elem">2 div</div>
<div id="third" class="elem">3 div</div>
<div id="fourht" class="elem">4 div</div>
<div id="fiveth" class="elem">5 div</div>
</div>
I created my version. Look at this https://codepen.io/damates/pen/VXdKjR .
Jquery:
$("#nextDiv, #previousDiv").click(function(){
actualTopOffset = $(window).scrollTop();
areas = $(".area");
find = false;
newPosition = 0;
type = $(this).attr("data-type");
areasCount = $(areas).length;
$.each(areas, function(index, val) {
if(type == "next"){//if we click to go next area
if($(areas).length > (index+1)){
if(actualTopOffset < $(areas[index+1]).offset().top && !find){// ask if area has top offset higher. If yes set new position
find = true;
newPosition = $(areas[index+1]).offset().top;
}
}
}else if(type == "prev"){ //if we click to go previous area
areasCount--;
if((areasCount) >= 0){
if(actualTopOffset > $(areas[areasCount]).offset().top && !find){// ask if area has top offset lower. If yes set new position
find = true;
newPosition = $(areas[areasCount]).offset().top;
}
}
}
});
if(find){ //If we found new position scroll on new position
$('html, body').animate({
scrollTop: newPosition
}, 1000);
}
});
CSS:
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
#nextDiv, #previousDiv{
position: fixed;
top: 20px;
background: red;
}
#previousDiv{
top: 0px;
}
HTML:
<div id="first" class="area">1 div</div>
<div id="second" class="area">2 div</div>
<div id="third" class="area">3 div</div>
<div id="fourht" class="area">4 div</div>
<div id="fiveth" class="area">5 div</div>
<div id="previousDiv" data-type="prev">Previous div</div>
Next div
EDIT VERSION WITH SCROLL
I change the script for scrolling. Look at to https://codepen.io/damates/pen/VXdKjR

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"

Categories

Resources