Coding

Mar 10

Perspective CSS3 Shadow Effect

By Vidal de Wit Coding, CSS, Playground No Comments

With CSS you can add shadow to text and other html elements. In this example you will learn about the following css properties: text-shadow; box–shadow and transform.

Jan 19

Love1

Google Maps Places API Nearby (Example)

By Vidal de Wit Coding, Javascript, Playground No Comments

Nearby App Example of Google Maps Places API to find different places like ATM, Restaurant, Airport etc nearby you. (with full source-code)

<html>
<head>
    <title>Google Maps Places API Nearby Example</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    $(document).ready(function(){
        // type_holder
        // <div><label><input type="checkbox" class="types" value="mosque" />Mosque</label></div>

        var types = ['accounting','airport','amusement_park','aquarium','art_gallery','atm','bakery','bank','bar','beauty_salon','bicycle_store','book_store','bowling_alley','bus_station','cafe','campground','car_dealer','car_rental','car_repair','car_wash','casino','cemetery','church','city_hall','clothing_store','convenience_store','courthouse','dentist','department_store','doctor','electrician','electronics_store','embassy','fire_station','florist','funeral_home','furniture_store','gas_station','gym','hair_care','hardware_store','hindu_temple','home_goods_store','hospital','insurance_agency','jewelry_store','laundry','lawyer','library','liquor_store','local_government_office','locksmith','lodging','mel_delivery','meal_takeaway','mosque','movie_rental','movie_theater','moving_company','museum','night_club','painter','park','parking','pet_store','pharmacy','physiotherapist','plumber','police','post_office','real_estate_agency','restaurant','roofing_contractor','rv_park','school','shoe_store','shopping_mall','spa','stadium','storage','store','subway_station','synagogue','taxi_stand','train_station','transit_station','travel_agency','university','veterinary_care','zoo'];
        var html = '';

        $.each(types, function( index, value ) {
            var name = value.replace(/_/g, " ");
            html += '<div><label><input type="checkbox" class="types" value="'+ value +'" />'+ capitalizeFirstLetter(name) +'</label></div>';
        });

        $('#type_holder').html(html);
    });

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    var map;
    var infowindow;
    var autocomplete;
    var countryRestrict = {'country': 'in'};
    var selectedTypes = [];

    function initialize()
    {
        autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')), {
            types: ['(regions)'],
           // componentRestrictions: countryRestrict
        });

        var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

        map = new google.maps.Map(document.getElementById('map'), {
            center: pyrmont,
            zoom: 12
        });
    }

    function renderMap()
    {
        // Get the user defined values
        var address = document.getElementById('address').value;
        var radius  = parseInt(document.getElementById('radius').value) * 1000;
        
        // get the selected type
        selectedTypes = [];
        $('.types').each(function(){
            if($(this).is(':checked'))
            {
                selectedTypes.push($(this).val());
            }
        });

        var geocoder    = new google.maps.Geocoder();
        var selLocLat   = 0;
        var selLocLng   = 0;

        geocoder.geocode({'address': address}, function(results, status) {
            if (status === 'OK')
            {
                //console.log(results[0].geometry.location.lat() + ' - ' + results[0].geometry.location.lng());

                selLocLat   = results[0].geometry.location.lat();
                selLocLng   = results[0].geometry.location.lng();

                //var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

                var pyrmont = new google.maps.LatLng(selLocLat, selLocLng);

                map = new google.maps.Map(document.getElementById('map'), {
                    center: pyrmont,
                    zoom: 11
                });

                //console.log(selectedTypes);

                var request = {
                    location: pyrmont,
                    //radius: 5000,
                    //types: ["atm"]
                    radius: radius,
                    types: selectedTypes
                };

                infowindow = new google.maps.InfoWindow();

                var service = new google.maps.places.PlacesService(map);
                service.nearbySearch(request, callback);
            }
            else
            {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function callback(results, status)
    {
        if (status == google.maps.places.PlacesServiceStatus.OK)
        {
            for (var i = 0; i < results.length; i++)
            {
                createMarker(results[i], results[i].icon);
            }
        }
    }

    function createMarker(place, icon) {
        var placeLoc = place.geometry.location;

        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: {
                url: icon,
                scaledSize: new google.maps.Size(20, 20) // pixels
            },
            animation: google.maps.Animation.DROP
        });
        
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name+ '<br>' +place.vicinity);
            infowindow.open(map, this);
        });
    }
    </script>
</head>
<body>

<div style="float: right;">
    <div id="map" style="width:900px; height:600px;"></div>
</div>

<div style="float: left; width: 400;">
    <form name="frm_map" id="frm_map">
        <table>
            <tr>
                <th>Address</th>
                <td>
                    <input type="text" name="address" id="address" value="Akersloot, Netherlands">
                </td>
            </tr>
            <tr>
                <th>Radius</th>
                <td>
                    <input type="text" name="radius" id="radius" value="5" placeholder="In KM">
                </td>
            </tr>
            <tr>
                <th>Types</th>
                <td>
                    <div id="type_holder" style="height: 200px; overflow-y: scroll;">
                        <!-- Dynamic Content -->    
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Show" id="submit" onclick="renderMap();">
                    <input type="reset" value="Reset">
                </td>
            </tr>
        </table>
    </form>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCU6bsx-PLT5fW02T5GeiwA8cOOY7l2rU4&libraries=places&callback=initialize" async defer></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<html>

<head>

<title>Google Maps Places API Nearby Example</title>

$(document).ready(function(){

// type_holder

// <div><label><input type="checkbox" class="types" value="mosque" />Mosque</label></div>

var types = ['accounting','airport','amusement_park','aquarium','art_gallery','atm','bakery','bank','bar','beauty_salon','bicycle_store','book_store','bowling_alley','bus_station','cafe','campground','car_dealer','car_rental','car_repair','car_wash','casino','cemetery','church','city_hall','clothing_store','convenience_store','courthouse','dentist','department_store','doctor','electrician','electronics_store','embassy','fire_station','florist','funeral_home','furniture_store','gas_station','gym','hair_care','hardware_store','hindu_temple','home_goods_store','hospital','insurance_agency','jewelry_store','laundry','lawyer','library','liquor_store','local_government_office','locksmith','lodging','mel_delivery','meal_takeaway','mosque','movie_rental','movie_theater','moving_company','museum','night_club','painter','park','parking','pet_store','pharmacy','physiotherapist','plumber','police','post_office','real_estate_agency','restaurant','roofing_contractor','rv_park','school','shoe_store','shopping_mall','spa','stadium','storage','store','subway_station','synagogue','taxi_stand','train_station','transit_station','travel_agency','university','veterinary_care','zoo'];

var html = '';

$.each(types, function( index, value ) {

var name = value.replace(/_/g, " ");

html += '<div><label><input type="checkbox" class="types" value="'+ value +'" />'+ capitalizeFirstLetter(name) +'</label></div>';

});

$('#type_holder').html(html);

});

function capitalizeFirstLetter(string) {

return string.charAt(0).toUpperCase() + string.slice(1);

}

var map;

var infowindow;

var autocomplete;

var countryRestrict = {'country': 'in'};

var selectedTypes = [];

function initialize()

{

autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')), {

types: ['(regions)'],

// componentRestrictions: countryRestrict

});

var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

map = new google.maps.Map(document.getElementById('map'), {

center: pyrmont,

zoom: 12

});

}

function renderMap()

{

// Get the user defined values

var address = document.getElementById('address').value;

var radius = parseInt(document.getElementById('radius').value) * 1000;

// get the selected type

selectedTypes = [];

$('.types').each(function(){

if($(this).is(':checked'))

{

selectedTypes.push($(this).val());

}

});

var geocoder = new google.maps.Geocoder();

var selLocLat = 0;

var selLocLng = 0;

geocoder.geocode({'address': address}, function(results, status) {

if (status === 'OK')

{

//console.log(results[0].geometry.location.lat() + ' - ' + results[0].geometry.location.lng());

selLocLat = results[0].geometry.location.lat();

selLocLng = results[0].geometry.location.lng();

//var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

var pyrmont = new google.maps.LatLng(selLocLat, selLocLng);

map = new google.maps.Map(document.getElementById('map'), {

center: pyrmont,

zoom: 11

});

//console.log(selectedTypes);

var request = {

location: pyrmont,

//radius: 5000,

//types: ["atm"]

radius: radius,

types: selectedTypes

};

infowindow = new google.maps.InfoWindow();

var service = new google.maps.places.PlacesService(map);

service.nearbySearch(request, callback);

}

else

{

alert('Geocode was not successful for the following reason: ' + status);

}

});

}

function callback(results, status)

{

if (status == google.maps.places.PlacesServiceStatus.OK)

{

for (var i = 0; i < results.length; i++)

{

createMarker(results[i], results[i].icon);

}

function createMarker(place, icon) {

var placeLoc = place.geometry.location;

var marker = new google.maps.Marker({

map: map,

position: place.geometry.location,

icon: {

url: icon,

scaledSize: new google.maps.Size(20, 20) // pixels

animation: google.maps.Animation.DROP

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.setContent(place.name+ '<br>' +place.vicinity);

infowindow.open(map, this);

});

}

</script>

</head>

<body>

</div>

<table>

<tr>

<th>Address</th>

<td>

</td>

</tr>

<tr>

<th>Radius</th>

<td>

</td>

</tr>

<tr>

<th>Types</th>

<td>

</div>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

Preview on CodePen.io

Jan 19

Love0

Etsy API Search with jQuery (Example)

By Vidal de Wit Coding, Playground No Comments

Playing around t with Etsy API. Here’s a working example of how to make a simple search request to the Etsy API with jQuery.

<html>
<head>
<title>Etsy Search</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function($){

    $(document).ready(function(){
        $('#etsy-search').bind('submit', function() {
            api_key = "mwj5r3fjh7qfignyned2qmmx";
            terms = $('#etsy-terms').val();
            etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+
                terms+"&limit=12&includes=Images:1&api_key="+api_key;

            $('#etsy-images').empty();
            $('<p></p>').text('Searching for '+terms).appendTo('#etsy-images');

            $.ajax({
                url: etsyURL,
                dataType: 'jsonp',
                success: function(data) {
                    if (data.ok) {
                        $('#etsy-images').empty();
                        if (data.count > 0) {
                            $.each(data.results, function(i,item) {
                                $("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap(
                                    "<a href='" + item.url + "'></a>"
                                );
                                if (i%4 == 3) {
                                    $('<br/>').appendTo('#etsy-images');
                                }
                            });
                        } else {
                            $('<p>No results.</p>').appendTo('#etsy-images');
                        }
                    } else {
                        $('#etsy-images').empty();
                        alert(data.error);
                    }
                }
            });

            return false;
        })
    });

})(jQuery);
</script>
</head>
<body>
    <form id="etsy-search">
        <input id="etsy-terms" size="32">
        <button>Search!</button>
    </form>

    <div id="etsy-images"></div>
</body>
</html>

<html>

<head>

<title>Etsy Search</title>

(function($){

$(document).ready(function(){

$('#etsy-search').bind('submit', function() {

api_key = "mwj5r3fjh7qfignyned2qmmx";

terms = $('#etsy-terms').val();

etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+

terms+"&limit=12&includes=Images:1&api_key="+api_key;

$('#etsy-images').empty();

$('<p></p>').text('Searching for '+terms).appendTo('#etsy-images');

$.ajax({

url: etsyURL,

dataType: 'jsonp',

success: function(data) {

if (data.ok) {

$('#etsy-images').empty();

if (data.count > 0) {

$.each(data.results, function(i,item) {

$("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap(

"<a href='" + item.url + "'></a>"

);

if (i%4 == 3) {

$('<br/>').appendTo('#etsy-images');

}

});

} else {

$('<p>No results.</p>').appendTo('#etsy-images');

}

} else {

$('#etsy-images').empty();

alert(data.error);

}

});

return false;

})

});

})(jQuery);

</script>

</head>

<body>

<button>Search!</button>

</form>

</body>

</html>

Preview and Edit on Codepen.io

Oct 17

Love0

Best Code Editors for Front-end Developers

By Vidal de Wit Coding, Tools No Comments

A curated list of popular code editors for front-end developer.

Oct 17

Love0

Top Bootstrap Widget Components add-ons

By Vidal de Wit Coding, CSS No Comments

Must-have Bootstrap widgets/components extensions that enhances and extends Twitter Bootstrap for effective development with the framework. Bootstrap video player – jQuery plugin: A customizable HTML5 video player plugin for jQuery…

Oct 17

Love0

Top Workflow Tools for Front-end Developers

By Vidal de Wit Coding No Comments

A curated list of workflow tools for front-end developers to speed up our existing workflow processes and take it to the next level. If you want to contribute, please comment and your…

Jan 31

Love0

Speed up your site load time to meet expectations of visitors and search engines

By Vidal de Wit Coding No Comments

How to speed up your site to meet the expectations of visitors and search engines. Below you will find a list of tools to help you measure your site’s speed…

Jan 30

Love0

Front-end performance for front-end developers and web designers

By Vidal de Wit Coding No Comments

It’s hard, if not impossible, to deny that performance is by far one of the most critical aspects of any decent web project, be it a small portfolio site, a mobile-first web…

Apr 11

Love0

Hammer.js JavaScript library for multi-touch gestures

By Vidal de Wit Coding No Comments

Hammer.js is a lightweight (only 2kb) JavaScript library for multi-touch gestures. It’s easy implementation of touch events in your website. The gestures supported by Hammer.js are: tap, double tap, hold,…

Apr 11

Love0

Animated Responsive Layout with CSS3 Media Queries

By Vidal de Wit Coding No Comments

What Are Media Queries CSS3 brings us many new features we use for our web designs and one of the features that can help improve the web site usability is Media Queries….

Apr 03

Love0

PanoJS3 Javascript panoramic panning and zooming widget

By Vidal de Wit Coding No Comments

PanoJS3 – An interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much…

Mar 30

Love0

Web developers go mobile by mastering new development skills (Dutch Mobile Conference)

By Vidal de Wit Coding No Comments

Web developers go mobile by mastering new development skills Amsterdam, March 13, 2012 — The first Dutch Mobile Conference (DMC), June 7, 8 & 9 in Amsterdam, will help developers create their…

Aug 24

Love0

Learning HTML, CSS, and Javascript from the Ground Up

By Vidal de Wit Coding No Comments

Are you looking for a basic understanding of how UIs are created on the web or who wants to brush up outdated UI development knowledge? Or maybe you’d like to…

Aug 19

Love0

Create Pure CSS Icons using just CSS and semantic HTML

By Vidal de Wit Coding, Mobile No Comments

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a…

Aug 19

Love0

Make your website faster with Optimizing JavaScript code

By Vidal de Wit Coding No Comments

Recommended experience: Working knowledge of JavaScript Client-side scripting can make your application dynamic and active, but the browser’s interpretation of this code can itself introduce inefficiencies, and the performance of…

Aug 18

Love0

Improve web standards support and accessibility in html emails

By Vidal de Wit Coding No Comments

Web standards are so important for email, while working with email client developers to ensure that emails render consistently. The Email Standards Project is about working with email client developers…

Aug 18

Love0

Building native cross platform applications with JavaScript and jPath

By Vidal de Wit Coding No Comments

jPath is a platform for developing cross – platform native applications using JavaScript and HTML. Project is in “pre-alpha” state, so don’t expect to see very descriptive information on this…

Oct 22

Love0

Doctype TV is the show for people who make websites.

By Vidal de Wit Coding No Comments

Doctype is the show for people who make websites. Whether you’re a designer that wants to learn some coding or a developer that thinks everything they make looks like crap,…

Aug 12

Love0

How to create a Lightbox without javascript

By Vidal de Wit Coding No Comments

I recently came across a solution on CSSPlay for a JavaScript free lightbox that uses invalid markup. So, being a sucker for a challenge, I set myself the task of creating…

Jul 04

Love0

Increase site speed will improve your Google page ranking

By Vidal de Wit Coding No Comments

Site speed reflects how quickly a website responds to web requests. Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create…

Perspective CSS3 Shadow Effect

Google Maps Places API Nearby (Example)

Etsy API Search with jQuery (Example)

Best Code Editors for Front-end Developers

Top Bootstrap Widget Components add-ons

Top Workflow Tools for Front-end Developers

Speed up your site load time to meet expectations of visitors and search engines

Front-end performance for front-end developers and web designers

Hammer.js JavaScript library for multi-touch gestures

Animated Responsive Layout with CSS3 Media Queries

PanoJS3 Javascript panoramic panning and zooming widget

Web developers go mobile by mastering new development skills (Dutch Mobile Conference)

Learning HTML, CSS, and Javascript from the Ground Up

Create Pure CSS Icons using just CSS and semantic HTML

Make your website faster with Optimizing JavaScript code

Improve web standards support and accessibility in html emails

Building native cross platform applications with JavaScript and jPath

Doctype TV is the show for people who make websites.

How to create a Lightbox without javascript

Increase site speed will improve your Google page ranking

Recent Posts Extra

Recent Jobs

Coding

Recent Posts Extra

Recent Jobs

Tags