HTML/CSS formatting trouble. - javascript

So I have made a simple app in ionic and I am formatting my css and html. I am trying to make my app look really nice. All it has right now is a input text field and a input button. I am having a hard time with my margins/padding, not sure. Here is my code:
.title {
background-color: #e6ffff;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
vertical-align: middle;
display: inline-block;
border: none;
text-align: center;
width: 100%;
margin-top: 15px;
}
div {
margin-top: 50px;
margin-left: 120px;
margin-right: 120px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 15px;
}
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Push Notifications</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="myCtrl">
<form>
<input type="text" class="messageText" placeholder="Message" ng-model="messageText">
<input type="submit" ng-click="submit()">
</form>
</div>
</ion-content>
</ion-pane>
</body>
Picture of the app running in the browser
See how the gray is all weird and the header also is missing some color? I need some help fixing this. Also I would not mind some css tips on making a app look professional! Thanks in advance!:)

Okay, so the problem lies in how you have things positioned in the DOM.
Quickest solution is to add the styles to the form and take a few styles away from the div that's wrapping it.
form{
background:pink;
background-color: #f2f2f2;
padding:15px;
border-radius: 5px;
}
div {
margin-top: 50px;
margin-left: 120px;
margin-right: 120px;
padding: 15px;
}
quick reference for box models: https://css-tricks.com/the-css-box-model/

In addition to the Answer from #Aldose ... To fix the Header having a margins you can try this.
body , html
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
.title {
background-color: #e6ffff;
padding:0px;
margin:0px;
}

Related

Passing quiz score using html

Hello I need some help in developing a quiz using HTML.
Here is the code, if you require pictures I can provide them, I need some help getting the score counter to count over around 10 pages, and it keeps the right score so for a correct answer it will be 1, for a wrong answer it will be -0.25. Thanks.
<html>
<head>
<style> {
box-sizing: border-box;
}
body{
background-image: url('background.png');
font-family: sans-serif: ;
}
button{
font:inherit;
font-size:100%;
color:black;
line-height:normal;
vertical-align:baseline
}
#hello{
width: 96%;
background-color: palegreen;
color: black;
padding: 10px;
margin: 10px auto;
border: 6px double limegreen;
border-radius: 10px;
}
#quiz{
position: relative
width: 96%;
color: white;
padding: 10px;
margin: 10px auto;
border: 6px double black;
border-radius: 10px;;
}
h1{
font-size: 28px;
clear: both;
}
#quiz h1{
width: 100%;
text-align: left;
background-color: black;
color: yellowF;
padding: 8px;
border-radius: 15px;
filter: drop-shadow(3px 3px 3px grey);
background-image: "background.img"
}
.option{
background-color: Black;
color: white;
padding: 8px;
border-radius: 10px;
border: 2px solid Black ;
}
#quiz button{
width: 100%;
display: block ;
margin: 10px auto;
text-align: left;
}
#quiz .option:hover{
background: white;
color: lightgreen ;
border: 2px solid lightgreen;
}
.green{
background: white;
border: 2px solid green;
color: green;
border-radius: 10px;
padding: 8px;
}
.green:before,#score:before{
content: 'Correct ✔️ ';
}
.red{
background-color: white;
}
.red:before,#wrong:before{
content:'Incorrect ✖️ ';
}
.score{
background-color: lightgreen;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
.wrong{
border-radius: 10px;
background-color: red;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
}
#show button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
#start{
text-align: center;
}
#start button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
.hidden{
display: none;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 5px;
width: 100%;
border-radius: 10px;
padding: 0px auto 20px auto;
z-index: 1;
}
#sticky span{
float: right;
display: inline-block;
margin: 5px 4px;
}
#fscore{
background: purple;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
p{font-size: 30px
}
p1 {font-size: 30px}
p2{font-size: 30px}
</style>
<title>Next Question</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<body>
<div id="main">
<div id="hello">
<br />
<div id="start">
<button type="button">Start Quiz</button>
</div>
</div>
<!--Quiz Start-->
<div id="quiz" class="hidden">
<div id="sticky">
<span class="wrong"><span id="wrong">0</span></span>
<span class="score"><span id="score">0</span></span>
</div>
<h1>1. What does CPU stand for?</h1>
<div class="choose">
<button class="option" value="wrong" type="radio">Certain process units</button>
<button class="option" value="wrong" type="radio">Central processing unix</button>
<button type="radio" class="option" value="right">Central processing unit</button>
<button class="option" value="wrong" type="button">Computer's proessing unit</button>
</div>
<br />
<br />
<div id="show">
<button type="button">Show Correct Answers</button>
</div>
<form method="get" action="t2.html" hidden>
<button type="submit">Press to start</button>
</form>
<!--Final Score-->
<div id="fscore">You Scored <span class="fscore">0</span> out of <span class="total"></span>
</div>
</div>
</div>
</body>
<script> $(function(){
var tot = $(".choose").length;
$(".total").html(tot);//total Score
$("#start").click(function(){
$('#hello').addClass('hidden');
$("#quiz").removeClass('hidden');
$('html, body').animate({
scrollTop: $("#quiz").offset().top
}, 10);//smooth scrolling effect to min quiz
});
$(".option").click(function(){
var score = 0;
var wrong = 0;
$(this).removeClass("option");//disable it's css
$(this)
.addClass(($(this).val() === "right") ? 'green' : 'red');//right or wrong css
$(this).siblings().attr("disabled",true);//prevent to choose other options
for (i=0;i<$(".green").length;i++){
if ($(this).val() === "right"){
score++;
$("#score").html(score);//update score
}
}
for (k=0;k<$(".red").length;k++){
if ($(".red").val() === "wrong"){
wrong++;
$("#wrong").html(wrong);//update negative score
}
}
var p = +$("#score").text();
var m = +$("#wrong").text();
var n = m*0.25;//0.25marks deducted for each wrong answer
var t = p-n;//get final score considering negative marking
$(".fscore").html(t);//update final score
});
$("#show button").click(function(){
for (j=0;j<$(".choose").length;j++) {
$(':button[value="right"]').addClass('green')
.removeClass("option");//show correct option
}
$('.choose>button').attr("disabled",true);//disable all Buttons
});
});
</script>
</html>
You can use localStorage to store data in the client's web browser. Data saved using localStorage has no expiry date. It will stay there intact unless deleted. You can read about localStorage here
You can do something like this.
First, calculate the score on the first page.
Assuming you have some kind of button click or simply a click on an element to navigate to the next page. You can add an event listener to this element using JavaScript. This event listener will execute a function which will first, calculate the result on the first page and then store it in the web browser using localStorage like this localStorage.setItem("score", quizScore);
After navigating to the next page you can run a function when the page completely loads that retrieves this score using this var score = localStorage.getItem("score");
Then you can display the current score, carry on with the quiz, calculate the result, add it to the previous score, update the key score value, and repeat the first, second, third, and fourth steps for all the future pages again until you have calculated the final score of the quiz.
Lastly, you can retrieve the final value, show it to the client in whatever way you like, and delete it using localStorage.removeItem("score"); if you wish to.
localStorage.setItem("score", 1.5);
// Retrieve
var cnt = localStorage.getItem("score");
console.log(cnt)
js fiddle

Wrapping words to the next line without scroll

I have this funny little terminal Angular project... the terminal works properly in that the vertical scroll is constantly there and automatically scrolled when new commands are entered
How the HECK can I get the text within the horizontal divs to wrap to the next line? I have tried all different combos of word-break and overflow-x etc etc
I want the text in the <div class = ui-terminal-content> to wrap to the next line instead of creating a scroll bar...
For reference, you can visit http://stucodes.com and type in the command pepper... the word societtyyyyyyyy should wrap and not cause a horizontal scroll bar.
.ui-terminal {
/* margin-top: 5px; */
height: 22em;
border: 1px;
overflow-y: scroll;
border-style: solid;
max-width: 40em;
background-color: black;
}
.headercontent {
padding-top: 5px;
padding-left: 0px;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.terminalheader {
max-width: 40em;
height: 30px;
border: 1px;
border-bottom: 0px;
border-style: solid;
border-color: black;
}
.ui-terminal-input {
border: 0 none;
background-color: transparent;
color: inherit;
padding: 0;
width: 75%;
outline: none;
vertical-align: baseline;
color: transparent;
text-shadow: 0 0 0 white;
font-family: monospace;
font-size: 15px;
}
<div class="ui-terminal " (click)="focus(in)">
<div class="word-break">
<div class="ui-terminal-content">
<div *ngFor="let command of commands">
<span class="commandspan ui-terminal-command">{{command.text}}</span>
<div class="responsediv">{{command.response}}</div>
</div>
</div>
</div>
<div>
<span class="inputspan ui-terminal-content-prompt">{{prompt}}
<!-- C:/stucodes -->
{{commandPreface}}
<input elastic-input #in type="text" [(ngModel)]="command" class="ui-terminal-input" autocomplete="off" (keydown)="handleCommand($event)" autofocus>
</span>
</div>
</div>
I went to your site and played around a little in Chrome devtools. Change your CSS to the below:
.ui-terminal {
/* margin-top: 5px; */
height: 22em;
border: 1px;
overflow-y: scroll;
border-style: solid;
max-width: 40em;
background-color: black;
white-space: pre-wrap;
}
and then remove the white-space: pre from the .responsediv[_ngcontent-c0] class in your other style sheet.

Whats wrong with this HTML

I was referring the code in js fiddle:
Jsfiddle which works fine
!DOCTYPE html>
<style>
.item {
display: inline-block;
width: 180px;
height: 120px;
border: thin solid #000;
margin: 0.25em;
}
.item .title {
font-weight: bold;
word-wrap: break-word;
}
.item {
overflow: hidden;
}
.hidden {
display: none;
}
#top {
position: fixed;
width: 100%;
height: 80px;
padding: 4px;
text-align: center;
background: #FFF;
}
#top h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
#search {
width: 60%;
margin: 0 auto;
padding: 0.25em;
text-align: center;
}
#results {
padding-top: 90px;
text-align: center;
}
.icon:before {
font-size: 3em;
color: #4466DD;
}
</style>
</head>
<body>
<div id="top">
<h1>Programming Languages</h1>
<input type="text" id="search" value="" placeholder="Search..." />
</div>
<div id="results"></div>
<script>..................
But when I wrote the same code and hosted in this website (http://indianwaterpurifiers.online/) see the view source, the grid is not rendering in the browser.
What's wrong with the HTML file?
You have a site where you load jQuery UI, but that is dependent on jQuery. Make sure you include that on the page before jQuery UI.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Included
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
and it worked , thanks for the comments

CSS - Formatting a Navigation div beside multiple divs

I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with
Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;

Which CSS should I apply to appear tool tip over a text box?

I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.
you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/
First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.

Categories