jongmin kim blog

[JS] cm-rotate.js

Lab | April 4, 2013 | 4 Comments

ABOUT

Rotate js using CSS translate3d and transition
     • No dependencies
     • Works in all major browsers that support CSS translate3d or transition (IE9+)
     • Works on tablet PC
     • MIT License

EXAMPLE

http://cmiscm.github.com/cm-rotate.js/

DOWNLOAD FROM GITHUB

https://github.com/cmiscm/cm-rotate.js

USAGE

Download the js file and include it in your html.

     <script type="text/javascript" src="CMRotate.js"></script>

1	<script type="text/javascript" src="CMRotate.js"></script>

Add CMRotate.init function in your Javascript code.

     /**
     * Background image Array for each Plane
     */
    var backgroundImages = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg", ...];

    /**
     * init
     *
     * div - DIV element ID
     * tw - Plane Width
     * th - Plane Height
     * ty - Y position distance from bottom
     * gap - Gap between each Plane
     * radius - Circle Radius
     * bg - Background image Array
     * fn - Mouse click function on each Plane
     */
    CMRotate.init('rotate-div', 200, 300, 100, 12, 600, backgroundImages, clickFn);

    /**
     * Click function
     */
    function clickFn(no) {
        alert('click no - ' + (no + 1));
    }

/**

* Background image Array for each Plane

var backgroundImages = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg", ...];

/**

* init

* div - DIV element ID

* tw - Plane Width

* th - Plane Height

* ty - Y position distance from bottom

* gap - Gap between each Plane

* radius - Circle Radius

* bg - Background image Array

* fn - Mouse click function on each Plane

CMRotate.init('rotate-div', 200, 300, 100, 12, 600, backgroundImages, clickFn);

/**

* Click function

function clickFn(no) {

alert('click no - ' + (no + 1));

}

DISPOSE

Remove all events and requestAnimationFrame

     CMRotate.dispose();

1	CMRotate.dispose();

LICENSE

Tags: cm-rotate.js, javascript

Meta Tag redirect problem for Sharing to Google+

Lab | March 11, 2013 | 2 Comments

If your website has only one HTML file, and using hash tag(#) to load different pages – like All Flash website – you can use custom share.php to share your website with different information for each pages.

This is an old version share.php code

<?php
    $title = $_GET['title'];
    $description = $_GET['description'];
    $img = $_GET['img'];
    $url = $_GET['url'];
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>   
    <meta http-equiv="refresh" content="0;url=<?php echo $url; ?>" />
    <meta property="og:title"       content="<?php echo $title; ?>" /> 
    <meta property="og:description" content="<?php echo $description; ?>" />
    <meta property="og:image"       content="<?php echo $img; ?>" />
    
    <title><?php echo $titles; ?></title>
    <style type="text/css" media="screen">			
        body {
            background-color: #000; 
        }
        #google-share-title {
            display: none;
        }
    </style>
</head>

//Google+ recommended using Schema.org micro data
//https://developers.google.com/+/web/snippet/
<body itemscope itemtype="http://schema.org/Product">
    <div id="google-share-title">
        <h1 itemprop="name"><?php echo $title; ?></h1>
        <img itemprop="image" src="<?php echo $img;?>" />
        <p itemprop="description"><?php echo $description;?></p>
    </div>
</body>
</html>

<?php

$title = $_GET['title'];

$description = $_GET['description'];

$img = $_GET['img'];

$url = $_GET['url'];

<!DOCTYPE html>

<head>

body {

background-color: #000;

}

#google-share-title {

display: none;

}

</style>

</head>

//Google+ recommended using Schema.org micro data

//https://developers.google.com/+/web/snippet/

</div>

</body>

</html>

It was working pretty well until last week.
But suddenly it doesn’t work perfectly, which means, Google+ doesn’t get the informations (title, description and thumbnail image) from share.php.
The problem is because of meta tag redirect.

<meta http-equiv="refresh" content="0;url=<?php echo $url; ?>" />

1	<meta http-equiv="refresh" content="0;url=<?php echo $url; ?>" />

So just use Javascript redirect instead of meta tag redirect.
Besides, you don’t need to use Schema.org microdata anymore.
Google+ recommend to use that – see this page –, but now Google+ perfectly get the informations from Open Graph protocol.
Here is the code.

SHARE.PHP

<?php
    $title = $_GET['title'];
    $description = $_GET['description'];
    $img = $_GET['img'];
    $url = $_GET['url'];
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>   
    <meta property="og:title"       content="<?php echo $title; ?>" /> 
    <meta property="og:description" content="<?php echo $description; ?>" />
    <meta property="og:image"       content="<?php echo $img; ?>" />
    
    <title><?php echo $titles; ?></title>
    <style type="text/css" media="screen">			
        body {
            background-color: #000; 
        }
    </style>
    <script type="text/javascript">
    <!--
    function delayedGo(){
        window.location = "<?php echo $url; ?>"
    }
    //-->
    </script>
</head>

<body onLoad="setTimeout('delayedGo()', 200)">

</body>
</html>

<?php

$title = $_GET['title'];

$description = $_GET['description'];

$img = $_GET['img'];

$url = $_GET['url'];

<!DOCTYPE html>

<head>

body {

background-color: #000;

}

</style>

<!--

function delayedGo(){

window.location = "<?php echo $url; ?>"

}

//-->

</script>

</head>

</body>

</html>

HOW TO USE – JAVASCRIPT

var share_url = "http://myhome.com/share.php?url=myurl" +
                "&title=mytitle" + 
                "&description=mydescription" + 
                "&img=http://myhome.com/myimg.jpg",
	google_url = "https://plus.google.com/share?url=" + encodeURIComponent(share_url);
window.open(google_url);

var share_url = "http://myhome.com/share.php?url=myurl" +

"&title=mytitle" +

"&description=mydescription" +

"&img=http://myhome.com/myimg.jpg",

google_url = "https://plus.google.com/share?url=" + encodeURIComponent(share_url);

window.open(google_url);

Thanks to Emily and Zeh to found the solution of this problem with me.

Tags: Google, meta tag, redirect

[JS] cm-rotate.js

Meta Tag redirect problem for Sharing to Google+

Wiper Typography Test