Jquery draggable helper affected by css changes on original element - javascript

I'm using JQuery UI to enable the drag and drop on some elements.
My problem is that the helper of the drag and drop feature is affected by changes on the original dragged element.
For example if the original element get visibility: hidden/display:none during drag, the helper disappear too.
Same thing if i translate the original element, the helper get translated too.
in my case i'm using helper: 'clone' or a function that create a brand new dom element for the helper.
I'm just trying to make a panel hide while i start dragging so that it does not cover other elements, but doing this the drag helper gets the problem.
Have any idea on how to solve this?
thanks in advice
EDIT: i noticed that my real problem is that the style changes on the father of the dragged element are causing the issue:
example: https://codepen.io/Ciappone/pen/mdRKoXX
<div class="test">
<i class="original fas fa-save"></i>
</div>
.dragging{
transform: translateY(200px);
}
.test{
transition: transform 1s linear;
}
$('document').ready(function(event){
$('.original').draggable({
cursor: 'grab',
helper:function(){
let el = document.createElement('i');
el.className ='fas fa-times';
return el;
},
start: function(event){
$('.test').toggleClass('dragging');
},
stop: function(event){
$('.test').toggleClass('dragging');
}
})
});
In the example i'm dragging an icon and when i start the drag, i translate the father down for 200px, the drag helper do the same and i don't want this behavior, i just want it to stay attached do the pointer

Do the following to hide the diskette icon while dragging:
Modify the .dragging style to visibility:hidden
Add style that applies to the element created by helper. .test.dragging i.fa-times { visibility: visible; }
The final css looks like this
.dragging{
visibility: hidden;
}
.test{
transition: transform 1s linear;
}
.test.dragging i.fa-times {
visibility: visible;
}

Related

Animate Font Awesome Chevron icon rotation on collapse/expand

I want my icon to rotate visibly when the collapsible content is being hidden or is showing up.
Here's my function that adds a chevron icon and rotates it:
$('[data-toggle="collapse"]').each(function(){
var collapser = $(this);
// TODO: 'collapsed' class should be added manually if the toggled element is not shown
// i.e., if you remove 'show' class, add 'collapsed' class, or this function is confused
collapser.append('<span style="float:right;"><i class="fa fa-chevron-right'
+(collapser.hasClass('collapsed')?'':' fa-rotate-90')
+'"/></span>');
collapser.on('click', function(){
var chevron = collapser.find('.fa-chevron-right'); // it was replaced with svg
if (collapser.hasClass('collapsed')) {
chevron.addClass('fa-rotate-90');
} else {
chevron.removeClass('fa-rotate-90');
}
});
});
I'd like to add smoother transition, but better without css, by modifying this code only. CSS is tooo confusing for me
Any other critique of this code is welcomed
To make your animations smoother you can make use of the css transition property.
Simply add this code to your css:
.fa-chevron-right {
-webkit-transition: transform .4s; /* Safari */
transition: transform .4s;
}
or you can add the CSS directly with jQuery by modifying your code appending element this (not recommendet):
collapser.append('<span style="float:right;"><i style="transition: transform .4s;" class="fa fa-chevron-right'
+(collapser.hasClass('collapsed')?'':' fa-rotate-90')
+'"/></span>');
You can learn more about CSS transitions here:
https://www.w3schools.com/css/css3_transitions.asp
In general, I recommend you to learn CSS and create your animations whenever possible with it. You will see it's much easier and you get ways better performance.

Angular: how to animate the background color of a ul list item when text changes [duplicate]

I have created a table in which user can increase and decrease the value.
See the Fiddle
//sample code as its not allowing me to push the link to JSFiddle with out pasting code
<tr ng-repeat="d in dataSource" ng-animate="'animate'">
// css - as from angular page
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
background-color:Yellow;
}
.animate-enter.animate-enter-active {
background-color:Red;
}
I want to do animation when the model updates i.e the table column changes in background color From Red to white in case user changes the value.
So when you click up arrow or down arrow in any perticular column, the background color of that table column changes from Red to white.
I am not able to get my head around it. Any pointers on how to achieve this ?
There are couple of issues in your code:
NEVER do DOM manipulations in the code of controller: $(elem).animate(.. is something you should avoid. Only in directives you can manipulate with DOM element.
In 1.2+ versions of AngularJS you need to reference ngAnimate module.
It is better to do CSS3 animations with fallback to js-based animations.
I propose to write a directive that will track changes and add a class that will trigger the animation and then remove it:
app.directive('animateOnChange', function($animate,$timeout) {
return function(scope, elem, attr) {
scope.$watch(attr.animateOnChange, function(nv,ov) {
if (nv!=ov) {
var c = nv > ov?'change-up':'change';
$animate.addClass(elem,c).then(function() {
$timeout(function() {$animate.removeClass(elem,c);});
});
}
});
};
});
Working example:
http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview
This can be solved with a simple directive and CSS3 animations.
HTML
<span animate-on-change="someValue">{{someValue}}</span>
Directive
myModule.directive('animateOnChange', function($timeout) {
return function(scope, element, attr) {
scope.$watch(attr.animateOnChange, function(nv,ov) {
if (nv!=ov) {
element.addClass('changed');
$timeout(function() {
element.removeClass('changed');
}, 1000); // Could be enhanced to take duration as a parameter
}
});
};
});
CSS
[animate-on-change] {
transition: all 1s;
-webkit-transition: all 1s;
}
[animate-on-change].changed {
background-color: red;
transition: none;
-webkit-transition: none;
}
Fiddle
in Angular 1.5 u can use ngAnimateSwap built in directive.
From the docs:
ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. A common usecase for this directive is a rotating banner or slider component which contains one image being present at a time. When the active image changes then the old image will perform a leave animation and the new element will be inserted via an enter animation.

Jquery CSS mouse hover animation not working smoothly

I have converted a flash ad using jQuery. Everything is working fine, but my mouse hover animation is not working smoothly. There is text "Details" at the bottom right, and when mouse is moved over the text, then the whole container turns black. I have added the effect as:
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
But it is not working perfectly; sometimes it works, and sometimes it does not. If I move my mouse over the "D" character of "Details", then it does not work. What am I missing here? I want this effect to work smoothly whenever I move my mouse over "Details" character; it should turn black.
Any suggestions?? this is my JsFiddle code.
When you hover over the #Disclaimer element, you set several elements to display:none;, including this one.
As this element disapears, the hover event is no longer active, so you end up with an infinite loop. To avoid that, use opacity:0; instead, which will keep your elements in place but not visible.
Also, to avoid the #disclaimer to move around, make it position:absolute;.
Here is the JS Fiddle
CSS
.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText { opacity:0; }
.hovered #disclaimer { opacity:0; }
#disclaimer {
/* ... */
position:absolute;
top: 168px;
left: 235px;
}
I'd recommend just using the CSS :hover property, no sense in using javascript for simple styling changes like this.
You're having issues with a specific element not being associated with the parent element's hover functionality, which can be avoided by adding a rule to the parent's CSS and working from there.
The problem here is that when the hovered is show the Detail text is set to none, so the hover out event will dispatch, removing the hovered class!
You can fix this, by changing disclaimer hover part with this:
$('#disclaimer').mouseenter(
function (e) {
$('#wrapper').addClass('hovered')
.mouseleave(function () {
$('#wrapper').removeClass('hovered');
})
});
So the detail will disappear when the mouse leaves the div, you can also change the mouseleave to mousemove if you want it to disappear just on move.
Here is the result http://jsfiddle.net/r3BTU/2/
You can set up to classes (a hidden and a visible) and the switch between the classes with js.
var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){
movingElement.className="class2";
};
disclaimer.onmouseout= function(){
movingElement.className="class1";
};
You can add trasitions in the css so the visible class "fades" in.
Here's a Demo:
http://jsfiddle.net/Nillervision/eSbzg/

jQuery toggle class animation

I found this code:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.
This is easy with CSS transitions:
JS:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
CSS:
.uncheckedBoxBGColor {
background-color: orange;
/*other properties*/
transition: background-color .3s;
}
This will add the effect whenever the class is turned ON, but when it doesn't have that class then there are no transitions defined. So instead, you can turn on this transition for ALL <LI> elements like so:
CSS:
li { transition: background-color .3s; }
OR for all <INPUT> elements following an <LI><INPUT> combination:
li input { transition: background-color .3s; }
You get the idea of it..
The jquery.toggleClass function isn't made for fading anyhow. See http://api.jquery.com/toggleClass/ for more details.
If you want to fade in/out the background color, try using the CSS3 transition feature like explained at Mozilla's side: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.
Maybe because you are using "input:checked"
try using
$('li input[type=checkbox]').click(function () {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
this is working for me.

I am trying to arrange my html/css/jquery so I can toggle the visibility of a div by double clicking on it

I am trying to arrange my html/css/jquery so I can toggle the visibility of a
div by double clicking on it. I can make it hidden by a double click but when I
double click again it does not reappear. When I check to see all of the div outlines,
the outline of this div is no longer there. I use a web developer plugin to check.
I am using the following codes to try to accomplish this:
My css classes are..
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
the html is...
<div id="ConstructionDiv" ondblclick="unhide('ConstructionDiv')" class="unhidden">
<!.. the div is unhidden at page load. When I look at generated
source code after the double click the class is "hidden"
-->
</div>
my javascript is...
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
Is it possible to do what I am trying? There must be something that works.
Thank you.
I just tried this, and invisible elements cannot receive click events.
As Andy said, Opacity 0 can receive click events just fine, and the contents are still invisible.
Use the following css rules:
.hidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
-moz-opacity:.1;
-khtml-opacity: .1;
opacity: .1;
}
.unhidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}
UPDATE
You can also wrap the element in some other element like div and then use the click of that div to show or hide the inner content.
What if you have two divs, both placed absolutely, but one possibly much larger than the other. clicking one changes the visibility of both of them.

Categories