I want to enable drag-and-drop behaviour on my Web application. I have an image I want to drag. The image is behind another one that has transparent sections so that you can see the image beneath it. I do not want to change the order of the images. My thinking is I should use another layer on top of both images that is transparent and use it as a proxy to transfer events to the image I want to drag. jQuery UI's draggable function will not allow me to transfer the events in real-time i.e. I cannot hook into what it is doing while the drag is taking place, only when it is completed.
Is there a JavaScript library or jQuery plugin that will allow me to enable drag-and-drop on an element and have it transfer those events to another element in real-time?
Maybe I don't understand what you are trying to accomplish, but you should be able to drag and drop overlapping images without any trouble (demo).
Just wrap both images in a div and then make the div draggable:
CSS (no need to make .dragme position relative, because it is done in the draggable script)
.dragme img {
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="dragme">
<img src="image1.gif">
<img src="image2.gif">
</div>
Script
$(".dragme").draggable();
I updated the demo, this isn't pretty and there might be a better way, but basically this puts an invisible overlay over the frame, then positions the image while the overlay is being dragged.
CSS
#draggable, #droppable {
width: 450px;
height: 250px;
padding: 0.5em;
margin: 10px;
background: #ddd;
color:#000;
}
.dragme {
position: relative;
width: 100px;
padding: 5px;
}
.dragme img {
position: absolute;
top: 55px;
left: 30px;
}
.demo {
width: 500px;
}
.border {
position: absolute;
top: 75px;
left: 30px;
z-index: 1;
}
HTML
<div class="demo">
<div class="border">
<img src="http://www.imageuploading.net/image/thumbs/large/border-564.png">
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme">
<img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
</div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script (The demo uses $(document).ready because jsFiddle doesn't like $(window).load)
$(window).load(function(){
// cycle through draggable divs (in case there are more than one)
$(".dragme").each(function(){
var img = $(this).find('img');
var pos = img.position();
// create div overlay on image
$('<div/>', {
class : 'overlay',
css: {
position: 'relative',
top: pos.top,
left: pos.left,
width: img.outerWidth(),
height: img.outerHeight(),
zIndex: 100
}
})
// save original image position
.data('pos', [pos.left, pos.top])
.appendTo($(this));
// make overlay draggable
$(this).find('.overlay').draggable({
containment : '.demo',
revert: true,
revertDuration: 0,
handle: 'div',
// drag overlay and image
drag: function(e,ui){
img = $(this).parent().find('img');
img.css({
top: ui.position.top,
left: ui.position.left
});
},
// make image revert
stop: function(e,ui){
pos = $(this).data('pos');
$(this).parent().find('img').animate({left: pos[0], top: pos[1] },500);
}
});
});
$("#droppable").droppable({
drop : function(e,ui) {
// append entire div wrapper (.dragme)
ui.helper.parent().appendTo($(this));
}
});
});
Related
I am trying to integrate the code from here to change image of my slide show on click (credit to cssyphus):
$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
});
});
function Forward() {
$("img:first").fadeToggle("slow", function() {
$(this).appendTo(".frame").fadeIn(800)
});
}
function Backward() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
}
.frame {
position: relative;
left: 35%;
}
img {
position: absolute;
max-width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>
<input type="button" value="PrependTo" />
<button onclick="Forward()">Go Forward</button>
<button onclick="Backward()">Go Backward</button>
</h1>
<div class="frame">
<img src="http://placeimg.com/240/180/animals">
<img src="http://placeimg.com/240/180/nature">
<img src="http://placeimg.com/240/180/people">
<img src="http://placeimg.com/240/180/sepia">
</div>
The issue arise due to the effect depending position:absolute to stack the images on top of one another. Switching it to position:relative unstack the images and they are next to one another. Using position:absolute throws off all other elements in the code to integrate into. How can I remedy this problem?
It's a little difficult to imagine how the layout is affected by the slideshow, but from looking at your code I would try one of two things:
Remove the left: 35%; css from the .frame - I'm unsure why this is there but it will push the whole frame container of the slideshow over
.frame {
position: relative;
}
Adjust the CSS for the img so it only affects the nth-children after the first one, so they will be stacked on top of one another while the first one is inherit/relative:
img {
position: relative;
}
img:nth-child(n+2) {
position: absolute;
top: 0;
left: 0;
}
I don't know why suddenly the sidebar moves unintentionally. I'm creating a fixed sidebar that show only when hovered.
When I slowly point the mouse on the parent div #containter element it works fine, but when I move the mouse several times on the parent div element #containter the div shows and hide like insane. And also there an area where the parent div shows even you didn't actually hovered on the parent div.
I'm using this code.
HTML
<div id="containter"><!-- parent div -->
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
</div>
CSS
#containter {
width: 140px;
height: 282px;
position: fixed;
margin-top: 30px;
left: -104px;
border: 1px solid red;
}
.wrapdownload {
width: 100px;
height: 90px;
border: 2px solid black;
}
JAVASCRIPT
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").animate({
left: "-104px"
});
});
});
When you hover on the parent div for six times the div show 6 times also. I just want it to show when the mouse is pointed on div element and if i move the mouse outside the parent div, it must hide.
Here is the sample on jsfiddle https://jsfiddle.net/py0622ms/6/
Use stop() method:
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").stop().animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").stop().animate({
left: "-104px"
});
});
});
Working fiddle:
https://jsfiddle.net/py0622ms/7/
I have been able to open a page and drag items onto the surface div tags onto the surface. I have also been able to move the items and resize them.
Now, I am trying to load the same objects onto the surface when the page loads and still have the capability to move them, resize or remove the cloned them
I was able to add the object to the page, however, when i move the objects they revert to the original position and i am unable to resize the cloned object.
Below is my code, can somebody please tell me where i may be going wrong with my implementation?
$(document).ready(function (event, ui) {
if ($('#rlvPdf_ctrl0_pnlPdfPage').length) {
var clonedObject = $("#textbox").clone();
clonedObject.addClass("dropped");
//$(function () {
//Make element draggable
clonedObject.draggable({ revert: false});
$("#rlvPdf_ctrl0_pnlPdfPage").droppable({
accept: 'textbox',
drop: function (event, ui) {
$(this).append($(ui.draggable).clone());
$("#rlvPdf_ctrl0_pnlPdfPage.clonedObject").addClass("dropped");
}
});
clonedObject.appendTo("#rlvPdf_ctrl0_pnlPdfPage");
}
HTML
<div id="toolbar" class="toolbar">
<div id="textbox" class="draggableItem">
<span class="draghandle">::</span>
<span class="draggableItemContentText">Text Box</span>
</div>
</div>
<div id="rlvPdf_ctrl0_pnlPdfPage" pageNum="1" >
CSS
.dropped
{
position: absolute !important;
display: inline-block;
margin: 0 auto;
background-color: wheat;
}
.draggableItem
{
position: relative;
height: 18px;
width: 150px;
z-index: 1000;
box-shadow: 0px 2px 2px black;
display: inline-block;
}
I am working for a company and converting flash ad banners in html5.
I need to convert flash image which slides in from the left and at the same time it performs motion blur effect just like a windy effect.
I have converted slide in image but I am not sure how to add a windy effect.
Here is the car image I want to copy and this is my code jsfiddle
Thanks in advance.
HTML
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
</div>
</div>
CSS
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#mainContainer {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
jQuery
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}
Jquery is not going to help you create motion blur unless you use a canvas, which nearly no one use for creating ads,
or,
you can create multiple instance of the images and place in same place, then animate each with slight time interval and opacity.
This is very good plugin for you:
DEMO
plugin
I have a client who wants to have an X-Ray effect that reveals clickable data points. A slider would be used to move a viewing window over an image, that would reveal an x-ray, or secondary image as the slider is moved. I've adapted Eli Kirk's X-Ray effect (http://elikirk.com/2013/12/02/draggable-x-ray-effect-using-css-javascript/) to get what I have so far: http://jsfiddle.net/xfxLx/3/. The jQuery UI portion of it is easy enough:
var artWidth = 300;
$(document).ready(function() {
$('.xraySlider').slider({
slide: function(e, ui) {
var newLeft = (ui.value / 100) * (artWidth - 100);
$('.xrayWindow').css({'background-position': (newLeft * -1) + 'px 0px', "left": newLeft + "px" });
}
});
});
The problem I'm having is making clickable data points that would be revealed by the window as it is slid across the main image. The data points would be fairly simple shapes (like, say, a black circle), that the user could click on once revealed by the x-ray window, to reveal a popup with more info. I've beat my head against the wall trying to come up with a workable solution (if this wasn't bad enough, it all has to work in IE7, so I've ruled out canvas as well).
If this effect won't work under the confines listed (which I've told them might be the case, since I have yet to come up with a viable solution), that's fine, but I just want to make sure I'm not missing anything.
I have changed yoput HTML, setting an inner element to the xray, that will hold the points
<div class="artifact-hold">
<div class="artifact">
<div class="xrayUpper"></div>
<div class="xrayWindow">
<div class="innerXray">
<div class="point" id="brain"></div>
<div class="point" id="heart"></div>
</div>
</div>
<br />
<div class="xraySlider"></div>
</div>
</div>
Then, the JavaScript changes slightly
var artWidth = 300;
$(document).ready(function() {
$('.xraySlider').slider({
slide: function(e, ui) {
var newLeft = (ui.value / 100) * (artWidth - 100);
$('.xrayWindow').css({"left": newLeft + "px" });
$('.innerXray').css({"left": -newLeft + "px" });
}
});
});
And CSS is changed to make the xray clip the contents (with overflow hidden), and the inner has the background image instead of the xraywindow. also, some styling to the points.
.innerXray {
width: 300px;
height: 490px;
position: absolute;
background: url(http://s21.postimg.org/tpg6me1vb/bones.jpg) no-repeat;
background-position: 0px 0px;
}
.point {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: red;
}
#heart {
left: 150px;
top: 130px;
}
#brain {
left: 150px;
top: 30px;
}
.xrayWindow {
width: 100px;
height: 490px;
border: 2px solid rgba(255,255,255,0.5);
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
result