I want to have footer at the bottom of the page according to data retrieve from the database, but footer is blocking some content under it.
Please check the image:
please tell me how to do that below is my css:
body{
padding-bottom: 15px;
position: relative;
height: auto;
min-height: 100%;
}
table{
padding-bottom: 15px;
}
form,table,h3,h4,#retrieveform{
text-align: center;
margin: 0px auto;
}
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
table tr:nth-child(even) {
background-color: hsla(120,100%,75%,0.3);;
}
table tr:nth-child(odd) {
background-color:hsla(120,100%,25%,0.3);;
}
table th {
background-color: #B0B0B0 ;
color: white;
}
.myButton {
-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
box-shadow: 0px 1px 0px 0px #f0f7fa;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
background-color:#33bdef;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
background-color:#019ad2;
}
.myButton:active {
position:relative;
top:1px;
}
#footer {
position:fixed;
margin-top: -450px;
padding-top: 0;
color:white;
bottom:0;
text-align:center;
width:100%;
height:20px; /* Height of the footer */
background:black;
}
i have given id only to footer as "footer" and class button as "mybutton"
Please have a look at my jsp page:
<body>
<%#include file="/header.jsp" %>
<form>
<%
if (session.getAttribute("name") == null) {
out.println( "<p style=\"color:red\"><Strong>**Please Login First!**<strong></p> " );
response.sendRedirect("index.jsp");
}
String empid = request.getParameter("Emp_id");
String from = request.getParameter("From");
String to = request.getParameter("To");
Connection conn= null;
PreparedStatement ps = null;
ResultSet rs = null;
PreparedStatement ps1= null;
ResultSet rs1= null;
PreparedStatement ps2= null;
ResultSet rs2= null;
try {
conn = ConnectionProvider.getConn();
ps = conn.prepareStatement("SELECT * FROM logintable WHERE Emp_id=? and LoginDate BETWEEN ? AND ?; ");
ps1 = conn.prepareStatement("SELECT CAST((SEC_TO_TIME(SUM(TIME_TO_SEC(`Total`))) ) AS char) AS Total FROM logintable WHERE Emp_id=? AND LoginDate BETWEEN ? AND ?;");
ps2 = conn.prepareStatement("SELECT CAST((SEC_TO_TIME(SUM(TIME_TO_SEC(`Overtime`))) ) AS char) AS Overtime FROM logintable WHERE Emp_id=? AND LoginDate BETWEEN ? AND ?;");
ps.setString(1, empid);
ps.setString(2, from);
ps.setString(3, to);
ps1.setString(1, empid);
ps1.setString(2, from);
ps1.setString(3, to);
ps2.setString(1, empid);
ps2.setString(2, from);
ps2.setString(3, to);
%>
<br>
<table>
<tr>
<td> <strong>Employee Id:</strong></td><td><%=request.getParameter("Emp_id")%></td>
<td><strong>From Date:</strong></td><td><%=request.getParameter("From")%></td>
<td><strong>To Date:</strong></td><td><%=request.getParameter("To")%></td></tr></table>
<%
out.print("<table border=1>");
out.print("<caption><h4>TIMESHEET</h4></caption>");
rs = ps.executeQuery();
rs1=ps1.executeQuery();
rs2=ps2.executeQuery();
ResultSetMetaData rsmd=rs.getMetaData();
int total=rsmd.getColumnCount();
out.print("<tr>");
for(int i=1;i<=total;i++)
{
out.print("<th>"+rsmd.getColumnName(i)+"</th>");
}
out.print("</tr>");
while(rs.next())
{
out.print("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getString(3)+"</td><td>"+rs.getString(4)+"</td><td>"+rs.getString(5)+"</td><td>"+rs.getString(6)+"</td><td>"+rs.getString(7)+"</td><td>"+rs.getString(8)+"</td><td>"+rs.getString(9)+"</td><td>"+rs.getString(10)+"</td></tr>");
}
while (rs1.next())
{
String Total = rs1.getString("Total");
out.println("<tr><td><Strong>Total is:</strong></td><td>" + Total + "</td><br>");
}
while (rs2.next())
{
String Overtime = rs2.getString("Overtime");
out.println("<td><Strong>Overtime is:</strong></td><td>" + Overtime + "</td></tr><br>");
}
out.print("</table>");
}
catch(Exception e){
e.printStackTrace();
}
finally {
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
%>
<a href="logout.jsp" class="myButton" >Logout</a></form>
<div id="footer">
</div>
</body>
Give padding-bottom = Height of footer and position :absolute to footer as follows
.content {
padding-bottom: 35px;
}
#footer {
bottom: 0;
font-size: 10pt;
height: 35px;
position: absolute;
width: 100%;
}
Try changing the following css as:
body{
position: relative;
height: auto;
min-height: 100%;
}
table{
margin-bottom: 15px;
}
#footer {
position:relative;
clear:both;
margin-top: -450px;
padding-top: 0;
color:white;
bottom:0;
text-align:center;
width:100%;
height:20px; /* Height of the footer */
background:black;
}
I believe the right answer to this is in design, not in code.
You basically need two, may be three sections of a page. One of them is scrollable, the other two aren't.
So, essentially, it would be something like:
<div class="header">
...content...
</div>
<div class="scrollable">
...content...
</div>
<div class="footer">
...content...
</div>
Most probably you need to give the container above footer margin-bottom equal to height of footer. I think in your cas it is the table:
table { margin-bottom: 20px; }
But consider putting the table into some other container. Like:
<header class="header">...</header>
<div class="content">
...
<table>
...
</table>
...
</div>
<footer class="footer">...</footer>
your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
your html:
<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
Please change the css for that footer and try again:
#footer {
padding-top: 0;
color:white;
bottom:0;
text-align:center;
width:100%;
height:20px; /* Height of the footer */
background:black;
}
Related
im making a sunbed app,every box means 2 sunbeds,i doubleclick box and change background color, every color means the actual situation of the sunbed but localstorage is only working for my original item but not working for my clones.I need to save all my clones forms input text and background changes,how can i get it
workfile: https://codepen.io/Kawasaki93/pen/NWyJdVx
<input type="text" style="height:17px" id="qty" name="qty" size="3" name="formulario" value="">
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("qty").onkeyup = store;
document.getElementById("qty").onload = getValue();
});
//store value after changes
function store(){
var text = document.getElementById("qty").value;
localStorage.setItem("qty",text);
}
//local storage to keep values after refresh
function getValue(){
var storedText = localStorage.getItem("qty");
alert(storedText);
if(storedText != null){
document.getElementById("qty").value = storedText;
}
else
document.getElementById("qty").value = 0;
}
try below code once, here is workable example.
let variable1;
for (var x=1;x<96 ;x++)
{
$(".beach_wrapper").append($(".sunbed").first().clone(
).attr("id","clon_"+x));
$("#clon_1,#clon_2" ).attr('style', 'background:orange;');
$("#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71").attr('style','background:honeydew;');
}
$('.toggle').dblclick(function () { let step = $(this).data('actual-step') || 1;
$(this).addClass('step'+ step);
$(this).data('actual-step', step + 1 );
});
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("qty").onload = getValue();
});
var localStorageArr = {};
$("input.sunbed").keyup(function(){
var text = $(this).val();
var inpId = $(this).attr('id');
localStorage.setItem(inpId, text);
});
//local storage to keep values after refresh
function getValue(){
$( "input.sunbed" ).each(function( index ) {
var inpID = $(this).attr('id');
$(this).val(localStorage.getItem(inpID));
});
}
.beach_wrapper {
width: 1170px;
max-width: 100%;
display: grid;
grid-template-columns: 100px 100px 120px 100px 100px 100px 100px 100px 100px 100px 100px 100px ;
grid-template-rows: 90px 90px 90px 90px 90px 110px 100px 90px;
gap: 0px 0px;
transform:scale(70%);
margin-left: auto;
margin-right: auto;
padding-right: 10px;
padding-left: 10px;
}
body {
display: flex;
align-items: center ;
height: 100vh;
background:honeydew;
}
.sunbed {
width: 70px;
height: 40px;
border: 2px solid;
color: orange;
border-color: black;
background: green;
text-align: center;
display:inline-block;
font-family: sans-serif;
margin-left:12px;
margin-top:15px;
}
.sunbed.step1 {
background:LightSeaGreen;
/*ocupado*/
}
.sunbed.step2 {
background: red;
/*pagado*/
}
.sunbed.step3 {
background: linear-gradient(to left, LightSeaGreen 50%, DarkCyan 50%);
/*ocupado con 3 hamacas cada lado*/
}
.sunbed.step4 {
background:linear-gradient(to left, LightSeaGreen 50%, green 50%);
/*ocupado 1 persona sola*/
}
.sunbed.step5{
background:orange;
/*hamaca off*/
}
.sunbed.step6{
background:green;
}
.sunbed.step7{
background:LightSeaGreen;
}
.sunbed.step8{
background:red;
}
.sunbed.step9{
background:linear-gradient(to left, LightSeaGreen 50%, DarkCyan 50%);
/*ocupado con 3 hamacas cada lado*/
}
.sunbed.step10{
background:linear-gradient(to left, LightSeaGreen 50%, green 50%);
/*ocupado 1 persona sola*/
}
.sunbed.step11{
background:green;
}
.form input{
background-color: #FFEFD5;
border: none;
border-bottom: 1px solid green;
text-align:center;
zoom: 100%;
touch-action: none;
}
#media only screen and (min-width: 384px) and (max-width: 767px) { /* Your Styles... */ }
#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71{
border: 0px solid;
}
#clon_72,#clon_73,#clon_74,#clon_75,#clon_76,#clon_77,#clon_78,#clon_79,#clon_80,#clon_81,#clon_82,#clon_83,#clon_84,#clon_85,#clon_86,#clon_87,#clon_88,#clon_89,#clon_90,#clon_91,#clon_92,#clon_93,#clon_94,#clon_95{
width: 75px;
height: 45px;
border-radius: 30px;
}
.h1{
margin-top:-50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="beach_wrapper">
<div class="sunbedtoggle">
<input type="text" style="height:17px" id="qty" name="qty" size="3" class="sunbed" name="formulario" value="">
</div>
</div>
https://codepen.io/maheshmthorat/pen/JjLPEox
I have a python flask app and I'm wondering how to have the html page to show the selected parameters from dropdown list, text box, multi-selection etc.
A toy example of my current-working setup looks like this:
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
#app.route("/")
def index():
return render_template("index.html",
selection1=["1","2"],
selection2=["1","2"],
)
#app.route("/get-values")
def get_values():
dummy = [
["123", "123", "123"],
["456", "456", "456"],
["789", "789", "789"],
]
result = {
'sessions': dummy,
'total_sessions': 3,
'total_pages': 1,
'current_page': 1
}
return jsonify(result)
if __name__ == '__main__':
app.run(debug=True)
The step is basically:
index.html contains the page where user can update parameters to have the table showing different information
when you open the page, it shows the result from default selections
whenever you update any of the field, the result will be updated automatically (done by using $('#selection1-field').on('change', getFirstPageValues);
the update is done by calling /get-values in app.py and sending the new paramters.
What I want to do now is to be able to save (bookmark in browser) the url with updated parameters. Currently it is only saving http://localhost:5000/ which is the home page as well as where the result is shown, but I want it to be able to save url with updated parameters so that next time when I open the bookmarked page, it has the parameters applied already, something like: http://localhost:5000/get-values?c1=v1&c2=v2&c3=v3.
I think I will need to have something like getUrlParam (How to get the value from the GET parameters?) but I'm very new to js and I don't know how to do it. Also probably I need to make changes on the python flask end as well?
Another problem is that since the main url is the index (/) but I'm calling a different endpoint (/get-values) to get data for table, if I were to use something like http://localhost:5000/get-values?c1=v1&c2=v2&c3=v3, then according to the current setup, I'm basically just saving the json output rather than the page with table display of the json output result. Ideally it should be http://localhost:5000/c1=v1&c2=v2&c3=v3 but I don't know how to make this work and I was not able to find any references.
The corresponding index.html is below. You should be able to put it under /templates and make the app work. It has function displayResults(result) which is used to display the table.
<!doctype html>
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css'>
<style type='text/css'>
.CSSTableGenerator {
margin: 50px;
padding: 0px;
width: 95%;
border: 1px solid #000000;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.CSSTableGenerator table {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.CSSTableGenerator table tr td {
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
}
.CSSTableGenerator tr:last-child td:first-child {
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.CSSTableGenerator tr:hover td {
}
/*.CSSTableGenerator tr:nth-child(odd) {
background-color: #aad4ff
}
.CSSTableGenerator tr:nth-child(even) {
background-color: #ffffff
}*/
.CSSTableGenerator td {
vertical-align: middle;
border: 1px solid #000000;
border-width: 0px 1px 0px 0px;
text-align: left;
padding: 7px;
font-size: 13px;
font-family: Arial;
font-weight: normal;
color: #000000;
}
.CSSTableGenerator tr:last-child td {
border-width: 0px 1px 0px 0px
}
.CSSTableGenerator tr:last-child td:last-child {
border-width: 0px 0px 0px 0px
}
.CSSTableGenerator tr:first-child th {
background: -o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background: -moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");
background: -o-linear-gradient(top,#005fbf,003f7f);
background-color: #005fbf;
border: 0px solid #000000;
text-align: center;
border-width: 0px 0px 1px 1px;
font-size: 14px;
font-family: Arial;
font-weight: bold;
color: #ffffff;
}
.CSSTableGenerator tr:first-child td:first-child {
border-width: 0px 1px 1px 0px
}
.CSSTableGenerator tr:first-child td:last-child {
border-width: 0px 0px 1px 1px
}
#radial-center {
/* fallback */
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}
td {
vertical-align: top;
}
.content {
width: 650px;
}
.sidebar {
width: 300px;
}
.leftNavButton {
width: 190px;
line-height: 1;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.isloading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.isloading .mymodal {
display: block;
}
.pace .pace-progress {
background: red;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
height: 5px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.pace-inactive {
display: none;
}
.ignoreDetailsRow {
cursor: pointer
}
.mistagDetailsRow {
cursor: pointer
}
.fixDetailsRow {
cursor: pointer
}
.ignoreSummaryRow {
cursor: pointer
}
.fixSummaryRow {
cursor: pointer
}
.mistagSummaryRow {
cursor: pointer
}
pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
background-color: #000;
}
.string {
color: white;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: gold;
}
/* shirokov additions */
* {
-webkit-border-radius: 3 !important;
-moz-border-radius: 3 !important;
border-radius: 3 !important;
}
.container {
width: 95%;
}
.bootstrap-select > .dropdown-toggle {
width: 100%;
padding-right: 25px;
}
</style>
<title>Test</title>
</head>
<body>
<div id='homepage-container' class='container body-container' style='width: 1500px;'>
<div id='title-div' class='row' style='margin-bottom: 30px;'>
<h1 class='title' style='text-align: center; margin-top: 30px;'>Test</h1>
</div><!-- title-div -->
<div id='form-div' class='row' style='margin-bottom: 30px;'>
<div class='form-holder'>
<form id='query-form'>
<div class='col-lg-1 col-md-1'></div>
<div class='col-lg-2 col-md-2'>
<label id='date-range'>Date</label>
<div id='reportrange' class='pull-right' style='background: #fff; cursor: pointer; padding: 5px 8px; border: 1px solid #ccc; width: 100%'>
<span id='date-field'></span> <b class='caret'></b>
</div>
</div>
<div class='col-lg-1 col-md-1'>
<label>Selection1</label>
<select class='form-control' id='selection1-field'>
{% for d in selection1 %}
<option value="{{ d[0] }}">{{ d[1] }}</option>
{% endfor %}
</select>
</div>
<div class='col-lg-2 col-md-2'>
<label>Selection2</label>
<select id='selection2-field' class='selectpicker form-control' name='selection2' title='All' multiple data-live-search='true' style='width: 100%;'>
{% for d in selection2 %}
<option value='{{ d }}'> {{ d }}</option>
{% endfor %}
</select>
</div>
<div class='col-lg-2 col-md-2'>
<label>Query Search</label>
<input type="text" class="form-control" id="query-search-field">
</div>
</form>
</div><!-- form-holder -->
</div><!-- form-div -->
<div id='result-div' class='row' style='margin-bottom: 30px;'>
<p class='result-num' id='fetching' style='margin-left: 50px;'></p>
<table border="0" cellpadding="0" width="100%" id='result-table'> </table>
<p class='result-num' style='margin-left: 50px;'></p>
</div><!-- result-div -->
</div><!-- homepage-container -->
<script src='https://code.jquery.com/jquery.js'></script>
<script src='//cdn.jsdelivr.net/momentjs/latest/moment.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js'></script>
<script type='text/javascript'>
$(function() {
var start = moment().year(2019).month(10).day(1);
var end = moment().year(2019).month(10).day(5);
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM DD, YYYY') + ' - ' + end.format('MMMM DD, YYYY'));
getFirstPageValues();
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
alwaysShowCalendars: true,
opens: 'right',
ranges: {
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
function displayResults(result) {
$('.result-num').empty();
$('#result-table').empty();
if ((result == 'ERROR: memory exceeded') || (result == 'ERROR: no results found for given parameters') || (result == 'ERROR: invalid date range')) {
$('#result-table').append(result);
} else {
var sessions = result['sessions'];
var totalSessions = result['total_sessions'];
var totalPages = result['total_pages'];
var currentPage = result['current_page'];
console.log(sessions[0]);
// setup table
var table = $("<table id=\'result-table\' />").addClass('CSSTableGenerator');
var row1 = $("<tr/>");
row1.append($("<td/>").text("C1"));
row1.append($("<td/>").text("C2"));
row1.append($("<td/>").text("C3"));
table.append(row1);
for (var i=0, len=sessions.length; i<len; i++) {
for (var j=0, len2=sessions[i].length; j<len2; j++) {
var c1 = sessions[i][j][0];
var c2 = sessions[i][j][1];
var c3 = sessions[i][j][2];
row = $("<tr/>").css("border-top", "1px solid #d6d6d6");
row.append($("<td/>").text(c1));
row.append($("<td/>").text(c2));
row.append($("<td/>").text(c3));
table.append(row);
}
}
$('.result-num').append('Total sessions: ' + totalSessions.toString() + '<br/>');
$('.result-num').append('Showing page ' + currentPage.toString() + ' out of ' + totalPages.toString() + '<br/>');
if (currentPage == 1) {
$('.result-num').append('>> Next Page');
} else if (currentPage == totalPages) {
$('.result-num').append('<< Prev Page');
} else {
$('.result-num').append('Prev Page << >> Next Page');
}
$('#result-table').append(table);
var nextPageBtn = document.querySelectorAll('#nextpage-btn');
for (var i = 0; i < nextPageBtn.length; i++) {
nextPageBtn[i].addEventListener('click', function(evt) {
goToNextPage(evt);
});
}
var prevPageBtn = document.querySelectorAll('#prevpage-btn');
for (var i = 0; i < prevPageBtn.length; i++) {
prevPageBtn[i].addEventListener('click', function(evt) {
goToPrevPage(evt);
});
}
}
}
function getFirstPageValues() {
$('.result-num').empty();
$('#result-table').empty();
$('#fetching').append('Fetching results...');
var formInputs = {
'date': $('#date-field').html(),
'selection1': $('#selection1-field').val(),
'selection2': JSON.stringify($('#selection2-field').val()),
'querypattern': $('#query-search-field').val(),
'page_num': 1
};
$.get('/get-values',
formInputs,
displayResults
);
}
$('#selection1-field').on('change', getFirstPageValues);
$('#selection2-field').on('change', getFirstPageValues);
$('#query-search-field').on('change', getFirstPageValues);
function goToNextPage(evt) {
evt.preventDefault();
var formInputs = {
'date': $('#date-field').html(),
'selection1': $('#selection1-field').val(),
'selection2': JSON.stringify($('#selection2-field').val()),
'querypattern': $('#query-search-field').val(),
'page_num': parseInt(document.getElementById('nextpage-btn').dataset.page) + 1
};
$.get('/get-values-ns',
formInputs,
displayResults
);
}
function goToPrevPage(evt) {
evt.preventDefault();
var formInputs = {
'date': $('#date-field').html(),
'selection1': $('#selection1-field').val(),
'selection2': JSON.stringify($('#selection2-field').val()),
'querypattern': $('#query-search-field').val(),
'page_num': parseInt(document.getElementById('prevpage-btn').dataset.page) - 1
};
$.get('/get-values',
formInputs,
displayResults
);
}
</script>
</body>
</html>
What I want to do now is to be able to save (bookmark in browser) the
url with updated parameters. Currently it is only saving
http://localhost:5000/ which is the home page as well as where the
result is shown, but I want it to be able to save url with updated
parameters so that next time when I open the bookmarked page, it has
the parameters applied already, something like:
http://localhost:5000/get-values?c1=v1&c2=v2&c3=v3.
You'll need JavaScript. When you modify the value in the select box, you'll need to update the query string so that when you bookmark it, you're bookmarking the correct url.
Modifying a query string without reloading the page
Then in the /get-values route, you need to use request.args.get('c1'), etc. to get the values.
So I have been trying this for hours since I have no huge experience in JavaScript. Basically, I have modified a CSS and HTML codes for the pop up, that I found on the web. However, I would love to make the pop up to show up 10 seconds after a page load. I have tried lots of methods, but none of them gave me the result I wanted. Actually, none of them worked, even partially.
Here is the latest method, which also didn't work.
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(***.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="popup('popUpDiv')">
<div id="container">
<div id="mainContent">
<p><strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
The setTimeout code is the following:
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
I thought maybe if I could load the pop up with the <script> code it would be very helpful, because I don't really like that the pop up is being loaded with the body tag: <body onload="popup('popUpDiv')">
But, I could not manage to do that, because the pop up does not load after I try to load it with the function. Maybe I was doing it wrong, but I have tried everything I could think of, and almost everything I found on web.
I know I have a lot of other mistakes other than the pop up, I am still working on them.
Sorry for not being very specific and copying entire codes, but without those I thought it would be hard to figure out what I was trying to do.
Thank you.
Just run your function in right place )
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
function openPopUp() {
setTimeout(function(){
popup('popUpDiv');
}, 5000);
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(iRobot.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="openPopUp()">
<div id="container">
<div id="mainContent">
<p>Roomba iRobot <strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
function validatePW()
{
var r_pw=document.getElementById('register_password').value;
var r_cpw=document.getElementById('register_confirmpw').value;
var r_button=document.getElementById('register_button');
var r_user=document.getElementById('register_username').value;
if(r_cpw)
{
if (r_pw == r_cpw)
{
document.getElementById('message_alert').innerHTML='';
if(r_user)
{
r_button.disabled = false;
r_button.style.opacity = 1;
}
}else{
document.getElementById('message_alert').innerHTML='doesnt match';
r_button.disabled = true;
r_button.style.opacity = 0.5;
}
}
}
document.getElementById('register_username').onkeyup = function()
{
validatePW();
}
document.getElementById('register_confirmpw').onkeyup = function()
{
validatePW();
}
document.getElementById('register_password').onkeyup = function()
{
validatePW();
}
.headline
{
padding-bottom:1px;
margin-bottom:25px;
text-align:center;
box-shadow:0 1px 0 #bbbbbb;
}
.content
{
display:inline-block;
padding:10px 30px 30px 30px;
margin:10px 50px;
background:#eeeeee;
border-radius:3px;
border:1px solid #bbbbbb;
}
.center
{
width: 100%;
position: absolute;
top: 50%;
text-align:center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
h1
{
display:inline-block;
font-weight:400;
}
.sign_up_input
{
float:left;
margin-left:-2px;
}
.sign_up_input input
{
line-height:24px;
border-radius: 0 3px 3px 0;
border:1px solid #bbbbbb;
}
.sign_up_icon
{
float:left;
display:inline-block;
}
.sign_up_icon div
{
padding:1px 9px 0 9px;
background:#ddd;
border-radius:3px 0 0 3px;
border:1px solid #bbbbbb;
height:25px;
box-shadow:inset -2px -3px 4px rgba(0, 0, 0, 0.025);
}
#register_button
{
width:218px;
padding:1px 0;
font-size:18px;
background:#dddddd;
border-radius:3px;
border:1px solid #bbbbbb;
opacity:0.5;
}
#register_button:active
{
box-shadow:inset 0px 1px 1px rgba(0, 0, 0, 0.075);
}
#message_alert
{
float:left;
margin-top:3px;
font-size:12px;
}
<div class="center">
<div>
<div class="content">
<div class="headline"><h1>REGISTER</h1></div>
<div class="sign_up_icon"><div><img src="" style="height:22px; margin:1px 2px;"/></div></div>
<div class="sign_up_input"><input type='text' name='register_username' id='register_username' maxlength="64"/></div><br><br>
<div class="sign_up_icon"><div><img src="" style="height:26px; margin-top:-1px;"/></div></div>
<div class="sign_up_input"><input type="password" name="register_password" id="register_password" maxlength="64"/></div><br><br>
<div class="sign_up_icon"><div style="padding:1px 2px 0 9px;"><img src="" style="height:26px; margin-top:-1px;"/><span style="display:inline-block; font-size:13px; line-height:32px; vertical-align:top; margin-left:-3px">✔</span></div></div>
<div class="sign_up_input"><input type="password" name="register_confirmpw" id="register_confirmpw" maxlength="64"/></div><br><br>
<span id="message_alert"></span><br><br>
<input id="register_button" type="button" value="Register" onclick="return regformhash(this.form, this.form.username, this.form.email, this.form.password, this.form.confirmpwd); disabled"/>
</div>
</div>
</div>
The problem is here:
if(r_user)
{
r_button.disabled = false;
r_button.style.opacity = 1;
}
If you type into the inputs normally it works perfectly, unless you delete the value of the first input. Then, the register-button doesn't hide as it should. Even if there is no value in the first input. As you change a value in the lower inputs again it works fine.
Thanks for your time!
Try something like this:
if(r_cpw && (r_pw == r_cpw) && r_user) {
enable your submit here
}
else {
disable your submit here
}
Or think about the place of your else statement, there's one brace closed before it that may be your problem (your code never tells what to do when your last if test is evaluated falsy...)
I'm a beginner with javascript and css
Now I want to create a pop-up box show message,meanwhile the html body is translucence.but now what I did is not work so good,what should i do?
I need your help
my code is below
html code
<div id="confirm_box" class="info_box">
<div class="info_box confirm_info">
<div class="info_box confirm_title">{$confirmTitle}</div>
<div class="info_box confirm_close">
<span id="confirm_close" class="info_box confirm_close">×</span>
</div>
</div>
<div id="info_box_content" class="info_box confirm_content">
<div class="info_box info_img_box">
<img src="{$url_app_dir}img/confirm_dog.png" class="info_box confirm_img"/>
</div>
<div id="content_box" class="info_box content_box">
{$confirmContent}<label id="info_box_text" class="info_box info_text"></label>
</div>
</div>
<div class="info_box confirm_button">
<button class="info_box confirm_submit" >确认</button>
</div>
js code
window.onload = function ()
{
var confrimWin = document.getElementById("confirm_box");
var comfirmBtn = document.getElementById("show_confirm_box");
var closeBtn = document.getElementById("confirm_close");
var bodyElement = document.getElementsByTagName("body")[0];
//show pop-up box
comfirmBtn.onclick = function()
{
confrimWin.style.display = "block";
bodyElement.setAttribute('class',"body_mask");
var text = document.getElementById("name").value;
document.getElementById("info_box_text").innerHTML= text ;
};
//close box
closeBtn.onclick = function()
{
confrimWin.style.display = "none";
bodyElement.setAttribute('class',"");
}
//get mouse Object
document.onclick = function(){
var e = arguments[0] || window.event;
var eventSource = e.srcElement||e.target;
var isShow = eventSource.className.toLowerCase().indexOf('info_box');
if(eventSource.className == 'btn'){
comfirmBtn.onclick();
}
else if( isShow < 0)
{
confrimWin.style.display = "none";
bodyElement.setAttribute('class',"");
}
}
};
html code
#confirm_box{
position:fixed;
top:50%;
left:50%;
width:500px;
height:300px;
border-radius: 5px 5px 5px 5px;
background:#fff;
z-index:100;
border:4px solid rgb( 220,220,220);
margin:-102px 0 0 -202px;
display:none;
}
.body_mask{
position: fixed;
background-color: none repeat scroll 0% 0% rgb(128,128,128);
opacity: 0.75;
/* z-index: 100; */
display:block;
}
.confirm_info{
font-size:16px;
text-align:right;
background:#fff;
border-bottom:1px solid rgb(135,180,250);
padding:5px;
height:20px;
}
.confirm_title {
font-family:"微软雅黑","黑体";
float:left;
font-weight: bold;
color:rgba(30, 144, 255, 0.75);
}
.confirm_close {
float:right;
}
.confirm_close span{
font-size:16px;
color:#fff;
cursor:pointer;
background:rgb(135,180,250);
border:1px solid rgba(30, 144, 255, 0.75);
padding:0 2px;
}
.confirm_content{
font-family:"微软雅黑","黑体";
font-size: 14px;
line-height: 24px;
padding:5px;
height:70%;
width:100%;
}
.info_text{
font-family:"微软雅黑","黑体";
color: rgb(0, 108, 202);
line-height: 24px;
height:70%;
width:100%;
}
.info_img_box{
float:left;
width: 200px;
height: 200px;
}
.content_box{
float:left;
width: 230px;
height: 200px;
}
.confirm_button{
background:#C4C4C4;
border:1px solid rgba(30, 144, 255, 0.75);
}
.confirm_submit {
float:right;
font-size: 15px;
width: 80px;
height:30px;
cursor:pointer;
color: rgb(255,245,238);
padding: 0px 10px;
margin:8px 10px;
border-radius: 5px 5px 5px 5px;
/* text-shadow: 1px 1px 3px rgb(255, 255, 255); */
border: 1px solid rgb(135,170,230);
background: -moz-linear-gradient(center top , rgb(135,180,250),rgb(135,180,250) ) repeat scroll 0% 0% transparent;
}
.confirm_submit:hover {
background: none repeat scroll 0% 0% rgb(135,160,230);
}
As a beginner with javascript&css ,I try to solve the problem again and again.and at last sovled it in a not so prefert way
below is what I changed code,it's better than before
#confirm_box{
position:fixed;
top:50%;
left:50%;
width:500px;
height:300px;
border-radius: 5px 5px 5px 5px;
background:#fff;
border:4px solid rgb( 220,220,220);
margin:-102px 0 0 -202px;
z-index: 1002;/*this add css code will show confirm_box upon body_mask*/
display:none;
}
html code
<div id="confirm_box" class="info_box">
</div>
<div id="hide_info_box" class="body_mask"></div>
javascript code
window.onload = function ()
{
var confrimWin = document.getElementById("confirm_box");
var comfirmBtn = document.getElementById("show_confirm_box");
var closeBtn = document.getElementById("confirm_close");
var hideElement = document.getElementById("hide_info_box");
//show info box
comfirmBtn.onclick = function()
{
confrimWin.style.display = "block";
hideElement.style.display = "block";
var text = document.getElementById("name").value;
document.getElementById("info_box_text").innerHTML= text ;
};
//close info box
closeBtn.onclick=hideElement.onclick=function()
{
confrimWin.style.display = "none";
hideElement.style.display = "none";
}
};