Home

jquery

Rotate an image with JavaScript

Looking at this Stack Overflow question I went searching on the interwebs for solutions on rotating images. I found this jQuery plugin that looks pretty cool: Link to plugin Here is an example of it's usage. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jQueryRotate.js" type="text/javascript" charset="utf-8"></script>
 
 
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
    var angle = 0;
    setInterval(function()
    {
        angle+=1;
        $('#cog').rotate(angle);
    }, 50);             
});
</script>
 
<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>
<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
 
<img src="/test/cog.png" id="cog" alt="Cog" />


Here are the results:

Cog

jQuery Blink Plugin

In response to the RIP <blink> posted on http://www.dosomethinghere.com/ I decided to do something about this blink tag problem we all have with Internet Explorer.

I've always been a fan of the blink tag and think sites can benefit greatly by it.

Here's my solution: A jQuery Blink Plugin 

1
2
3
4
5
6
7
8
9
10
11
12

<script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script src="jquery-blink.js" language="javscript" type="text/javascript"></script>
 
<script type="text/javascript" language="javascript">
 
$(document).ready(function()
{
        $('.blink').blink(); // default is 500ms blink interval.
        //$('.blink').blink({delay:100}); // causes a 100ms blink interval.
});
 
</script>
and down on the page somewhere: 
1

<span class="blink">this</span> is some <span class="blink">blinking</span> text.

here are the results:

this is some blinking text.



JavaScript 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<input type="button" value="Hi!" id="btnOne" />
 
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
    var count = 0;
    $('#btnOne').click(function()
    {
        count++;
        var hi =  $('<div>Hi! - ' + count + '</div>')
           .css('width', '50px')
           .css('height', '50px')
           .css('background-color', 'lightyellow')
           .css('border', 'solid 1px gainsboro')
           .css('line-height', '50px')
           .css('vertical-align', 'middle')
           .css('text-align', 'center')
           .css('position', 'absolute')
           .css('top', ($(this).offset().top - 52) + 'px')
           .css('left', ($(this).offset().left) + 'px');
 
        $('body')
           .append(hi)
           .fadeIn('fast', 
            function()
            {
                setTimeout(function()
                           {
                               $(hi).fadeOut('fast');
                           }, 1000);
            });
           
    });
});
</script>