Grid Card View using HTML & Java Script

You might want a grid card view in your app. Until now Grid Card View Extension are paid.

Are you searching for a free one? Then you are in the right place.

You can use the below HTML/JavaScript to make a grid card view design in your application.

------------------------------------------------------------------

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="animate.css"/>
<style>
body{
background: #e2e9f1;
}

.item{
    width: 100%;
    float: left;
clear: right;
}

.frame {
position: relative;
    font-family     : Arial;
background: white url(loading.gif) no-repeat center;
    border          : 0px solid #673AB7;
    //box-shadow      : 1px 1px 5px -1px #999;
margin: 3px;
    cursor          : pointer;
    border-radius: 5px;
}
.layout1{
// position:relative;
width: auto;
padding: 1px;
z-index: 1;
}
.layout1::before,
.layout1::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

/*
.layout1::before {
    border-width: 0;
    border-right-color: #ccc;
    border-top-color: #ccc;
}

.layout1::after {
    border-radius: 0;
    border-width: 1.7em;
    border-right-color: rgb(103,58,183);;
    border-top-color:  rgb(103,58,183);;
}

*/
.pic{
// position: absolute;
// width: 96%;
padding-top: 73%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: 3px;
border-radius: 5px;
}
.frame:hover {
    border: 0px solid #f00; 
}
.frame:hover #des{
display: block;
transition: all 500ms ease-in-out;
}

.header{
// position: absolute;
height: 35%;
// top: 65%;
// left: 0;
text-align: left;
font-size: 90%;
// background: rgba(103,58,183,0.6) ;
// box-shadow: 1px 1px 1px rgb(103,58,183);
color: #212121;
// padding: 3px 10px;
font-weight: bold;
// border-radius: 0 3px 3px 0;
overflow: auto;
}
.price{
position: absolute;
border: 0.1em solid #fff;
border-top: none;
background-image: linear-gradient(#c92783,#ff58b7);
// background: rgba(255,58,183,0.8);
top: 0;
right:10;
font-size: 90%;
padding: 7px 5px;
text-align: justify;
// color: yellow;
color: rgb(255,255,255);
border-radius: 0 0 1em 1em;
font-weight: bold;
z-index: 3;
box-shadow: 0 1px 0px rgb(200,50,150);
}
#des{
// display: none;
// position: absolute;
// width: 93%;
// min-height: 100px;
// padding: auto;
// left: 0;
// top: 75%;
// background: rgba(0,0,0,0.3);
height: 50%;
color: #898989;
text-align: justify;
font-size: 75%;
// padding: 5px 10px;
overflow: scroll;
border-radius: 5px;
}
.content{
border-radius: 5px;
// background: #efefef;
// position: absolute;
top: 65%;
padding: 5px;
height: 20%;
width: auto;
// margin-bottom: 100px;
}

.view{
font-size: 70%;
color: #c9c9c9;
// position: absolute;
bottom: 5px;
right: 5px;
text-align: right;
margin-top: 10px;
}
</style>
</head>
<body>
<div id='res'></div>
<div style="clear:both"></div>
<script>


var view = 0;
var clickId = "";
var lst = window.AppInventor.getWebViewString().split('|');
for (var c in lst) {
var newlist = lst[c].split(',');
var view = newlist[4];
var imgpath = '';
var pri ='';
if(newlist[3] =='paid'){
pri ='<div class="price"><i class="fa fa-dollar bounce infinite animated"></i></div>';
}
if(newlist[1] == 'noimg')
{
imgpath = 'noimg.jpg';
}
else
{
imgpath = newlist[1];
}
if(typeof view != 'undefined'){
view = newlist[4];
}
else{view = 0;}

    var items = document.createElement('div');
    items.id = newlist[5];
    items.className = "item";

items.onclick = function(){
window.AppInventor.setWebViewString(this.id);
}
    items.innerHTML = '<div class="frame">' + pri +'<div class="layout1"><div class="pic" style="background-image: url(' + imgpath + ')"></div><div class="content"><div class="header">' + newlist[0] + '</div><div id="des">' + newlist[2] + '</div><div class="view"><i class="fa fa-eye"></i> ' + view +'</div></div></div></div>';
    document.getElementById("res").appendChild(items);
}
</script>



</body>
</html>

------------------------------------------------------------------

The Feedback from the code will be WebViewString.

Comments

Popular posts from this blog

Make your own App Inventor Extension using App Inventor Sources & Online Builders | Codewaala

Working With OpenWeather Maps API for making a Weather Application

Setting up JAVA_HOME variable in windows | CodeWaala