Search This Blog

Sunday, November 25, 2007

Expected identifier, string or number

invoice software
Invoice software

For below javascript code, i got error "Expected identifier, string or number" in IE but it's working fine in firefox and safari.
var RealtimeViewer =
{
timer : 5000,
Interval : null,

init: function() {
xxxxxxxxx
xxxxxxxxx
},

RatingUpdate: function(){
xxxxxxxx
xxxxxxxx
},

};
To solve the problem, remove the last "," before close the object RealtimeViewer "};". It will become

var RealtimeViewer = {
timer : 5000,
Interval : null,

init: function()
{
xxxxxxxxx
xxxxxxxxx
},

RatingUpdate: function()
{
xxxxxxxx
xxxxxxxx
}
};

Wednesday, November 14, 2007

MS SQL 2005: generate ID using ROW_NUMBER()

SELECT PVID, AuthorName, ROW_NUMBER() OVER(ORDER BY PVID DESC) AS ID WHERE ID BETWEEN 16 AND 20

PVIDAuthorNameID
34Mitchell16
65Sean17
73John18
90Mogan19
96Chang20

Select DISTINCT column together with Non DISTINCT Column

I have a post rating table named Rate, with Column RateID (auto ID), PostID, DateRated

I want the select the 20 latest rated post with no repeated PostID

Below query help me to get the data needed


SELECT TOP 20 PostID, MAX(RateID) AS RateID, MAX(DateRated ) AS DateRated FROM Rate
GROUP BY PostID
ORDER BY RateID DESC, DateRated DESC

Monday, November 12, 2007

technorati like - News Scroller with jQuery

I have create a real time viewer for blogarate.com in ASP.NET using jQuery. If you not familiar with jquery, you can read more here jquery.com. It's a very powerful javascript library.

Let me explain how the real time viewer/scroller/ticker/ works:

When web user access to realtime.aspx. The page will bind 5 latest rated blog and show on screen. once the user/visitor rate on the blog, the newly rated blog will show on top, the rest will scroll down and the last one will be deleted. To see real example, please check on
http://202.75.40.204/blogarate/Realtime_.aspx

There are few things that we need to take care of in my case:

  • HTML/ASPX
  • CSS
  • Javascript
  • AJAX
HTML/ASPX

I'm using in the scroller <ol> because we have more than one (5) message want to display.

<div id="content">
<ol class="wrapper">
<li class="headline">
Message 1
</li>
<li class="headline">
Message 2
</li>
<li class="headline">
Message 3
</li>
<li class="headline">
Message 4
</li>
<li class="headline">
Message 5
</li>
</ol>
</div>


invoice software

CSS
Create CSS for #content and .wrapper with height: 395px; width: 500px; overflow: hidden; The height: 395px; is the trick here. You will get what i mean when go along.
Each headline will have height: 78px; 5 headline will give total of 390px.


#content {
position: relative;
overflow: hidden;
float:left;
height: 395px;
width: 500px;
clear: both;
}
.wrapper
{
position:relative;
float: left;
margin:0;
overflow:hidden;
width: 500px;
padding-left: 0;
list-style-type: none;
}
.headline {
position: relative;
height: 78px;
width: 500px;
left:5px;
overflow: hidden;
border-bottom: 1px solid #CCC;
float: left;
list-style-type: none;
z-index : 1;
}
.next
{
margin-top: -100px;
/* for IE */
filter: alpha(opacity=40);
/* CSS3 standard */
opacity: 0.4;
/* for Mozilla */
-moz-opacity: 0.4;
}
active
{
background-color:#EEE;
border-bottom: none;
}



invoice software

Javascript

// JScript File
var BlogarateRealtime = {
timer : 10, // second
display : 5, // how many item displayed
interval: null,
animation: 500, //milisecond


init: function() {
if (!BlogarateRealtime.interval) {

// stop scrolling when mouseover the message
// start scroll again when mouseout
$("#content .wrapper").mouseover(function(){
BlogarateRealtime.stopScroll();
}).mouseout(function(){
BlogarateRealtime.startScroll();
})
BlogarateRealtime.RatingUpdate();
BlogarateRealtime.startScroll();
}
},

RatingUpdate: function(){
var i;

// add class active when mouseover
// remove class active when mouse out
var cpostItem = $(".wrapper .headline");
$(cpostItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});


// xxx.shx return realtime message (rewly post)
var html = $.ajax({
url: http://xxx.ashx/ ,
async: false
}).responseText;
// return 3 value:
//1. PostUpdating[0] - any blog rated
//2. PostUpdating[1] - new blog ID
//3. PostUpdating[2] - new blog information

var PostUpdating = html.split("");

// check if any new blog rated (1 = yes, 0 = no)
if (PostUpdating[0] == "1")
{

// assign currentItem with new blog infomation
var currentItem = PostUpdating[2];
// add class next to currentItem
// pre append currentItem to #content .wrapper
$(currentItem).addClass("next").prependTo("#content .wrapper");
// scrolling (animate) the new blog to marginTop -1
$(".wrapper .next").animate( { marginTop: -1 }, BlogarateRealtime.animation, function() {
// remove marginTop -1, class next and fadeIn new blog
$(".wrapper .next").css("marginTop", -1);
$(".wrapper .next").removeClass("next");
$(".wrapper .next").fadeIn(BlogarateRealtime.animation);
});

var postItem = $(".wrapper .headline");
// fade out and remove the last post
$(postItem[BlogarateRealtime.display]).animate( { opacity: .50 }, BlogarateRealtime.animation, function(){
$(postItem[BlogarateRealtime.display]).remove();
} );
// add class active when mouse over
// remove class active when mouseout
$(postItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});
}

},
startScroll: function() {
if (!this.interval) {
this.interval = setInterval("BlogarateRealtime.RatingUpdate()", this.timer * 1000);
}
},
stopScroll: function() {
if (this.interval) {
clearInterval(this.interval);
this.interval = false;
}
}
};
// initial once ducument finish loaded
$(BlogarateRealtime.init);

AJAX
The call of http://xxx.ashx/ will return newly added post if there is any.

You can see the effect in http://202.75.40.204/blogarate/Realtime_.aspx . You will only see the scroll effect if only new post rated. Done.

Leave me a message or a comment if you have any. Thanks

Thursday, November 8, 2007

Global variable In web.config

Let's say want to add a variable deployment in web.config, add
<appsettings><add value="0" key="deployment"></appsettings>to <configuration></configuration>if <appsettings></appsettings>not exist in web.config.


<configuration>
<appsettings>
<add value="0" key="deployment">
</appsettings>
</configuration>


to call the variable in C# code,

string strDeployment = System.Configuration.ConfigurationSettings.AppSettings["deployment"];

Done

Monday, November 5, 2007

jQuery: Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: ...

I received below error message in firebug when i try to use jQuery Ajax call

var html = $.ajax({
url: "http://www.xxx.com",
async: false
}).responseText;

Where http://www.xxx.com is different domain from my current site.

Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no]

As far as my understanding, this is not allowed. In order to have the similar result, use Cross Domain getJSON or you can check on my sample in other post which work on cross domain ajax.




Ajax treat http://www.xxx.com and http://xxx.com as two different entry. There are different between url with www and without www. To solve this problem, use location.host to get the url that use by visitors.

example:
var html = $.ajax({
url: "http://"+location.host+ "/Realtime.ashx" + "?PostID=" + PostID,
async: false
}).responseText;


Thursday, November 1, 2007

Dynamic CSS reference in ASP.NET

This sample allowed me to dynamic add CSS link to my ASP.NET page. If css provided via querystring, the page will link to provided css. If not provided then if will refer to the default css.


protected void Page_Load(object sender, EventArgs e)
{
string mycss;

if (Request.QueryString["mycss"] != null)
{
if (Request.QueryString["mycss"].ToString().Trim().Length > 0)
{
mycss= Request.QueryString["mycss"].ToString().Trim();
}
else
{
mycss= "~/default.css";
}
}
else
{
mycss= "~/default.css";
}
AddLinkedStyleSheet(this, mycss);
}

public static void AddLinkedStyleSheet(Page page, string stylesheet)
{
HtmlLink link = new HtmlLink();
link.Href = page.ResolveUrl(stylesheet);
link.Attributes["text"] = "text/css";
link.Attributes["rel"] = "stylesheet";
page.Header.Controls.Add(link);
}

credit give to
Rich Sturim