Aframe texture control over individual entities

Aframe texture control over individual entities - javascript

I was wondering how to set a texture on an entity but only that entity and then be able to place more by selecting texture buttons I can't get my code to work properly but I wanted to make it function a little more like minecraft than the original minecraft aframe demo did. If anybody can get my code to work it would be a real help. All the script that is commented out was because I wanted to find a better way to do whatever I was trying. Essentially I want to pick a texture in the menu at the bottom and then use that texture on my entities.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-controller-cursor-component#0.2.x/dist/aframe-controller-cursor-component.min.js"></script>
<script>
/**
* Snap entity to the closest interval specified by `snap`.
* Offset entity by `offset`.
*/
AFRAME.registerComponent('snap', {
dependencies: ['position'],
schema: {
offset: {type: 'vec3'},
snap: {type: 'vec3'}
},
init: function () {
this.originalPos = this.el.getAttribute('position');
},
update: function () {
const data = this.data;
const pos = AFRAME.utils.clone(this.originalPos);
pos.x = Math.floor(pos.x / data.snap.x) * data.snap.x + data.offset.x;
pos.y = Math.floor(pos.y / data.snap.y) * data.snap.y + data.offset.y;
pos.z = Math.floor(pos.z / data.snap.z) * data.snap.z + data.offset.z;
this.el.setAttribute('position', pos);
}
});
</script>
<script>/**
* Spawn entity at the intersection point on click, given the properties passed.
*
* `<a-entity intersection-spawn="mixin: box; material.color: red">` will spawn
* `<a-entity mixin="box" material="color: red">` at intersection point.
*/
AFRAME.registerComponent('intersection-spawn', {
schema: {
default: '',
parse: AFRAME.utils.styleParser.parse
},
init: function () {
const data = this.data;
const el = this.el;
el.addEventListener(data.event, evt => {
// Create element. (element create below v
const spawnEl = document.createElement('a-entity');
// Snap intersection point to grid and offset from center. (position)
spawnEl.setAttribute('position', evt.detail.intersection.point);
// Set components and properties.
Object.keys(data).forEach(name => {
if (name === 'event') { return; }
AFRAME.utils.entity.setComponentProperty(spawnEl, name, data[name]);
});
// Append to scene.
el.sceneEl.appendChild(spawnEl);
});
}
});</script>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 10,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
<style>
.transparentBox {
width: 200px;
background-color: #6969697a;
margin-right: 600px;
border-radius: 10px;
border: 2px solid black;
}
html {
width: 800px;
height: 600px;
cursor: crosshair;
}
a-scene {
cursor: crosshair;
width: 800px;
height: 600px;
}
body {
cursor: crosshair;
width: 800px;
height: 600px;
}
.Container {
margin-right: 8px;
}
</style>
</head>
<body>
<!-- aframe overlay -->
<div class="Container" style="position:relative;">
<!-- <a-scene id="updateMe" inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector#master/dist/aframe-inspector.min.js"> -->
<a-scene embedded>
<a-assets>
<img id="groundTexture" src="floor.jpg">
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
<a-mixin id="voxel1"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Box.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel2"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Brick.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel3"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Steel.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel4"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Pcb.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel5"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Grass.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel6"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Ice.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel7"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Fabric.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
</a-assets>
<a-obj-model rotation="-90 45 0" position="0 2 0" src="tinker.obj" mtl="obj.mtl"></a-obj-model>
<a-cylinder id="ground" src="#groundTexture" radius="30" height="0.1"></a-cylinder>
<a-sky id="background" src="#skyTexture" theta-length="90" radius="30"></a-sky>
<!-- Camera. -->
<a-camera fly="true" position="0 0.75 15" wasd-controls="acceleration: 20" wasd-controls-enabled="true" fov="90" reverse-mouse-drag="false">
<a-cursor id="Save1" intersection-spawn="event: click; mixin: voxel1"></a-cursor>
<a-cursor id="Save2" intersection-spawn="event: click; mixin: voxel2"></a-cursor>
<a-cursor id="Save3" intersection-spawn="event: click; mixin: voxel3"></a-cursor>
<a-cursor id="Save4" intersection-spawn="event: click; mixin: voxel4"></a-cursor>
<a-cursor id="Save5" intersection-spawn="event: click; mixin: voxel5"></a-cursor>
<a-cursor id="Save6" intersection-spawn="event: click; mixin: voxel6"></a-cursor>
<a-cursor id="Save7" intersection-spawn="event: click; mixin: voxel7"></a-cursor>
</a-camera>
</a-scene>
<!-- /aframe overlay -->
<center>
<div style="position:absolute; margin-right:8px; top:0px; width:205px; height:180px; left:0px; z-index:1000;">
<div class="transparentBox">
<b><h1 color="#FFFFFF" id="time">10:00</h1></b>
<p style="font-size:20px;font-family:monospace;margin-top:-20px;">Camera Height:</p>
<h1><b><a>↑</a>~~<a>↓</a></b></h1>
<iframe src="250-milliseconds-of-silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay loop id="track">
<source src="Magic_Scout_-_Cottages.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><center>
<button class="button" id="myBtn">Menu</button>
</center>
</div>
<div id="myModal" class="modal">
<center>
<!-- Modal content -->
<div class="modal-content">
<span id="clickMe" type="button" value="clickme" onclick="startTimer()" class="close">×</span>
<center>
<p class="beginMenuText"><b>Welcome to SandBox!</b></p>
<p class="Text">WASD to move, Space place blocks.</p>
<p class="Text2">You have 10 min. before the game restarts and all is lost.</p>
<p class="Text2point5">Have fun...</p>
</center>
<p class="Text3"><b><u>Credits:</u></b></p>
<p class="Text4">All music by <b>Kevin MacLeod</b></p>
<p class="Text5"><b>Aframe</b> by the Aframe authors.</p>
<p class="Text6">(Licenced under the <b>MIT Licence</b>)</p>
<p class="Text7">Inspiration from other <b>WebVR Projects.</b></p>
<p class="Text8">Voxel textures can be changed using the menu at the <b>bottom</b>.</p>
<p class="Text9"><b>Enjoy!</b></p>
<div class="unmute" onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>
</div>
</center>
</div>
<div class="textureMenu">
<div class="textureBox" id="Kill1" ><img src="Box.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill2"><img src="Brick.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill3"><img src="Steel.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill4"><img src="Pcb.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill5"><img src="Grass.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill6"><img src="Ice.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill7"><img src="Fabric.jpg" height="45" width="45"></div>
</div>
</div>
</center>
</div>
</body>
<head>
<!--<script>
document.getElementById('Kill1').addEventListener('click', function () {
var mixinEl = document.getElementById('Save1');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel1');
}
};
</script>
<script>
document.getElementById('Kill2').addEventListener('click', function () {
var mixinEl = document.getElementById('Save2');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel2');
}
};
</script>
<script>
document.getElementById('Kill3').addEventListener('click', function () {
var mixinEl = document.getElementById('Save3');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel3');
}
};
</script>
<script>
document.getElementById('Kill4').addEventListener('click', function () {
var mixinEl = document.getElementById('Save4');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel4');
}
};
</script>
<script>
document.getElementById('Kill5').addEventListener('click', function () {
var mixinEl = document.getElementById('Save5');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel5');
}
};
</script>
<script>
document.getElementById('Kill6').addEventListener('click', function () {
var mixinEl = document.getElementById('Save6');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel6');
}
};
</script>
<script>
document.getElementById('Kill7').addEventListener('click', function () {
var mixinEl = document.getElementById('Save7');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel7');
}
};
</script>-->
<style>
.spacer {
float: left;
}
.textureBox {
width: 47px;
height: 47px;
border: 2px solid black;
float: left;
}
.textureMenu {
height: 50px;
width: 412px;
padding: 10px;
background-color: #6969697a;
border: 2px solid black;
border-radius: 10px;
display:inline-block;
position: absolute;
left: 200%;
top: 313%;
transform: translate(-50%, -50%);
}
.Text9 {
font-size: 25px;
font-family: monospace;
margin-top: -13px;
border-bottom: 2px dashed black;
}
.Text8 {
font-size: 25px;
font-family: monospace;
margin-top: -13px;
}
.Text7 {
font-size: 18px;
font-family: monospace;
margin-top: -13px;
border-bottom: 2px dashed black;
}
.Text6 {
font-size: 10px;
font-family: monospace;
margin-top: -20px;
line-height: 1.3;
}
.Text5 {
font-size: 15px;
font-family: monospace;
margin-top: -22px;
line-height: 1.3;
}
.Text4 {
font-size: 15px;
font-family: monospace;
margin-top: -27px;
line-height: 1.3;
}
.Text3 {
font-size: 20px;
font-family: monospace;
margin-top: -30px;
line-height: 1.3;
}
.Text2point5 {
font-size: 25px;
font-family: monospace;
margin-top: -30px;
line-height: 1;
}
.Text2 {
font-size: 25px;
font-family: monospace;
margin-top: -30px;
line-height: 1;
}
.Text {
font-size: 25px;
font-family: monospace;
margin-top: -40px;
}
.beginMenuText {
font-size: 45px;
font-family: monospace;
margin-top: auto;
border-bottom: 3px dashed black;
}
.unmute {
background-image: url(http://franriavilla.in/images/unmute.png);
background-size: cover;
width: 35px;
height: 30px;
cursor: pointer;
}
.mute {
background-image: url(http://franriavilla.in/images/mute.png);
}
/* The Modal (background) */
.modal {
display: initial; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
width: 800px;
margin-right: 8px;
margin-top: 8px;
}
/* Modal Content/Box */
.modal-content {
background-color: #94989e;
margin-top: 8px; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 500px; /* Could be more or less, depending on screen size */
border-radius: 20px;
z-index: 20000;
}
/* The Close Button */
.close {
color: #FFF;
float: right;
margin-top: -15px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.button {
border-radius: 25px;
font-size: 20px;
color: white;
background-color: #6969697a;
border-color: white;
}
</style>
</head>
</html>

Switching textures can be done in a couple of ways
aframe primitives, like <a-box>, or <a-sphere> entities are an easy case. Just change the material.src attribute
el.setAttribute('material', 'src', newTexture)
models can be quite harder to deal, as you need to switch the mesh.map.texture property (possibly on all childs, not only one mesh).
var mesh = this.el.getObject3D('mesh')
var loader = new THREE.TextureLoader();
loader.load( url, (texture) => {
// onLoad callback
mesh.material.map = texture
mesh.material.needsUpdate = true
this.switch = !this.switch
}
)
The Selection might be done in a milion ways.
At first i wanted to store the information about the texture, and access it when a <a-box> is clicked, but a simple way would be to have a couple of images
<img class=".images" ....>
<img class=".images" ....>
and a component on each aframe primitive which would be:
detecting clicks on those images -> storing the information -> using it when we are clicked:
detecting clicks on images:
var els = document.getElementsByClassName("images");
Array.from(els).forEach((el) => {
el.addEventListener('click', (e)=>{
this.selectedTexture = e.target.src
})
});
applying texture when clicked:
this.el.addEventListener('click', (e) => {
if (!this.selectedTexture) {
return
}
this.el.setAttribute("material", "src", this.selectedTexture)
})
This fiddle contains all the above. Two boxes are switching textures by themselves, and the rest will apply the selected image as texture.

Related

pdf.getPage(1).then(function(page) - How to display whole PDF (not only one page) with PDF.JS?

sample imageenter image description here
How to display the whole PDF (not just one page) with PDF.JS ?
I got the reference from the code here : https://codepen.io/ValerioEmanuele/pen/pGRZqe
but it only shows 1 page, can't display the whole pdf page ?
and i use library :
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
example index.php
<?php
$pdf = base64_encode(file_get_contents('tes2.pdf'));
?>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding:10px">
<label>Xpos:</label>
<input type="text" id="Xpos" value="Xpos" readonly>
<label>Ypos:</label>
<input type="text" id="Ypos" value="Ypos" readonly>
</div>
</div>
<div class="row">
<div class="col-md-12" id="pdfManager" style="display:none">
<div class="row" id="selectorContainer">
<div class="col-fixed-605 col-md-9">
<div style="display:block;height:100px">
<img class="drag-drop dropped-out" data-x="0" data-y="0" src="ttd.png" style="width:150px;height: auto">
</div>
<div id="pageContainer" class="pdfViewer singlePageView dropzone nopadding" style="background-color:transparent">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- parameters showed on the left sidebar -->
<input id="parameters" type="hidden" value='[{"idParametro":480,"descrizione":"RAPINA","valore":"X","nota":null},{"idParametro":481,"descrizione":"CAUSAL_G00","valore":"X","nota":null},{"idParametro":482,"descrizione":"A","valore":"A","nota":null},{"idParametro":483,"descrizione":"POSTA_REGISTRATA","valore":"X","nota":null},{"idParametro":484,"descrizione":"CD","valore":"CD","nota":null},{"idParametro":485,"descrizione":"DATA_ALERT","valore":"data alert","nota":null},{"idParametro":486,"descrizione":"UP","valore":"UP","nota":null},{"idParametro":488,"descrizione":"DATA_MP","valore":"DATA1","nota":null},{"idParametro":489,"descrizione":"AL_QUALITA","valore":"AL_QUALITA","nota":null},{"idParametro":490,"descrizione":"CAUSAL_G60","valore":"X","nota":null},{"idParametro":491,"descrizione":"DATA","valore":"DATA","nota":null},{"idParametro":492,"descrizione":"DATA_DENUNCIA","valore":"data denuncia","nota":null},{"idParametro":493,"descrizione":"DATA_SPEDIZIONE","valore":"data spedizione","nota":null},{"idParametro":494,"descrizione":"DATA_LAVORAZIONE","valore":"DATA_LAVORAZIONE","nota":null},{"idParametro":495,"descrizione":"NUMERO_FAX","valore":"NUMERO_FAX","nota":null},{"idParametro":496,"descrizione":"SMARRIMENTO","valore":"X","nota":null},{"idParametro":497,"descrizione":"STRUTT_ACCETTAZIONE","valore":"STRUTT_ACCETTAZIONE","nota":null},{"idParametro":498,"descrizione":"FURTO","valore":"X","nota":null},{"idParametro":499,"descrizione":"BARCODE","valore":"BARCODE","nota":null},{"idParametro":502,"descrizione":"CAUSA_MAGGIORE","valore":"X","nota":null},{"idParametro":503,"descrizione":"PACCHI","valore":"X","nota":null},{"idParametro":504,"descrizione":"TIPOLOGIA_EVENTO","valore":"TIPOLOGIA_EVENTO","nota":null},{"idParametro":505,"descrizione":"NOTE","valore":"NOTE","nota":null},{"idParametro":506,"descrizione":"DATA_RITROVAMENTO","valore":"data ritrovamento","nota":null},{"idParametro":507,"descrizione":"DATA_ACCETTAZIONE","valore":"DATA_ACCETTAZIONE","nota":null},{"idParametro":509,"descrizione":"AREA_LOGISTICA","valore":"AREA_LOGISTICA","nota":null},{"idParametro":511,"descrizione":"DA","valore":"DA","nota":null},{"idParametro":512,"descrizione":"DATA_DENUNCIA","valore":"DATA_DENUNCIA","nota":null},{"idParametro":513,"descrizione":"TIPOLOGIA_ALERT","valore":"TIPOLOGIA","nota":null},{"idParametro":515,"descrizione":"STRUTTURA_RILIEVO","valore":"STRUTTURA_RILIEVO","nota":null},{"idParametro":516,"descrizione":"STRUTTURA_DENUNCIA","valore":"STRUTTURA_DENUNCIA","nota":null},{"idParametro":517,"descrizione":"DISPACCIO","valore":"DISPACCIO","nota":null},{"idParametro":518,"descrizione":"CMP_CP","valore":"CMP_CP","nota":null},{"idParametro":520,"descrizione":"FURTO_EFFRAZIONE","valore":"X","nota":null}]' />
<!-- Below the pdf base 64 rapresentation -->
<input id="pdfBase64" type="hidden" value="<?php echo $pdf ?>" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js"></script>
<script src="script.js"></script>
</body>
</html>
example css.css
#messageContainer{
display:none;
}
#outer-dropzone {
height: 140px;
touch-action: none;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 100%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
position:absolute;
z-index:999;
min-width: 40px;
padding: 0em 0.5em;
padding-left:0;
color: #fff;
background-color: #29e;
border: none;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
line-height: 10px;
padding-right: 0 !important;
padding-left: 5px !important;
}
.drag-drop.can-drop {
color: #000;
background-color: transparent;
opacity:0.9;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
/* IE 5-7 */
filter: alpha(opacity=90);
/* Netscape */
-moz-opacity: 0.9;
/* Safari 1.x */
-khtml-opacity: 0.9;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.circle {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #323c3c;
float: left;
display: inline-block;
margin-top: 1px;
margin-right: 2px;
}
.dropped-out{
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
width:200px;
color: black;
}
.col-fixed-240{
width:240px;
height:100%;
z-index:1;
}
.col-fixed-605{
margin-left:240px;
width:605px;
height:100%;
z-index:1;
}
.page-item{
cursor:pointer;
}
.pager{
margin-bottom:30px !important;
margin-top:0px !important;
margin-bottom: -31px !important;
}
.drag-drop.dropped-out .descrizione {
font-size: 12px !important;
}
#the-canvas{
height:842px;
width: 595px;
}
example script.js
var pdfData = atob($('#pdfBase64').val());
/*
* costanti per i placaholder
*/
var maxPDFx = 595;
var maxPDFy = 842;
var offsetY = 0;
'use strict';
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
//
// Asynchronous download PDF
//
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
//page.render(renderContext);
page.render(renderContext).then(function() {
$(document).trigger("pagerendered");
}, function() {
console.log("ERROR");
});
});
});
/* The dragging code for '.draggable' from the demo above
* applies to this demo as well so it doesn't have to be repeated. */
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '.drag-drop',
// Require a 100% element overlap for a drop to be possible
overlap: 1,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.classList.remove('dropped-out');
//draggableElement.textContent = 'Dragged in';
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.classList.add('dropped-out');
//event.relatedTarget.textContent = 'Dragged out';
},
ondrop: function (event) {
//console.log(event);
},
ondropdeactivate: function (event) {
var dropzonePostion = $(event.target).position();
elementPosition = $(event.relatedTarget).position();
console.log(elementPosition.top +$(event.target).height());
x = elementPosition.left - dropzonePostion.left;
y = (dropzonePostion.top +$(event.target).height()) - (elementPosition.top + $(event.relatedTarget).height());
$('#Xpos').val(x);
$('#Ypos').val(y);
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
interact('.drag-drop')
.draggable({
inertia: false,
restrict: {
restriction: "#selectorContainer",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
autoScroll: true,
// dragMoveListener from the dragging demo above
onmove: dragMoveListener,
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform ='translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing demo
window.dragMoveListener = dragMoveListener;
$(document).bind('pagerendered', function (e) {
$('#pdfManager').show();
});

How do you add a cool down to a button with multiple functions?

There's only one button added, and I want it to - when clicked, have multiple functions
Function 1 returns a "emote" and a GIF.
I want to implement a cooldown so you can't rapidly tap / click the button.
The multiple onClicks isn't working for me either.
I've played around with it and no prevail.
Edit: I changed the way I setup my code,
for some reasion, the two onClick method isn't working, is their an addon for that in Studio Visual Code (currently running it from there)?
<!DOCTYPE html>
<html>
<body>
<style>
.Vibe-Check-heading{
font-size: 50px;
font-family: Comfortaa;
position: absolute;
top: 0px;
left: 765px;
}
.instructions {
font-size: 25px;
font-family: Comfortaa;
position: absolute;
top: 100px;
left: 650px;
}
.steps {
font-size: 15px;
font-family: Comfortaa;
position: absolute;
top: 140px;
left: 650px;
}
.vibe-btn{
font-family: Comfortaa;
padding: .75rem 2.5rem;
font-weight: 600;
background: #424242;
z-index: 10;
color: #fff;
border-radius: 30px;
border: 0;
font-size: 14px;
position: absolute;
top: 200px;
left: 650px;
margin: auto;
width:30%;
size: 40px;
}
#name {
font-family: Comfortaa;
font-size: 25px;
position: absolute;
top: 240px;
left: 680px;
}
#gif {
margin: 20px;
padding: 20px;
position: absolute;
top: 260px;
left: 640px;
}
</style>
<!--------------------------------------------------------------------------->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<!--------------------------------------------------------------------------->
<div>
<h1 class="Vibe-Check-heading"> Vibe Check</h1>
</div>
<!--------------------------------------------------------------------------->
<div>
<h2 class="instructions"> Instructions: </h2>
<h3 class="steps">click the button. </h3>
</div>
<!--------------------------------------------------------------------------->
<div>
<script>
var adjectives = ["big sad", "vibe check failed","Doot-Doot", "pog","straight-vibin", "bruh moment", "positive","AAAAAAAAAAAA","laundry basket","Jammin"];
var gifs = [
"https://media.tenor.com/images/6eab85d212226d1af8c09bf2103ee955/tenor.gif", //0
"https://i.imgur.com/fBQFAPm.gif", //1
"https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif", //2
"https://pbs.twimg.com/profile_images/630766742336352256/YyIteWQy_400x400.jpg",//3
"https://media.giphy.com/media/gSJfzjAfRUCly/giphy.gif", //4
"https://i.ytimg.com/vi/2ZIpFytCSVc/maxresdefault.jpg", //5
"https://media.giphy.com/media/UqpjszfpiOiLA0L5le/giphy.gif", //6
"https://media.giphy.com/media/WTL02R1L7YCGUEunFy/giphy.gif", //7
"https://p7.hiclipart.com/preview/767/88/925/falkor-the-neverending-story-childlike-empress-meme-laundry-laundry-basket.jpg", //8
"https://i.kym-cdn.com/entries/icons/facebook/000/022/615/CybuEaUVIAAF_HV.jpg" //9
];
function generator(){
var index = Math.floor(Math.random() * adjectives.length);
document.getElementById("name").innerHTML = adjectives[index] + " ";
document.getElementById("gif").src = gifs[index];
alert($("name"));
};
function cooldown() {
var btn = $("vibe-btn");
document.getElementsByClassName("vibe-btn")
btn.css("pointer-events", "none" );
setTimeout(function() {
btn.css("pointer-events", "auto" );
}, 80000);
}
</script>
<button onClick="generator()" class="vibe-btn">The Vibe is</button>
<h1 style="text-align:center" id="name"></h1>
</div>
<!--------------------------------------------------------------------------->
<div>
<img id="gif" width="400" height="400" >
</div>
<!--------------------------------------------------------------------------->
</body>
</html>

You can enable and disable the disable attribute of the button tag
https://www.w3schools.com/jsref/prop_pushbutton_disabled.asp
I used a for loop to set the timer and used booleans to disable and enable the button. Feel free to play around (for some reason I can't get y to change the innerText of the button to alternate between Enabled and Disabled when necessary but that's a different issue for a different post)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id = "buttonID" type = "button" onclick = "cooldown()" >The Button</button>
<script>
var x = document.getElementById("buttonID").disabled = false;
var y = document.getElementById("buttonID").innerText = "Enabled"
//cooldown function
var cooldown = function(){
//disables or enables the button
var cd = true;
//disables button for a timer
var timer = 0;
for (timer = 0; timer < 9999; timer += 0.5){
if (timer === 9998.5){
cd = false;
} else {
cd = true;
}
console.log(cd)
console.log(timer)
}
//enables and disables buttons depending on value of cd
if (cd === true){
x = document.getElementById("buttonID").disabled = true;
y = document.getElementById("buttonID").innerText = "Disabled"
} else{
x = document.getElementById("buttonID").disabled = false;
y = document.getElementById("buttonID").innerText = "Enabled"
}
}
</script>
</body>
</html>

Instead of disabled, you can use CSS property pointer-events.
var adjectives = ["big sad", "vibe check failed","Doot-Doot", "pog","straight-vibin", "bruh moment", "positive","AAAAAAAAAAAA","laundry basket","Jammin"];
var gifs = [
"https://media.tenor.com/images/6eab85d212226d1af8c09bf2103ee955/tenor.gif", //0
"https://i.imgur.com/fBQFAPm.gif", //1
"https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif", //2
"https://pbs.twimg.com/profile_images/630766742336352256/YyIteWQy_400x400.jpg",//3
"https://media.giphy.com/media/gSJfzjAfRUCly/giphy.gif", //4
"https://i.ytimg.com/vi/2ZIpFytCSVc/maxresdefault.jpg", //5
"https://media.giphy.com/media/UqpjszfpiOiLA0L5le/giphy.gif", //6
"https://media.giphy.com/media/WTL02R1L7YCGUEunFy/giphy.gif", //7
"https://p7.hiclipart.com/preview/767/88/925/falkor-the-neverending-story-childlike-empress-meme-laundry-laundry-basket.jpg", //8
"https://i.kym-cdn.com/entries/icons/facebook/000/022/615/CybuEaUVIAAF_HV.jpg" //9
];
function generator(){
var index = Math.floor(Math.random() * adjectives.length);
document.getElementById("name").innerHTML = adjectives[index] + " ";
document.getElementById("gif").src = gifs[index];
};
function cooldown() {
var btn = $('#vibe-btn');
btn.css("pointer-events", "none" );
setTimeout(function() {
btn.css("pointer-events", "auto" );
}, 15000);
};
.vibe-check-heading{
background-color: rgb(98, 211, 255);
font-size: 20px;
font-family: Comfortaa;
padding: 10rem;
}
#vibe-btn{
font-family: Comfortaa;
padding: .75rem 2.5rem;
font-weight: 600;
background: #424242;
z-index: 10;
color: #fff;
border-radius: 30px;
border: 0;
font-size: 14px;
top: .5rem;
left: .5rem;
margin: auto;
width:50%;
size: 60px;
}
#gif-placer {
margin: 20px;
padding: 20px;
}
.instructions {
font-size: 15px;
font-family: Comfortaa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<div>
<h1 class="Vibe-Check-heading">
Vibe Check
</h1>
</div>
<div class="instructions">
<h2>
Instructions: <br>
Just click the button.
</h2>
</div>
<div class="vibing">
<button onclick="generator(); cooldown()" id="vibe-btn">The Vibe is</button>
<h1 class="jumbotron text-center rokkitt" id="name"></h1>
</div>
<div class ="gif-placer">
<img id="gif" width="400" height="400" style="border-color: white;" >
</div>

Jquery effect function call not working in javascript

I have a code which displays congradulations and displays stars popping out when body loads in a blue screen for for a timeout of 4000
when body loads it calls a function animatecongrat() which has two functions in it given below
The text congradulations is animated in function animatetext(), and stars animated in animateblobs()
My problem is text congradulation is animated and bluescreen appears for a timeout of 4000 but stars ( var numberOfStars = 20; in blob) are not appearing and animated in blue screen.
How to solve this? How do i achieve this effect?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<script>
var timeOut;
function animateCongrat()
{
debugger;
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
reset();
var numberOfStars = 20;
for (var i = 0; i < numberOfStars; i++) {
$('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
}
animateText();
animateBlobs();
hideCongratAndBlueBody();
}
function addBlueBody() {
$('body').addClass('bodyblue');
$('#2').hide();
$('.hiddenimage').show();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$('body').removeClass('bodyblue');
}, 4000);
}
function reset() {
$.each($('.blob'), function(i) {
TweenMax.set($(this), {
x: 0,
y: 0,
opacity: 1
});
});
TweenMax.set($('h1'), {
scale: 1,
opacity: 1,
rotation: 0
});
}
function animateText() {
TweenMax.from($('h1'), 0.8, {
scale: 0.4,
opacity: 0,
rotation: 15,
ease: Back.easeOut.config(4),
});
}
function animateBlobs() {
debugger;
var xSeed = _.random(500, 500);
debugger;
var ySeed = _.random(300, 300);
$.each($('.blob'), function(i) {
var $blob = $(this);
var speed = _.random(1, 5);
var rotation = _.random(5, 100);
var scale = _.random(0.8, 1.5);
var x = _.random(-xSeed, xSeed);
var y = _.random(-ySeed, ySeed);
TweenMax.to($blob, speed, {
x: x,
y: y,
ease: Power1.easeOut,
opacity: 0,
rotation: rotation,
scale: scale,
onStartParams: [$blob],
onStart: function($element) {
$element.css('display', 'block');
},
onCompleteParams: [$blob],
onComplete: function($element) {
$element.css('display', 'none');
}
});
});
}
#font-face {
font-family: 'Sigmar One';
font-style: normal;
font-weight: 400;
src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}
#import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
.bodyblue {
background: #3da1d1;
color: #fff;
width: 0.3vw;
height: 0.5vh;
}
.congrats {
position: absolute;
top: 140px;
width: 550px;
height: 100px;
padding: 20px 10px;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
display: none;
}
h1 {
transform-origin: 50% 50%;
font-size: 50px;
font-family: 'Sigmar One', cursive;
cursor: pointer;
z-index: 2;
text-align: center;
width: 100%;
position: absolute;
top:-10.5vh;
left: 0.3vw;
}
.blob {
height: 50px;
width: 50px;
color: #ffcc00;
position: absolute;
top: 45%;
left: 45%;
z-index: 1;
font-size: 30px;
display: none;
}
.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
body{
background-image:
background-size: 100vw 100vh;
}
.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}
ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="animateCongrat();">
<div class="congrats">
<h1>Congratulations!</h1>
</div>
</body>

How to add a textarea to the image preview when uploading

I've been struggling with this problem 3 entire days. Any help would be appreciated!
I have a button 'ADD MY PHOTO' and when clicked, it comes a popup with the option to upload a picture or more. So, when I click 'Select Files' button or I drag & drop a picture or more, it will preview the pictures on the right side.
What I need help with is: when I upload a picture or 2, I want on the right side of every picture to display a textarea where the user can write something (like a caption). Also, after the pictures and captures are displayed I need the option to remove one or all of them. Here is a picture:
Here is the CodePen code: https://codepen.io/anon/pen/VEQMwm
Thanks in advance for help.
Also, here is the code:
// ---------- THIS IS FOR THE POPUP ---------- //
function CustomAlert() {
this.performCustomAlert = function (dialog) {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = windowHeight + "px";
dialogbox.style.display = "block";
}
this.ok = function () {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var newAlert = new CustomAlert();
// ------------- TABS ----------------- //
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
// ---------------- UPLOAD --------------------------//
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})
formData.append('upload_preset', 'ujpu6gyk')
formData.append('file', file)
xhr.send(formData)
}
.add-photo{
width: 18%;
background-color: #00a100;
color: #fff;
padding: 11px 13px;
border: 3px solid #00a100;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
cursor: pointer;
text-align: center;
font-size: 13px;
font-weight: 550;
border-radius: 1px;
margin-left: 41%;
}
* {
box-sizing: border-box;
}
#dialogoverlay {
display: none;
opacity: 0.5;
/*so that user can see through it*/
position: fixed;
top: 0px;
left: 0px;
background: black;
z-index: 10;
height: 100%;
width: 100%;
}
#dialogbox {
display: none;
position: fixed;
background: #ffffff;
border-radius: 1px;
border: 0.5px solid #ccc;
z-index: 10;
left: 25%;
top: 20%;
width: 50%;
height: 400px;
-webkit-animation: fadeEffect 0.3s;
animation: fadeEffect 0.3s;
}
#close-popup {
float: right;
background-color: red;
color: #474747;
font-size: 15px;
}
.header{
position: absolute;
width: 100.2%;
background-color: white;
height: 11%;
top: 5.4%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-centre{
width: 99%;
height: 77%;
margin-left: 3px;
margin-top: 46px;
}
#content-leftside{
width: 65%;
height: 100%;
float: left;
}
.tab {
overflow: hidden;
}
.tab button {
width: 33.3%;
height: 14%;
background-color: #acacac;
float: left;
color: white;
outline: none;
cursor: pointer;
padding: 6px;
transition: 0.3s;
border-right: 1px solid #fff;
}
.tab button:hover {
background-color: #474747;
}
.tab button.active {
background-color: #474747;
}
.tabcontent {
display: none;
padding: 6px 12px;
}
#content-rightside{
width: 35%;
height: 100%;
float: right;
background-color: #ffffff;
border-left: 1px solid #dddddd;
}
#right-topbar{
width: 100%;
height: 9%;
background-color: #474747;
color: #fff;
padding: 5px;
text-align: center;
transition: 0.3s;
}
.footer{
position: absolute;
width: 100.2%;
background-color: #474747;
height: 11%;
bottom: -5.6%;
left: 50%;
/* top: calc(50% - 50px); */
transform: translate(-50%, -50%);
}
/*------------------- UPLOAD AREA -----------------------*/
#drop-area {
border: 2px dashed #ccc;
border-radius: 8px;
width: 98%;
margin: 24px auto;
padding: 15px;
}
#progress-bar{
display: none;
}
#gallery {
margin-top: 5%;
}
#gallery img {
width: 55px;
height: 50px;
margin-bottom: 10px;
margin-left: 10px
}
.button {
display: inline-block;
padding: 10px;
background: #00a100;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
#fileElem {
display: none;
}
#upload-button{
font-size: 40px;
color: #00a100;
<button class="add-photo" onclick="newAlert.performCustomAlert()">ADD MY PHOTO</button>
<div class="popup-upload">
<div id="dialogoverlay"></div>
<!--------------- SELECT MEDIA BOX ---------------->
<div id="dialogbox">
<!--------------- HEADER OF THE BOX ---------------->
<div class="header">
<!--------------- CLOSE POPUP ---------------->
<button id="close-popup" onclick="newAlert.ok()"><i class="fa fa-times" style="margin-top: 8px; margin-right: 7px;"></i></button>
<div class="select-media">
<i class="fa fa-camera" id="select-camera"></i>
<h2 id="select-media">SELECT YOUR MEDIA</h2>
</div>
</div>
<!--------------- CONTENT OF THE BOX ---------------->
<div class="content-centre">
<!--------------- LEFT CONTENT ---------------->
<div id="content-leftside">
<div class="tab">
<button class="tablinks" id="defaultOpen" onclick="openTab(event, 'Desktop')"><span class="fa fa-desktop"></span> Desktop</button>
<button class="tablinks" onclick="openTab(event, 'Facebook')"><span class="fa fa-facebook"></span> Facebook</button>
<button class="tablinks" onclick="openTab(event, 'Instagram')"><span class="fa fa-instagram"></span> Instagram</button>
</div>
<div id="Desktop" class="tabcontent">
<div id="drop-area">
<form class="my-form">
<span class="fa fa-cloud-upload" id="upload-button"></span>
<p id="drag-text">Drag & Drop Your <br> Photos or Videos <br> To Upload</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">or Select Files</label>
</form>
</div>
</div>
<div id="Facebook" class="tabcontent">
<h3>Facebook</h3>
</div>
<div id="Instagram" class="tabcontent">
<h3>Instagram</h3>
</div>
</div>
<!--------------- RIGHT CONTENT ---------------->
<div id="content-rightside">
<!--------------- RIGHT TOPBAR ---------------->
<div id="right-topbar">
<h1>Selected Media</h1>
</div>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery"/></div>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</div>

Look into below code, I made some changes on previewFile() function.
I hope, by looking below code you can get idea.
// ---------- THIS IS FOR THE POPUP ---------- //
function CustomAlert() {
this.performCustomAlert = function(dialog) {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = windowHeight + "px";
dialogbox.style.display = "block";
}
this.ok = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var newAlert = new CustomAlert();
// ------------- TABS ----------------- //
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
// ---------------- UPLOAD --------------------------//
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults(e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for (let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
var mainDiv = document.createElement("div")
mainDiv.className = "box"
mainDiv.appendChild(img)
var textbx = document.createElement("textarea")
textbx.placeholder ="Caption..."
mainDiv.appendChild(textbx)
var btn = document.createElement("button")
var tx = document.createTextNode("X");
btn.onclick = function() {
$(this).closest(".box").remove()
}
btn.appendChild(tx);
mainDiv.appendChild(btn)
document.getElementById('gallery').appendChild(mainDiv)
}
}
function uploadFile(file, i) {
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
} else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})
formData.append('upload_preset', 'ujpu6gyk')
formData.append('file', file)
xhr.send(formData)
}
.add-photo {
width: 18%;
background-color: #00a100;
color: #fff;
padding: 11px 13px;
border: 3px solid #00a100;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
cursor: pointer;
text-align: center;
font-size: 13px;
font-weight: 550;
border-radius: 1px;
margin-left: 41%;
}
* {
box-sizing: border-box;
}
#dialogoverlay {
display: none;
opacity: 0.5;
/*so that user can see through it*/
position: fixed;
top: 0px;
left: 0px;
background: black;
z-index: 10;
height: 100%;
width: 100%;
}
#dialogbox {
display: none;
position: fixed;
background: #ffffff;
border-radius: 1px;
border: 0.5px solid #ccc;
z-index: 10;
left: 25%;
top: 20%;
width: 50%;
height: 400px;
-webkit-animation: fadeEffect 0.3s;
animation: fadeEffect 0.3s;
}
#close-popup {
float: right;
background-color: red;
color: #474747;
font-size: 15px;
}
.header {
position: absolute;
width: 100.2%;
background-color: white;
height: 11%;
top: 5.4%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-centre {
width: 99%;
height: 77%;
margin-left: 3px;
margin-top: 46px;
}
#content-leftside {
width: 65%;
height: 100%;
float: left;
}
.tab {
overflow: hidden;
}
.tab button {
width: 33.3%;
height: 14%;
background-color: #acacac;
float: left;
color: white;
outline: none;
cursor: pointer;
padding: 6px;
transition: 0.3s;
border-right: 1px solid #fff;
}
.tab button:hover {
background-color: #474747;
}
.tab button.active {
background-color: #474747;
}
.tabcontent {
display: none;
padding: 6px 12px;
}
#content-rightside {
width: 35%;
height: 100%;
float: right;
background-color: #ffffff;
border-left: 1px solid #dddddd;
}
#right-topbar {
width: 100%;
height: 9%;
background-color: #474747;
color: #fff;
padding: 5px;
text-align: center;
transition: 0.3s;
}
.footer {
position: absolute;
width: 100.2%;
background-color: #474747;
height: 11%;
bottom: -5.6%;
left: 50%;
/* top: calc(50% - 50px); */
transform: translate(-50%, -50%);
}
/*------------------- UPLOAD AREA -----------------------*/
#drop-area {
border: 2px dashed #ccc;
border-radius: 8px;
width: 98%;
margin: 24px auto;
padding: 15px;
}
#progress-bar {
display: none;
}
#gallery {
margin-top: 5%;
}
#gallery img {
width: 55px;
height: 50px;
margin-bottom: 10px;
margin-left: 10px
}
.button {
display: inline-block;
padding: 10px;
background: #00a100;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
#fileElem {
display: none;
}
#upload-button {
font-size: 40px;
color: #00a100;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-photo" onclick="newAlert.performCustomAlert()">ADD MY PHOTO</button>
<div class="popup-upload">
<div id="dialogoverlay"></div>
<!--------------- SELECT MEDIA BOX ---------------->
<div id="dialogbox">
<!--------------- HEADER OF THE BOX ---------------->
<div class="header">
<!--------------- CLOSE POPUP ---------------->
<button id="close-popup" onclick="newAlert.ok()"><i class="fa fa-times" style="margin-top: 8px; margin-right: 7px;"></i></button>
<div class="select-media">
<i class="fa fa-camera" id="select-camera"></i>
<h2 id="select-media">SELECT YOUR MEDIA</h2>
</div>
</div>
<!--------------- CONTENT OF THE BOX ---------------->
<div class="content-centre">
<!--------------- LEFT CONTENT ---------------->
<div id="content-leftside">
<div class="tab">
<button class="tablinks" id="defaultOpen" onclick="openTab(event, 'Desktop')"><span class="fa fa-desktop"></span> Desktop</button>
<button class="tablinks" onclick="openTab(event, 'Facebook')"><span class="fa fa-facebook"></span> Facebook</button>
<button class="tablinks" onclick="openTab(event, 'Instagram')"><span class="fa fa-instagram"></span> Instagram</button>
</div>
<div id="Desktop" class="tabcontent">
<div id="drop-area">
<form class="my-form">
<span class="fa fa-cloud-upload" id="upload-button"></span>
<p id="drag-text">Drag & Drop Your <br> Photos or Videos <br> To Upload</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">or Select Files</label>
</form>
</div>
</div>
<div id="Facebook" class="tabcontent">
<h3>Facebook</h3>
</div>
<div id="Instagram" class="tabcontent">
<h3>Instagram</h3>
</div>
</div>
<!--------------- RIGHT CONTENT ---------------->
<div id="content-rightside">
<!--------------- RIGHT TOPBAR ---------------->
<div id="right-topbar">
<h1>Selected Media</h1>
</div>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</div>

just replace previewFile function with this.
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onloadend = function() {
var gallleryDiv=document.getElementById('gallery');
var wrapperDiv = document.createElement("div");
let img = document.createElement('img');
img.src = reader.result;
wrapperDiv.className = "wrapperDiv";
wrapperDiv.appendChild(img)
var textbx = document.createElement("textarea");
wrapperDiv.appendChild(textbx);
var btn = document.createElement("button");
var tx = document.createTextNode("X");
btn.onclick = function() {$(this).closest(".wrapperDiv").remove()}
btn.appendChild(tx);
wrapperDiv.appendChild(btn);
gallleryDiv.appendChild(wrapperDiv);
}
}

.stop on .mouseover or .hover

I can't figure out how to stop and resume the slide on a mouseover or hover occurrence. I basically want to stop all the scripts when .mouseover or .hover is triggered. Can anyone help me on this?
Edit: Code should work if you simply copy paste it, it is all hosted externally
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4,
items: {
width: $('#wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration: 1000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass('active');
// hide current block
data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass('active');
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find('.slide-block').stop().fadeIn();
}
},
onCreate: function(data) {
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide', this).clone(true),
_width = $('#wrapper').width();
$(this).trigger('insertItem', [newitems, newitems.length, false]);
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass('active');
$('.slide', this).width(_width * 0.15);
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find('.slide-block').hide();
$(this).find('.slide.active .slide-block').stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger('slideTo', [this]);
});
$('.slide:firstchild').mouseover(function() {
$('.slide:firstchild').stop();
});
$('#slider').children().mouseover(function() {
$('#slider').stop();
});
//$('#slider').children().mouseout(function() {
// $('#slider').trigger( 'slideTo', [this] );
//});
// Enable code below if you want to support browser resizing
$(window).resize(function() {
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find('.slide').width(_width * 0.15);
// enlarge first slide
slider.find('.slide.active').width(_width * 0.7);
// update item width config
slider.trigger('configuration', ['items.width', _width * 0.15]);
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 1px;
}
#slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
}
#slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
#donate-spacer {
height: 0;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
color: #999;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="slide">
<img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png">
<div class="slide-block">
<h4>For The Birds</h4>
<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
</div>
</div>
<div class="slide">
<img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png">
<div class="slide-block">
<h4>UP</h4>
<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
</div>
</div>
</body>
</html>

You can trigger a custom event named "stop" on carouFredSel component If you want to stop the slider.
$('#slider').trigger("stop");
And trigger a custom event named "play" with a extra parameter true to resume the slider
$("#slider").trigger("play",true);
For example:
<script>
$(function(){
$("#slider").carouFredSel({
items: 4
});
$("#slider > div.slide").hover(
function(){
$("#slider").trigger("stop");
},
function(){
$("#slider").trigger("play",true);
}
);
});
</script>
Hope this is helpful for you.

Develop Reference

JavaScript is the programming language of the Web.

Aframe texture control over individual entities - javascript

Related

pdf.getPage(1).then(function(page) - How to display whole PDF (not only one page) with PDF.JS?

How do you add a cool down to a button with multiple functions?

Jquery effect function call not working in javascript

How to add a textarea to the image preview when uploading

.stop on .mouseover or .hover

Categories

Resources