function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
body{background:url(assets/bg.png)no-repeat;}
#drag1{margin-left:10px;}
#div1{background-color:#fff;border:2px dashed #a92928;width:193px;height:152px;float:left;margin-left:10px;}
<div class="drag_drop">
<img id="drag1" src="http://elets-winora.ru/sykkel/image_sykkel_18530_small.jpg" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://www.charmingsharmapartments.com/_wp_generated/wp54f0f9a8_06.png" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://www.aveac.org.uk/Shaun%20win.JPG" draggable="true" ondragstart="drag(event)">
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
I have included only drag image to box how can play audio sound when drag to image to box given below following steps
Step 1: All drop area(with images like running etc.,) should be randomized
Step 2 : all audio should be randomized – for example if first audio after randomization is cycling then it has to play all 3 audios sequentially with 1 sec pause in between.
Step 3 : first drop area should be cycling as per random order of audio. If user has dropped wrong answer it has to go back to its original position.
Step 4 : if user don’t drop any thing and play audio again it will play again in same order. All audio will be played in sequential order from 1 to 4.
Step 5 : if user clicks reset it will randomize again audio and drop area again.
I have the below content that loads on through AJAX.
<div class="grid">
<div class="thumb">
<img alt="AlbumIcon" src="some-image.jpg">
<div style="bottom:-75px;" class="meta">
<p class="title">Title</p>
<p class="genre"> <i class="icon-film icon-white"></i>
Genre
</p>
</div>
</div>
</div>
Additionally, I have writen the following script in jquery that applies to the above 'div.grid'.
jQuery(function ($) {
$(document).ready(function () {
$(".grid").on({
mouseenter : function () {
$(this).find('.meta').stop().animate({
bottom:'0px'
},200);
},
mouseleave : function () {
$(this).find('.meta').stop().animate({
bottom:'-75px'
},200);
}
});
});
});
The script works fine when the page loads the first time. However, the hover effect doesn't work once the above div is generated via AJAX after clicking on an 'a' tag. I can't seem to figure out what's wrong here? New to all this. Can anyone help?
To append these event handlers to dynamically generated elements, you need to bind to the document or another static parent element and then specify .grid as the second argument passed to .on.
The second argument is used as a filter to determine the selected elements that trigger the event. So when the event is fired it will propagate to the document or parent element selected by jquery. The event target will then be scrutinized using the selector provided as the second argument. If the target matches the second argument, (.grid in our case), the event is fired.
You can read more in the jQuery documentation.
Also, since your using document.ready there is no need for the short hand ready statement, jquery(function($).
$(document).ready(function () {
$(document).on({
mouseenter : function () {
$(this).find('.meta').stop().animate({
bottom:'0px'
},200);
},
mouseleave : function () {
$(this).find('.meta').stop().animate({
bottom:'-75px'
},200);
}
}, ".grid");
});
you lost your binding because of ajax that overwrite your div with class=".grid"
use parent element for binding
$('.ParentElementClass').on("mouseleave", ".grid", function(){...})
more from jquery api
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
Not sure what you're shooting for here but a little malformed HTML may have done it...
jsFiddle Demo
<div class="grid">
<div class="thumb">
<img alt="AlbumIcon" src="some-image.jpg" />
<div style="bottom:-75px;" class="meta">
<p class="title">Title</p>
<p class="genre"><i class="icon-film icon-white"></i>Genre</p>
</div>
</div>
</div>
$(function () {
$(".grid").on({
mouseenter: function () {
alert('entered');
$(this).find('.meta').stop().animate({
bottom: '0px'
}, 200);
},
mouseleave: function () {
alert('left');
$(this).find('.meta').stop().animate({
bottom: '-75px'
}, 200);
}
}, ".thumb");
});
});
Be sure to close img tags. They're notorious for causing intermittent glitches.
You can just use the hover function:
jQuery(function ($) {
$(document).ready(function () {
$(".grid").hover(function () { /*mouseenter*/
$(this).find('.meta').stop().animate({
bottom:'0px'
},200);
},function(){ /*mouseleave*/
$(this).find('.meta').stop().animate({
bottom:'-75px'
},200);
}
});
});
Explanation:
The first parameter function does the work of mouseenter and the second does the work of mouseleave.
I'd recommend using those both, mouseenter and mouseleave in situation when you don't want an effect back when the user gets off his mouse from the element.
I am trying to make a simple educational game for kids, where they will drag and drop pictures of planets and need to put them in the correct boxes in the correct order.
What I'm trying to figure out is the JS needed to let check the element being dropped on a box is the one that will match that box. The code I have so far allows me to drag and drop but has no check. Here is what I have:
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
}
</script>
<section id="planetbox">
<img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif">
</section>
<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>
Any help would be really great. P.S. needs to use HTML 5, CSS and JS only no libraries :)
I managed to solve my issue using the code below on the function drop(ev):
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
if ( image == ev.target.id) {
ev.target.appendChild(document.getElementById(image));
}
else {
}
}
I have a HTML5 drag and drop function. You can drag an item from div1 to div2.
What I want to do is for every item dropped into div2, automatically give it a list number.
At the minute the JS code for adding the text to div2 looks like this:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild( document.getElementById(data));
}
Above drops the element into div2. Below describes the drag function.
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
The html looks like this:
<div id="div1" ondrop="drop(event)">
<div id="title" draggable="true" ondragstart="drag(event)" style="font-family:Metacopy">Text to be Dragged</div>
</div>
<div id="div2" ondrop="drop(event)"></div>
I'd be grateful for any help. Sorry if the answer is glaringly obvious, I'm kind of new to this.
I have a little issue with mootools 1.4 and interaction between multiple separate elements. I have a menu like this :
<div id="links">
<a class="readmore" href="#1" title="1">Read More</a>
<a class="readmore" href="#2" title="2">Read More</a>
<a class="readmore" href="#2" title="3">Read More</a>
...
</div>
And an other element like this :
Code PHP:
<div id="content">
<div id="1">Lorem Ipsum</div>
<div id="2">Lorem Ipsum</div>
<div id="3">Lorem Ipsum</div>
...
</div>
Both are the same length (each link of the menu have a correspondant div element). What I need to do is to create a listener on each menu link so when it’s click it display the div. And that’s where my problem is because for the moment I use the title of the menu link to open the div that have the same ID. I don’t think that is the most performant, maybe I can do all this in one loop with the index ?
Other little question (not as important at all) : How to put add the same event on 2 element in one line of code (to avoid the multiplication of line of code to do exactly the same thing if the user click on different button) ?
Thanks a lot !
several things can be done.
- event delegation
idea: attach a single event to parent of menu items which fires dependent on the child el that has matched the event condition
so:
document.id('links').addEvent('click:relay(a.readmore)', function(event, element){
var id = element.get('title');
// do something.
});
downside is that you need to read the id but you can remove the ids from the target els if they are in the right order.
(function() {
var els = document.getElements('#content div');
document.id('links').addEvent('click:relay(a.readmore)', function(event, element){
var id = element.get('title'),
hint = els[id-1];
showHint(hint);
});
}());
that's about it. less events attached.
- looping to attach the events has a reference to index, which will match target
(function() {
var els = document.getElements('#content div'),
clickHandler = function(trigger, target){
};
document.getElements('#links a').each(function(element, index){
element.addEvent('click', function(event) {
event.stop();
clickHandler(this, els[index]));
});
});
}());
upside to that is, you don't need ids on hint els and no title tags or anything on source. downside, each link has its own click event.