I am using jQuery UI rotatable to rotate my div, its working fine when my div is set to 100% zoom. When I set the zoom less then 100% or greater then 100% then its not working properly.
I want it to be perfectly rotate on zoom in or zoom out my div.
I know here we need to write few lines of code to fix zoom issue.
Here what I tried
$('#target').rotatable({
angle: false,
wheelRotate: true,
rotate: function(event, ui) {
},
start: function(event, ui) {
},
stop: function(event, ui) {
},
});
Consider the following example:
https://jsfiddle.net/Twisty/q2Lgh0st/12/
HTML
<div class="slide"></div>
<div class="container">
<div id="target">Rotate me!</div>
</div>
CSS
.ui-rotatable-handle {
height: 16px;
width: 16px;
cursor: pointer;
background-size: 100%;
bottom: inherit;
left: 0;
right: 0;
top: -21px;
margin: auto;
position: absolute;
}
.container {
transform: scale(0.5);
}
#target {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50px;
left: 200px;
}
JavaScript
$(function() {
$(".slide").slider({
min: 0,
max: 2,
step: 0.1,
value: 0.5,
slide: function(e, ui) {
console.log("Slide", ui.value);
$(".container").css("transform", "scale(" + ui.value + ")");
}
});
$('#target').rotatable({
// Callback fired on rotation start.
start: function(event, ui) {},
// Callback fired during rotation.
rotate: function(event, ui) {},
// Callback fired on rotation end.
stop: function(event, ui) {},
// Set the rotation center
});
});
In regards to the zoom, please see:
The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.
See More: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
The last bit is what was most likely throwing off your Rotatable. Switching to the transform, there is no such issue found.
Related
I'm testing around with jQuery draggables and droppables and have a question about the hover behaviour of droppable and clones of a draggable.
The documentation says that the draggable item has to overlap the droppable at least 50% to fire the over-event (default tolerance). This works exactly like described if I drag the item itself.
If I drag a clone of the item, the 50% rule doesn't work. In this case the clone has to overlap the droppable quite 100% if I'm dragging vertically from the top. If I'm dragging the clone from the left side, the hover-event will fire very early at 10%.
How does this come up?
$("#eins").draggable({
helper: "clone",
opacity: 0.7,
drag: function(event,ui) {
$(ui.helper).addClass("clone")
},
stop: function (event, ui) {
console.log("Dragging stoped")
}
})
$("#zwei").droppable({
classes: {"ui-droppable-hover": "draggableHover"},
tolerance: "intersect",
over: function(event, ui) {
console.log("hover")
},
drop: function (event, ui) {
console.log("dropped")
}
})
#eins, .clone {
background: coral;
height: 100px;
width: 100px;
margin: 0px;
}
#zwei {
background:lightgreen;
height:100px;
width: 100px;
margin: 0px;
}
.draggableHover {
background: rgb(230, 250, 230) !important;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="eins">
eins
</div>
<div id="zwei">
zwei
</div>
Solution: class="eins" intead of id="eins".
I've made a simple animation of a balloon moving from left to right side of the screen, but I want to make it as a parabolic movement instead of linear animation. Also I want to hide it from left site instead of starting on left:0;
Here's my actual code
$(document).ready(function() {
function loop() {
$('#promo').css({
left: 0
});
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
loop();
});
#promo {
position: absolute;
z-index: 500;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
<img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>
Adjust the left property of the balloon to -50px, so it's not visible at the start of the animation.
Also, to stop the scrollbars appearing, give the container of the balloon overflow: hidden. You could then use jQuery/JavaScript to adjust the width of the container to fit the browser's viewport on document ready, and window resize.
CSS
.balloon-container {
position: relative;
height: 200px; // Set a height of your container here, or use jQuery/JavaScript
}
.balloon {
position: absolute;
left: -50px;
}
jQuery
$(document).ready(function() {
function sizeContainer() {
$('.container').css('width', window.innerWidth);
}
function loop() {
$('.balloon').css('left', '-50px');
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
// Run initial functions.
sizeContainer();
loop();
$(window).resize(function() {
// Re-run functions on window resize.
sizeContainer();
});
});
When moving, the movable div displays under another block. How to make this div appear on top of all the other blocks?
<div class="main-container">
<div class="some-container"></div>
<div class="group-container"></div>
</div>
$('.group-container').draggable({
containment: '.main-container'
});
I have this problem because class="some-container":
CSS
position: absolute;
right: 25px;
top: 89px;
width: 260px;
z-index: 1150;
height: 83%;
overflow-x: hidden;
overflow-y: scroll;
How can I fix this, maybe cloning?
Added:
I trying like this:
$('.group-container').draggable({
containment: 'window',
onDrag: myHelper,
zIndex: 9999,
stop: function(){
$(this).remove();
}
});
// Element which created after start dragging
function myHelper(event, ui){
var newGroupBlock = $(this).clone().appendTo($(".main-container"));
return newGroupBlock;
}
But it's not working. The block that I should stand after dragging stay put where I dragged him, and he disappears ...
You can use the start and stop events of the draggable to set the z-index higher/lower. Try this:
$('.group-container').draggable({
containment: '.main-container',
start: function(e, ui) {
ui.helper.css('z-index', 1200);
},
stop: function(e, ui) {
ui.helper.css('z-index', 1100);
}
});
Here's my fiddle: http://jsfiddle.net/challenger/u22PD/69.
Draggable and droppable are initialized this way:
$lister.find('.draggable').draggable({
stack: 'div'
});
$('#insert-editor .droppable-target').droppable({
drop: function(event, ui) {
var $this = $(this);
$this.html(ui.draggable);
}
});
It is only possible to drag .darggable item over #image-lister div. How do I drop a .draggable item onto the droppable-target?
Also how to keep the draggable item after it's been dragged-dropped to the target?
Found a solution there: jQuery Draggable and overflow issue
Changed my code to this:
$lister.find('.draggable').draggable({
scroll: false,
helper: 'clone',
start: function() {
$(this).hide();
},
stop: function() {
$(this).show()
}
});
Here's the result: http://jsfiddle.net/challenger/u22PD/91
The only thing that doesn't satisfy me is that you still can see as a draggable item goes under the hidden part of the parent division when dragged. Maybe you know how to solve this?
Remove overflow: auto; from #image-lister
Try this code:
DEMO
#image-lister {
position: relative; max-width: 1920px; min-width: 300px; margin: 0 auto;
height: 530px;
overflow: auto; /*remove this */
background: #ddd;
background: #555;
z-index: 2;
padding: 10px;
padding-bottom: 0;
}
I have several images that I applied jQuery tooltip effect on..it works, but the problem is that irrespective of the image i click the tooltip only displays at the top of the page.
Is there a way I can make the tooltip appear beside each image that is clicked.
The jQuery I have so far looks like this :
$('.image').hover(function () {
$('.tooltip').fadeIn(1000);
}, function () {
$('.tooltip').fadeOut(1000);
});
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
CSS
.tooltip {
display: none;
height: auto;
position: absolute;
background-color: #D1C585;
color: black;
border: 2px solid rgba(128, 0, 32, 0.3);
padding: 5px;
border-radius: 5px;
font-family: actor;
}
HTML
<img src="image.jpg" class="image">
It needs to have position: absolute and its parent has to be position: relative. Inside the hover function do:
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
It all depends on where the location of the tooltip node is located. However, you can get the fixed position of the image by grabbing and adding all the offsetLeft/offsetTop of all the element and it's parents. For example.
$('.image').hover(function() {
var e = this,top=0,left=0;
while(e){
top+=e.offsetTop;
left+=e.offsetLeft;
e=$(e).parent();
}
$(this).css({position:'fixed',top:top+"px",left:left:left+"px"});
$('.tooltip').fadeIn(1000);
}, function() {
$('.tooltip').fadeOut(1000);
});
I did not test this code. However, I hope this points you in the right direction. You can then use the size of the image(offsetHeight and offsetWidth) to position the tooltip around the image.
Here is an example using jquery ui, see jquery ui tooltip for documentation
HTML
<img src="http://img262.imageshack.us/img262/68/sahara4rs.jpg" title="tyre">
Javascript
$(document).tooltip({
track: true,
show: {
effect: "fade",
delay: 1000
},
hide: {
effect: "explode",
delay: 250
}
});
On jsfiddle