Monday, September 30, 2013

jQuery Touch Screen Effect Image Slider - Mouse Press and Move

As the People started using Touch Screen devices, More than half of the Traffic now comes from Touch Screen Devices. It is important to have Image Slider having same effect on Computer screen.


Download Demo view-source

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript' src='http://smoothdivscroll.com/js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='http://smoothdivscroll.com/js/jquery.mousewheel.min.js'></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>
<script src="http://smoothdivscroll.com/js/jquery.kinetic.js"></script>

<script type="text/javascript">
    // Initialize the plugin with no custom options
    $(document).ready(function () {
        $("#makeMeScrollable").smoothDivScroll({
            hotSpotScrolling: false,
            touchScrolling: true,
            manualContinuousScrolling: true,
            mousewheelScrolling: false
        });
    });
</script>

Read more…

jQuery Image Scroll using Mouse Wheel + Hover

On Mouse Over the jQuery Carousel will scroll from Left to right with Smooth Animation. Smooth Div Scroll plugin add more easy way to do this.
This Work with On Mouse Over the Arrow and also Mouse Scroll over Picture.

More Plugin Options were found there, which may customize as per your option.

Download Demo view-source




<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript' src='http://smoothdivscroll.com/js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='http://smoothdivscroll.com/js/jquery.mousewheel.min.js'></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>


<style type="text/css">
    
    #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

    #makeMeScrollable div.scrollableArea *
    {
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    /* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

    /* Invisible left hotspot */
    div.scrollingHotSpotLeft
    {
        /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
        and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
        min-width: 75px;
        width: 10%;
        height: 100%;
        /* There is a big background image and it's used to solve some problems I experienced
        in Internet Explorer 6. */
        background-image: url(http://smoothdivscroll.com/images/big_transparent.gif);
        background-repeat: repeat;
        background-position: center center;
        position: absolute;
        z-index: 200;
        left: 0;
        /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
        cursor: url(http://smoothdivscroll.com/images/cursors/cursor_arrow_left.png), url(http://smoothdivscroll.com/images/cursors/cursor_arrow_left.cur),w-resize;
    }

    /* Visible left hotspot */
    div.scrollingHotSpotLeftVisible
    {
        background-image: url(../images/arrow_left.gif);                
        background-color: #fff;
        background-repeat: no-repeat;
        opacity: 0.35; /* Standard CSS3 opacity setting */
        -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
        filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
        zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
    }

    /* Invisible right hotspot */
    div.scrollingHotSpotRight
    {
        min-width: 75px;
        width: 10%;
        height: 100%;
        background-image: url(http://smoothdivscroll.com/images/big_transparent.gif);
        background-repeat: repeat;
        background-position: center center;
        position: absolute;
        z-index: 200;
        right: 0;
        cursor: url(http://smoothdivscroll.com/images/cursors/cursor_arrow_right.png), url(http://smoothdivscroll.com/images/cursors/cursor_arrow_right.cur),e-resize;
    }

    /* Visible right hotspot */
    div.scrollingHotSpotRightVisible
    {
        background-image: url(http://smoothdivscroll.com/images/arrow_right.gif);
        background-color: #fff;
        background-repeat: no-repeat;
        opacity: 0.35;
        filter: alpha(opacity = 35);
        -moz-opacity: 0.35;
        zoom: 1;
    }

    /* The scroll wrapper is always the same width and height as the containing element (div).
       Overflow is hidden because you don't want to show all of the scrollable area.
    */
    div.scrollWrapper
    {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    div.scrollableArea
    {
        position: relative;
        width: auto;
        height: 100%;
    }   
</style>

<body>
        <div id="makeMeScrollable">
            <img src="http://smoothdivscroll.com/images/demo/field.jpg" alt="Field" id="field" />
            <img src="http://smoothdivscroll.com/images/demo/gnome.jpg" alt="Gnome" id="gnome" />
            <img src="http://smoothdivscroll.com/images/demo/pencils.jpg" alt="Pencils" id="pencils" />
            <img src="http://smoothdivscroll.com/images/demo/golf.jpg" alt="Golf" id="golf" />
            <img src="http://smoothdivscroll.com/images/demo/river.jpg" alt="River" id="river" />
            <img src="http://smoothdivscroll.com/images/demo/train.jpg" alt="Train" id="train" />
            <img src="http://smoothdivscroll.com/images/demo/leaf.jpg" alt="Leaf" id="leaf" />
            <img src="http://smoothdivscroll.com/images/demo/dog.jpg" alt="Dog" id="dog" />
        </div>
</body>

<script type="text/javascript">
    // Initialize the plugin with no custom options
    $(document).ready(function () {
        // I just set some of the options
        $("#makeMeScrollable").smoothDivScroll({
            mousewheelScrolling: "allDirections",
            manualContinuousScrolling: true,
            autoScrollingMode: "onStart"
        });
    });
</script>

Read more…

jQuery Mouse Scroll Slider Image Gallery

The Easiest way to navigate through Multiple Photo's / Picture gallery is Mouse Scroll. Core JQuery Supports "mousewheel" event.

Download Demo view-source

Include JQuery Library
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

Required Script


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var imglist = ["ras1.gif","ras2.jpg","ras3.gif","ras4.jpg","ras5.jpg","ras6.png","ras7.jpg","ras8.gif"];

function getnext(img){
    if(imglist.length>=jQuery.inArray(img,imglist) ){
        var position = jQuery.inArray(img,imglist)+1;
        return imglist[position];
    } else {
        return false;
    }
}

function getprev(img){
    if(imglist.length>=jQuery.inArray(img,imglist) ){
        var position = jQuery.inArray(img,imglist)-1;
        return imglist[position];
    } else {
        return false;
    }
}
$(document).ready(function(){
    //Get the First Image
    var loadimg = imglist[0];
    $("#imgholder").html("<img src="+loadimg+" width=400>");
    $('#foo').bind('mousewheel', function(e){
        if(e.wheelDelta > 0) {
            loadimg = (getnext(loadimg)==false) ? imglist[0]:getnext(loadimg);
            if(loadimg){
                $("#imgholder").html("<img src="+loadimg+" width=400>");
            } else {
                alert("End of Scroll Up Gallery ");
            }
        }
        else{
        
            loadimg = (getprev(loadimg)==false) ? imglist[0]:getprev(loadimg);
            if(loadimg){
                $("#imgholder").html("<img src="+loadimg+" width=400>");
            } else {
                alert("End of Scroll Down Gallery");
            }
        }
    });
});
});//]]>  

</script>

HTML Body
<body>
  <div id="foo">
    <div id="imgholder"></div>
  </div>
  
</body>

Optional Style
<style>
#foo {
border: solid #112200 2px;
padding:3px;
width:400px;
height:175px;
}
</style>

Read more…

Wednesday, September 25, 2013

HTML5 Canvas No Image Ajax Loading Animation

Different HTML5 Canvas Ajax Loader Animation works in borwser without the need for any Graphical JPG,GIF Image.

9 Different HTML5 Canvas Loader Objects
Make Sure You add Following Doctype for HTML5

<!doctype html>


Javascript Library to Include
<script>
/*
 * Sonic 0.1
 * --
 * https://github.com/jamespadolsey/Sonic
 * --
 * This program is free software. It comes without any warranty, to
 * the extent permitted by applicable law. You can redistribute it
 * and/or modify it under the terms of the Do What The Fuck You Want
 * To Public License, Version 2, as published by Sam Hocevar. See
 * http://sam.zoy.org/wtfpl/COPYING for more details. */ 

(function(){

    var emptyFn = function(){};

    function Sonic(d) {

        this.data = d.path || d.data;
        this.imageData = [];

        this.multiplier = d.multiplier || 1;
        this.padding = d.padding || 0;

        this.fps = d.fps || 25;

        this.stepsPerFrame = ~~d.stepsPerFrame || 1;
        this.trailLength = d.trailLength || 1;
        this.pointDistance = d.pointDistance || .05;

        this.domClass = d.domClass || 'sonic';

        this.fillColor = d.fillColor || '#FFF';
        this.strokeColor = d.strokeColor || '#FFF';

        this.stepMethod = typeof d.step == 'string' ?
            stepMethods[d.step] :
            d.step || stepMethods.square;

        this._setup = d.setup || emptyFn;
        this._teardown = d.teardown || emptyFn;
        this._preStep = d.preStep || emptyFn;

        this.width = d.width;
        this.height = d.height;

        this.fullWidth = this.width + 2*this.padding;
        this.fullHeight = this.height + 2*this.padding;

        this.domClass = d.domClass || 'sonic';

        this.setup();

    }

    var argTypes = Sonic.argTypes = {
        DIM: 1,
        DEGREE: 2,
        RADIUS: 3,
        OTHER: 0
    };

    var argSignatures = Sonic.argSignatures = {
        arc: [1, 1, 3, 2, 2, 0],
        bezier: [1, 1, 1, 1, 1, 1, 1, 1],
        line: [1,1,1,1]
    };

    var pathMethods = Sonic.pathMethods = {
        bezier: function(t, p0x, p0y, p1x, p1y, c0x, c0y, c1x, c1y) {
            
            t = 1-t;

            var i = 1-t,
                x = t*t,
                y = i*i,
                a = x*t,
                b = 3 * x * i,
                c = 3 * t * y,
                d = y * i;

            return [
                a * p0x + b * c0x + c * c1x + d * p1x,
                a * p0y + b * c0y + c * c1y + d * p1y
            ]

        },
        arc: function(t, cx, cy, radius, start, end) {

            var point = (end - start) * t + start;

            var ret = [
                (Math.cos(point) * radius) + cx,
                (Math.sin(point) * radius) + cy
            ];

            ret.angle = point;
            ret.t = t;

            return ret;

        },
        line: function(t, sx, sy, ex, ey) {
            return [
                (ex - sx) * t + sx,
                (ey - sy) * t + sy
            ]
        }
    };

    var stepMethods = Sonic.stepMethods = {
        
        square: function(point, i, f, color, alpha) {
            this._.fillRect(point.x - 3, point.y - 3, 6, 6);
        },

        fader: function(point, i, f, color, alpha) {

            this._.beginPath();

            if (this._last) {
                this._.moveTo(this._last.x, this._last.y);
            }

            this._.lineTo(point.x, point.y);
            this._.closePath();
            this._.stroke();

            this._last = point;

        }

    }

    Sonic.prototype = {
        setup: function() {

            var args,
                type,
                method,
                value,
                data = this.data;

            this.canvas = document.createElement('canvas');
            this._ = this.canvas.getContext('2d');

            this.canvas.className = this.domClass;

            this.canvas.height = this.fullHeight;
            this.canvas.width = this.fullWidth;

            this.points = [];

            for (var i = -1, l = data.length; ++i < l;) {

                args = data[i].slice(1);
                method = data[i][0];

                if (method in argSignatures) for (var a = -1, al = args.length; ++a < al;) {

                    type = argSignatures[method][a];
                    value = args[a];

                    switch (type) {
                        case argTypes.RADIUS:
                            value *= this.multiplier;
                            break;
                        case argTypes.DIM:
                            value *= this.multiplier;
                            value += this.padding;
                            break;
                        case argTypes.DEGREE:
                            value *= Math.PI/180;
                            break;
                    };

                    args[a] = value;

                }

                args.unshift(0);

                for (var r, pd = this.pointDistance, t = pd; t <= 1; t += pd) {
                    
                    // Avoid crap like 0.15000000000000002
                    t = Math.round(t*1/pd) / (1/pd);

                    args[0] = t;

                    r = pathMethods[method].apply(null, args);

                    this.points.push({
                        x: r[0],
                        y: r[1],
                        progress: t
                    });

                }

            }

            this.frame = 0;
            //this.prep(this.frame);

        },

        prep: function(frame) {

            if (frame in this.imageData) {
                return;
            }

            this._.clearRect(0, 0, this.fullWidth, this.fullHeight);
            
            var points = this.points,
                pointsLength = points.length,
                pd = this.pointDistance,
                point,
                index,
                frameD;

            this._setup();

            for (var i = -1, l = pointsLength*this.trailLength; ++i < l && !this.stopped;) {

                index = frame + i;

                point = points[index] || points[index - pointsLength];

                if (!point) continue;

                this.alpha = Math.round(1000*(i/(l-1)))/1000;

                this._.globalAlpha = this.alpha;

                this._.fillStyle = this.fillColor;
                this._.strokeStyle = this.strokeColor;

                frameD = frame/(this.points.length-1);
                indexD = i/(l-1);

                this._preStep(point, indexD, frameD);
                this.stepMethod(point, indexD, frameD);

            } 

            this._teardown();

            this.imageData[frame] = (
                this._.getImageData(0, 0, this.fullWidth, this.fullWidth)
            );

            return true;

        },

        draw: function() {
            
            if (!this.prep(this.frame)) {

                this._.clearRect(0, 0, this.fullWidth, this.fullWidth);

                this._.putImageData(
                    this.imageData[this.frame],
                    0, 0
                );

            }

            this.iterateFrame();

        },

        iterateFrame: function() {
            
            this.frame += this.stepsPerFrame;

            if (this.frame >= this.points.length) {
                this.frame = 0;
            }

        },

        play: function() {

            this.stopped = false;

            var hoc = this;

            this.timer = setInterval(function(){
                hoc.draw();
            }, 1000 / this.fps);

        },
        stop: function() {

            this.stopped = true;
            this.timer && clearInterval(this.timer);

        }
    };

    window.Sonic = Sonic;

}());

</script>

HTML Code
<body>
<div id="container">
<div id="in"></div>
</div>
</body>

<script>
var  html5_canvas_obj, container = document.getElementById('in');

function load_loader(){

    //Created Sonic Object
    html5_canvas_obj = new Sonic(loaders[0]);

    //Append this Canvas to a DIV
    container.appendChild(html5_canvas_obj.canvas);

    //Let the Canvas Execute / Play
    html5_canvas_obj.play();
}

//Call Ajax Loader Function 
load_loader();
</script> 
The Above All Code will be Common for all the 9 Loaders. Following JavaScript Code Will make it Work like different Loaders.
Add the Following Label Variable to the Above Script.

For Loader 1:
Loader 1 Demo
var loaders = [

    {

        width: 100,
        height: 50,
        padding: 10,

        stepsPerFrame: 2,
        trailLength: 1,
        pointDistance: .03,

        strokeColor: '#FF7B24',
        
        step: 'fader',

        multiplier: 2,

        setup: function() {
            this._.lineWidth = 5;
        },

        path: [
        
            ['arc', 10, 10, 10, -270, -90],
            ['bezier', 10, 0, 40, 20, 20, 0, 30, 20],
            ['arc', 40, 10, 10, 90, -90],
            ['bezier', 40, 0, 10, 20, 30, 0, 20, 20]
        ]
    }

];


For Loader 2:
Loader 2 Demo
var loaders = [

    {

        width: 100,
        height: 100,

        stepsPerFrame: 4,
        trailLength: 1,
        pointDistance: .01,
        fps: 25,

        fillColor: '#FF7B24',

        setup: function() {
            this._.lineWidth = 10;
        },

        step: function(point, i, f) {

            var progress = point.progress,
                degAngle = 360 * progress,
                angle = Math.PI/180 * degAngle,
                angleB = Math.PI/180 * (degAngle - 180),
                size = i*5;

            this._.fillRect(
                Math.cos(angle) * 25 + (50-size/2),
                Math.sin(angle) * 15 + (50-size/2),
                size,
                size
            );

            this._.fillStyle = '#63D3FF';

            this._.fillRect(
                Math.cos(angleB) * 15 + (50-size/2),
                Math.sin(angleB) * 25 + (50-size/2),
                size,
                size
            );

            if (point.progress == 1) {

                this._.globalAlpha = f < .5 ? 1-f : f;

                this._.fillStyle = '#EEE';

                this._.beginPath();
                this._.arc(50, 50, 5, 0, 360, 0);
                this._.closePath();
                this._.fill();

            }


        },

        path: [
            ['line', 40, 10, 60, 90]
        ]
    }

];
For Loader 3:
Loader 3 Demo
For Loader 4:
Loader 4 Demo
For Loader 5:
Loader 5 Demo
For Loader 6:
Loader 6 Demo
For Loader 7:
Loader 7 Demo
For Loader 8:
Loader 8 Demo
For Loader 9:


This HTML5 Code was Pretty faster than any image so being rendered on the browser.

Advantage of this HTML5 Code is that in Some countries particular domain series was blocked, so images may not load properly. But Canvas Object was useful in that case.

Read more…

Tuesday, September 17, 2013

Codeigniter Index.php Remove using Htaccess [Working]

Code Igniter URL Rewrite


According to Codeigniter Documentation following is the htaccess way to remove index.php from URI.




RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]



But unfortunately above is not working.


But Working htaccess is below.



RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php/$0 [PT,L] 

Read more…