How can I check if a certain element being dragged has a certain class?
The JS code:
if ($('.fc-event').is('.ui-draggable')) //To check if element is being dragged
{
console.log('This element is being dragged');
if ($('.fc-event').is('.ui-draggable').hasClass('music')) //Can't use this.hasClass?
{
//place in music database table
}
else
{
//place in other database table
}
}
The HTML code:
<div id='external-events'>
<h4>Music</h4>
<div class='fc-event music'>Music 1</div>
<div class='fc-event music'>Music 2</div>
<div class='fc-event music'>Music 3</div>
</div>
The above JS code obviously does not work, but it's the closest to the solution. (I think)
There are some events in draggable() api, there is one said drag which fires when you drag it and this callback has two arguments event, ui where ui will get you the element you are looking for.
$( ".selector" ).draggable({
drag: function( event, ui ) {
$('pre').html('$(ui.helper).hasClass("music"):'+$(ui.helper).hasClass('music'));
}
});
.selector{width:150px; height:100px; border:solid 1px red; background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='selector music'>selector</div>
<pre></pre>
Related
$('.title').on('click', function(){
console.log($(this).index('.title'));
});
.title{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
Now, how to SET the index of a clicked element, i.e. change its position?
Is it possible something like:
$('.clicked').setIndex('.title', 3);
One option would be to .remove() the clicked element, then find the third .title element currently in the DOM, and use insertAfter to insert the clicked element after it:
$(document).on('click', '.title', function(){
const $this = $(this);
$this.remove();
$this.insertAfter($('.title').eq(2));
});
.title{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
Note the event delegation there - that's needed because otherwise, the listener will only work once for each .title.
To illustrate why .remove is necessary, check the following snippet - although it's using insertAfter($('.title').eq(2));, the .eq(2) refers to the 3rd element before the clicked one is removed, resulting in inconsistent behavior; if you click the first, second, or third element, it'll get put in the third position, instead of the fourth, as desired.
$(document).on('click', '.title', function(){
const $this = $(this);
$this.insertAfter($('.title').eq(2));
});
.title{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
<div class='title'>loreme</div>
<div class='title'>loremf</div>
I am drag-and-dropping some text from a proprietary application into an HTML <textarea> element. This software cannot copy-paste; drag-and-drop is the only option. However, the drag and drop can be simulated by simply typing a few lines in Word, then dragging them into the browser.
I have a jsfiddle with my code. However, when I drag some lines from the program into the text box the first time, I get "undefined" returned. When I try it again without reloading the page (when the text area already has contents), it works great.
How can I get it to work the first time?
You need to put the line
$('#return').html(dropstr);
inside of the getAsString callback.
var dropstr;
$( document ).ready(function() {
$('#dropbox').on('drop', function(e) {
e.originalEvent.dataTransfer.items[0].getAsString(function(str){
dropstr=str;
console.log(dropstr);
$('#return').html(dropstr);
});
});
});
#return{
border:1px solid black;
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropbox" contenteditable="true" id="dropbox">
<textarea></textarea>
</div>
<div id="return">
</div>
You were appending outside of callback which itself is not needed at least in your case. fiddle
<div id="dropbox" contenteditable="true" id="dropbox">
<textarea></textarea>
</div>
<div id="return">
</div>
and here is js.
var dropstr;
$(document).ready(function() {
$('#dropbox').on('drop', function(e) {
var str = e.originalEvent.dataTransfer.getData('Text');
console.log(str);
$('#return').html(str);
});
});
I am making a gallery and in that gallery, there would be images wrapped in divs. In jQuery, I could call these divs like:
var card = $('.card');
This card variable will now contain all the elements with the 'card' class. Now, what I want to happen is whenever I click on a 'card', it would grab that very instance of card (I'm thinking by getting its index onclick) and do something with it as object-oriented as possible (though I never had much experience with it)
You can use simple this object:
https://codepen.io/bra1N/pen/ERXPJw
$('.card').on("click",function() {
$(this).css('background', 'red');
});
.card {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
Here is what you can do:
Dummy HTML:
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
jQuery needed:
$('.card').click(function() {
alert($(this).text());
});
Here is the link to the jsfiddle supporting this answer.
$('.card').click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event.
How do I go about that.
The Jquery for that purpose would be
$('.wpb_vc_column').click(function(e) {
alert();
e.preventDefault();
$(this).find('.vc_controls').addClass('show-controls');
});
.show-controls {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
<div class="vc_controls">SomeThing</div>
</div>
Its basically a wordpress backend thing which need to be workable on mobile devices.
Regards
You can use querySelectorAll() to select all the elements with class wpb_vc_column and associate the click event to each element. Then click on these element will find the child elements with class vc_controls and add the class to it.
function clickedColumn(e){
e.preventDefault();
if(this.querySelector('.vc_controls')){
this.classList.add('show-controls');
}
}
document.querySelectorAll('.wpb_vc_column').forEach(function(el){
el.addEventListener('click', clickedColumn);
});
.show-controls{
color:red;
}
<div class="wpb_vc_column">
<div class="vc_controls">SomeThing 1</div>
<div class="vc_controls">SomeThing 2</div>
</div>
var myEle = document.getElementsByClassName('vc_controls');
myEle.className = "show-controls";
make use of querySelector method and and search for child in parent element
el.querySelector("#child").className = 'show-controls';
or
el.querySelector('.vc_controls').className = 'show-controls';
function changeClass(element){
var get_vc_controls=element.getElementsByClassName('vc_controls');
get_vc_controls[0].className='show-controls';
}
.show-controls {
color: red
}
<div class="wpb_vc_column" style="border:1px solid;" onclick="changeClass(this)">
<div class="vc_controls">SomeThing</div>
</div>
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>