Redirect a user when box is closed - html

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

Related

Dragging from Outlook to Chrome moves email to Deleted folder

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.

chrome.tabs.executeScript doesn't work on load

I am trying to load content script from the background one. the execute function works in the icon click block, but i can't trigger the auto load part
var toggle = false;
//Works
chrome.browserAction.onClicked.addListener(function(tab) {
toggle = !toggle;
if (!toggle){
chrome.browserAction.setIcon({path: "enabled.png"});
}else{
chrome.browserAction.setIcon({path: "disabled.png"});
chrome.tabs.executeScript(null, { file: "script.js" });
// chrome.tabs.executeScript({file : "script.js"});
}
});
//Doesn't work
chrome.tabs.onUpdated.addListener(function(tab) {
chrome.tabs.executeScript(null,{
file: 'script.js'
});
});
The activeTab permission only grants access to to the currently active tab when the user invokes the extension - for example by clicking its browser action.
If you want to execute a script on any arbitrary tab without user intervention, then you'll need the <all_urls> permission.

Disable middle mouse click paste in an iframe

Is it possible to disable middle mouse click paste in an iframe
<iframe id="ck_id"></iframe>
I have disabled the context menu using:
document.getElementById("ck_id").contentWindow.document.oncontextmenu = function(){alert("Disabled context menu"); return false;};
Use jquery 'mousedown':
$(document).ready(function () {
$("#ck_id").contents().find("body").on('mousedown', function (e) {
if (e.which == 2) {
e.preventDefault();
//Do your work
}
});
});

HTML 5 Drop File only in a div

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';
}
});

hide/show div toggle cycle

WHAT I HAVE:
3 buttons
when one is clicked it gets hidden and its corresponding box is shown
in each box is a link to close the box
when clicked the box hides
WHAT I NEED:
when the close link is clicked and the box closes, i need the button to be shown again
SUMMARY:
button click toggles button hide / box show, close click toggles box hide / button show
current code
you just needed to add $('.showSingle').removeClass('selected'); to the $('.hide').click() function and add a return false at the end of it so that the link's href doesnt get called (putting the # in the url) I also rewrote the first click event so that its consistent with the second.
$(function(){
$('.showSingle').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
$('.hide').click(function() {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
return false;
});
});
When you click on each button you have a call that adds the class 'selected' to the button pressed and removes the same from all other buttons. This class is making the button hidden. What you need to do then is when the close link is pressed, remove the class from all buttons.
$('.hide').click(function() {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
});
Try this.
$(window).load(function(){
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
var srcId = $(this).data('target');
$('#div' + srcId).show();
$('.targetDiv').click(function(){
$('.targetDiv').hide();
$(".showSingle[data-target='" +srcId +"']").show();
});
});
Here's a code that work with your current HTML. It comes with two options, hide the button text or hide the button itself. Also as a side note, if you use on() keep using it--don't switch to .click()
JSFiddle Demo
$(function() {
$('.targetDiv').hide(); //Start off with boxes hidden
$('.showSingle').on('click', function() { //Link clicked
$('.targetDiv').hide(); //Hide any open boxes
$('.selected').removeClass('selected'); //Show all buttons
//$(this).children('div').addClass('selected'); //Hide button text
$(this).addClass('selected'); //Hide button box
var id = $(this).data('target'); //Get desired target
$('#div'+id).show(); //Show target box
return false; //Stop link from going anywhere
});
$('.hide').on('click', function() {
$('.targetDiv').hide(); //Hide any open boxes
$('.selected').removeClass('selected'); //Show all buttons
return false; //Stop link from going anywhere
});
});​