JavaScript Rolling Animation Using marginTop

In My previous Post I wrote about how You can get a rolling animtaion using javascript scrollTop property. As the "scrollTop" is not a W3C recommendation we will use 'marginTop' of the style object to make a better solution.

****
*****
Javacript Rolling Animation Example Using margin

*******
*********
*******
*******
*********
*******
***
Free Javascript scripts

We will set a negative value to the css margin-top property using a recursive function. This will move the div upwards gradually.Here is the sample Code.

d = document.getElementById('cat');

h = 0;

ab = function(){
 if(h == -150){
  h = 0;
  }
 h--;
 d.style.marginTop = h+"px";
 setTimeout('ab();', 10);
 }
 
ab();

Easy and pretty simple huh? This is just the basic, You can make awesome animations/sliding effects. This is compatible in all modern browsers. If you need more info, post a comment and I'll try to help.

JavaScript Scrolling Animation Using scrollTop

Using only the scrollTop and scrollHeight property it is possible to create a nice scrolling effect.scrollTop and scrollHeight aren't W3C recommendation but these properties exist in all the modern browsers. I have checked it in Chromium,Firefox,IE and Midori the following script works perfectly. Let's see the effect.

Javacript Scrolling Animation Using scrollTop property
****
*****
*******
*********
*******
***
****
*****
*******
*********
*******
***
Javacript Scrolling Animation Using scrollTop property

The code is pretty simple. For achieving the animation effect out our div should be overflown.

a = document.getElementById('scroll');
c = 0;
b = function()
{
 if(200+a.scrollTop == a.scrollHeight)
 {
  a.scrollTop = 0;
  c = 0;
 };
 c++;
 a.scrollTop = c;
 setTimeout('b()',10)
}
b();

Need Explanation?

scrollTop(integer) property shows that how far you have scrolled from the top. You can also set a value to scrollTop which will scroll automatically to a value specified.

we have a recursive function that sets the scrollTop property. If we reach at the bottom of our element that's when if(200+a.scrollTop==a.scrollHeight) we reset the scrollTop property.

Here is a tutorial about How you can achieve the same animation using margin.

If You need more explanation, Let me Know.

PHP Declaring Object before Defining Class

A quiz for you. is the following code snippet valid?

    $obj = new hello(); 

    class hello{

        function __construct(){
        echo 'PHP ';
        }
      }

    

What about the following one?

     hello();

     function hello(){
           echo 'PHP ';
     }

what about the next? assuming test.php contains the hello function.

     hello();

    include test.php;

Unlike C/C++/Python The first two snippets are correct. But the third one will generate error. When you call a function or make an instance of a class the compiler searches in the same file for the definion.

Django Installation with XAMPP for Linux-(LAMPP)

I use Ubuntu and XAMPP for my development works. My Xampp location is /opt/lampp.
This post is about Mysql Database connection problem in Django.

First Make sure you've installed the python-mysqldb package.

sudo apt-get install python-mysqldb

Then if you get the following error

_mysql_exceptions.OperationalError: (2002, "Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)")'

That means that mysqld can't find you mysql library location. You have to add the library path manually. /etch/ld/so/conf file maintains the extra library locations so add your library here.


sudo gedit /etc/ld.so.conf

Add your mysql library path here. In my case

/opt/lampp/lib/mysql

Now update your config by

sudo ldconfig

And that's it now you can test it by running server


Alternative:

You can also create a .conf file in the /etc/ld.so.conf.d directory and write your location in that file as the ld.co.conf file loads all the files from the directory.

WordPress thickbox for Generated Images Solution

If you want to use Thickbox for the generated images you may get garbage values if you're using a url like http://test.com/image.php?coords=1,2,3 or http://test.com/image/ . The problem occurs when thickbox detects the url not as image. If you open the wp-includes/js/thickbox/thickbox.js file you will get a line

var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

Image formats or urls other than the above ones will show garbage value. The solution is to edit the thickbox.js file. Do not edit the default file. Make a copy of the file and place it at your theme directory. Another Option is to obtain thickbox.js from the jQuery thickbox page. This is better than copying the WordPress included one. I will explain it a bit later. Now first add the thickbox.js file in you theme. In your functions.php file use the following code.

add_action('wp_print_scripts' , 'add_custom_thickbox');

function add_custom_thickbox(){
wp_enqueue_script('thickbox_edit' , get_bloginfo('stylesheet_directory')
 . '/thickbox.js' , 'jquery' , ' ' , true);
}

Don't forget to add the thickbox css. Now edit the thickbox.js file around Line no 72. If your url contains .php :

Replace the line
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

with
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp|\.php$/;

Then in the line 75

Replace the line
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'
|| urlType == '.bmp'' )

with
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'
|| urlType == '.bmp' || urlType == '.php' )


There is another edit, From the whole script remove all the properties and method related with 'thickboxL10n' . This variable has been injected by wodpress as a localization process. If your copy is from jquery website your thickbox.js will have no variable 'thickboxL10n'. So It's a better option to get thickbox from the jQuery website.

If you copy download jquery from jquery website:
Replace all the "$(" with "jQuery(" .


Now click on your image and it should work now. If You face any problem you can comment here, I will try to solve your problem.