Custom javascript functions

Custom share buttons with javascript - Facebook, Twitter, Pinterest

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a class="fb-share" href="http://www.facebook.com/sharer/sharer.php?u=http://url/to/your/page"><i class="fa fa-facebook"></i></a>

<a class="tw-share" href="http://twitter.com/intent/tweet?status=custom-title-you-want-to-share+http://url/to/your/page"><i class="fa fa-twitter"></i></a>

<a id="pinterest_share" href="#"><i class="fa fa-pinterest"></i></a>

<div class="hidden" id="pinterest_wrap">
    <a href="https://www.pinterest.com/pin/create/button/" >
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>
</div>

<script>
$(function () {
    $('#pinterest_share').click(function(){
        $('#pinterest_wrap').find('span').trigger('click');
    })
   $('.fb-share').click(function (e) {
        window.open($(this).attr('href'), 'Share on facebook', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
        return false;
    });
    $('.tw-share').click(function (e) {
        window.open($(this).attr('href'), 'Share on twitter', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
        return false;
    });
});
</script>
<style>. hidden{display:none;}</style>

DEMO:

Function to render text as image - escape spam bots

Escaping contact information from spam bots is one of the major challenges developers facing. Converting the text to image and rendering as image is one basic solution. Here is a function I use.

Function to render text as image

<img src="<?php echo render_text_image('test image', 183, 50);?>" />

function render_text_image($string, $width, $height, $text_align_pos = 0)
{


    $img = imagecreatetruecolor($width, $height);

    $imageX = imagesx($img);
    $imageY = imagesy($img);

    imagealphablending($img, false);
    imagesavealpha($img, true);

    $transparent = imagecolorallocatealpha($img, 255,255,255, 127);
    $white = imagecolorallocate($img, 129, 78, 16);
    $black = imagecolorallocate($img, 0, 0, 0);
    $grey = imagecolorallocate($img, 127,127,127);
    //imagefilledrectangle($img, 0, 0, $imageX, $imageY, $grey);
    imagefilledrectangle($img, 0, 0, $imageX, $imageY, $transparent);

    $font = ROOT_DIRECTORY . "assets/font/arialbd.ttf";
    //$font = ROOT_DIRECTORY . "assets/font/arialbd.ttf";
    $fontSize = 12;
    $text = $string;

    $textDim = imagettfbbox($fontSize, 0, $font, $text);
    $textX = $textDim[2] - $textDim[0];
    $textY = $textDim[7] - $textDim[1];

    $text_posX = ($text_align_pos== "center") ? ($imageX / 2) - ($textX / 2) : $text_align_pos;
    $text_posY = ($imageY / 2) - ($textY / 2);

    imagealphablending($img, true);
    imagettftext($img, $fontSize, 0, $text_posX, $text_posY, $white, $font, $text);
    //ImageString($img,2,0,0, $text,$black);
    //Get image to a variable
    ob_start();
    imagepng($img);
    // Capture the output
    $imagedata = ob_get_contents();
    // Clear the output buffer
    ob_end_clean();

    return "data:image/png;base64," . base64_encode($imagedata);
}

Custom look for file selector

Custom look for file selector

Here is a way of adding custom styled buttons for file selctor inputs. Working: Overlay a transparent "<input type="file" />" over a styled button or other element

Code:

    <div id="" style="height: 30px; overflow: hidden; position: absolute; width: 300px; word-break: keep-all;">
        <input style="width: 100px;" type="button" value="select" />
            <span id="files">
                No files selected.      
            </span>
        </div>
        <input id="selector" style="height: 30px; opacity: 0; position: absolute; width: 100px;" type="file" />
    </div>

Try this on jsFiddle: http://jsfiddle.net/bMb59/

Multi file select with ajax upload: here

OR copy & paste the following link to address bar of your browser

http://customphpfunctions.blogspot.in/2014/12/handle-images-uploaded-using-multi-file.html