Danpe Solutions: September 2010

20.9.10

Internet Explorer breaks setInterval ?

Today i faced a stupid bug in Internet Explorer 8 and javascript.

I had my code in javascript: setInterval(timer, 0.1);

If you are not familiar with setInterval <- click the link :)

This code worked perfectly on any browser except IE 8 and below.

I sat for hours trying to sort it out, and finely found the problem.

IE is too slow to make this loop work... (WTF?)

So i changed it to setInterval(timer, 1); And tested it on few computers..

Only fast PCs could run this code on IE.. but on other browsers it worked perfectly even on slow PCs.

SO.... i changed the line to setInterval(timer, 10); and its finely did the job.

This article was written to tell you DO NOT USE IE.

USE Google Chrome.

Friends doesn't let friends use Internet Explorer.

Facebook Comments Integration

Hey,

This time i'll show you how to integrate Facebook Comments into your website using

Facebook JavaScript SDK
XFBML

First of all Sign up to Facebook ;) (Duh)

After you have an account you need to verify your self as a developer.

You need to go Here and follow the steps, a code will be sent to your Phone and you need to type it there and you will get confirmed.

Now you need to sign up for an application go here - Create an Application.

And fill in the necessary fields.

Notice: You may get "Sorry, an error has occurred" - This is bullshit !

After you get this error or succeeds to create application go to My Applications.

Inside your application you'll see Application ID, We will use it later.
Notice: It can take between 2 to 20 minutes until it will be ready to use.

Now go to the page that you want to the FB Comments to it, go to your <html> tags and add this line inside the tag: xmlns:fb="http://www.facebook.com/2008/fbml"
So now your <html> tag should look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

After the <body> tag add this:

<body>
<div id="fb-root"></div>
<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>
<script>
    FB.init({ apiKey: 'YOUR APP ID',
              status: true,
              xfbml: true });
    FB.XFBML.parse();
</script>

And change 'YOUR APP ID' to the Application ID we got before.
Now go to Comments Social Plugin on facebook, and generate the code you would like to use.

for an example i use:

<div id="RectFacebookComments">
    <fb:comments xid="123" width="640" canpost="true" candelete="true"></fb:comments>
</div>

Now offcourse that we want a Dynamic xid...
This is how you do it in ASP .NET (C#):

Go to the page.cs file and create a method that returns the ID you want as a string:

public string GetID()
{
    if (Request["id"] != null)
        return Request["id"].ToString();
    return "";
}

And change xid="123" to <%GetID();%> :)
Thats it your done :D
Let me know if you have any questions ;-)

19.9.10

jQuery Scrollbars

Hey readers this is my first post :)

Today i wanted my div to have a scrollbar...

to make your div support scrollbar you should use CSS property 'overflow'

.Div {
 border: 1px solid #ccc;
 width: 640px;
 height: 385px;
 overflow: auto;
}

This will make a scrollbar, but who want to use those ugly default browser scrollbars?

So i found a great plugin for jQuery called jScrollPane.

This awsome plugin lets you design your own scrollbar using CSS and even more!

First of all you need to download it, or you can get his Git from Here.

(To get Git you can use TortoiseGit)

After you have all the files you need link them to your HTML file

<link href="js/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />
<script src="js/jquery.mousewheel.js" type="text/javascript" />

<script src="js/jquery.jscrollpane.min.js" type="text/javascript" />

Now define the scrollpane class

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script>

(Add this after the links to the files)
add a little css:
.scroll-pane
{
 width: 100%;
 height: 200px;
 overflow: auto;
}
Now easily just create a div giving him class="scroll-pane"
and thats really it :)
<div class="scroll-pane"> <p>     Content Here
 <p><div>

And you'r done :)