Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET jQuery
Hi mates,
 
Greetings!
I'm stuck with a minor problem and I've been just unable to find the resolution for last two hours... I'm using a jquery file to display an analog clock on page. the HTML code is as below:
 
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="usa.master.cs" Inherits="PostageMeter.usa" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IN ADMIN PANEL | Powered by INDEZINER</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="clockp.js"></script>
<script type="text/javascript" src="clockh.js"></script>
</head>
<body>
<div id="clock_a"></div>
</body>
</html>
 
Referred jQuery File contents:
==============================
clockp.js
*********
// Analog Clock - Parameters Head Script
// You may change the parameters here to set up your clock
// refer to  http://javascript.about.com/library/blclock1.htm
// for a description of the parameters
var clocksize=50;
var colnumbers='ffffff';
var colseconds='fff';
var colminutes='fff';
var colhours='fff';
var numstyle = 2;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos=0;
var ypos=0;
 
// code to adjust for daylight saving time if applicable (localzone = 0)

// code to handle clock positioning (fix = 0)
 
clockh.js
*********
Quote:
// Analog Clock - Head Script
// copyright Stephen Chapman, 19th November 2005, 28th September 2008
// you may copy this clock provided that you retain the copyright notice
var dayname = new Array ('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'); var am = 'AM'; var pm = 'PM';
 
// you should not need to alter the below code
var pi = Math.PI; var d = document; var pi2 = pi/2; var rad = (+clocksize) / 2; var ctrX = (+xpos) + rad; var ctrY = (+ypos) + rad; var hourln = 1; var minln = secln = 2; for(var i = 0; i < (rad / 2) + (rad / 16); i++) {horemovedn += 1;} for(var i = 0; i < (rad / 2) - (rad / 8); i++) {minln += 2;secln += 2;} var font_size = rad / 4; var offset = 16; var clocknum = [[,1,2,3,4,5,6,7,8,9,10,11,12],[,'I','II','III','IIII','V','VI','VII','VIII','IX','X','XI','XII'],[,'·','·','-','·','·','|','·','·','-','·','·','||']]; if (numstyle < 0 || numstyle > 2) numstyle = 0; function timeZone(now,loc,mtz,dst) {if (loc) {var dow = now.getDay(); var second = now.getSeconds(); var minute = now.getMinutes(); var hour = now.getHours();} else {now.setUTCMinutes(now.getUTCMinutes() + (mtz + dst)*60); var dow = now.getUTCDay(); var second = now.getUTCSeconds(); var minute = now.getUTCMinutes(); var hour = now.getUTCHours();} if (hour > 11) {moa = pm; hour -= 12;} else moa = am; return [dow,moa,hour,minute,second];} function commonClock(n) {n.style.position = 'absolute'; n.style.top = '0'; n.style.left = '0'; n.style.visibility = 'hidden';} function displayClock() {if (!d.getElementById) return; var ctx = document.createElement('div'); if ( fix) {ctx.style.position = 'relative'; ctx.style.margin = 'auto'; ctx.style.width = (clocksize + offset * 2) + 'px'; ctx.style.height = (clocksize + offset * 2) + 'px'; ctx.style.overflow = 'visible';} var cn = []; for (var i = 12; i > 0; i--) {cn[i] = document.createElement('div'); cn[i].id = 'cnum' + i; commonClock(cn[i]); cn[i].style.width = (offset * 2) + 'px'; cn[i].style.height = (offset * 2) + 'px'; cn[i].style.fontFamily = font_family; cn[i].style.fontSize = font_size + 'px'; cn[i].style.color = '#' + colnumbers; cn[i].style.textAlign = 'center'; cn[i].style.paddingTop = '10px'; cn[i].style.zIndex = 1000; cn[i].innerHTML = clocknum[numstyle][i]; ctx.appendChild(cn[i]);} var mn = []; for (i = minln; i > 0; i--) {mn[i] = document.createElement('div'); mn[i].id = 'cmin' + i; commonClock(mn[i]); mn[i].style.width = '1px'; mn[i].style.height = '1px'; mn[i].style.fontSize = '1px'; mn[i].style.backgroundColor = '#' + colminutes; mn[i].style.zIndex = 997; ctx.appendChild(mn[i]);} var hr = []; for (i = hourln; i > 0; i--) {hr[i] = document.createElement('div'); hr[i].id = 'chour' + i; commonClock(hr[i]); hr[i].style.width = '2px'; hr[i].style.height = '2px'; hr[i].style.fontSize ='2px'; hr[i].style.backgroundColor = '#' + colhours; hr[i].style.zIndex = 998; ctx.appendChild(hr[i]);} var sc = []; for (i = secln; i > 0; i--) {sc[i] = document.createElement('div'); sc[i].id = 'csec' + i; commonClock(sc[i]); sc[i].style.width = '1px'; sc[i].style.height = '1px'; sc[i].style.fontSize ='1px'; sc[i].style.backgroundColor = '#' + colseconds; sc[i].style.zIndex = 999; ctx.appendChild(sc[i]);} var am = document.createElement('div'); am.id = 'ampm'; commonClock(am); am.style.width = ((xpos + rad) * 2) + 'px'; am.style.fontFamily = font_family; am.style.fontSize = (font_size * 2 / 3) + 'px'; am.style.color = '#' + colnumbers; am.style.textAlign = 'center'; am.style.paddingTop = '10px'; am.style.zIndex = 990; ctx.appendChild(am); var zn = document.createElement('div'); zn.id = 'zone'; commonClock(zn); zn.style.width = ((xpos + rad) * 2) + 'px'; zn.style.fontFamily = font_family; zn.style.fontSize = (font_size * 2 / 3) + 'px'; zn.style.color = '#' + colnumbers; zn.style.textAlign = 'center'; zn.style.paddingTop = '10px'; zn.style.zIndex = 990; ctx.appendChild(zn); d.getElementById('clock_a').appendChild(ctx); for (var i = 12; i > 0; i--) {d.getElementById('cnum' + i).style.top = (ctrY - offset + rad * Math.sin(i * pi / 6 - pi2))+'px'; d.getElementById('cnum' + i).style.left = (ctrX - offset + rad * Math.cos(i * pi / 6 - pi2))+'px'; d.getElementById('cnum' + i).style.visibility = 'visible';} updateClock();} function moveClock(l, e, f) {for (var i = l; i > 0; i--) {d.getElementById(e + i).style.top = (ctrY + i * Math.sin(f))+'px';d.getElementById(e + i).style.left = (ctrX + i * Math.cos(f))+'px';d.getElementById(e + i).style.visibility = 'visible';}} function updateClock() {var now = new Date(); var theTime = timeZone(now,localZone,mytimezone,dst); d.getElementById('ampm').style.top = (ypos + rad/3)+'px'; /*d.getElementById('ampm').innerHTML = theTime[1] + '
' + dayname[theTime[0]];*/ d.getElementById('ampm').style.visibility = 'visible'; if (!localZone) {d.getElementById('zone').style.top = (ctrY + (rad/10))+'px'; d.getElementById('zone').innerHTML = city + '
' + country; d.getElementById('zone').style.visibility = 'visible';} moveClock(secln, 'csec', pi * theTime[4] / 30 - pi2); moveClock(minln, 'cmin', pi * theTime[3] / 30 - pi2); moveClock(hourln, 'chour', pi * theTime[2] / 6 + pi * (+now.getMinutes())/360 - pi2); setTimeout('updateClock()', 100);}
window.onload = displayClock;

 

The same I've pasted in my master page with the jQuery file at root and trying to execute but no luck. The HTML page works fine but the ASPX not. No errors.. no output. I never have been through to this kind of problem... Please help !!
I appreciate any help.
 
Best Regards,
Sunny.
Posted 17-Sep-12 22:24pm
Edited 17-Sep-12 22:50pm
v3
Comments
shabari7 at 18-Sep-12 3:26am
   
use firebug to trace the error.......
Sunnykumar08 at 18-Sep-12 3:37am
   
I've tried but no luck :(
Dhol Gaurav at 18-Sep-12 3:41am
   
Hello,
Give your javascript code where you are using jQuery, so i can identify the error
Sunnykumar08 at 18-Sep-12 3:51am
   
Hi, updated in question... please give it a check, thanks!
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,
check weather you have included Jquery library files properly or not. If yes then check for any kind of syntax error in your code. sometimes it doesn't show any error or exception due to syntax error.
  Permalink  
Comments
sudhir@123 at 18-Sep-12 5:43am
   
thsi is not a solution if this is your answer then post here otherwise comment because it confuse to member
Abhijit Parab at 18-Sep-12 5:52am
   
Hi Sudhir,
It happens some times that we are having all jquery libraries properly included but because of synatx problem it won't show any error. It happened with me most of the time.
Jquery is totally based on Jquery library.
Sunnykumar08 at 18-Sep-12 6:12am
   
Hi Abhijit,
May be you are right but for the answer you have posted, you must have checked the syntax in the code above posted within my question. I'm not expecting the Do's and Don'ts on this point. If you really want to help, please review the question carefully before you answer. Anyway... thanks for your effort :)
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

I would suggest using the developer tools available on your browser. (My personal choice is Chrome) Check whether there are javascript errors occuring in the background that get gobbled up and then hidden by the system. Many a jquery problem gets solved in this manner. I only mention this because from your question I can't make out whether you have explored this avenue yet.
  Permalink  
Comments
Sunnykumar08 at 19-Sep-12 0:11am
   
Thanks for the suggestion Mr. Kramer, but no luck for me with that. I've tried exploring for any kind of error, couldn't find any.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

i tried for you and i found some little mistakes. removed them from file. then use new version
 
clockp.js
*********
// Analog Clock - Parameters Head Script
// You may change the parameters here to set up your clock
// refer to  http://javascript.about.com/library/blclock1.htm
// for a description of the parameters
var clocksize = 50;
var colnumbers = 'ffffff';
var colseconds = 'fff';
var colminutes = 'fff';
var colhours = 'fff';
var numstyle = 2;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos = 0;
var ypos = 0;
var horemovedn = 0;
 
// code to adjust for daylight saving time if applicable (localzone = 0)

// code to handle clock positioning (fix = 0)
 
clockh.js
*********
 

 

var dayname = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
var am = 'AM';
var pm = 'PM';
 
// you should not need to alter the below code
var pi = Math.PI;
var d = document;
var pi2 = pi / 2;
var rad = (+clocksize) / 2;
var ctrX = (+xpos) + rad;
var ctrY = (+ypos) + rad;
var hourln = 1;
var minln = secln = 2;
for (var i = 0; i < (rad / 2) + (rad / 16); i++) {
    horemovedn += 1;
}
 
for (var i = 0; i < (rad / 2) - (rad / 8); i++) {
    minln += 2; secln += 2;
}
var font_size = rad / 4;
var offset = 16;
var clocknum = [[, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [, 'I', 'II', 'III', 'IIII', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'], [, '·', '·', '-', '·', '·', '|', '·', '·', '-', '·', '·', '||']];
if (numstyle < 0 || numstyle > 2)
    numstyle = 0;
function timeZone(now, loc, mtz, dst) {
    if (loc) {
        var dow = now.getDay();
        var second = now.getSeconds();
        var minute = now.getMinutes(); var hour = now.getHours();
    } else { now.setUTCMinutes(now.getUTCMinutes() + (mtz + dst) * 60); var dow = now.getUTCDay(); var second = now.getUTCSeconds(); var minute = now.getUTCMinutes(); var hour = now.getUTCHours(); } if (hour > 11) { moa = pm; hour -= 12; } else moa = am; return [dow, moa, hour, minute, second];
} function commonClock(n) { n.style.position = 'absolute'; n.style.top = '0'; n.style.left = '0'; n.style.visibility = 'hidden'; } function displayClock() {
    if (!d.getElementById) return; var ctx = document.createElement('div'); if (fix) { ctx.style.position = 'relative'; ctx.style.margin = 'auto'; ctx.style.width = (clocksize + offset * 2) + 'px'; ctx.style.height = (clocksize + offset * 2) + 'px'; ctx.style.overflow = 'visible'; } var cn = []; for (var i = 12; i > 0; i--) { cn[i] = document.createElement('div'); cn[i].id = 'cnum' + i; commonClock(cn[i]); cn[i].style.width = (offset * 2) + 'px'; cn[i].style.height = (offset * 2) + 'px'; cn[i].style.fontFamily = font_family; cn[i].style.fontSize = font_size + 'px'; cn[i].style.color = '#' + colnumbers; cn[i].style.textAlign = 'center'; cn[i].style.paddingTop = '10px'; cn[i].style.zIndex = 1000; cn[i].innerHTML = clocknum[numstyle][i]; ctx.appendChild(cn[i]); } var mn = []; for (i = minln; i > 0; i--) { mn[i] = document.createElement('div'); mn[i].id = 'cmin' + i; commonClock(mn[i]); mn[i].style.width = '1px'; mn[i].style.height = '1px'; mn[i].style.fontSize = '1px'; mn[i].style.backgroundColor = '#' + colminutes; mn[i].style.zIndex = 997; ctx.appendChild(mn[i]); } var hr = []; for (i = hourln; i > 0; i--) { hr[i] = document.createElement('div'); hr[i].id = 'chour' + i; commonClock(hr[i]); hr[i].style.width = '2px'; hr[i].style.height = '2px'; hr[i].style.fontSize = '2px'; hr[i].style.backgroundColor = '#' + colhours; hr[i].style.zIndex = 998; ctx.appendChild(hr[i]); } var sc = []; for (i = secln; i > 0; i--) { sc[i] = document.createElement('div'); sc[i].id = 'csec' + i; commonClock(sc[i]); sc[i].style.width = '1px'; sc[i].style.height = '1px'; sc[i].style.fontSize = '1px'; sc[i].style.backgroundColor = '#' + colseconds; sc[i].style.zIndex = 999; ctx.appendChild(sc[i]); } var am = document.createElement('div'); am.id = 'ampm'; commonClock(am); am.style.width = ((xpos + rad) * 2) + 'px'; am.style.fontFamily = font_family; am.style.fontSize = (font_size * 2 / 3) + 'px'; am.style.color = '#' + colnumbers; am.style.textAlign = 'center'; am.style.paddingTop = '10px'; am.style.zIndex = 990; ctx.appendChild(am); var zn = document.createElement('div'); zn.id = 'zone'; commonClock(zn); zn.style.width = ((xpos + rad) * 2) + 'px'; zn.style.fontFamily = font_family; zn.style.fontSize = (font_size * 2 / 3) + 'px'; zn.style.color = '#' + colnumbers; zn.style.textAlign = 'center'; zn.style.paddingTop = '10px'; zn.style.zIndex = 990; ctx.appendChild(zn); 
 
d.getElementById('clock_a').appendChild(ctx); for (var i = 12; i > 0; i--) { d.getElementById('cnum' + i).style.top = (ctrY - offset + rad * Math.sin(i * pi / 6 - pi2)) + 'px'; d.getElementById('cnum' + i).style.left = (ctrX - offset + rad * Math.cos(i * pi / 6 - pi2)) + 'px'; d.getElementById('cnum' + i).style.visibility = 'visible'; } updateClock(); } function moveClock(l, e, f) { for (var i = l; i > 0; i--) { d.getElementById(e + i).style.top = (ctrY + i * Math.sin(f)) + 'px'; d.getElementById(e + i).style.left = (ctrX + i * Math.cos(f)) + 'px'; d.getElementById(e + i).style.visibility = 'visible'; } }
function updateClock() {
    var now = new Date();
    var theTime = timeZone(now, localZone, mytimezone, dst);
    d.getElementById('ampm').style.top = (ypos + rad / 3) + 'px';
    /*d.getElementById('ampm').innerHTML = theTime[1] + '' + dayname[theTime[0]];*/
    d.getElementById('ampm').style.visibility = 'visible';
    if (!localZone) {
        d.getElementById('zone').style.top = (ctrY + (rad / 10)) + 'px';
        d.getElementById('zone').innerHTML = city + '' + country;
        d.getElementById('zone').style.visibility = 'visible';
    }
    moveClock(secln, 'csec', pi * theTime[4] / 30 - pi2); moveClock(minln, 'cmin', pi * theTime[3] / 30 - pi2); moveClock(hourln, 'chour', pi * theTime[2] / 6 + pi * (+now.getMinutes()) / 360 - pi2); setTimeout('updateClock()', 100);
}
window.onload = displayClock;
 
 
i made clock_a divs style background-color:Black, after then i saw the watch.
 
i hope it will solve the problem
  Permalink  
Comments
Sunnykumar08 at 19-Sep-12 1:02am
   
Thanks Dain for your sincere effort, but it didn't work :(
Dain Ucak at 19-Sep-12 4:40am
   
i tried this with master page. i put my cloc_a div to master page and content page for understanding clearly.
http://aciliyetten.com/clock.jpg check this picture.
Sunnykumar08 at 19-Sep-12 5:21am
   
I'm gonna get this a try once more... thanks a lot !!

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

  Print Answers RSS
0 OriginalGriff 280
1 Sergey Alexandrovich Kryukov 279
2 CPallini 205
3 Maciej Los 197
4 Afzaal Ahmad Zeeshan 160
0 OriginalGriff 5,635
1 DamithSL 4,496
2 Maciej Los 3,942
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,180


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 18 Sep 2012
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