Develop Reference

How to display DIV after 30 seconds on copy text content on web page?

I have a div tag that I want to display 30 seconds after copying content on a web page. Below is the code.
Content To Be Copied:
<div class="copy">Copy This Conent</div>
Div Tag To DIsplay After 30sec of Copying:
<div id="dsply">The Content Has Been Copied</div>
A good solution to this will be appreciated.

You could use the copy event and setTimeout:
<div class="copy">Copy This Conent</div>
<div id="hdsply"><span class="light" style="font-size: 18px">Waiting Syntax Initialization From CMD Console</span></div>
<div id="dsply">The Content Has Been Copied</div>
<div id="dsply1">You Can now proceed</div>
<script>
const copy = document.querySelector('div.copy');
const consoleMsg = document.querySelector('div#hdsply');
const display = document.querySelector('div#dsply');
const displayProgress = document.querySelector('div#dsply1');
display.style.display = 'none';
displayProgress.style.display = 'none';
copy.addEventListener('copy', event => {
setTimeout(() => {
display.style.display = 'block';
displayProgress.style.display = 'block';
consoleMsg.style.display = 'none';
}, 30000);
event.preventDefault();
});
</script>

a little js to the rescue:
setTimeout(myFunction, 30000);
function myFunction(){
var dsp = document.getElementById('dsply');
dsp.style.display='block';
}
#dsply{
display:none;}
<div class="copy">Copy This Conent</div>
<div id="dsply">The Content Has Been Copied</div>

How to add jquery variable into span class attribute?

I'm trying to use Barfiller (https://github.com/9bitStudios/barfiller).
Everything works, but I want to set the data-percentage value in the span class (now set as "50") to be dynamically filled via a JQuery variable.
HTML
<div id="bar1" class="barfiller">
<span class="tip"></span>
<span class="fill" data-percentage="50"></span>
</div>
Javascript
function onQuerySucceeded(data) {
var projectstatus = data.d.projectstatus;
$('#data-percentage').text(projectstatus);
}
Regards,
Chris

I have added a timeout of 2 seconds before executing onQuerySucceeded() function as I thought it might be handy for you in case, you are loading the new percentage after making an api (service) call. Hope it helps you:
$(document).ready(function() {
console.log('data percentage: ' + $(".fill").attr('data-percentage'));
setTimeout(() => {
// after 2 seconds
var responseJson = {};
responseJson.d = { projectstatus: 15 };
onQuerySucceeded(responseJson);
}, 2000);
});
function onQuerySucceeded(data) {
$('.fill').attr("data-percentage", data.d.projectstatus);
console.log('data percentage: ' + $(".fill").attr('data-percentage'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar1" class="barfiller">
<span class="tip"></span>
<span class="fill" data-percentage="50"></span>
</div>

$("#bar1 .fill").attr("data-percentage", projectstatus);

I changed your code to make it work.
You have to use $(...).data( key, value) to set a new value to a data-... field in JQuery.
In JS you woulr use .setAttribute("data-percentage", "50"); for example.
$(document).ready( function () {
console.log($(".fill").data('percentage'));
onQuerySucceeded(40);
console.log($(".fill").data('percentage'));
});
function onQuerySucceeded(data) {
var projectstatus = data;
$('#bar1 [data-percentage]').data('percentage', projectstatus);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar1" class="barfiller">
<span class="tip"></span>
<span class="fill" data-percentage="50"></span>
</div>

JavaScript drag drop swap div on mobile devices

I'm currently working on a mobile app/game. I am having a difficult time getting an inventory system working properly on a phone. the drag and drop work perfectly fine with a mouse on the pc, but will not work on phone.
JavaScript code:
document.addEventListener("DOMContentLoaded", function(event) {
$(document).ready(function(){
var videoPath = "videos/lg/";
var draggedItem = null;
$('.segmentListItem').each(function(index){
$(this).on("dragstart", handleDragStart);
$(this).on("drop", handleDrop);
$(this).on("dragover", handleDragOver);
});
function handleDragStart(e){
//console.log('start');
draggedItem=this;
e.originalEvent.dataTransfer.effectAllowed = 'move';
//e.dataTransfer.dropEffect = 'move'; //MH - do we need both of these?
e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.originalEvent.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
function handleDrop(e){
if (e.stopPropagation) {
e.stopPropagation(); // Stops some browsers from redirecting.
}
if (draggedItem != this) { //MH - swap if we're not dragging the item onto itself
var copy=$(this).clone(true,true);
var slot1 = $(this).attr("id");
var slot1Temp = slot1 + "temp";
var slot2 = $(draggedItem).attr("id");
$(this).replaceWith($(draggedItem).clone(true,true));
$(draggedItem).replaceWith($(copy).clone(true,true));
slotID = "slotID-" + slot1;
document.getElementById(slot1).id = slot1Temp;
document.getElementById(slot2).id = slot1;
document.getElementById(slot1Temp).id = slot2;
$.ajax({
type: "GET",
url: '/inventorySwap.php',
data: {'slot1': slot1,'slot2': slot2},
success: function(data) {
alert(data);
}
});
}
return false;
}
});
});
HTML/PHP code:
<div class='inventorySlot". $obj->slot_id ."'>
<img class='segmentListItem' draggable='true' id=slotID-". $obj->slot_id ." src='{$itemImage}' />
</div>
Sorry if this question is set up a bit weird, I generally research and learn on my own. I don't like asking questions, I'm just completely stumped on this one.
What I need (and works perfect with mouse/on pc)
Drag element from 1 div to another. In code posted, it also changed the id of swapped elements to match their div inventory slot number. this is to prevent errors when updating database to swap within slot record.
thank you for any and all help given.

After a few hours of playing around with everything I managed to get what I needed.
outer div is for drop events,
middle div is for drag events, has to have width/height to fill outer div
inner div HAS to have position as absolute and z index less than the middle div.
this way no matter what, you click on middle div, and not it's inner contents.
the JS code saves both slot ids as a variable
then stores the id's innerhtml as another variable.
then it changes innerhtml of stored variable id1 with html of id2
contents as a var, then replaces each one to
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
id1 = event.target.id;
id1Html = document.getElementById(id1).innerHTML;
}
function dragging(event) {
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
id2 = event.target.id;
id2Html = document.getElementById(id2).innerHTML;
document.getElementById(id1).innerHTML = id2Html;
document.getElementById(id2).innerHTML = id1Html;
alert(id1);
alert(id2);
}
.inventorySlot1{position: absolute;top: 22%;left: 45%;width: 9%;height: 1px;height: 7%;overflow:hidden;background-color:green;opacity:0.5;}
.inventorySlot2{position: absolute;top: 22%;left: 54.5%;width: 9%;min-height: 1px;height: 7%;overflow:hidden;background-color:red;opacity:0.5;}
.inventorySlot6{position: absolute;top: 29.5%;left: 45%;width: 9%;height: 1px;height: 7%;overflow:hidden;background-color:green;opacity:0.5;}
.inventorySlot7{position: absolute;top: 29.5%;left: 54.5%;width: 9%;min-height: 1px;height: 7%;overflow:hidden;background-color:red;opacity:0.5;}
<div class='inventorySlot1' ondrop='drop(event)' ondragover='allowDrop(event)'>
<div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-1' style='width:100%;height:100%;'>
<div style='position:absolute;z-index:-1;'>
<img src='http://siteprice.co/images/failed.png'>
</div>
</div>
</div>
<div class='inventorySlot2' ondrop='drop(event)' ondragover='allowDrop(event)'>
<div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-2' style='width:100%;height:100%;'>
<div style='position:absolute;z-index:-1;'>
<img src='http://siteprice.co/images/safe.png'>
</div>
</div>
</div>
<div class='inventorySlot6' ondrop='drop(event)' ondragover='allowDrop(event)'>
<div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-6' style='width:100%;height:100%;'>
<div style='position:absolute;z-index:-1;'>
<img src='http://siteprice.co/images/alexa.png'>
</div>
</div>
</div>
<div class='inventorySlot7' ondrop='drop(event)' ondragover='allowDrop(event)'>
<div ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' id='slotID-7' style='width:100%;height:100%;'>
<div style='position:absolute;z-index:-1;'>
<img src='http://siteprice.co/images/whois.png'>
</div>
</div>
</div>

Javascript function in HTML not working

Dear Stackers
I am having following issue. I want to make a Website, with only one HTML file, and insert the Content based on which li element got clicked. And a standard text should already be there.
Now my issue is, that it will not change the value="" of id="content". It will not even writeContent for some reason. I am quite sure I am making a simple and fundamental mistake. I know that it is not yet optimized, but I need to get it working like this, before minimizing anything.
You can currently ignore the function writeContent part, since that will do the innerHTML insertion later on. - currently no Errors
function myHome() {
document.getElementById("content").value = "home_content";
writeContent("<p>myHome</p>");
}
function myKontakt() {
document.getElementById("content").value = "kontakt_content";
writeContent("<p>myKontakt</p>");
}
function myTeam() {
document.getElementById("content").value = "team_content";
writeContent("<p>myTeam</p>");
}
function myUber() {
document.getElementById("content").value = "uber_content";
writeContent("<p>myUber</p>");
}
document.getElementById("home_li").addEventListener("click", myHome);
document.getElementById("kontakt_li").addEventListener("click", myKontakt);
document.getElementById("team_li").addEventListener("click", myTeam);
document.getElementById("uber_li").addEventListener("click", myUber);
function writeContent() {
var get_content_attribute = document.getElementById("content").getAttribute("value");
if (document.getElementById("content").getAttribute("value") == "home_content") {
} else if (get_content_attribute = "kontakt_content") {
} else if (get_content_attribute = "team_content") {
} else if (get_content_attribute = "uber_content") {
}
}
<div id="menu">
<ul>
<li>Stalinger
</li>
<li>Kontakt
</li>
<li>Unser Team
</li>
<li>Über Uns
</li>
</ul>
</div>
<div id="content" value="home_content">
<p class="content_text">TEXT
</p>
</div>

1.Looks like div can't has value attribute, try to use "data-value"
or something like that and everything will works fine.
2. you are adding to event listeners on every button when using "click" in html and "addEventListener" in js
3. You should use "event.preventDefault()" to prevent page from reloading when pressing ""
<html>
<head></head>
<body>
<div id="menu">
<ul>
<li>Stalinger</li>
<li>Kontakt</li>
<li>Unser Team</li>
<li>Über Uns</li>
</ul>
</div>
<div id="content" data-value="home_content">
<p class="content_text">TEXT
</p>
<script>
function myHome(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"home_content");
writeContent("<p>myHome</p>");
}
function myKontakt(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"kontakt_content");
writeContent("<p>myKontakt</p>");
}
function myTeam(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"team_content");
writeContent("<p>myTeam</p>");
}
function myUber(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"uber_content");
writeContent("<p>myUber</p>");
}
document.getElementById("home_li").addEventListener("click", myHome);
document.getElementById("kontakt_li").addEventListener("click", myKontakt);
document.getElementById("team_li").addEventListener("click", myTeam);
document.getElementById("uber_li").addEventListener("click", myUber);
function writeContent(html) {
var div = document.getElementById("content");
var get_content_attribute = document.getElementById("content").getAttribute("data-value");
if(document.getElementById("content").getAttribute("data-value") == "home_content"){
div.innerHTML = html;
} else if(get_content_attribute = "kontakt_content"){
div.innerHTML = html;
} else if(get_content_attribute = "team_content"){
div.innerHTML = html;
} else if(get_content_attribute = "uber_content"){
div.innerHTML = html;
}
}
</script>
</div>
</body>
</html>
this code is working for me, but architecture is pretty ugly, maybe try to read about how frontend frameworks manage this things.

use setAttribute as document.getElementById("content").setAttribute ("value","XXXXXX") – by User: Vinod Louis
Worked like a charm.

You can check updated code:
To assign attribute you need to use setAttribute instead of value
function myHome() {
document.getElementById("content").setAttribute("value","home_content");
writeContent("<p>myHome</p>");
}
function myKontakt() {
document.getElementById("content").setAttribute("value","kontakt_content");
writeContent("<p>myKontakt</p>");
}
function myTeam() {
document.getElementById("content").setAttribute("value","team_content");
writeContent("<p>myTeam</p>");
}
function myUber() {
document.getElementById("content").setAttribute("value","uber_content");
writeContent("<p>myUber</p>");
}
document.getElementById("home_li").addEventListener("click", myHome);
document.getElementById("kontakt_li").addEventListener("click", myKontakt);
document.getElementById("team_li").addEventListener("click", myTeam);
document.getElementById("uber_li").addEventListener("click", myUber);
function writeContent() {
var get_content_attribute = document.getElementById("content").getAttribute("value");
alert(get_content_attribute);
if (document.getElementById("content").getAttribute("value") == "home_content") {
} else if (get_content_attribute = "kontakt_content") {
} else if (get_content_attribute = "team_content") {
} else if (get_content_attribute = "uber_content") {
}
}
<div id="menu">
<ul>
<li>Stalinger
</li>
<li>Kontakt
</li>
<li>Unser Team
</li>
<li>Über Uns
</li>
</ul>
</div>
<div id="content" value="home_content">
<p class="content_text">TEXT
</p>
</div>

KnockoutJS calling computed for each element in foreach

I have a problem i cannot figure out..
My example on JSbin: http://jsbin.com/wiwuwepe/1/edit
Basicly, in
<script id="QuestionTemplate" type="text/html">
<div class="well">
<div class="form-group">
<div class="col-md-5">
<p class="form-control-static" data-bind="text: QuestionText"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<!-- THIS IS WHERE I WANT COMPUTED FOR EACH SURVEYQUESTION -->
<p class="form-control-static" data-bind="text: QuestionTypeTemplate"></p>
</div>
</div>
</div>
QuestionTypeTemplate shows undefinded, although model for this is
function SurveyQuestion(data) {
var self = this;
self.QuestionText = ko.observable(data.QuestionText);
self.QuestionType = ko.observable(data.QuestionType);
self.QuestionAnswers = ko.observableArray(data.QuestionAnswers);
self.QuestionTypeTemplate = ko.computed(function () {
/*
if( self.QuestionType() == 0) {
return "radio";
} else if (self.QuestionType() == 1) {
return "checkbox";
}
*/
return "This is what i want";
}, self);
}
Please, check full code on jsbin. Just uncomment that 1 line in QuestionTemplate script/html.
When I compare my example with http://knockoutjs.com/examples/cartEditor.html , I really cant find big difference, why that works, and why mine does not.

on your Survey function
instead of this
self.SurveyQuestions = ko.observableArray(data.SurveyQuestions);
you need to use this
var questions = [];
for(i = 0 ; i<data.SurveyQuestions.length ; i++) {
questions.push(new SurveyQuestion(data.SurveyQuestions[i]));
}
self.SurveyQuestions = ko.observableArray(questions);