Best Joomla shopping cart tools

Joomla Shopping Cart Extensions

1.Virtuemart

Virtuemart  is most popular shopping cart for joomla .Plugins are available for Paypal, Authorize.net, PayZen, Systempay, Moneybookers, Klarna, Heidelpay. Virtuemart is easily integrated with other Joomla extensions.

Learn & Downlaod

2.HikaShop Shopping Cart

HikaShop is an E-Commerce component for Joomla. Payment plugins are available for PayPal, Google, Authorize.net, MoneyBookers and others. Shipping plugins are also available in Hikashop Shopping cart.

Learn & Downlaod

3.J2Store

J2Store is an E-Commerce plugin for Joomla.It is used to sreate beautiful estore in joomla and may payment,shipping plugins available for J2Store

Learn & Downlaod

4.Joomshopping

Joomshopping is an E-Commerce plugin for Joomla.Main advantages of this plugin is that it is search engine optimized.

Learn & Downlaod

5.redSHOP

RedShop is an E-Commerce component for Joomla. Payment plugins are available for PayPal, Google, Authorize.net, MoneyBookers and others.

Learn & Downlaod

If you feel free post your comments.

Change colors using Jquery

Change text color,Link color,Background color and border color using Jquery keyup function.This is very simple jquery script.Use this script for your web applications.

Live DemoDownload Script

Step 1:
Need library file to perform empty action.Please copy and Paste below library file.
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

jQuery keyup function

 <script type="text/javascript" >
        $(document).ready(function(){
            $(".changecolor").keyup(function()  //.Changecolor is selector
            {
                var text = $("#textcolor").val(); //get values using element id
                $("#container").css("color", text); //Apply Css Styles
            });
        });
    </script>

HTML Code

<form method="post" action="#">
      <table width="400" border="0">
        <tr>
          <td>Change Text Color:</td>
          <td><input type="text" class="changecolor"  id="textcolor"/></td>
        </tr>
      </table>
    </form>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

CSS3 transition-timing-function Property

Transition-timing-function property is new CSS3 property.It specifies the speed curve of the transition effect.A transition effect with same speed from start to end.

Syntax

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit;

Live DemoDownload Script

CSS3 Code for transition

div {
        -webkit-transition-timing-function: linear; /* Safari and Chrome */
        transition-timing-function: linear;
        }

Browser Support

The transition-timing-function property is supported in Internet Explorer 10, Firefox, Opera, and Chrome.

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

CSS3 counter-increment Property

Counter-increment property is new CSS3 property.The counter-increment is used to increments one or more counter values.

Syntax

counter-increment: none|id|initial|inherit; 

Live DemoDownload Script

Simple CSS3 Code for Counter-increment

h2::before {
        content: counter(section) ". ";
        counter-increment: section;
    }

Full CSS3 Code for Counter-increment

<style type="text/css">
h1 {
    counter-reset: section;
}
h2 {
    counter-reset: subsection;
}
h2::before {
    content: counter(section) ". ";
    counter-increment: section;
}
p::before {
    content: counter(section) "." counter(subsection) " ";
    counter-increment: subsection;
}
</style>

Browser Support

The counter-increment property is supported in all major browsers.

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

HTML5 reversed Attribute

HTML5 <ol> reversed Attribute is new attribute in HTML5.It specifies that the list order should be descending (9,8,7...), instead of ascending (1, 2, 3...).

Syntax

<ol reversed>

Live DemoDownload Script

Simple Example

<ol reversed>
            <li>Java</li>
            <li>HTML5</li>
            <li>PHP</li>
            <li>CSS3</li>
            <li>Joomla</li>
            <li>Wordpress</li>
            <li>Magento</li>
            <li>Opencart</li>
            <li>Core Commerce</li>
            <li>Ruby</li>
        </ol>

HTML5 also contains start attribute.If you specify start="50" then the listing items will starting with 50.

HTML5 reversed Attribute

<ol reversed="reversed" start="50">
           <li>Java</li>
            <li>HTML5</li>
            <li>PHP</li>
            <li>CSS3</li>
            <li>Joomla</li>
        </ol>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Display alexa rank in your website using php

This is very simple php scipt,it is used to display your website alexa rank in website.

Live DemoDownload Script


Replace url="your website url".
file_get_contents is used to read a file into a string.

Php alexa rank Code

<?php $url = file_get_contents('http://data.alexa.com/data?cli=10&dat=snbamz&url=http://codeinnovators.blogspot.in/'); ?>

Full Source Code

<?php

        $url = file_get_contents('http://data.alexa.com/data?cli=10&dat=snbamz&url=http://codeinnovators.blogspot.in/');
      
        //Alexa Rank
        preg_match('/\<popularity url\="(.*?)" text\="([0-9]+)" source\="panel"\/\>/si', $url, $matches);
        $globalrank = ($matches[2]) ? $matches[2] : 0;
       
        //Alexa Sites Linking in
        preg_match('/\<linksin num\="([0-9]+)"\/\>/si', $url, $cocok);
        $alexabacklinks = ($cocok[1]) ? $cocok[1] : 0;
       
        echo "Global Rank : ".$globalrank;
        echo "<br>";
        echo "Alexa Backlinks : ".$alexabacklinks;
        ?>

 

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Javascript empty function

In this article i am going to show how to clear contents in web page.Empty() is used remove the content of all particular elements like <div>,<p> etc.

Live DemoDownload Script


Step 1:
Need library file to perform empty action.Please copy and Paste below library file.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

jQuery Empty Function

<script>
        $(document).ready(function(){
          $("#removebtn").click(function(){ //button id
            $("#para").empty(); //div id
          });
        });
        </script>

HTML code for Javascript event

<div id="para" style="border:1px solid #ccc;height:160px;width:400px; padding:5px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining</div>
<button id="removebtn" style="background:#0099FF; border:none; height:25px; margin:5px; color:#fff; cursor:pointer">Run Empty Method</button>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Shake effect using CSS3

CSS Keyframes are used to create animations.There are many CSS3 animation methods available.In this article i am going to show how to add shake effect for text.

Live DemoDownload Script

CSS3 animation

/*for webkit browsers*/
@-webkit-keyframes shake {
    0% { -webkit-transform: translate(0px); }
    20% { -webkit-transform: translate(10px); }
    40% { -webkit-transform: translate(-10px); }
    51% { -webkit-transform: translate(6px); }
    70% { -webkit-transform: translate(-6px); }
    90% { -webkit-transform: translate(3px); }
    100% { -webkit-transform: translate(0px); }
}
/*for mozilla browser*/
@-moz-keyframes shake {
    0% { -moz-transform: translate(0px); }
    20% { -moz-transform: translate(10px); }
    40% { -moz-transform: translate(-10px); }
    51% { -moz-transform: translate(6px); }
    70% { -moz-transform: translate(-6px); }
    90% { -moz-transform: translate(3px); }
    100% { -moz-transform: translate(0px); }
}
.shake:hover {
    -webkit-animation: shake 0.7s;/*for webkit browsers*/
    -moz-animation: shake 0.7s;/*for mozilla browser*/
}

HTML code for disable right click

 <p class="shake">Codeinnovators</p>

The class name is used to set which animation you want.

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Submit a form without refreshing page using ajax and PHP

This is very simple function.Ajax is used to submit a form without refreshing page.

Live DemoDownload Script


Step 1:
    Need library function.Just copy and paste the below library file.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

jQuery Code

<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      
        var dataString = 'name='+ name + '&email=' + email;
       
        if(name=='')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show().html('<div class="notice" align="left">Please enter a name</div>');;
            $("#name").focus();
        }
        else if(email=='')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show().html('<div class="notice" align="left">Please enter a email address</div>');;
            $("#email").focus();
        }
        else if(reg.test(email) == false)
          {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show().html('<div class="notice" align="left">Please enter a valid email address</div>');;
                $("#email").focus();
          }
        else
        {
            $.ajax({
                type: "POST",
                url: "mail.php",
                data: dataString,
                success: function(){
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
            }
            });
        }
        return false;
        });
    });
    </script>

HTML form

<form method="post" name="form">
  <p>Name:
    <input id="name" name="name" type="text" />
  </p>
  <p>Email:
    <input id="email" name="email" type="email" required />
  </p>
  <span class="error" style="display:none; color:#FF0000"> Please enter valid data</span> <span class="success" style="display:none;color:#33CC66"> Thank You.Your mail has been sent successfully.</span>
  <p>
    <input type="submit" name="submit" value="Submit" class="submit"/>
  </p>
</form>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Disable right click on image using jQuery

In this article i am going to explain how to disable right click on image using jQuery.Disable right click function is used to avoid copying images,websites and codes.

Live DemoDownload Script


contextMenu is used to trigger contextMenu with right-click, left-click, hover or own custom trigger events.
   
    Step 1:
    Need library function.Just copy and paste the below library file.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

jQuery Function

$(function() {
        $('img').bind("contextmenu", function() { //It works for all img tags.
            return false
        });
    });

HTML code for disable right click

 <img src="your-img.jpg" alt="img" />

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Preview Image before upload using jQuery

In this article i am going to explain how to Preview Image before upload using jQuery.I have used html file upload method in this example.This preview image before upload method is very useful to see uploaded image is correct or not.

Live DemoDownload Script

FileReader() is used to read the contents of a file.

jQuery Function

function showimagepreview(input) {
      
            if (input.files && input.files[0]) {
                var reader = new FileReader();
      
                reader.onload = function (e) {
                    $('#imgview').attr('src', e.target.result);
                }
  
            reader.readAsDataURL(input.files[0]);
            }
    }

onload() function is used to execute javascript after page load is finished.
attr is used to set values of select elements.
target is used to returns the element that triggered the event.

HTML file upload

<form name="imageupload" action="#" enctype="multipart/form-data">
  <input type="file" name="imgupload" id="imgupload" onChange="showimagepreview(this);" />
</form>

Preview image before upload

<img id="imgview" style="max-width: 160px; max-height: 120px; border: 1px solid #ccc;"/>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Add style for html5 placeholder using CSS

Placeholder:
The placeholder is used to specifies a short hint for an input field.It is new HTML5 tag.

Let's take a look how to add style for placeholder.

Syntax

<input placeholder="Your Text goes Here"/>

Live DemoDownload Script

CSS

#input::-webkit-input-placeholder {
            color:#09F;
        }
        #input:-moz-placeholder { /* Firefox 18 and older */
                color:#09F;
        }
        #input::-moz-placeholder {  /* Firefox 19+ */
                color:#09F;
        }
        #input:-ms-input-placeholder {
                color:#09F;
        }

HTML File

<input type="text" id="input" placeholder="Name"/>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Download file after form submit in PHP

In this article i am going to explain how to download after form submitted in PHP.There are two ways available to download file using php.In this example i have used both methods.

1.Using PHP
2.Using Javascript and meta tag.

Live DemoDownload Script

readfile() is used to Outputs a file.

PHP Function

$file="test.zip";
        header('Content-type:  application/zip');
        header('Content-Length: ' . filesize('test.zip'));
        header("Content-Disposition: attachment; filename='test.zip'");
        readfile($file);

Javascript function

<script>
    $(document).ready(function(){
      window.setTimeout(function(){
        window.location = 'test.zip';
      }, 1500);
    });
    </script>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Show or Hide Password using jQuery

In this post i want to explain how to Show or Hide Password using jQuery.In this example i have used show() and hide() methods.This method is very useful to check wheather entered password correct or not.

Live DemoDownload Script

Before that we need to include jQuery Library file.Copy and Paste the following URL.
Library File:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>

jQuery Function

 <script type="text/javascript">
    $(function () {
        $('#show').hide();
      
            $('#btn').click(function () {
                var txt = $('#btn').val()
                var pwd = $('#hide').val();
                if (pwd.length > 0) {
                    if (txt == 'Show Password') {
                        $(this).val('Hide Password');
                        $('#show').val($('#hide').val());
                        $('#show').show();
                        $('#hide').hide();
                        return false;
                    }
                else if (txt == 'Hide Password') {
                    $(this).val('Show Password');
                    $('#show').hide();
                    $('#hide').show();
                    return false;
                }
            }
            else {
                    alert('Plese Enter Password');
                    return false;
                }
        });
    })
</script>

HTML File

<form>
          <div> <b>Enter Password: </b>
            <input type="password" id="hide" />
            <input type="text" id="show" />
            <input type="button" id="btn" value="Show Password" />
          </div>
     </form>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Display current time on webpage using Javascript

In this post i want to explain how to Display current time on webpage using Javascript.In this example i have used date and toLocaleTimeString methods.

toLocaleTimeString:
Return the time portion of a Date object as a string, using locale conventions.

Date():
The Date object lets us work with dates.

A date consists of a year, a month, a week, a day, a minute, a second, and a millisecond.

Date objects are created with the new Date() constructor.

There are 4 ways of initiating a date:
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

setTimeout:
Display an alert box after xx seconds

Live DemoDownload Script

Before that we need to include jQuery Library file.Copy and Paste the following URL.
Library File:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>

jQuery Function

<script type="text/javascript">
            function ShowTime() {
                var dt = new Date();
                document.getElementById("time").innerHTML = dt.toLocaleTimeString();
                window.setTimeout("ShowTime()", 1000); // Here 1000(milliseconds) means one 1 Sec
            }
        </script>

HTML File

<label id="time" style=" font-weight:bold"></label>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Useful Animation jQuery CSS3 Examples

1.CSS/SVG Animated Circles

More Info

2.Endless jQuery Gallery Animation

More Info

3.Drawing Advanced animation path

More Info

4.CSS3 Parallax Fighter Jet Animation from MySkins Studio

More Info

5.CSS3 Flat Circle/Round Icon Animation

More Info

6.Animating with setTimeout

More Info

7.jquery animation effect

More Info

8.Earth orbit CSS animation

More Info

9.CSS3 Animated Bird Fly

More Info

10.CSS3 Atom Animation

More Info

11.CSS jQuery 3D Solar System

More Info

12.Pure Animated CSS birthday cake

More Info