Troubleshoot java, spring, hibernate, jquery, java script, bootstrap: 2015

Responsive Flip Card – New and attractive design for grid systems using bootstrap and some simple css tricks and hacks.

By this you can show your content very beautifully when you have too much information to show to the user.

Note – This post is only to share for flipping the card, but you can add or customize the design of the tile according to your requirement.

Screen Shot for flip card

Import bootstrap.css, it is not required but I used it for columns and thumbnail, You can replace it with your own css framework.

I used Bootstrap for the 12-col grid. It helps us to keep the flip card responsive for any screen size and device.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

CSS Trick and hack for flipping the card. Please add following style sheet class to your page to take benefits of it.

CSS-

<style>

     .card-container:hover .card{

           -webkit-transform: rotateY( 180deg );

           -moz-transform: rotateY( 180deg );

           -o-transform: rotateY( 180deg );

           transform: rotateY( 180deg );

     }

     .card-container.static.hover .card {

           -webkit-transform: none;

           -moz-transform: none;

           -o-transform: none;

           transform: none;

     }

     /*BY this you can maintain the time for flipping the card*/

     .card {

           -webkit-transition: -webkit-transform .6s;

           -moz-transition: -moz-transform .6s;

           -o-transition: -o-transform .6s;

           transition: transform .6s;

           -webkit-transform-style: preserve-3d;

           -moz-transform-style: preserve-3d;

           -o-transform-style: preserve-3d;

           transform-style: preserve-3d;

           position: relative;

     }

     .front, .back {

           -webkit-backface-visibility: hidden;

           -moz-backface-visibility: hidden;

           -o-backface-visibility: hidden;

           backface-visibility: hidden;

           position: absolute;

           top: 0;

           left: 0;

           background-color: #FFF;

           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

     }

     .back {

           -webkit-transform: rotateY( 180deg );

           -moz-transform: rotateY( 180deg );

           -o-transform: rotateY( 180deg );

           transform: rotateY( 180deg );

           z-index: 4;

     }

     .card-container, .front, .back {

           width: 100%;

           height: 400px;

           border-radius: 4px;

     }



     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

           .front, .back{

                -ms-backface-visibility: visible;

                backface-visibility: visible;

          }



          .back {

                visibility: hidden;

                -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);

          }

           .front{

                z-index: 4;

           }

           .card-container:hover .back{

                z-index: 5;

                visibility: visible;

           }

     }

     </style>

Here I used container, row and col-md-4 from bootstrap which is generally used for responsive grid system. I also used thumbnail class which is again from bootstrap.css

Card has two views one is front and another back.

HTML-

<div class="container">

     <div class="row">

           <div class="col-md-4">

                <div class="card-container">

                     <div class="card">

                           <div class="front thumbnail">

                                <img src="../cover_img.jpg">

                                <div class="caption">

                                     <h3>Thumbnail label</h3>

                                     <p>Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox..</p>

                                </div>

                           </div>

                           <div class="back thumbnail">

                                <div class="caption">

                                     <h3>Thumbnail label</h3>

                                     <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!...</p>

                                     <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>

                                </div>

                           </div>

                     </div>

                </div>

           </div>

     </div>

</div>

So, here we completed flip the card with simple html and some css3’s 3D rotating action. Rock your project with flip card effects. The users will be pleasantly surprised and appreciate your work, for sure!

You can get combined code from this link Get combined code here

Screen shot for cover map view with bootstrap

View Screen Shot

Start HTML with doc-type, title, meta-tags to take benefits of SEO

<html>

    <head>

    <title>Map View Example With bootstrap</title>

     <meta content="cover map, example, bootstrap, map view, marker, infowindow, list" name="keywords" >

    <meta content="Full screen map with marker and infowindow using bootstrap" name="description">

    <meta name="author" content="Guruprit Mukhraiya">

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Some css to make map covered to whole page and side bar for list want to show

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.navbar {
    margin-bottom: 0px;
}
#map {
    position:absolute; top:0px; bottom:0; margin:0; padding: 0;
}
#offer-ls {
    position:absolute; bottom:0; overflow-x: hidden; overflow-y: auto; right: 0;background:#fafafa;margin:0; padding: 0;top: 60px;    z-index: 2;
}
</style>
</code>

Header navigation using simple bootstrap

<div class="header">
    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="#" alt="Map View Example" class="img-responsive" style="height:45px;" /></a>
        </div>
    </div>
    </nav>
</div>

Body content as map and side bar list using bootstrap columns

<div class="row container-fluid">
    <div id="map" class="col-md-8"></div>

    <div id="offer-ls" class="col-md-4 pull-right">
        <div class="list-group">
            <div class="row list-group-item active">
                <div class="col-md-12">
                    <h4 class="list-group-item-heading">ABC</h4>
                    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit ultricies libero.</p>
                    <p>
                        <a class="btn btn-danger" href="/offer/viewOfferPage.htm?o_d=61&p_d=25">Show More</a>
                        <button class="btn btn-warning" type="button">View On Map</button>
                    </p>
                </div>
            </div>
            <div class="row list-group-item">
                <div class="col-md-12">
                    <h4 class="list-group-item-heading">XYZ</h4>
                    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit ultricies libero</p>
                    <p>
                        <a class="btn btn-danger" href="/offer/viewOfferPage.htm?o_d=61&p_d=25">Show More</a>
                        <button class="btn btn-warning" type="button">View On Map</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Scripts to initialize the google map and append it to your div, I have taken some sample location for example you can dynamically populate the locations or other properties according your requirement. Add Marker and info windows to that marker using below script

<script>

    function initMap() {
        var bounds = new google.maps.LatLngBounds();
        var locations = ["Shivaji Nagar, Pune", "MG Road, Pune", "Baner, Pune"];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: pune,
            mapTypeControl: false,
            streetViewControl: false,
            rotateControl: false,
            disableDefaultUI: true
        });
        var geocoder = new google.maps.Geocoder();
        var punewindow = new google.maps.InfoWindow({
                content: "Pune"
        });
        var pune = geocodeAddress(geocoder, map, "Pune", punewindow, bounds);
        $.each(locations, function( index, value ) {
            var infowindow = new google.maps.InfoWindow({
                content: value
            });
            geocodeAddress(geocoder, map, value, infowindow, bounds);
        });
    }

    function geocodeAddress(geocoder, resultsMap, address, infowindow, bounds) {
        geocoder.geocode({'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                position: results[0].geometry.location,
                title: 'Twitter'
            });
            marker.addListener('mouseover', function() {
                infowindow.open(resultsMap, marker);
            });
            marker.addListener('mouseout', function() {
                infowindow.close();
            });
            bounds.extend(marker.getPosition());
            resultsMap.fitBounds(bounds);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
    }
</script>

Import map script into your page 'v=3' attribute is used for version 3 for google map api's. if you are facing some issue with your map you can add this attribute in url and get it solved.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl2S6GxtDlYHCNJalZ255v3orh8xdgQZc&signed_in=false&callback=initMap&sensor=true&v=3"></script>

Bottom navigation using simple bootstrap with inverse color

<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
     <div class="container">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="#">MAP EXAMPLE</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div class="row">
        <div class="col-md-8">
             <ul class="nav navbar-nav">
                <li><a href="#" class="text-muted" target="_blank">Link-1</a></li>
                <li><a href="#" class="text-muted" target="_blank">Link-2</a></li>
                <li><a href="#" class="text-muted" target="_blank">Link-3</a></li>
                <li><a href="#" class="text-muted" target="_blank">Link-4</a></li>
            </ul>
        </div>
    </div>
         </div>
     </div>
</nav>

You can get combined code from this link Get combined code here

Troubleshoot java, spring, hibernate, jquery, java script, bootstrap

Thursday, 5 November 2015

Responsive Flip Card – Attractive design for grid systems by rotating your card

Wednesday, 4 November 2015

Full screen map with marker, info window and sidebar list using bootstrap with top and bottom both navigation