Apex Code Development You need to sign in to do that
Don't have an account?
ankur khattri comment section is not working.i have made a form using css and js.submit comment is not working..
<apex:page >
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1"/>
<link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
<link href="css.css" rel="stylesheet" type="text/css"/>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<title>Comment Box</title>
</head>
<html style="height: 100%;">
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1"/>
<link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
<link href="css.css" rel="stylesheet" type="text/css"/>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<style>
#p.ex {
height: 1034px;
width: 100px;
}
#body {
width: 1054px;
height: 1054px;
background-color: #F4F4F4;
}
#wrap{
border: 1px solid lightgray;
alignment-adjust: central;
width: 1000px;
margin-left: 50px;
margin-top: 10px;
padding-bottom: 50px;
}
h1{
/*color: blue-violet;*/
text-align: center;
}
h3.heading{
margin-left: 20px;
background-color: #fafafa;
font-size: 25px;
float: left;
padding-left: 40px;
position: relative;
width: 405px;
height: 40px;
padding-top: 5px;
}
/*#upper_blank{
border-bottom: 3px solid #ee5d10;
margin-top: 40px;
margin-right: 480px;
width: 520px;
padding-right: 480px;
}*/
#name{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 500px;
}
#name2{
margin-left: 20px;
padding-left: 10px;
height:50px ;
width:50px ;
}
#email{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 500px;
}
#url{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 500px;
}
#comment{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 650px;
height: 200px;
}
#commentSubmit{
margin-left: 20px;
width: 100px;
height: 30px;
color: white;
font-size: 10px;
background-color: #ee5d10;
margin-bottom: 30px;
padding-left: 10px;
border-radius: 0px;
}
#commentSubmit:hover {
background-color: #d65e1f;
}
h3.second_heading{
/* margin-left: 0;
margin-top: 30px;
font-size: 20px;
width: 250px;
height: 50px;
padding-top: 10px;
padding-left: 55px;*/
margin-left: 900px;
margin-top: 100px;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 10px;
background-color: #ee5d10;
align: right;
font-size: 10px;
color: white;
border-radius: 0px;
}
#middle{
border: 1px solid lightgray;
width: 1000px;
height: 200px;
background-color: #F7F7F7;
margin-left: 45px;
text-align: left;
margin-top: 10px;
}
.blank{
border-bottom: 3px solid #ee5d10;
margin-top: 40px;
margin-left: 50px;
margin-right: 480px;
width: 520px;
padding-right: 480px;
}
#inner_reply{
margin-left: 800px;
margin-top: 160px;
width: 100px;
height: 30px;
background-color: #ee5d10;
text-align: center;
font-size: 18px;
color: white;
border-radius: 8px;
}
</style>
<script>
function previewFile()
{
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function ()
{
preview.src = reader.result;
}
if (file)
{
reader.readAsDataURL(file); //reads the data as a URL
} else
{
preview.src = "";
}
}
previewFile(); //calls the function named previewFile()
</script>
</head>
<body style="height: 100%;">
<!------------container------->
<div class="container">
<!-------Wrap------------>
<div id="wrap">
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-7">
<div id="upper_blank"></div>
</div>
</div>
<!------------Form Start---------->
<div id='form'>
<div class="row">
<div class="col-md-12">
<form action="" method="POST" id="commentform">
<input type="file" onchange="previewFile()"/><br></br>
<img src="" alt="Image preview..." id="name2"/>
<div id="comment-name" class="form-row">
<input type = "text" placeholder = "Name (required)" name = "dname" id = "name" />
</div>
<div id="comment-message" class="form-row">
<textarea name = "comment" placeholder = "Message" id = "comment" ></textarea>
</div>
<a href="#"><input type="submit" name="dsubmit" id="commentSubmit" value="Submit Comment"/></a>
</form>
</div>
</div>
</div>
</div>
<!-------------------Reply Section------->
<div id="second">
<div class="row">
<div class="col-md-2">
<h3 class="second_heading">Q&A</h3>
</div>
<div class="col-md-10">
<div class="blank"></div>
</div>
</div>
</div>
<div id="middle">
<form>
<a href="#"><input type = "text" value = "reply" name = "dreply" id = "inner_reply"/></a>
</form>
</div>
</div>
</body>
</html>
</apex:page>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1"/>
<link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
<link href="css.css" rel="stylesheet" type="text/css"/>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<title>Comment Box</title>
</head>
<html style="height: 100%;">
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1"/>
<link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
<link href="css.css" rel="stylesheet" type="text/css"/>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<style>
#p.ex {
height: 1034px;
width: 100px;
}
#body {
width: 1054px;
height: 1054px;
background-color: #F4F4F4;
}
#wrap{
border: 1px solid lightgray;
alignment-adjust: central;
width: 1000px;
margin-left: 50px;
margin-top: 10px;
padding-bottom: 50px;
}
h1{
/*color: blue-violet;*/
text-align: center;
}
h3.heading{
margin-left: 20px;
background-color: #fafafa;
font-size: 25px;
float: left;
padding-left: 40px;
position: relative;
width: 405px;
height: 40px;
padding-top: 5px;
}
/*#upper_blank{
border-bottom: 3px solid #ee5d10;
margin-top: 40px;
margin-right: 480px;
width: 520px;
padding-right: 480px;
}*/
#name{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 500px;
}
#name2{
margin-left: 20px;
padding-left: 10px;
height:50px ;
width:50px ;
}
#email{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 500px;
}
#url{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 500px;
}
#comment{
margin-left: 20px;
box-shadow: 0 2px 0 #e6e6e6;
height: 40px;
padding-left: 10px;
width: 650px;
height: 200px;
}
#commentSubmit{
margin-left: 20px;
width: 100px;
height: 30px;
color: white;
font-size: 10px;
background-color: #ee5d10;
margin-bottom: 30px;
padding-left: 10px;
border-radius: 0px;
}
#commentSubmit:hover {
background-color: #d65e1f;
}
h3.second_heading{
/* margin-left: 0;
margin-top: 30px;
font-size: 20px;
width: 250px;
height: 50px;
padding-top: 10px;
padding-left: 55px;*/
margin-left: 900px;
margin-top: 100px;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 10px;
background-color: #ee5d10;
align: right;
font-size: 10px;
color: white;
border-radius: 0px;
}
#middle{
border: 1px solid lightgray;
width: 1000px;
height: 200px;
background-color: #F7F7F7;
margin-left: 45px;
text-align: left;
margin-top: 10px;
}
.blank{
border-bottom: 3px solid #ee5d10;
margin-top: 40px;
margin-left: 50px;
margin-right: 480px;
width: 520px;
padding-right: 480px;
}
#inner_reply{
margin-left: 800px;
margin-top: 160px;
width: 100px;
height: 30px;
background-color: #ee5d10;
text-align: center;
font-size: 18px;
color: white;
border-radius: 8px;
}
</style>
<script>
function previewFile()
{
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function ()
{
preview.src = reader.result;
}
if (file)
{
reader.readAsDataURL(file); //reads the data as a URL
} else
{
preview.src = "";
}
}
previewFile(); //calls the function named previewFile()
</script>
</head>
<body style="height: 100%;">
<!------------container------->
<div class="container">
<!-------Wrap------------>
<div id="wrap">
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-7">
<div id="upper_blank"></div>
</div>
</div>
<!------------Form Start---------->
<div id='form'>
<div class="row">
<div class="col-md-12">
<form action="" method="POST" id="commentform">
<input type="file" onchange="previewFile()"/><br></br>
<img src="" alt="Image preview..." id="name2"/>
<div id="comment-name" class="form-row">
<input type = "text" placeholder = "Name (required)" name = "dname" id = "name" />
</div>
<div id="comment-message" class="form-row">
<textarea name = "comment" placeholder = "Message" id = "comment" ></textarea>
</div>
<a href="#"><input type="submit" name="dsubmit" id="commentSubmit" value="Submit Comment"/></a>
</form>
</div>
</div>
</div>
</div>
<!-------------------Reply Section------->
<div id="second">
<div class="row">
<div class="col-md-2">
<h3 class="second_heading">Q&A</h3>
</div>
<div class="col-md-10">
<div class="blank"></div>
</div>
</div>
</div>
<div id="middle">
<form>
<a href="#"><input type = "text" value = "reply" name = "dreply" id = "inner_reply"/></a>
</form>
</div>
</div>
</body>
</html>
</apex:page>
Prem Anandh 1There is no action on your comment button. Can you please tell me what you are expecting here?
ankur khattrii want comments to be added in the lower div of reply section