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.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>
------------------------------------------------------------------
How can i jse it on kodular please give me a tutorial Thank You Advance
ReplyDelete