I have a simple dblClick function working. I need to make my canvas div selectable using jQuery UI but doing so breaks the dblClick function.
HTML
<div id="canvas">
<div class="trigger">Click me</div>
<div class="box"></div>
</div>
Javascript
$('#canvas').selectable();
$('.trigger').dblclick(function() {
$('.box').toggleClass('active');
});
Here is a Fiddle
Here is a similar post discussing the incompatibility of .selectable() and .dblclick() on a single DOM element, and I suspect something similar is happening here. If you cancel the .ui-selected event, you'll be able to get back your double-click:
$('#canvas').selectable({
cancel: '.ui-selected'
});
Here's a new Fiddle showing the double-click working now.
$('.trigger').dblclick(function() {
$('.box').toggleClass('active');
});
$('#canvas').selectable({ cancel: ".trigger" });
Here I fixed, it works now. Not sure why you're making your canvas selectable.
I removed the selectable class, and added the .on event :
$('.trigger').on('dblclick',function() {
$('.box').toggleClass('active');
});
Try it with the code above. Please care to explain why you're doing the selectable() to the canvas.
Related
I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me
I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle
well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation
What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.
I am trying to make the below JSFiddle work for tablet/mobile devices (e.g. 'on touch' as well as 'click').
https://jsfiddle.net/lkw274/7zt1zL0g/87/
<div class="user-navigation">
<a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>
$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
e.preventDefault();
$(".user-navigation a.mobile-menu-new").toggleClass("current");
});
});
.current { background: #F00;}
Expected behaviour:
On clicking 'Menu', either by touch or with clicked with mouse, the background is highlighted red until it is clicked again when the class should be removed, removing the red background and returning it to its original state.
Current behaviour:
On clicking 'Menu', by touch on mobile/tablet device, the background is highlighted red however the class is not removed when 'menu' is clicked for the second time.
Could anyone help to understand how this code needs to be modified for tablet/mobile devices?
I have tried the solution in the below StackOverflow link however this did not function on click once implemented.
document-click-function-for-touch-device
Thanks in advance.
Looks like event delegation is the way to do this since, when you modify the target element, bind seems to fail.
Try the following (works on my iPhone/Chrome).
$(document).ready(function() {
$(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
Please note I have used .delegate since you seem to be using jQuery 1.6 (as per your fiddle) as otherwise, with jQuery 1.7+, you could use .on like below.
$(document).ready(function() {
$(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
add the cursor:pointer to the property of your class and it should work find in mobile
.user-navigation{
cursor:pointer
}
$(selector).bind("click touchstart", function(){
.......
});
Well, in modern jQuery versions, I suppose something like this:
$(document).on('click','selector', function(e){
e.preventDefault();
your code here
});
...would do the trick for mobile devices...
See this fiddle..
HTML:
<select>
<option>hey1</option>
<option>hey2</option>
<option>hey3</option>
<option>hey4</option>
<option>hey5</option>
</select>
jQuery:
$(document).ready(function () {
$('select').on('click',function(){
$("option:first",this).remove();
$(this).unbind('click');
});
});
When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.
Any ideas? pretty unexpected ..
EDIT:
This picture is for the ones who are not able to see any error..
Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:
$('select').one('mousedown',function(){
$("option:first",this).remove();
});
jsFiddle example
I'm pretty sure it's a bug, another fix is using focus event :
$('select').on('focus', function(){
$("option:first", this).remove();
$(this).unbind('focus');
});
fiddle: http://jsfiddle.net/F8E7L/
I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.
If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>
this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div
I've been trying to use ondrag() and some other functions on a div rendered dynamically on an HTML page.
None of these events seem to fire, nor do I get any errors. I can't find much helpful documentation on it either. Am I interpreting it wrongly, can you use these events to script functionality to drag a div around the screen?
Have a look at this documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
Note: It does not work in every browser.
If you want a cross-browser support use jQuery: http://jqueryui.com/demos/draggable/
jQuery example:
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {}
});
});
</script>
Another example:
<div id="toBeDragged" draggable="true">
This text <strong>may</strong> be dragged.
</div>
<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>
I haven't used drag myself much but I believe it's the drag "edit action" - eg selecting text and dragging it within a textbox/textarea.
You may need to implement your own onmousedown() onmouseup() and onmousemove() handlers for the functionality I think you're after
Short answer: <div>-s are not draggable by default, unlike <a>-s. You must add draggable=true:
<div draggable=true ondragstart=...>HTML</div>
Works on Firefox 75 like that.
Is there content in the div? I don't think it's the element itself that gets dragged in this particular event.
An easy way to do this is with jQuery UI, make sure you use it after your dynamic div has been rendered.
$(document).ready(function () {
$('.my_draggable_elements').draggable({
drag: function(){
// do something
}
});
});