We Keep Coding

Website does not function after I edited content

I recently "made" a website for a friend and it stopped working after I edited some of the content. I don't know why the whole website is broken. It should have images and such...
Please take a look at the website and tell me if anything stands out to why it doesn't work. Thanks!
I have looked at all the html tags and they are all fine.

Your problem is opacity for <article> div is 0:
#main article{
opacity: 0;
}
change to
#main article{
opacity: 1;
}

You have set the opacity to 0 for all ARTICLE elements within your main DIV. I see you have a transition setup for opacity, so I'm assuming you meant to either adjust that opacity value via a script or an animation. Either way, until you implement such, remove the opacity style:
#main article {
...
opacity: 0;
}

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.

Animation transitions behave differently for ng-hide-remove and ng-hide-add

I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles.
I have successfully managed to have the div slide in from the left, however I can not get it to slide out (it simply dissappears after the specified delay). I have tried modifying several examples online to get the behavior I am after to no avail.
JSFiddle for anyone that wants to have a look
https://jsfiddle.net/mquinlan/0wcrcwxe/5/

You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active.
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
Updated Fiddle: https://jsfiddle.net/vsj62g5r/

JQuery hover function opacity animation

trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that.
This is a little complicated, because this is supposed to work on each element of the same type with a different id the same. (Picture gallery with a caption to appear on the bottom of the img element when the picture is hovered.)
The HTML structure is like this:
<article id="{PostID}">
<div class="post-content">
<a><img></a>
<div class="post-content--padded">
<p>Caption of the picture.</p>
</div>
</div>
</article>
First I went with a mouseover, mouseout approach added to the post-content div which looked like this:
onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"
That worked, but there was no transition. I've set the CSS up with transition handlers to apply to all the css changes within post-content--padded like so:
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
This doesn't seem to affect the mouseover, mouseout opacity change I do, so I tried adding .animate() to that, without much success. Well I got post-content to fade in and out, but not post-content--padded
Different approach
That all didn't work so much. So I tried using the JQuery function hover().
Long story short I added this above the html in question:
<script type="text/javascript">
$(document).ready(function(){
$('#{PostID}.post-content').hover(
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
);
});
</script>
This just doesn't want to work though. Endless browsing of stackoverflow and other sources didn't seem to help me with this. Being stuck on this for over an hour I decided to simply ask. It cannot be that hard to add a hover > opactiy transition.
Hope I've not been clear and people understand my issue here.

you can do it just using css if you need only on hover
.post-content--padded{
opacity: 0;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
.post-content:hover .post-content--padded{
opacity: 1;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
see demo HERE
and if you want to use Jquery
$('.post-content--padded').hide();
$('.post-content').hover(function(){
$(this).find('.post-content--padded').fadeToggle(2000);
});
see demo HERE

I also worked on combining hover with animate and it worked like that:
in CSS opacity for "a" = 0
and in jQuery:
$("#classy").hover(function(){
$("#classy").animate({
opacity:"1"
},200);
}, function(){
$("#classy").animate({
opacity:"0"
},200);
});

Here is a jQuery method that works:
HTML
<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>
CSS
.hide {
opacity:0;
}
JS
$('#hover-me').hover( function() {
if ($('#change-me').hasClass('hide')) {
$('#change-me').removeClass('hide', 'slow');
} else {
$('#change-me').addClass('hide', 'slow');
}
});
jsFiddle Demo
*This is with jQueryUI included

ng-animate not triggering animations

On my angular js site I have angular-animate lodaed and deployed (in the inspector I see angular-animate.js in the js folders so I know its loading. What I want to do is have my header animate on page load so I have added the following to my project
template.html
<header id="header" ng-animate=" 'animate' ">
</header>
style.css
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
The issue being is no animation occurs when I click from the home link and load "template.html" Is there something I am missing here??

As per the Angular documentation:
The directives that support animation automatically are: ngRepeat,
ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass. Custom
directives can take advantage of animation by using the $animate
service.
You need to use one of these directives in your header tag.