I've implemented an AngularJS directive to make elements draggable and after that, I applied it to a div element that I want to use as floating menu for my website.
The problem that I've got appears when I drag a draggable div that have been placed into an element that has specific padding values, also, it shows up when the draggable div have set margin attributes. Depending on those attribute values, on mouse move, my draggable div jumps from the original position to some offset and I don't want it to happen.
I created an example to demonstrate this issue, you can see the link below.
And here is my question: How can I make the movement of my draggable divs smooth, without removing padding/margin attributes?
http://plnkr.co/edit/ZwiDo9gx5nAcz4Z0daTo?p=preview
<body style="padding-top:20%">
<div class="col-lg-2 col-sm-3 col-xs-4" style="background-color:black;color:white;z-index:2;" ng-draggable="vm.dragOptions">
<span class="col-xs-12 modal-header divheader" style="cursor:pointer">
List of objects
</span>
<div style="margin:0px;" class="padding">
...
</div>
</div>
UPD
The next snippet provided by #user6028084 helped to solve the issue in the plnkr, but in an actual app it screws up my css styles, so, anyone who comes with another solution is very welcome.
.ng-isolate-scope{
position:absolute;
}
If you remove the padding-top:20% it works as you pointed out.
So if you want to keep that then you must compensate by that amount.
It works perfectly on my browser if I add the corresponding amount (117 px in my case) to the script
Changing the line 56 in your script to the following makes it work no matter what resolution the browser is at - full screen or minimal:
startY = e.clientY - elem[0].offsetTop +117;
Edit: alternatively just remove the offset altogether
startY = e.clientY;
Edit2:
I have changed the way it was getting it's coordinates. The values for startX and startY were incorrect originally as was the assignment of x and y in the mousemove event.
This is the edited plunker for a full working version:
plunker
Related
I'm currently working on a website, which has a page with 2 big images (combined around 9000px) in them. The idea is that people can click and drag, to see the sides of the image, just like google maps.
At first I built it with just the 2 images next to each other. When animating the parent div on drag, I managed to only get a composite paint once in a while, but no actual paint (draws). I did this by editing the translate3d on the mouse events.
This all worked like a charm and very smooth, until I added an extra div to the parent. Now when I change the translate3d, it has to do a complete recalculate style -> layout -> paint -> composite layers.
So at first the structure was:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
</div>
When changing the translate3d, all was good, just had a Composite Layers once in a while.
However, when I change it to the following, all goes bananas:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
<div>+</div>
</div>
So like said before, now when editing translate3d, it has to do a complete Recalculate style.
I made sure the div and images both had layers by adding translateZ(0) on them, that didn't help though :(
I'm pretty sure I don't understand the whole paint sequence of chrome to the detail, but after countless hours of reading I can't find the exact thing. I hope someone can shed some light on this matter.
Thanks a bunch!
Edit after Paul's reply:
The Recalculate Style is triggered by the following line:
this.background.style.transform = 'translate3d(' + (this.panoramaX - this.previewOffset) + '%, 0, 0)';
If you go to a page like youtube.com and drag the mouse around while holding down the left button all kinds of things get selected. In the image below, for example, I'm just dragging the mouse along the red arrow and all the stuff at the top got selected and turned blue.
But if I create a jsfiddle - http://jsfiddle.net/nxwLc/ - with a simple div and drag the mouse around with the left button down, I'm not able to select anything. I can even drag completely around the box without selecting it.
Does anyone know what the difference is?
Thanks
<div id="box1"></div>
The selection (highlight) you see is being applied to textual content elements specifically text and images. In your example you have nothing but a <div> element
Now you'll have something to highlight: http://jsfiddle.net/nxwLc/2/
<div id="box1"><img src="//placehold.it/100x100/cf5"/> asdasdasd</div>
Also worth noting that Firefox will highlight exactly what should be highlighted, while in Chrome the highlight area will have unspecific and also unpredicted results, element-related, keeping an eye to line-heights content-flows etc... strange in any case.
Chrome vs. Firefox
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
$('#popupDiv').popup("open");
This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.
You can do:
$('#popupDiv').popup("open", {positionTo: '#mydiv'});
'origin' is not working for me in version 1.2 though.
see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html
Straight from the jQuery Mobile Docs:
Positioning options By default, popups open centered vertically and
horizontally over the thing you clicked (the origin) which is good for
popups used as tooltips or menus. The framework also applies some
basic collision detection rules to ensure that the popup will appear
on-screen so the ultimate position may not always be centered over the
origin.
For situations like a dialog or lightbox where the popup should appear
centered within the window instead of over the origin, add the
data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of
position-to in addition to origin and window. For example, if you add
data-position-to="#myElement" the popup will be positioned over the
element with the id myElement.
<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.
yeah the right way to do this is use event.target like this
$('#popup').off('taphold').on('taphold', function (e) {
$('#popupDiv').popup("open", e.target);
});
incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works
$('#popup').on('tap', function (){
var url = $(this).attr('url');
window.open( url, '_parent');
});
nb: I added "url='google.com'" to the markup and made href='#'
Usless Background Info
Hello, all. This is my first post here, but I often come here for help.
I am an amateur web designer and have been in web designing for almost a year now.
The Problem
My question is about CSS3 transforms. I have a small, circular element in the center of my page that transforms successfully when I hover over it. I have a larger circular element that is, by z-index, underneath it. The larger circle also has CSS3 transforms coded in the CSS, but will not transform, or even triggerd when hovered over. Both circles are overlaid, with the smallest on top, to create concentric circles.
My Attempted Solution
One word: Z-index. I have tried putting the larger circle on top, which works fine. The problem with this is that the smaller circle no longer triggers...
The Result I Want
I would like for the circles to remain in their 'concentric' positions and for the larger circle on the outside to transform by :hover. Is it possible to have an 'alternate trigger'? e.g.: in JavaScript, I can trigger an animation by hovering over any element that I specify. Is this possible to do in CSS? Can I hover element (I), and change properties for element (II)? If I cannot do this, how would I go about triggering animations for both circles, by hovering over only one? I am trying to stay with pure CSS/HTML, but I will accept JavaScript answers.
Last Notes
I hope I have provided ample info for a decent answer... Here is a screenshot: http://i.stack.imgur.com/WPj62.png
The circle with the infinity sign is the smaller circle element. The larger circle with the faint border around the screen is the other element.
EDIT:
Something's still not right, please take a look at the full code posted here: http://cssdesk.com/eJ8BH
If I understand your question, it sounds like when you hover over the small circle, you want both the large and small circle to transform, correct?
The easiest way is likely to use javascript for this. If you are using jQuery, it's even easier:
$('.littleCircle')
.hover(function(){
$(this).addClass('myTransformationClass');
$('.biggerCircle').addClass('myTransformationClass');
})
UPDATE: Some further examples based on follow-up feedback.
Here's what I'd do. First, give all 4 related elements a class so you can grab them via jQuery. For the example I use .rolloverSet
// grab all 4 elements and cache them
$rolloverSet = $('.rolloverSet');
// grab the one element that needs to have two classes
$otherElement = $rolloverSet.find('.otherElement');
$rolloverSet
.hover(function(){ // we'll add a hover event to each element in the group
$(this).addClass('myTransformationClass');
$otherElement.addClass('myOtherTransformationClass');
})
.blur(function(){ // remove the classes on mousout
$(this).removeClass('myTransformationClass');
$otherElement.removeClass('myOtherTransformationClass');
})
You do not need jQuery for this. You need to apply :hover on the parent element of the concentric circles and then apply the animation to its immediate children like this: http://jsfiddle.net/nimbu/taqr4/
Things I changed:
Updated to use shorter transitions, animations property
Added moz, o, unprefixed properties
Removed -webkit- from border-radius
Gathered common properties of concentric circles to prevent repetition
Fixed incorrect background-color (#00000000)