Is there any technique or plugin to illuminate an element(button)?

Question

I was trying to use "jquery-illuminate" ( http://www.tonylea.com/2011/jquery-illuminate )

However, this didn't work on my web service(jQuery1.9.1)

Can anyone show me how to illuminate an element(button)? I tried this. But this just hide and shows element.
I want to illuminate a button:(

(function(t){
    var func = arguments.callee;
    if(t) func.rest=t*2;
    if(--func.rest>=0) $(".btn#illuminate").fadeTo(800,(func.b = !!!func.b) ? 0.5 : 1,func);
})(3);

if you are only targetting moderns browsers you can do it with `css3` — sabithpocker, Aug 04 '13 at 08:59
http://stackoverflow.com/questions/6422790/css-create-white-glow-around-image Do it on `:hover` — sabithpocker, Aug 04 '13 at 09:03
@sabithpocker Isn't there any other focusing on jQuery or its plugin — MKK, Aug 04 '13 at 09:07
What error message do you get if you use jquery-1.9.1 with jquery-ui with illuminate? I got the following error `Uncaught TypeError: Object function ( selector, context ) { [...] } has no method 'curCSS' ` I found [this issue](http://bugs.jquery.com/ticket/11921): We recently removed jQuery.curCSS in 1.8pre as its been deprecated since jquery 1.3. It appears that jQueryUI still uses $.curCSS heavily. I'm reopening to talk about whether or not it's worth saving 3 bytes to force an incompatibility with latest UI. If this is the cause it may be easy to fix. — surfmuggle, Aug 04 '13 at 09:43
@threeFourOneSixOneThree -- TypeError: $(...).illuminate is not a function — MKK, Aug 04 '13 at 09:51
This sounds more like the file path to illuminate is not correct - since the error message that illuminate is not known. If you look at the webpage with chrome dev tools you see a tab `Resources`. If you click on it you can see every Script that is loaded in the tree control. If you click on the script you can see if it is pointing to the correct path. Are you sure that the path to illuminate is correct? — surfmuggle, Aug 04 '13 at 10:00
@threeFourOneSixOneThree Thans for precious advice. Can you do the same on Fire Fox? — MKK, Aug 04 '13 at 10:04
No it does not work in firefox 22 - i look into it and get back to you. — surfmuggle, Aug 04 '13 at 10:07
@threeFourOneSixOneThree Okay I'll try to check it on Chrome. please wait — MKK, Aug 04 '13 at 10:08
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34789/discussion-between-mkk-and-threefouronesixonethree) — MKK, Aug 04 '13 at 10:12
@threeFourOneSixOneThree Thanks. I'm on Resource tab but cannot find script section — MKK, Aug 04 '13 at 10:12
@MKK Please remember to upvote any question and **[answer](http://stackoverflow.com/questions/18043125/plugin-illuminate-0-7-incompatible-to-jquery-1-9-1-or-jquery-ui-1-10-3-typeer#answer-18044657)** you find usefull. For many of us an upvote is the thank you that makes us feel happy and appreciated. — surfmuggle, Aug 06 '13 at 07:39

Arbaoui Mehdi · Answer 1 · 2013-08-04T13:33:33.243

Glowing buttons (HTML & CSS):

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glowing buttons</title>
</head>
<body>

    <!-- Blue -->
    <a href="#" class="button blue">Hello World</a>

    <!-- Yellow -->
    <a href="#" class="button yellow">Hello World</a>

    <!-- White -->
    <a href="#" class="button white">Hello World</a>

</body>
</html>

COMPASS (SCSS):

@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/animation";

body {
    background: #000 url('http://subtlepatterns.com/patterns/office.png');
    padding: 30px;
    font-family: "Helvetica Neue", "Helvetica", sans-serif;
}

/* Blue Shadow */
@include keyframes(blue) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* Yellow Shadow */
@include keyframes(yellow) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(255, 245, 3, 1), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* White Shadow */
@include keyframes(white) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* Button */
.button {
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    @include border-radius(10px 0);
    margin-right: 20px;
}

/* Blue Background */
.blue {
    text-shadow: 0px 1px 0px #83e0f7;
    @include background-image(linear-gradient(top, #87e0fd, #53cbf1));
    @include animation(blue 2s infinite);
}

/* Yellow Background */
.yellow {
    text-shadow: 0px 1px 0px #faffc7;
    @include background-image(linear-gradient(top, #fff966, #f3fd80));
    @include animation(yellow 2s infinite);
}

/* White Background */
.white {
    text-shadow: 0px 1px 0px #fff;
    @include background-image(linear-gradient(top, #fff, #ccc));
    @include animation(white 2s infinite);
}

CSS:

body {
  background: black url("http://subtlepatterns.com/patterns/office.png");
  padding: 30px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif; }

/* Blue Shadow */
@-moz-keyframes blue {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes blue {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes blue {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes blue {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* Yellow Shadow */
@-moz-keyframes yellow {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes yellow {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes yellow {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes yellow {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* White Shadow */
@-moz-keyframes white {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes white {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes white {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes white {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* Button */
.button {
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px 0;
  border-radius: 10px 0;
  margin-right: 20px; }

/* Blue Background */
.blue {
  text-shadow: 0px 1px 0px #83e0f7;
  background-image: -webkit-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: -moz-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: -o-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: linear-gradient(to bottom, #87e0fd, #53cbf1);
  -webkit-animation: blue 2s infinite;
  -moz-animation: blue 2s infinite;
  -o-animation: blue 2s infinite;
  animation: blue 2s infinite; }

/* Yellow Background */
.yellow {
  text-shadow: 0px 1px 0px #faffc7;
  background-image: -webkit-linear-gradient(top, #fff966, #f3fd80);
  background-image: -moz-linear-gradient(top, #fff966, #f3fd80);
  background-image: -o-linear-gradient(top, #fff966, #f3fd80);
  background-image: linear-gradient(to bottom, #fff966, #f3fd80);
  -webkit-animation: yellow 2s infinite;
  -moz-animation: yellow 2s infinite;
  -o-animation: yellow 2s infinite;
  animation: yellow 2s infinite; }

/* White Background */
.white {
  text-shadow: 0px 1px 0px #fff;
  background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
  background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
  background-image: -o-linear-gradient(top, #ffffff, #cccccc);
  background-image: linear-gradient(to bottom, #ffffff, #cccccc);
  -webkit-animation: white 2s infinite;
  -moz-animation: white 2s infinite;
  -o-animation: white 2s infinite;
  animation: white 2s infinite; }

Demo: http://codepen.io/arbaoui_mehdi/details/yoCnx

Note: I used animation compass plugin for apply css3 animations in compass.

Thanks:) all of your links are for hover. But what I want is illuminating button for particular seconds:) — MKK, Aug 04 '13 at 09:42
Please add your relevant html/CSS to the answer; external sites are great for providing references, documentation and demos but Stack Overflow should be able to stand alone, and remain useful even in the event of those external sites failing. — David Thomas, Aug 04 '13 at 10:01
@DavidThomas http://jsfiddle.net/VVtdZ/ It looks only working on Chrome. I've got error on Fire Fox, Opera, and Safari. — MKK, Aug 04 '13 at 11:29
@MKK: I'm sorry to hear that, but why are you telling me; this answer is not mine. — David Thomas, Aug 04 '13 at 12:55

score 1 · Accepted Answer · edited May 23 '17 at 10:27

You said that you were trying to use "jquery-illuminate" ( http://www.tonylea.com/2011/jquery-illuminate ) However, this didn't work on [your] web service (jQuery1.9.1)

I made an offline demo with this setup and it works:

<head>  
<script src="jquery_1.9.1.js"></script> 
<script src="jquery-ui_1.10.3.js"></script>
<script src="jquery.illuminate.0.7.js"></script>
<script>
window.onload = function(){
  if(true){ 
     var input = $(".box#input");
     $(document).scrollTop(input .offset().top - 60);
     var v = input.val();
     input.val('');
     input.focus().val(v);
     input.focus()

     $(".btn#illuminate").illuminate({'intensity': '0.3'
             ,'color': '#98cb00','blink': 'true'
             ,'blinkSpeed': '1200', 'outerGlow': 'true'
             ,'outerGlowSize': '30px','outerGlowColor': '#98cb00'
    });
  }
}
</script>
</head>

<body>

If you post your error message we can may be make it work.

Which version of jquery-ui are you using?
Do you use twitter bootstrap as well?

Updates

Update 1: `TypeError: $(...).illuminate is not a function`

Could it be that the file path is incorrect? If i change the path to a nonexisitent location i get this erro in the dev tools of chrome 30:

enter image description here

Update 2:

Using jquery.illuminate.0.7.js with firefox 22, jquery_1.9.1.js and jquery-ui_1.10.3.js cause the following error: TypeError: $.css(...) is undefined pointing to jquery.illuminate.0.7.js:223 At line 223 is the following method:

$.cssHooks.boxShadowBlur = {
     get: function ( elem, computed, extra ) {
             return $.css(elem, support.boxShadow).split(rWhitespace)[5];
     },
     set: function( elem, value ) {
             elem.style[support.boxShadow]=
                 insert_into($.css(elem,support.boxShadow),value,5);                
     }
};

In the firefox console several warning / error messages appeared:

CSS Warning: `Unknown property 'box-sizing' more information see this question
JS Error: TypeError: $.css(...) is undefined still searching for more information

Searching for changes in jquery or in jquery-ui regarding $.css has not yet yield any result other than $.css still seems to be in use (or here). In the source of jquery the function css is included as well:

jQuery.fn.extend({
        css: function (name, value) {
            return jQuery.access(this, function (elem, name, value) {
                var styles, len,
                    map = {},
                    i = 0;

                if (jQuery.isArray(name)) {
                    styles = getStyles(elem);
                    len = name.length;

                    for (; i < len; i++) {
                        map[name[i]] = jQuery.css(elem, name[i], false, styles);
                    }

                    return map;
                }

                return value !== undefined ?
                    jQuery.style(elem, name, value) :
                    jQuery.css(elem, name);
            }, name, value, arguments.length > 1);
        },

I will try to find out more by asking a question myself.

Update - solution is to modify the jQuery illuminate plugin.

User Dave did an outstanding job and found the cause for illuminate not working in firefox 22. You can find his solution over at my question plugin-illuminate-0-7-incompatible-to-jquery-1-9-1-or-jquery-ui-1-10-3. Please give Dave an upvote for his efforts, his debugging and his outstanding javascript and jQuery knowledge.

TypeError: $.css(...) is undefined @ http://www.tonylea.com/go/plugins/jquery-illuminate/jquery.illuminate.0.7.js:223 — MKK, Aug 04 '13 at 10:16
I'm sorry. You were right. I was putting wrong url to js file. So I corrected and tried again. now it says this error though:( — MKK, Aug 04 '13 at 10:17

score 0 · Answer 3 · answered Aug 04 '13 at 09:33

0

Ensure you have set the correct parameters

JSFIDDLE http://jsfiddle.net/kevinPHPkevin/P9GXa/

$(document).ready(function(){

    $('#button').illuminate({

        'intensity': '0.3',

        'color': '#98cb00',

        'blink': 'true',

        'blinkSpeed': '1200',

        'outerGlow': 'true',

        'outerGlowSize': '30px',

        'outerGlowColor': '#98cb00'

    });

});

answered Aug 04 '13 at 09:33

Kevin Lynch

24,427
3
36
37

1

Can you post a jsfiddle replicating your problem? – Kevin Lynch Aug 04 '13 at 09:50
I viewed your fiddle in firefox 22 and the button did not glow. Are you sure that your version works in firefox 22? – surfmuggle Aug 04 '13 at 20:13
This is just an example from the official plugin download site. This is the example code the developer uses, and yes, it works in FF. – Kevin Lynch Aug 04 '13 at 20:17

Is there any technique or plugin to illuminate an element(button)?

3 Answers3

Updates

Update 1: TypeError: $(...).illuminate is not a function

Update 2:

Update - solution is to modify the jQuery illuminate plugin.

Update 1: `TypeError: $(...).illuminate is not a function`