Jquery Add to Cart Fly ala Prestashop

Hi haloo,
On this post I will share an amazing Add to Cart jquery animation which use by Prestashop.
For an e-commerce website, it can mean a better shopping experience for customers where they can easy to use, beautiful animation which make the site more interesting, so they can concentrate more on the products which may result in better sales.

Ok, Now I will let you know how the basic of the source.
1. We make a Html file with code below

<table cellpadding="0" cellspacing="0">

    <tr>
     <td width="400px">
         <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
            <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
        </td>
        <td width="100px" valign="top">
         <div id="shoppingCart">
          <h3>Shopping Cart</h3>
            </div>
        </td>
    </tr>
</table>

2. Include the javascript code below your html code

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".addCart").click(function(){
 var imgsrc = $(this).parent().parent().children(".image").children().attr('src');
 var imgpos = $(this).parent().parent().children(".image").children().position();
 var imgsrcstyle = "position:absolute;opacity:0.8;display:none;left:"+imgpos.left+"px;top:"+imgpos.top+"px;z-index:99999;";
 var this_parent = $(this).parent();
  
 // Ajax request
 $.ajax({
     type: "POST",
     url: "update.php",
     data: ({id:'2'}),
     dataType: "json",
     cache: false,
     success: function(result){
  if(result['status'] == 'true'){
     // make clone image
     this_parent.append('<img src="'+imgsrc+'" style="'+imgsrcstyle+'" class="cloned" />');
     
     // call animate fly
     fly(result);
  } else {
     alert('Failed add product to cart');
  }
      }
 });   
});
 
function fly(result){
 var box = $('#shoppingCart').position();
 $(".cloned").show().animate({ "opacity": 0.2,"top":(box.top + 20),"left":(box.left + 20),"width":10},1500,function(){
    $(this).remove();
   
    // update action
    alert('yay success!');
 }); 
}
 
});
</script>

For the complete source you can download here.
Hope it can help you guys.

Best regard,
Bayu Prawira

Jquery Image Slide on Hover

Hello,
In this post I will share  about  a simple jquery to animate an image when hovering. basically it is using jQuery’s animate() effect. I will use this effect to make transaction when hovering the image.
Let's looks the demo in the url below :
Jquery Image Slide

Ok, I begin with html code :

<div id="vertical" class="clear">
    <!-- Vertical -->
    <h2>jQuery image slide on hover effect (vertical)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>
<div id="horizontal" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (horizontal)</h2>
    <div><a href="#"><img src="image-4.jpg" alt="" /></a></div>
    <div><a href="#"><img src="image-5.png" alt="" /></a></div>
</div>
<div id="easeOutBounce" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (easeOutBounce)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>

We have 3 main div contain image links. each image has two face, maybe it will easier when you look image below :

image-1.jpg

  


image-2.jpg

Then defined simple jquery.imageslide.js to make it work, you can download full source Jquery Image Slide.

jquery.imageslide.js has 3 transaction type (vertical, horizontal,easeOutBounce) and you can use it with multiple images

Now you can set up the property of image slide as below:

<script type="text/javascript">
        $(document).ready(function(){
            $('#vertical div a').imgslide({
                width: 296,
                height: 130,
                animate : "vertical",
                duration : 300
            });
            $('#horizontal div a').imgslide({
                animate : "horizontal",
                duration : 300
            });
            $('#easeOutBounce div a').imgslide({
                animate : "easeOutBounce",
                duration : 800
            });
        });
    </script>

Run your code, it will work like a charm ^^.
That's all, hope it useful

Best regard,
Bayu Prawira

Get original size of image ( Jquery )

Hi buddy, Today I will share a short code to get original size of image on page that has been resized to fit in a div. It usually needed when you make photo gallery with thumbnail images. Ok, here we go, Lets look for the demo
 

Width: x Height:

 

Then look for the code, 
We will take the original size of image by using Jquery.  
Defined the jquery in your head container
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Html code of image:

  <html>
     <head>
          // Defined Jquery
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

     </head>
     <body>
         <div id="myimg">
             <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
         </div>
     </body>
  </html> 

And below is the code to get original size of image:

$(document).ready(function(){
    var img = new Image();
    img.onload = function() {
        alert("width:"+this.width+" x Height:"+this.height;
    }
    img.src = $('#myimg img').attr('src');
});

Include get original size of image code in html:

  <html>
     <head>
          // Defined Jquery
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          
          // Get original size code
          <script type="text/javascript">
               $(document).ready(function(){
                   var img = new Image();
                   img.onload = function() {
                       alert("width:"+this.width+" x Height:"+this.height;
                   }
                   img.src = $('#myimg img').attr('src');
               });
          </script>
     </head>
     <body>
         <div id="myimg">
             <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
         </div>
     </body>
  </html> 

Well done,
hope it will help,
Thank you for visit my blog,
If you have any question, just write comment below.

Best Regard,
Bayu Prawira

Simple Multiple Marker, Calculation Route, Custom Marker on Google Map

Hi Hallo, ,
Today I will share some code to make simple multiple marker on Google map. This code will show a google map in your web page with a place marker base on your locations. You can also custom the icon marker by yourself and active or inactive the calculation route.

Ok, You can see for the demo below:

So now, we start the code,
1. First we must define our code with google map api and jquery

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

2. Copy paste code below, make sure the code between <head>{your script}</head>

<script type="text/javascript">
 var map;
 var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
 var global_markers = [];

// Represent your location here    
 var markers = [[-8.580467, 115.163001, 'My Home - Kekeran, Mengwi, Bali'],[-8.724085,115.180407,'Office - Simpang siur, Kuta, Bali']];

 var infowindow = new google.maps.InfoWindow({});

 function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true});
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-8.580467, 115.163001);
  var myOptions = {
   zoom: 11,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  directionsDisplay.setMap(map);
  

  // if you don't want to use  calculation route, inactive calcRoute() function

// and call addMarker() here 

calcRoute(); 

  }

 function addMarker() {
  for (var i = 0; i < markers.length; i++) {
   // obtain the attribues of each marker
   var lat = parseFloat(markers[i][0]);
   var lng = parseFloat(markers[i][1]);
   var trailhead_name = markers[i][2];

   var myLatlng = new google.maps.LatLng(lat, lng); 

   // customize the content buble here

   var contentString = "<html><body><div><h2>" + trailhead_name + "</h2></div></body></html>";

   // customize icon marker here

   var icon_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmdVDVsRgbZXd4aoyhWNjP2px16J4nwpvLym4MrMLWEyzGBiTDRe_NDQHL5FU4QYJow0iN_WehzhIbReVMB6enMGtO1kb-xHTDEi83Rcp9RMh1k_Cb5SdqYoFQHCWYZBvrDpvB_Ta2l77/s1600/location.png";

   var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon_img,
    title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
   });

   marker['infowindow'] = contentString;

   global_markers[i] = marker;

   google.maps.event.addListener(global_markers[i], 'click', function() {
    infowindow.setContent(this['infowindow']);
    infowindow.open(map, this);
   });
  }
 }

 function calcRoute() {

        start  = new google.maps.LatLng(-8.580467, 115.163001);
        end = new google.maps.LatLng(-8.724085, 115.180407);
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
     addMarker();
   }
  });
    }

 window.onload = initialize;
</script>

3. Add new css for map (in <head> container)

<style type="text/css">
 #map_canvas{
    width: 400px;
    height: 300px;
 }
</style>

4. Then the last step, create the html code

<div id="map_canvas"></div>

Ok well done, save your file and try to run it.
Download complete source here
Hope it usefull, if there any question, just write your comment below.
I will replay asap ^^

Best regard,
Bayu Prawira

Add element li by using jQuery ( After & Before)

Hello everybody, , :D

Ok, as my title above, today I will share about how to add new element li by using jQuery (after & before). It is possible for you to add new element li with position like you want. So you don't need to make many code for simple task.

This way the code :

## before 

$(".byweb2").before("<li>Added Test before Test 2</li>"); 

## after

$(".byweb2").after("<li>Added Test before Test 2</li>");

You can download the complete code Klik Here
If you have any question, just write your comment below.
I will try to help you as my best :)

Warm regard from Bali Island

Replace All Space or X character in Javascript

Hi guys,
Today I will share a little something about Javascript.

It is small thing but I think it is really - really  important, because I have confused about it before :D.
It is about how to remove or replace all of space or x character on your string using Javascript.
I suggest you to use this way, for example :

var bywebs = "1,2,3,4,5,6,7,8,9";
bywebs = bywebs .replace(new RegExp(',', "g"),' '); // it will replace all "," with "(space)"

// result 1 2 3 4 5 6 7 8 9

Ok, this is a simple way, but very helpfull :)
Hope it can helps you.

Warm greeting from Bali

Auto Request and Manage Json Data

Hello, ,
Today I have got a new knowledge from programming website.
This is about data-interchange format. Did you ever hear about JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.( you can read more in www.json.org ).

This is example of json data :

{"name":"bywebs.blogspot.com","time":"12 : 20 : 56"}

And now I will make a tutorial to auto request and manage json data every x seconds. But in this tutorial I will use a jquery script (jquery-1.6.1.min.js).

Let's see for my code :

<script type="text/javascript">

    var auto_refresh = setInterval(function(){ // interval auto refresh
 
        $.getJSON("json.php", function(json) { // request method using jquery

                                               // json.php will return json data

            // parsing data

            var table = '';

            table += '<tr><td>Name</td>';

            table += '<td>'+json['name']+'</td></tr>';

            table += '<tr><td>Server Time</td>';

            table += '<td>'+json['time']+'</td></tr>';

            

            //inser data to Id bywebs

            document.getElementById('bywebs').innerHTML = table;


         });

     }, 5000); // will request json every 5 seconds, you can change it

</script>

You can develop this code by yourself.
so for the complete code you can "Download here".

Hope it useful for all, if you have any question and suggestions, just write your comment below. :)

Good Luck.

Make Confirm Dialog Javascript

Hello every body,
When the first time I learned javascript code, I was really happy when I succeed to make pop up dialog, :D
And now I will share a simple code to make a confirmation dialog before you do the actions.
I have some ways, but the simple one is:

<a href="http://bywebs.blogspot.com" onClick="return confirm('Do you realy want to visit my website?');"> My Website </a>

Demo

My Website

Beside that I also have the second way, but it will use a function.
Let's take a look

<script type="text/javascript">
    function _confirm(url){
        if(confirm('Do you realy want to show my link?')){
            document.getElementById('myDiv').innerHTML = "<a href='"+url+"'> My Website</a>";
        }
    }
</script>

<a onClick="_confirm('http://bywebs.blogspot.com');">show my link</a>
<div id="myDiv"></div>

Demo

show my link

That's all :).
Hope it will useful, if you have any question , just write your comment below.
Thanks and Good luck

Slide up down (Toggle Slide) using jquery

Hello everybody,
Now I will share how to make slide up and down (toggle slide) using jquery.
And this is for the demo, check it out :

- Category

List Category 1

List Category 2

List Category 3

Ok, Let's take look for the code:

    I just use a jquery script (jquery-1.6.1.min.js) and a simple script to call toggle jquery

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
         //$(".block-t-content").hide(); just active this if u want hide for default
         $("#bywebs").click(function(){
            $(this).toggleClass("active").next().slideToggle("slow");
            return false;
        });
    });
</script>

    This is my css code:

<style type="text/css">
#content {
    border:1px solid #c5c5c5;
    width:200px;
    margin:0px 5px;
    border-radius:4px;
}
#main {
    background:#c5c5c5;    
}
</style>

And the last is my html code :

<div id="content">       
    <div id="bywebs">
        <div id="main">- Category</div>
    </div>
    <div class="block-t-content">
        <div class="block">
            <div>List Category 1</div>
            <div>List Category 2</div>
            <div>List Category 3</div>
        </div>
    </div>
</div>

Finished!!That's all.
For the complete file, you can download in this link 'Download Toggle slide'
Hope it useful for all, if you have any question, you can write your comment below :)

Good Luck :)

Add and Remove table row (javascript).

Hi everyone,
Now I will share a simple script how to Add and Remove table row by javascript.
exactly it was my problem before, it made me very confused because sometime when it work, it removed wrong row, so oh god . . .
But now I have fixed it.

I have a table with some task,

When we click delete button, it will delete the right row and if we click add button it will automatically add new row on the last of table.
Look for the script below :

#javascript

<script type="text/javascript">
    function remove(id){
        // initial variable
        var table = document.getElementById('schedule'); // get table id
        var rows = table.getElementsByTagName('tr'); // get all table rows
        var target = id; // row will remove
        var j = 1;
        
        for(i=0;i<rows.length;i++,j++){
            if(rows[i].id==target){
                table.deleteRow(i); 
                i--;
            }else{
                j--;
            }
        }
    }
    
    function add(){
        var table = document.getElementById('schedule'); // get table id
        var lastRow = table.getElementsByTagName('tr').length; // get last row
        var newId = lastRow+1; // make new id
        
        var row = document.getElementById('schedule').insertRow(lastRow); // create row
        row.setAttribute('id','task'+newId); // insert row id
        
        var cell0 = row.insertCell(0);// create cell 1
        var cell1 = row.insertCell(1);// create cell 2
        cell0.innerHTML = 'Task '+newId+' - Default'; // insert data cell 1
        cell1.innerHTML = '<a style="cursor:pointer;" onClick="remove(\'task'+newId+'\');" >X</a>';// insert data cell 2
    }
</script>

#HTML script

<table cellpadding="0" cellspacing="0" width="300" border="1" id="schedule">
<?php
 for($i=1; $i<5; $i++){
?>
  <tr id="task<?php echo $i; ?>">
            <td>Task <?php echo $i; ?> - Default</td>
            <td><a style="cursor:pointer;" onClick="remove('task<?php echo $i; ?>');" >X</a></td>
        </tr>
<?php
 }
?>
</table>
<input type="button" onClick="add();" value="add" /> 

Hope it useful for all, if you have question, just write your comment below.

Good luck :)