How to glow label text using Jquery

Question

1.00/5 (1 vote)

See more:

I am trying to use code given at http://jsfiddle.net/Jf4vB/211/. The code runs perfectly in fiddle but when I trying to excute same code in my projuect I am not getting that "Glow Effect"

My code is as follows:

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .red {
            font-size: 50px;
            color: #c61a1a;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
    <script type="text/javascript">
        $(function () {
            var red = $(".red");
            var v = $('#btn');

            $.fn.glowEffect = function (start, end, duration, callback) {

                if (this.data("last-glow"))
                    start = this.data("last-glow");

                return this.animate({
                    'placeholder': end
                }, {
                    duration: duration,
                    step: function (now, fx) {
                        now = parseInt(start + (end - start) * (fx.pos));
                        $(fx.elem).css("text-shadow", "0px 0px " + now + "px #c61a1a")
                            .data("last-glow", now);
                    },
                    complete: callback
                });

            };

            v.click(function () {
                red
                    .stop()
                    .glowEffect(0, 50, 1000,
                                function () {
                                    $(this).glowEffect(50, 0, 1000);
                                });
            });
        });
    </script>
    <style type="text/css">
        .red {
    font-size:50px;
    color:#c61a1a;
    cursor:pointer;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="red">Here is my text.</div>
        <button type="button" id="btn">Click Me!</button>
    </form>
</body>
</html>

I am also modifying above code to use asp button and text of checkbox to glow.But I am still unable to get the effect I am looking for.

Can anyone please help me?

Posted 12-Jul-13 7:33am

Pratik Gaikwad

Updated 12-Jul-13 7:45am

v3

Add a Solution

Comments

lewax00 12-Jul-13 13:41pm

Are your jQuery and jQuery UI scripts actually in different folders? Because they're pointing to different paths.

Pratik Gaikwad 12-Jul-13 13:48pm

I have edited my question. Made correction in the path. I am able to attach debugger.But not sure what is wrong? How do i check browser console?

lewax00 12-Jul-13 14:09pm

But did you fix that on your page? Could be related.

As for debugging JS:
Firefox: Ctrl+Shift+K
IE: F12
Chrome: (from comment below, I don't have it installed) Ctrl+Shift+I

Any of those should give you the errors from JS.

Pratik Gaikwad 12-Jul-13 14:22pm

It is by default installed in chrome (atleast for me) ....

lewax00 12-Jul-13 14:23pm

I mean I don't have Chrome installed. I know it has a debug console by default, I just can't confirm the shortcut.

Pratik Gaikwad 12-Jul-13 14:40pm

no problem. Can you please check my slightly modified code and question in comments below and suggest a solution?

Parwej Ahamad 12-Jul-13 13:44pm

Make sure you taken the correct reference path:
<script type="text/javascript" src="../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>

Have you any error in browser console?

Pratik Gaikwad 12-Jul-13 13:48pm

I have edited my question. Made correction in the path. I am able to attach debugger.But not sure what is wrong? How do i check browser console?

Parwej Ahamad 12-Jul-13 13:51pm

https://developers.google.com/chrome-developer-tools/

Pratik Gaikwad 12-Jul-13 13:50pm

But how is it possible that same code works in fiddler and not in my local machine?

Parwej Ahamad 12-Jul-13 13:55pm

1. Invalid script path
2. Required js file didn't taken reference
3. Some typo in code

Pratik Gaikwad 12-Jul-13 14:02pm

if you compare the code in fiddler and what I have pasted here is same except file reference.
Can you suggest some other solution I can try to get same effect using J-Query 1.7.2 and J-QueryUI 1.8.23 or the versions I have mentioned in the code?

Parwej Ahamad 12-Jul-13 14:05pm

Dear I said, firs try to find what is the error and you can see it. Run page on Chrome browser, then press ctrl+shif+i.
One window will open, then click on Console tab the see the error and post here.

Pratik Gaikwad 12-Jul-13 14:11pm

Thanks for telling me how to use developer toolbar in chrome. Strange thing happened. when I ran same code in chrome... It works but not in IE. Any suggestions?

Parwej Ahamad 12-Jul-13 14:13pm

:) same way look inti the IE from developer tool

Pratik Gaikwad 12-Jul-13 14:20pm

Did that... It was compatibility view hence was not running. But now, I have another issue. I have modified my code slightly as below :
<head runat="server">
<title></title>
<style type="text/css">
.red {
font-size: 50px;
color: #c61a1a;
cursor: pointer;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
<script type="text/javascript">
$(function () {
var red = $("#divchkBox").find(':checkbox').next();
var v = $('#start');

$.fn.glowEffect = function (start, end, duration, callback) {

if (this.data("last-glow"))
start = this.data("last-glow");

return this.animate({
'placeholder': end
}, {
duration: duration,
step: function (now, fx) {
now = parseInt(start + (end - start) * (fx.pos));
$(fx.elem).css("text-shadow", "0px 0px " + now + "px #c61a1a")
.data("last-glow", now);
},
complete: callback
});

};

v.click(function () {
red
.stop()
.glowEffect(0, 50, 1000,
function () {
$(this).glowEffect(50, 0, 1000);
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divchkBox">
<asp:CheckBox ID="chkBox" runat="server" Text="hi" CssClass="red" />
</div>
<asp:Button ID="start" Text="start" runat="server" />
</form>
</body>
</html>

Now the glow effect is not good as it was with my previous code...
Can you please explain?

Parwej Ahamad 12-Jul-13 14:25pm

Behavior may be change browser to browser due to browser version. So you have to be with what you are getting.
Whatever you want, if you are able to explain it and show something with example then anyone will able to help you to get workable as per your requirement.

Pratik Gaikwad 12-Jul-13 14:37pm

The fiddler accepts only HTML elements. I am working in asp.net. How can I show you? However I can explain it like this:
If you run my original code, you will notice that the glow-effect which I am trying to achieve persists for some time meaning the glowing and fading effect is slow. But with my new code it does not persists. The text glows and fades with very high speed. I will try to upload a video on youtube and show you.

Parwej Ahamad 12-Jul-13 15:05pm

Dear issue is, IE doesn't support "text-shadow" so you it's not working in IE.
find some work around.

Pratik Gaikwad 12-Jul-13 15:24pm

but the original code works fine. Use below link.
http://youtu.be/Sh_tVrFWBVM

fisrt 6 sec are for my original code and next 6 sec for new code. both are running in same version of IE.Also same thing happens in Chrome too.

Pratik Gaikwad 18-Jul-13 13:58pm

Hi can you please take a look at below link? Please try in IE7 or IE9
http://www.codeproject.com/Questions/621927/dynamically-loaded-Jquery-dialog-does-not-close-on

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pratik Gaikwad · Accepted Answer · 2013-07-16T18:32:00

Solution 1

Found my own mistake. It was IE9's compatible view which was preventing proper running of code.

Posted 16-Jul-13 18:32pm

Pratik Gaikwad