We Keep Coding

Control img's border perimeter by time countdown - from full circle, through partial arc, to nothing

I use html, css, angularjs in the front.
I've got an img which in the initial state is surrounded with a full circle of a thick border. I start a countdown of a minute. I would like the border to get partially disappeared as the time goes down.
For example, after the first second only 59/60 of the perimeter of the border is shown, after the second one only 58/60 is shown, ..., after 30 seconds there's only a half of a circle and so on, until it gets totally disappeared.
In addition, if it's possible, I would like the transitions to be smooth.
Thanks for any help

You have to use a combination of ng-class for conditionnal CSS on your case AND css transition.
See for example this example of a smooth transition that is for a 5s for an element to be half visible
#myTransition {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}

Smoothly transitioning header navigation classes

I created this site with a header that transitions using jQuery Ui and twitter bootstrap. The idea is that there are two classes .navbar-transparent and .navbar-white and I use the .switchClass() function that jQuery Ui Effects provides that transitions the change in the two classes when the scroll position of the page isn't at the top.
The problem however, the nav as it is now is, I believe the technical term is "janky". The transition isn't smooth, and when going from transparent to white the none of the font color doesn't transition at all, it just plops into black.
This shopify theme Retina / Austin does a great job of making that transition smooth with a css transition.
.header{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
Here's my javascript code:
mindful_matter.header = function() {
if ($(".navbar-transparent").length == 0) return false;
var callback = function() {
var scrolled_val = $(document).scrollTop().valueOf();
if (scrolled_val > 0) {
$(".navbar").switchClass("navbar-transparent", "navbar-white");
} else {
$(".navbar").switchClass("navbar-white", "navbar-transparent");
}
}
callback();
$(window).scroll(callback);
}
Is there any way I can make the transition smoother? Using the setup I already have? Can I use a css transition when I have two classes that need to be swapped for one another?

.navbar{
transition: background-color 500ms ease;
}

Fading specific CSS/JS Popup when opening/closing

The following code snippet shows how I made popups with CSS and JS. Is there any chance to let it fade when opening/closing it, without changing the way I used to work, I mean just popping up the box by changing its display style?
function lightbox_open(){
window.scrollTo(100,500);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}

You could use either use jQuery to do the fading $().fadeIn() or use CSS3 animations if you want to stick to bare JS. In the latter case, set the opacity to 0 by default and change it to 1 via Javascript. You need to add this to your stylesheet:
selector {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

You can use jquery fadein() on open and fadeout() on close, but if you want to do it with pure javascript, i recommend reading this source code. they did it it wonderfully.

You can use jQuery:
.fadeIn()
function lightbox_open(){
window.scrollTo(100,500);
$('#light,#fade').fadeIn();
}
.fadeOut()
function lightbox_close(){
$('#light,#fade').fadeOut();
}

Fading photos in slideshow using CSS

I have a website, and a slideshow of pictures on the main page. Before a photo is removed, I write the next photo behind it and then remove it. I wanted to know how I can add a fading effect before the photo is removed. my website is: guyzyl.org, so you can check out what im talking about. Also I dont know how to use Jquery, so please dont offer that solution. Thanks for any help. Guy Z.

.photo{
-webkit-transition: opacity .5s ease-in-out; /*Webkit*/
-moz-transition: opacity .5s ease-in-out; /*Firefox*/
-o-transition: opacity .5s ease-in-out; /*Opera*/
transition: opacity .5s ease-in-out; /*CSS3 Standard*/
opacity: 1;
}
.photo.fade{
opacity: 0;
}
document.querySelector(".photo").classList.add("fade");
See Demo: http://jsfiddle.net/DerekL/jzLZZ/

I need to find prototype.js based slide out tab?

I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!

CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.