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";
}
};
Related
I did create a form and A submit button in my website
but I do not know How can I passing data from javascript codes to My asp.net core codes
My Html jquery css codes Here:
*{
box-sizing: border-box;
}
body{
padding:20px 25px 70px 25px;
}
#all-questions-preview>.content{
display: flex;
flex-direction: column;
}
#all-questions-preview>.content>.question-container{
width:100%;
background: #fefefe;
border-radius: 8px;
box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
padding:12px 18px 70px 18px;
position: relative;
margin-bottom:15px;
}
#all-questions-preview>.content>.question-container>.question-title{
color: #444;
font-weight: bold;
}
#all-questions-preview>.content>.question-container>.question-title::before{
content: ":.";
}
#all-questions-preview>.content>.question-container>.close{
position:absolute;
padding:5px;
color: #f02f24;
font-size: 1.3em;
font-weight: bold;
transform: rotate(45deg);
top:10px;
right:10px;
background-color:#f6f6f6;
border:none !important;
outline: none !important;
cursor:pointer;
border-radius:100%;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
}
#all-questions-preview>.content>.question-container input{
background: none !important;
outline: none !important;
border:none;
font-weight: bold;
}
#all-questions-preview>.content>.question-container .question-sentence{
display:inline-block;
width:100%;
font-size:1.2em;
padding:5px 10px;
border-bottom:2px solid #71c9db;
color: #61adbb;
}
#all-questions-preview>.content>.question-container .answer-span{
display:inline-block;
margin-right:20px;
margin-top:20px;
width:20%;
min-width: 150px;
position: relative;
/*text-align: right;*/
/*border:1px solid red;*/
}
#all-questions-preview>.content>.question-container .answer-input{
display:inline-block;
padding:5px 10px;
border-bottom:2px solid #e171ae;
color: #be3e89;
width:calc(100% - 50px)
}
#all-questions-preview>.content>.question-container .answer-span .close{
position:absolute;
padding:5px;
color: #f02f24;
font-size: 1.2em;
transform: rotate(45deg);
top:15px;
right:22px;
background-color:transparent;
border:none !important;
outline: none !important;
cursor:pointer;
border-radius:100%;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
#all-questions-preview>.content>.question-container .add-answer{
display: inline-block;
margin-top:15px;
background-color: rgba(243, 200, 86, 0.48);
border:2px solid rgb(221, 177, 84);
color: rgb(153, 122, 58);
padding:10px 20px;
border-radius: 5px;
cursor: pointer;
position: absolute;
right:15px;
bottom:10px;
}
#all-questions-preview> .add-question{
display: inline-block;
background-color: rgba(60, 243, 71, 0.48);
border:2px solid rgb(69, 198, 59);
color: rgb(32, 114, 31);
padding:10px 20px;
border-radius: 5px;
cursor: pointer;
position: absolute;
margin-top: -62px;
margin-left:10px;
font-weight: bold;
}
#all-questions-preview> .submit{
display: block;
width:90%;
margin:15px auto 15px auto;
background-color: rgba(74, 148, 243, 0.48);
border:2px solid rgb(74, 148, 243);
color: rgb(39, 77, 127);
padding:15px 20px;
font-weight: bold;
box-shadow: 0 5px 5px 1px rgba(61, 122, 200, 0.5);
border-radius: 5px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<form action="#" method="post" id="all-questions-preview">
<div class="content">
</div>
<button class="add-question" type="button">Add new question</button>
<br>
<button type="submit" class="submit">Submit</button>
</form>
<form action="test.php" id="all-questions-main" method="post" style="display: none">
<input type="hidden" name="data" id="questions-data">
</form>
</div>
<script>
$(document).ready(function() {
createQuestion($('#all-questions-preview')); //default one question added
$('#all-questions-preview').on('submit', previewFormSubmit);
$('#all-questions-preview .add-question').on('click', addQuestion);
});
function previewFormSubmit(ev) {
ev.preventDefault();
let data = [];
getQuestions($(this)).each(function() {
let question = $(this);
let question_data = {};
question_data['question_sentence'] = question.find('.question-sentence').eq(0).val();
let question_answers = [];
getAnswers(question).each(function() {
let answer = $(this);
let answer_input = answer.find('.answer-input').val();
if (answer_input.trim() !== "") {
question_answers.push(answer_input)
}
});
question_data['question_answers'] = question_answers;
data.push(question_data);
});
$('#all-questions-main>#questions-data').val(JSON.stringify(data));
$('#all-questions-main')[0].submit();
}
function addAnswer(event) {
let question_container = $(this).parents('.question-container').eq(0);
createAnswer(question_container);
}
function createAnswer(question_container) {
let answers = getAnswers(question_container);
let answer_span = $("<span>").addClass('answer-span');
let closeBtn = null;
if (answers.length > 0) {
closeBtn = $("<button>").attr({
type: 'button',
class: 'close'
}).text('+').on('click', deleteAnswer);
}
let answer_input = $("<input>").addClass('answer-input').attr({
type: 'text',
name: 'answer',
placeholder: 'answer' + (answers.length + 1)
});
if (answers.length === 0) {
answer_input.attr('required', 'required')
}
let container_answers = question_container.find('.answers-container').eq(0);
answer_span.append(closeBtn, answer_input);
container_answers.append(answer_span);
return answer_span;
}
function getAnswers(question_container) {
return (question_container.find(".answers-container .answer-span"));
}
function addQuestion(event) {
let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
createQuestion(all_questions_form);
}
function getQuestions(all_question_form) {
return (all_question_form.find('.question-container'));
}
function createQuestion(all_questions_form) {
let all_questions_form_content = all_questions_form.find(">.content").eq(0);
let questions = getQuestions(all_questions_form);
let new_question = $("<div>").addClass('question-container');
let question_title = $("<h4>").addClass('question-title').text('Question number' + (questions.length + 1));
let closeBtn = null;
if (questions.length > 0) {
closeBtn = $("<button>").attr({
type: 'button',
class: 'close'
}).text('+').on('click', deleteQuestion);
}
let question_sentence = $("<input>").addClass('question-sentence').attr({
type: 'text',
name: 'question_sentence',
placeholder: 'question' + (questions.length + 1),
required: 'required'
});
let container_answers = $("<div>").addClass('answers-container');
let add_answer_btn = $("<button>").addClass('add-answer').attr('type', 'button').text('Add answer').on('click', addAnswer);
new_question.append(question_title, closeBtn, question_sentence, container_answers, add_answer_btn);
all_questions_form_content.append(new_question);
createAnswer(new_question);
return new_question;
}
function deleteQuestion() {
let question_container = $(this).parents('.question-container').eq(0);
let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
let questions = getQuestions(all_questions_form);
if (questions.index(question_container) !== 0) {
question_container.fadeOut(200, function() {
$(this).remove();
})
}
}
function deleteAnswer() {
let question_container = $(this).parents('.question-container').eq(0);
let answer_span = $(this).parents('.answer-span').eq(0);
let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
let answers = getAnswers(question_container);
if (answers.index(answer_span) !== 0) {
answer_span.fadeOut(200, function() {
$(this).remove();
})
}
}
</script>
</body>
</html>
In fact I want when The user clicks submit button The Data passes To Asp.net core codes
Please help me, I have been involved in this issue for several days
Thanks
Binding model does not happen in your HTML that is sent to the action method with a submit . You can transfer array question and answer with Ajax.
I find the reason why you can't get the model in backend code.
Because the data you passed is string format, so we can installNewtonsoft.Json library. And deserialize the string to object.
public class list_questions {
public string question_sentence { get; set; }
public List<string> question_answers { get; set; }
}
STEPS
In your .cshtml, you code should like below.
<form action="/ForTest/get_data" id="all-questions-main" method="post" style="display: none">
<input type="hidden" name="data" id="questions-data">
</form>
My /ForTest/get_data method
My test result
I don’t want use or i don't know how to use 'the CSS:after prototype' by javascript .
Now, I change it is by add height not width,and when i remove the class prototype, reback is a short time,no transtion.
What can i do for it?
this is my codepen link
<div class="block">
<div id="top">my block/div>
<div>
<button id="btn">submit</button>
</div>
</div>
.block {
height: 200px;
width: 250px;
margin:150px auto;
text-align: center;
}
#top {
margin-bottom: 20px;
height: 30px;
display: inline-block;
border-bottom: 3px solid;
transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
}
.addtop {
border-bottom: 3px solid blue;
color: blue;
}
let btn = document.getElementById('btn');
btn.addEventListener('click',() => {
let topBlock = document.getElementById('top');
if(topBlock.classList.length > 0) {
topBlock.classList = [];
} else {
topBlock.classList.add('addtop');
}
});
Try this:
document.getElementById('top');
if(topBlock.classList.length > 0) {
topBlock.classList.remove('addtop');
} else {
topBlock.classList.add('addtop');
}
});
Also add to .top class:
border-bottom: 0px solid blue;
I couldnt find any answers on stack overflow to this specific question. I am trying to use pure javascript ONLY, so please no jquery answers.
So I posted all of my code as a general reference but my problem I believe lies in the javascript section. My question is, how can I make it so that my div "signup" is unclickable right AFTER it is clicked ONCE?
I tried putting a disable statement before frame and fadeOut are called inside the HideLogin() function. I also tried with css pointer-events. Nothing works and everytime I click SignUp, the animations repeat. Thank you in advance for the help.
function HideLogin() {
var login = document.getElementById("login");
var SignUpSheet = document.getElementById("SignUpSheet");
var titlecard = document.getElementById("titlecard");
var signup = document.getElementById("signup");
SignUpSheet.style.display = "block";
titlecard.style.display = "block";
frame(signup);
fadeOut(login);
/*fadeIn(document.getElementById("SignUpSheet"));
fadeIn(document.getElementById("titlecard")); */
}
function frame(signup) {
var pos = 125;
var id = setInterval(function() {
if (pos == 0) {
clearInterval(id);
} else {
pos--;
signup.style.top = pos + 'px';
}
}, 1);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function() {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 20);
}
function fadeIn(element) {
var op = 0.1; // initial opacity
var timer = setInterval(function() {
if (op >= 1) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.display = "block";
op += 0.1;
}, 20);
}
body,
html {
min-height: 100%;
}
body
/* Background handeling*/
{
color: white;
background: url(images/Hunter.jpg) center no-repeat;
background-size: cover;
background-color: #444;
}
/*------------------------------------------------------------- */
#logBox
/*Div that holds two links */
{
position: relative;
//border: 2px solid white;
height: 300px;
width: 300px;
margin-left: 70px;
margin-top: 50px;
}
#login
/* login link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#login:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
#signup
/* sign up link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: 125px;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#signup:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
/*--------------------------------------------------------------- */
/* Div that holds two sheets */
#LogInSheet {
display: none;
}
#LoginTitle {}
#SignUpSheet {
display: none;
}
#SignUpTitle {}
/*--------------------------------------------------------------- */
#titlecard
/*title display */
{
position: absolute;
display: none;
bottom: 0px;
right: 50px;
//border: 2px solid white;
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 45px;
color: gray;
text-align: center;
font-family: papyrus;
text-shadow: 2px 2px black;
}
<!doctype html>
<html>
<head>
<title>The Prime Legion</title>
<link rel="stylesheet" type="text/css" href="page1.css">
<script type="text/javascript" src="page1.js"></script>
</head>
<body>
<div id="logBox">
<div id="login" onclick="HideSignin()">
Log In
</div>
<div id="signup" onclick="HideLogin()">
Sign Up
</div>
</div>
<div id="LogInSheet">
<div id="LoginTitle">
<p>
<h4>Hello</h4>
</p>
</div>
</div>
<div id="SignUpSheet">
<div id="SignupTitle">
<p>
<h4>Welcome</h4>
</p>
</div>
</div>
<div id="titlecard">
<p>
<h1>The Prime Legion</h1>
</p>
</div>
</body>
</html>
Unless you have a particular need to use <div>s for your buttons, you could change the HTML to use <button> elements instead. That way you could disable it using the disabled attribute and it should prevent any further clicks without having to store and track any additional JavaScript variables.
<button id="signup" onclick="HideLogin()">Sign Up</button>
function HideLogin() {
document.getElementById("signup").disabled = true;
...
}
I would suggest the following:
define a global variable loginCliked=false
then in your HideLogin function:
HideLogin = function(){
if(!loginClicked){
loginClicked=true;
// Do everything else
}
}
So that with the first click it will set loginClicked to true. If you click the button for the second time it does nothing
I am using the following css code:
html {
background: #2B2B2B url(images/bg.gif) repeat;
}
body {
max-width: 1000px;
margin: 0px auto;
font-family: sans-serif;
margin: 0 auto;
}
header,
footer,
aside {
display: block;
}
h1 {
text-align: center;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
text-decoration: underline;
}
label {
display: block;
}
fieldset {
border: 0px dotted red;
width: 400px;
margin: 0 auto;
}
input,
select {
width: 400px;
height: 30px;
border-radius: 5px;
padding-left: 10px;
font-size: 14px;
}
select {
line-height: 30px;
background: #f4f4f4;
}
button {
font-size: 14px;
padding: 5px;
background: #333333;
color: #FFFCEC;
float: right;
width: 100px;
}
button:hover {
font-size: 16px;
}
#edit {
background: #DC5B21;
}
#delete {} #course,
#name,
#profesor,
#subject {
background: #ABDCD6;
}
label {
font-size: 15px;
font-weight: bold;
color: #282827;
}
table {
border-spacing: 0.5rem;
border-collapse: collapse;
margin: 0 auto;
background: #ABDCD6;
}
th {
background: #E9633B;
}
th,
td {
border: 2px solid black;
padding: 10px;
}
td {
font-weight: bold;
font-style: oblique;
}
tr:nth-child(even) {
background: #ABDCD6
}
tr:nth-child(odd) {
background: #DCD8CF
}
.container {
width: 1000px;
margin: 0 auto;
}
.headerbar {
width: 988px;
float: left;
}
.headerbar.top {
background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
min-height: 100px;
border-radius: 19px 30px 0px 0px;
box-shadow: #938D94 7px 7px 5px;
}
.headerbar.bottom {
background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
min-height: 60px;
border-radius: 25px;
border-radius: 0px 0px 37px 34px;
box-shadow: #938D94 7px 1px 5px;
}
.leftbar {
width: 50%;
background: #EB593C;
min-height: 605px;
float: left;
border-radius: 4px;
border: 3px dashed #282827;
}
.rightbar {
width: 47%;
background: #221E1D;
min-height: 595px;
float: left;
padding: 5px;
border: 2px solid #EB593C;
box-shadow: #938D94 5px 5px 5px;
}
#submit,
#clear {
border-radius: 25px;
}
input:focus {
border: 1px solid #FF9933;
}
#media screen and (max-width: 700px) {
.leftbar,
.rightbar {
float: none;
}
.headerbar.top h1 {
margin-left: 50px;
text-align: center;
float: left;
}
and here is my HTML page very simple
<!DOCTYPE html>
<html>
<head>
<title>My web app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mystyle2.css" rel="stylesheet"/>
<script>
var studentsArray = [];
var selectedIndex = -1;
function init() {
document.getElementById("tablerows").innerHTML = "";
if (localStorage.studentsRecord) {
studentsArray = JSON.parse(localStorage.studentsRecord);
for (var i = 0; i < studentsArray.length; i++) {
prepareTableCell(i, studentsArray[i].course, studentsArray[i].name, studentsArray[i].profesor, studentsArray[i].subject);
}
}
}
function onRegisterPressed() {
if(validate()){
var course = document.getElementById("course").value;
var name = document.getElementById("name").value;
var profesor = document.getElementById("profesor").value;
var subject = document.getElementById("subject").value;
var stuObj = {course: course, name: name, profesor: profesor, subject: subject};
if (selectedIndex === -1) {
studentsArray.push(stuObj);
} else {
studentsArray.splice(selectedIndex, 1, stuObj);
}
localStorage.studentsRecord = JSON.stringify(studentsArray);
init();
onClarPressed();
}else{
}
}
function prepareTableCell(index, course, name, profesor, subject) {
var table = document.getElementById("tablerows");
var row = table.insertRow();
var courseCell = row.insertCell(0);
var nameCell = row.insertCell(1);
var profesorCell = row.insertCell(2);
var subjectCell = row.insertCell(3);
var actionCell = row.insertCell(4);
courseCell.innerHTML = course;
nameCell.innerHTML = name;
profesorCell.innerHTML = profesor;
subjectCell.innerHTML = subject;
actionCell.innerHTML = '<button id="edit" onclick="onEditPressed(' + index + ')">Edit</button><br/><button id="delete" onclick="deleteTableRow(' + index + ')">Delete</button>';
}
function deleteTableRow(index) {
studentsArray.splice(index, 1);
localStorage.studentsRecord = JSON.stringify(studentsArray);
init();
}
function onClarPressed() {
selectedIndex = -1;
document.getElementById("course").value = "";
document.getElementById("name").value = "";
document.getElementById("profesor").value = "";
document.getElementById("subject").value = "Math";
document.getElementById("submit").innerHTML = "Register";
}
function onEditPressed(index) {
selectedIndex = index;
var stuObj = studentsArray[index];
document.getElementById("course").value = stuObj.course;
document.getElementById("name").value = stuObj.name;
document.getElementById("profesor").value = stuObj.profesor;
document.getElementById("subject").value = stuObj.subject;
document.getElementById("submit").innerHTML = "Update";
}
function validate(){
var errors = [];
var re = /^[\w]+$/;
var id = document.getElementById("course");
if(id.value==="" ){
errors.push("Course name is empty");
}else if(id.value.length<3){
errors.push("Course name is to shoort");
}else if(!re.test(id.value)){
errors.push("Input contains invalid characters");
}
var name = document.getElementById("name");
var regEx = /^[a-zA-Z ]+$/;
if(name.value===""){
errors.push("Name cannot be empty");
}else if(!regEx.test(name.value)){
errors.push("Name contains invalid characters");
}
var profesor = document.getElementById("profesor");
if(profesor.value===""){
errors.push("Professor field cannot be empty");
}else if(!regEx.test(profesor.value)){
errors.push("Professor field contains invalid characters");
}
if(errors.length>0){
var message = "ERRORS:\n\n";
for(var i = 0;i<errors.length;i++){
message+=errors[i]+"\n";
}
alert(message);
return false;
}
return true;
}
</script>
</head>
<body onload="init()">
<header class="headerbar top"><h1>ITEC3506: Assignment#2</h1></header>
<aside class="leftbar">
<div>
<fieldset>
<label for="course"><span>Course Name</span></label>
<input type="text" placeholder="enter name of course" id="course">
</fieldset>
<fieldset>
<label for="name">Your Name</label>
<input type="text" placeholder="enter your name" id="name">
</fieldset>
<fieldset>
<label for="profesor">Course Professor</label>
<input type="text" placeholder="enter course Professor" id="profesor">
</fieldset>
<fieldset>
<label for="subject">Subject</label>
<select id="subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
<option value="CS">CS</option>
</select>
</fieldset>
<fieldset>
<label for="submit"> </label>
<button id="submit" onclick="onRegisterPressed()">Submit</button>
<button id="clear" onclick="onClarPressed()">Clear</button>
</fieldset>
</div>
</aside>
<aside class="rightbar">
<table id="regtable">
<thead>
<tr>
<th>Course</th>
<th>Student</th>
<th>Professor</th>
<th>Subject</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tablerows">
</tbody>
</table>
</aside>
<footer class="headerbar bottom"></footer>
</div>
</body>
</html>
My question is how can I transform this code into a responsive site.
Everything is resizing normally, except I cannot seem to resize my table and form. Could somebody help me?
A few things going on here.
First, you don't have a set width on a few of your fields, so change:
fieldset{
border: 0px dotted red;
width: 400px;
margin: 0 auto;
}
to:
fieldset{
border: 0px dotted red;
width: 400px;
margin: 0 auto;
max-width: 100%;
}
Also change .headerbar from width: 988px; to width: 100%;.
For responsive frameworks, you need to ensure that you never have a set a fixed width without ensuring there is a max-width attached to it, otherwise your content size will never drop below the size of your fixed width.
Second, I noticed the following:
.leftbar{
width: 50%;
background: #EB593C;
min-height: 605px;
float: left;
border-radius: 4px;
border: 3px dashed #282827;
}
You didn't specifically call this out, but when I check your code in a smaller view, I notice that your width: 50%; is causing the backgrounds to look off, which does not seem to be your intention. I would recommend adding .leftbar { width: 100%; } as well as .rightbar { width: 100%; } inside of #media screen and (max-width:700px){
That just leaves the table. Tables do not automatically break down, so are generally not something we want to use when developing a responsive site, but of course sometimes there is no getting around this.
There are a few ways to tackle the issue with the table. One is to set the table to display:block; and apply overflow-x: scroll; to it inside of your #media screen and (max-width:700px){, which will allow the user to scroll left/right when viewing it from smaller screens. Another is to use one of the various Javascript plugins that can achieve this.
Hope this helps get you on the right track. Best of luck!
Do not set width for these
input,select{/*width: 400px;*/}
fieldset{/*width: 400px;*/}
If you are setting width obviously you cannot obtain a responsive layout
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...)