I am doing JSF primefaces project.We have primefaces file upload component in a div id="dropBox" which accepts drag and drop files.Normally if you drop a file anywhere on the page, browser opens it up.I want to disable this behavior and allow drops only in the div dropBox. following code disables file drag and drops on entire page .
$(document).bind({
dragenter: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
},
dragover: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
});
Related
Recently, I noticed that the drag and drop function was added back so that you could successfully drag an email from your Microsoft Outlook inbox to a web app's file upload. The issue is that once the file has been dragged to the web app, the email is moved to the Deleted folder in Outlook. Any ideas on how to resolve?
This issue can be solved by the web developper.
You can go to the following web page to see exemples with the different behaviors (copy, move, link) when we do a drag and drop in a browser:
https://codepen.io/SitePoint/pen/epQPNP
Put the following line into 'dragenter', 'dragover' and 'drop' event handler :
e.originalEvent.dataTransfer.dropEffect = "copy";
My code to solve the issue:
$('#myDropArea').on({
'dragenter': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.stopPropagation();
e.preventDefault();
$(this).addClass('draginprogress');
$(this).find('.DragText').css({ 'z-index': '1000' }).show()
},
'dragover': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
},
'dragleave': function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide();
},
'drop': function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide()
if (dataTransfer && dataTransfer.files.length) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
//DO DROP action
}
}
});
I hope this helps
Most likely you are doing move instead of copy.
I have a form in a modal dialog. After submiting a form that dialog closes and does some actions in the background. After closing the modal dialog I also want to update html in the sidebar (without refreshing the sidebar). I have a div with "loader" id in the sidebar with class hidden (which prevents it to be visible). On modal dialog close I want to remove class hidden from the "loader" div. How do I access that "loader" div from the modal dialog template?
You could use the browser sessionStorage, set a timer, and continuously "poll" for available information.
Thanks to a comment, a variation was suggested which eliminates the need for polling:
jquery
$(window).bind('storage',
function(e){if(e.key === "newValuesWereEntered"){doSomething()}});
Script tag:
<script>
//Use a timer to keep checking for a completed action from another dialog
var theTimer;
window.setTheTimer = function() {
//To Do - Hide the Spinner
if (typeof(Storage) === "undefined") {
alert('HTML5 Storage is not supported. This App will not work in this browser. Please update your browser.');
return;
}
try {
window.sessionStorage.setItem("newValuesWereEntered","n"); //Make sure check value is reset
} catch(e) {
alert(e.error + ' You may have this apps cookies blocked in this browser, and/or this browser tab. Check cookie blocking.');
return;
};
theTimer = window.setInterval(monitorForTheResponse, 500); //Every 1/2 second, check for response value
};
window.monitorForTheResponse = function() {
var was_a_newValueEntered,dlgInfo;
was_a_newValueEntered = window.sessionStorage.getItem("newValuesWereEntered");
if (was_a_newValueEntered === 'y') {//Dialog just wrote value to window.sessionStorage
window.sessionStorage.setItem("newValuesWereEntered","n");//Reset
clearTimeout(theTimer);//turn off timer
//Get submitted values
dlgInfo = window.sessionStorage.getItem("newValuesToTransfer");
//To Do - Run code to display new value
};
};
</script>
The dialog that has the value to pass to the sidebar must save that value to session storage
window.theValueWasSavedOrEntered = function() {
var arry,objectOfNewValues,strJSON;
try{
if (typeof(Storage) !== "undefined") {//Browser has local storage
window.sessionStorage.setItem("newValuesWereEntered","y"); //Set to yes
objectOfNewValues = {};
objectOfNewValues.valueOne = arry[0];
objectOfNewValues.valueTwo = arry[1];
strJSON = JSON.stringify(objectOfNewValues);
window.sessionStorage.setItem("newValuesWereEntered","y"); //Set to yes
window.sessionStorage.setItem("newValuesToTransfer", strJSON);
};
google.script.host.close();
} catch(e) {
SendErr({'message':'ERROR: ' + e.stack + ' message: ' + e.message});
};
};
I have a code, which gets refreshed from mysql database on a button click.
From the mysql I get links of images on refresh, but I never know, hat links and how many.
I have a "loading" circle which spins until the page is loaded, but it is shown only, until the code is loaded, which is not very long. After that I see small empty squares on my page as placeholders, until the real images show up.
Does anybody have an idea, how to show the spinning circle untill all images are loaded?
I tried some javascript examples found on the net with building arrays of links, but I was not able to integrate them into my code, because the construction of the codes are very different and I obviously am not a pro.
So here is my code (I simplified it for now):
$(document).ready(function() {
function refresh(free){
$("#loadingfree").show();
if (free) datum = datum + free;
var url = "listfree.php?date=" + datum;
$.getJSON(url,function(data) {
var div_data = '';
$.each(data, function(i,data) {
div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
});
$("#loadingfree").hide();
$("#app-wrapper-free").html(div_data);
});
}
$(document).on('click', '#prevbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(-1);
});
$(document).on('click', '#nextbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(+1);
});
// call the method when page is opened:
refresh(0);
});
If you want the spinner to continue showing until the images are loaded, you should use the load eventListener to make that happen.
So let's say you have your code that has the spinner while it makes the request to the server.
//just an example
$('button').click(function(){
//call server
$.ajax();
//show spinner
$('.spinner').show();
});
Now we will tell the spinner to stay showing until the images are done loading.
$('img').on('load',function(){
//Not sure what your spinner is called
$('.spinner').hide();
});
I ended up with this.
It just shows the content a bit later. It's a fake preloader.
<script type="text/javascript">
var datum = 0;
$(document).ready(function() {
function refresh(free){
if (free) datum = datum + free;
var url = "listfree.php?date=" + datum;
$.getJSON(url,function(data) {
var div_data = '';
$.each(data, function(i,data) {
if ($("#date_free").html() == '');
div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
});
$("#loadingfree").show();
$(div_data).hide()
.appendTo("#app-wrapper-free")
setTimeout( function() {
$("#app-wrapper-free").children().show()
$("#loadingfree").hide()
}, 3000 );
});
}
$(document).on('click', '#prevbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(-1);
});
$(document).on('click', '#nextbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(+1);
});
// call the method when page is opened:
refresh(0);
});
</script>
I have a javascript popup context menu with a button below it with close. That button when pressed close will continue to the next page. If a user dont click the close button and decides to click outside the popup box it will not redirect the user. What function for javascript can i add if a user click outside the box it will redirect them without clicking the close button inside the box. using a osx-modal-content plugin
How its triggered*
<input type='button' name='osx' value='Click Here To Enter The Website!' class='osx demo'/></a>
plugin page (link)
OSX STYLE DIALOG ** OSX STYLE DIALOG ** OSX STYLE DIALOG **
http://www.ericmmartin.com/projects/simplemodal-demos/
This is something that i have for the close function**
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
This is how you can do stuff on close:
$("#element-id").modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
If you had an element added like:
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
Change that to
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
return false;
});
I am trying to store the data a user enters inside a textarea in a popup.html. Using jQuery on window unload the data should be synced and on window ready the data should be restored. However, when opening popup.html the content of the textarea is undefined. This is the jQuery code which I am loading in popup.html:
$(window).unload (
function save() {
var textarea = document.querySelector("#contacts").value;
// Old method of storing data locally
//localStorage["contacts"] = textarea.value;
// Save data using the Chrome extension storage API.
chrome.storage.sync.set({contacts: textarea}, function() {
console.log("Contacts saved");
});
});
$(window).ready(
function restore() {
var textarea = document.querySelector("#contacts");
// Old method of retrieving data locally
// var content = localStorage["contacts"];
chrome.storage.sync.get('contacts', function(r) {
console.log("Contacts retrieved");
var content = r["contacts"];
textarea.value = content;
});
});
From popup.js you can invoke a method in background.js file to save the data:
popup.js:
addEventListener("unload", function(){
var background = chrome.extension.getBackgroundPage();
background.mySavefunction(data);
}
background.js:
function mySaveFunction(data){
chrome.storage.sync.set(data, function(){
console.log("Data saved.");
});
}
I found a solution. Instead of using $(window).unload() I now use a submit button which needs to be clicked before closing popup.html:
$("#save-button").click(function() {
var textarea = document.querySelector("#contacts").value;
var save = {};
save["contacts"] = textarea;
// Save data using the Chrome extension storage API.
chrome.storage.sync.set(save, function() {
console.log("Contacts saved");
});
$("#confirm").text("Contacts saved.").show().fadeOut(5000);
});