Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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:
 
<%@ 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 8:33am
Edited 12-Jul-13 8:45am
v3
Comments
lewax00 at 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 at 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 at 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 at 12-Jul-13 14:22pm
   
It is by default installed in chrome (atleast for me) ....
lewax00 at 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 at 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 at 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 at 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 at 12-Jul-13 13:51pm
   
https://developers.google.com/chrome-developer-tools/
Pratik Gaikwad at 12-Jul-13 13:50pm
   
But how is it possible that same code works in fiddler and not in my local machine?
Parwej Ahamad at 12-Jul-13 13:55pm
   
1. Invalid script path
2. Required js file didn't taken reference
3. Some typo in code
Pratik Gaikwad at 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 at 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 at 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 at 12-Jul-13 14:13pm
   
:) same way look inti the IE from developer tool
Pratik Gaikwad at 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 at 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 at 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 at 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 at 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 at 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

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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

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

  Print Answers RSS
0 Mathew Soji 334
1 Maciej Los 295
2 BillWoodruff 290
3 Afzaal Ahmad Zeeshan 257
4 DamithSL 225
0 OriginalGriff 6,369
1 Sergey Alexandrovich Kryukov 5,973
2 DamithSL 5,183
3 Manas Bhardwaj 4,673
4 Maciej Los 4,045


Advertise | Privacy | Mobile
Web04 | 2.8.1411019.1 | Last Updated 17 Jul 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100