I am using the dropzone.js plugin for a project. I'm wondering if there is a way to stop the click event (where you can select a file) but keep the drag and drop function.
The drag and drop are on our entire page and the click is getting annoying when you are just selecting text.
I have tried
$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);
and
$(".dz-hidden-input").prop("disabled",true);
but these disable the drag and drop which I still need to work. Any ideas?
You can set the clickable option to false when initializing the Dropzone. According to the DOCS
If true, the dropzone element itself will be clickable, if false
nothing will be clickable.
You can also pass an HTML element, a CSS selector (for multiple
elements) or an array of those. In that case, all of those elements
will trigger an upload when clicked.
See demo below
// Dropzone class:
$("div#myDZ").dropzone({
url: "/file/post",
clickable: false
});
#myDZ {
padding: 10px;
width: 100%;
height: 100vh;
border: 2px inset #c8c8c8;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<div id="myDZ">
Drag / Drop your files here . Click is <kbd>DISABLED</kbd> and wont work
</div>
Related
I am using it in JavaScript to enable and disable a div element:
$("#divbutton").css("pointer-events","auto");
But I want a property that enables and disables the element. How can I do that?
html
<div class="buttonSender" id="divbutton">Invia</div>
While I strongly recommend using a <button> instead of a <div>, I can think of one case where you might not be able to change the HTML markup to do that.
I start below with the case you should strive for, using a <button> for a button, but follow further below with how you can "disable" a div that is acting as a button.
You can make a div act like a button by adding a click handler to it, then disable it simply by adding a class with the proper CSS, mainly by disabling pointer-events.
Here, the <div> is acting as a button by using a class, and it gets disabled by adding another class, "disabled". The click handler on the div demonstrates it is clickable by using an alert, and you will see that it no longer reacts to clicks when the "disabled" class gets added to the div.
$('#divbutton').click(function(e) {
// This is where you would put your code that
// does something when the div is clicked.
alert('The Fake Button was Clicked');
});
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').addClass('disabled');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').removeClass('disabled');
});
div.buttonSender {
margin: 1px;
padding: 4px;
border: 1px solid darkgray;
border-radius: 2px;
max-width: 20em;
pointer-events: auto;
color: black;
background-color: peachpuff;
}
div.buttonSender.disabled {
background-color: lightgray;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="divbutton" class="buttonSender" role="button">
This is the div that is acting like a button.<br> Click Me
</div>
</section>
<section class="demo-buttons">
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
I've added the role="button" on the div for the purposes of accessibility, but that is not all you would have to do for proper accessibility — see the "Note:" in the ARIA: button role documentation.
You would be much better off using a <button> instead of a <div> since you are able to put any HTML in the button tag that you could put in the div.
The only reason (that I can think of) that you would "have to" use a div is if the HTML is written by someone else and you have no access to change it and no way to influence the author of the HTML.
In that case you also aren't able to add classes or an ID, or write any new CSS, and would have to work with what is already there.
This demo does that by modifying the CSS using jQuery's .css() method, disabling then restoring the pointer-events — note jQuery uses the camelCased property name, so it is pointerEvents not pointer-events.
/*
* This is NOT your code - this would be the click handler that already exists.
*/
$('#divbutton').click(function(e) {
// Assume there is already a click handler, and you want to disable it.
// This code would be the existing handler, somewhere else, not written by you.
alert("Invia was clicked");
});
/*
* This would be your code, and it wouldn't be packaged with the code above
*/
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').css('pointerEvents', 'none');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').css('pointerEvents', 'auto');
});
#divbutton {
border: 1px solid darkgray;
border-radius: 2px;
padding: 5px;
max-width: 5em;
}
#demo-controls {
margin-top: 2em;
border-top: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>
This area would be part of the page that you don't control.<br>
The div acting like a button is below, and you can't change it.
</p>
<div class="buttonSender" id="divbutton">Invia</div>
</section>
<section id="demo-controls">
<p>
This area would not be part of the HTML, over which you have no control,
but somehow you need a way to fire your code that disables the existing div#divbutton
<br>
There needs to be <em>something</em> that fires your javascript;
these buttons simulate that.
</p>
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
Try creating a CSS class with the value of pointer-events that you want like in the following example:
document.querySelector('button').addEventListener('click', () => {
document.getElementById('divbutton').classList.toggle('disabled');
});
#divbutton.disabled {
pointer-events: none;
user-select: none;
background:yellow;
}
#divbutton {
height: 2rem;
}
<div class="buttonSender" id="divbutton">Invia</div>
<button>click me</button>
I am trying to add an image when an area of a canvas is clicked. I would prefer to use jquery but vanilla js or css is fine.
The problem is, I can add a click function using click and append, however it does not appear in the exact place i clicked, and this is what i want to happen.
also i am trying to add a touch event to the click event, and I get the error "expected one argument but got two"
(I am using a typescript / scss / pug preprocessor, gulp compiler)
i tried to randomize the x and y coordinates, however this just randomized them and didn't "bind" them to my click event. i also did attempt this with css using the :Active ~ selector, however it did not appear where the user was active, only at the top left of the container it's in. so i don't know if CSS is the way to go.
$("#clickimage").click(function(){
$('<img src="https://www.placecage.com/c/200/300">').appendTo($("#clickimage"));
});
$('#clickimage').ontouchstart = ();
css looks like:
#clickimage {
display: none;
}
attempted css:
:active ~ #clickimage{
display: block;
}
html
<canvas width="632" height="418" id="clickimage"></canvas>
Maybe something like this in vanilla JS will help you - the trick is using position fixed with offsetX/Y.
function paintImage(e){
document.querySelector('#wrapper').innerHTML += `<img src="https://www.placecage.com/c/200/300" style="left:${e.offsetX}px;top:${e.offsetY}px">`;
}
document.addEventListener('click', paintImage);
img {
position: fixed;
display: block;
background: #f00;
width: 100px;
height: 100px;
}
#wrapper {
width: 100%;
height: 100vh;
}
<div id="wrapper"></div>
I asked this question earlier from my phone but it became very convoluted and confusing so I decided to start over after finding a usable PC. Note that I can't give the full original code nor images due to the project's classified nature which is also located offline. The bare-bones version below contains the same problem anyway, so I'm quite certain being able to solve the problem in this example code will be adequate for me to troubleshoot anything else in the actual application.
I have the following code: https://jsfiddle.net/mssdjrzk/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
When the cursor hovers over the button, a default browser-based behaviour is triggered. In the case of IE 11, the button is highlighted.
Next, I add additional CSS for a:hover: https://jsfiddle.net/yLrznyss/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
a:hover {
color: red;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
Now, when I hover my cursor over the button, the behaviour is messed up - the behaviour does not render, although other events like onclick renders normally. I have done a lot of troubleshooting and attempts to workaround without success, but here are my findings:
The offending element is :hover. It doesn't matter what element/class/id is attached to it, its very existence in the stylesheet is enough. Even a:hover {} which contains no styling will cause the problem too, as does span:hover {} when no <span> elements even exist in the HTML.
I tried it on Chrome, but the problem does not exist since Chrome's default hover behaviour for buttons is rendered differently. This is thus a browser-specific problem.
The problem only exists for buttons containing images, as opposed to buttons containing text, empty buttons or standalone images not inside anything.
My guess is that the existence of the :hover CSS in the stylesheet, even if it's empty, is causing issues in how IE renders the resultant web page and its behaviour.
How can I prevent the button and/or its internal image from being affected, thus returning to the default IE button hover behaviour? I can change anything, as long as the desired hover style on the hyperlinks is achieved without affecting the buttons.
The full application which uses this code will use IE11 on Windows 10 - not any other browser. Solutions using HTML, CSS or JavaScript are acceptable but no external libraries are available to my project.
Maybe I'm missing something, but I don't see any anchor links inside the button. I used this code:
button:hover {
background: red;
}
And was able to get the hover effect you are looking for
I have found a successful workaround. Since I can't use the :hover selector, I have to mimic it via JavaScript. Credits to Javascript onHover event for the solution.
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
.isHovered {
color: red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for (var i = 0; i < links.length; ++i) {
(function() {
var link = links[i];
var hoverTimer;
link.addEventListener("mouseover", function() {
hoverTimer = setTimeout(function() {
link.className = "isHovered";
}, 0);
});
link.addEventListener("mouseout", function() {
clearTimeout(hoverTimer);
link.className = "";
});
}());
}
});
</script>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
I would welcome any better answer though, or at least an explanation of why I have this problem - if you are able to replicate it on your machine.
I'm trying to add a close button to Elfinder. I'd like the placement to be to the right of the search box where close buttons usually are.
After the elfinder init, I do this:
$('.elfinder-toolbar').prepend('<a class="elfclose"><div class="elfclose-bg">×</div></a>');
The Css:
.elfclose {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
text-decoration: none;
float: right;
}
$().prepend should put the elfclose div as the first element under the toolbar, but the search box is always first.
I believe it's caused by Elfinder prepending after me... Is there a way I can say do this after the other div exists?
Just FYI, I did figure this one out...
The search box is added by Jquery after init, so you have to put a delay after the prepend. I tried checking for the existence of the search div (which would be better), but it turned out to be too much work. No one's going to notice a .2 second delay. To paraphrase Larry Wall, your code is correct if it gets the job done before your boss fires you.
I'm in Angular, hence the $compile directive:
var close = $compile('<a class="elfclose" ng-click="closeFileBrowser()">
<div class="elfclose-bg">×</div></a>')($scope);
$timeout(function(){$('.elfinder-toolbar').prepend(close);}, 200);
Perhaps you can help me. I have a wordpress.org blog and I am trying to use Textillate animation from here: http://jschr.github.io/textillate/. I downloaded all the files and put them onto my server, followed the instructions, and added a header element and multiple unordered list elements as it says on the instruction page. I added the files to the head section of my webpages including the animate, fittest, textilliate, lettering, and jquery. I cannot get it to work right.
I went to JS Fiddle and put all my information on their website for the HTML, CSS, and JavaScript and I got it working on that site. But when I copy the exact same thing over into my own website, it doesn't do the animation. Right now, I'm just trying to get the animation to fade in and out three different list items but all it does is show them all at once one.
The code at JS Fiddle can be found here: http://jsfiddle.net/amandamays/Rvu9N/69/
<div class="black-bar">
<h2 class="tlt">
<ul class="texts">
<li>Stressed out?</li>
<li>Deadlines looming?</li>
<li>Writer's block?</li>
</ul>
</h2>
</div>
h2.tlt {
color: #59bce3;
}
.black-bar {
color: rgb(255, 255, 255);
background-color: rgb(68, 68, 68);
border: .133em solid rgb(68, 68, 68);
border-radius: .333em;
max-width: 100%;
padding: .3em .5em;
margin-top: .5em;
margin-bottom: .5em;
text-align: center;
}
ul {
list-style: none;
}
$('.tlt').textillate({ in : {
effect: 'fadeIn'
},
out: {
effect: 'fadeOut',
sync: true
},
loop: true
});
Any suggestions?
Amanda Mays
Can you fix it, using and download the wordpress plugin wp-textillate.
On admin backend go to WP Textillate, in the left, and add all your text and animation. After it, can you put it intro content with shortcode or using widgets.
I hope help you.