Develop Reference

Count gif replays

Is it possible to count how many times an animated gif has played with javascript/jquery?

Nope, that's not possible.
However, you could create an interval using setInterval with the duration of the animation which increases a counter.

As #ThiefMaster says, You can't do this with a GIF anim.
However, you can achieve what you want using a javascript animation.
Rather than saving the frames of the animation in a GIF anim, save them in a single PNG file, in a row (ie so it looks like a reel of film) either horizontally or vertically.
Display the image in an element on the page that is sized so you can only see one frame of the animation at a time, and then use Javascript to adjust the CSS offset of the image at regular intervals using setInterval or setTimeout.
This technique is known as CSS Sprite animations. It's easy to do, and it's basically the standard way of doing spot graphic animations on the web now (GIF anims are soooo 1998).
Google will give you plenty of resources to help you find out more: https://www.google.com/search?q=css+sprite+animations
You might also want to read the accepted answer to this question: Why not animated GIF instead of animated CSS sprites?

CSS/JS/PS - Best way to desaturate multiple images

I am working on a portfolio site which will have desaturated thumbnails of all my work and when you hover over it, the colour fades in and out when you hover out.
As this page will have alot of thumbnails, i was thinking of the best way to achieve this effect.
What I thought of so far is:
B/W and Colour versions of each thumbnail (cons: lots of bandwidth)
B/W and Colour in same image as sprites (pros: less server connection requests, cons: lots of bandwidth)
Use Javascript to on-the-fly generate desaturated copies of each loaded image (cons: alot of processing power?)
They are the only ones I can think of, can anyone help me figure out what way of achieving what I need is the most efficient? Other suggestions from the ones listed are more then welcome. What I am looking for is:
Lowest bandwidth use
Fast and not laggy
Thanks

A very simple way to achieve this is to give the img a hover state and apply opacity.
img {opacity:0.5;}
img:hover {opacity:1;}
http://jsfiddle.net/jasongennaro/KV4c8/1/
It's not exactly black & white, but it does give a similar effect. There is no bandwidth addition and it is fast.

You can use the Pixastic plugin:
http://www.pixastic.com/lib/docs/#iesupport
This claims that the desaturate method works in IE.
NOTE: I checked this particular example in IE using quirks mode (which simulates IE 5.5), and it works.
http://www.pixastic.com/lib/docs/actions/desaturate/

Similar questions : Convert an image to grayscale in HTML/CSS and How do you convert a color image to black/white using Javascript?
However, for a simple solution and for a fadeIn/fadeOut effect... use 2 images (or images as sprite).
Put the B&W under the one in color (position:absolute) and do some jquery...
$('img.over').mouseover({function(){
$(this).fadeOut(slow);
});
$('img.over').mouseout({function(){
$(this).fadeIn(slow);
});

HTML5 CSS3/Javascript Blur Mask

There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you

http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on

Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.

There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.

Flipping around a div using Javascript

Flip is a great JQuery plugin for flipping blocks, but it doesn't preserve the background while it animates the flip.
For example, I have this pretty background here, before I flip. While flipping, it gets ugly.
Is there a way I can flip this div nicely, keeping the pretty background I have, and maybe even achieve a smoother animation than I can get with Flip?
If I need to dive into this headfirst and code my own function for flipping a div, that's also doable, and I'd really appreciate some pointer there, if that's what I must do.
Thanks so much!

Try the jQuery QuickFlip pulgin, this one seems pretty neat with handling the background.

Try looking into momoflow, its a coverflow type of application that animates the background to different angles.
It's using the canvas tag however, which could be an issue for you if you want IE compatibility. However the technique the dev is using is to chop the the image into several vertical slices and animate their position. You could extend this functionality to introduce a full flip!

A really cool way to do this is use CSS 3 transformations. It's much better than using a script; you should always avoid using scripts where simpler methods can be employed.

Repeating a section of an image in CSS

I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?

You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve

Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.

If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.

CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.