VIDEO I made it so when ever you a click a button the user is able to duplicate the note div but the copied not div do not function as the original it's not draggable and also when ever I change the color of the copied note it changes the original note color is there a way I could fix this and make it the duplicated notes work exactly like the original note?
Online Editor For The Project
I use jquery to make my div with the id note draggable and and also clone
$('#note').draggable({
handle: "#headeR"
});
//this will duplicate the note container
function dup(){
$(function(){
$('#note').clone().appendTo('#notecopy');
});
the div that I'm duplicating
<!-- my note area container-->
<div class="NoteSection" id="note">
<!--text container-->
<!--text header with colors-->
<div id="headeR">
<button id="color#1" class="BtnColor1" onclick="greennote()"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
<button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
<button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
<button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
Full Code
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>.NoteSection {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 50px;
width: 245px;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
position: relative;
left: 250px;
}
textarea {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 240px;
width: 240px;
position: relative;
bottom: 83%;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
resize: none;
}
.BtnColor1 {
background-color: #C2EA92;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #728F4E;
}
.BtnColor2 {
background-color: #92EADD;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
background-color: #EA92A5;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #8F4E55;
}
</style>
<body>
<div class="Container" id="'note'">
<div class="addnote">
<button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
<span class="material-symbols-outlined">
add_box
</span></button>
</div>
<!-- my note area container-->
<div class="NoteSection" id="note">
<!--text container-->
<!--text header with colors-->
<div id="headeR">
<button id="color#1" class="BtnColor1" onclick="greennote()"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
<button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
<button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
<button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
<div id="notecopy" style="width:0px; height:0px;">
</div>
<script>
$('#note').draggable({
handle: "#headeR"
});
//this will duplicate the note container
function dup(){
$(function(){
$('#note').clone().appendTo('#notecopy');
});
}
// changes notes colors
function greennote(){
document.getElementById("notepage").style.backgroundColor = "#C2EA92";
}
function bluecolor(){
document.getElementById("notepage").style.backgroundColor = "#92EADD";
}
function redcolor(){
document.getElementById("notepage").style.backgroundColor = "#EA92A5";
}
function purplecolor(){
document.getElementById("notepage").style.backgroundColor = "#EA92E9";
}
</script>
</body>
</html>
You need to understand that ID tags have to be unique. You are reusing them each time you make your clone and that is partly why this isn't working for you.
I show below a few ways of working around this and optimizing your code. Notice I don't use ID's at all in the javascript. I left the references in HTML because I didn't want to clean all the excess .. just show the JS. Notice how i use element.closest(ref) to find a container so I know which buttons affect which notepad. I also show how you can use that same logic for a delete function
$('.NoteSection').draggable({
handle: ".headeR"
});
// get the 'master' refrerence so we can use it to make copies easily
let masterCopy = $('.NoteSection').first()
//this will duplicate the note container
function dup() {
masterCopy.clone().appendTo('#notecopy');
}
// changes notes colors
let colors = {
green: '#C2EA92',
blue: "#92EADD",
red: "#EA92A5",
purple: "#EA92E9"
}
function deleteR(el) {
el.closest('.NoteSection').remove()
}
function changeColor(el, color) { el.closest('.NoteSection').querySelector(".notepage").style.backgroundColor = colors[color];
}
.NoteSection {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 50px;
width: 245px;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
position: relative;
left: 250px;
}
textarea {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 240px;
width: 240px;
position: relative;
bottom: 83%;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
resize: none;
}
.BtnColor1 {
background-color: #C2EA92;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #728F4E;
}
.BtnColor2 {
background-color: #92EADD;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
background-color: #EA92A5;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #8F4E55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Container">
<div class="addnote">
<button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
<span class="material-symbols-outlined">
add_box
</span></button>
</div>
<!-- my note area container-->
<div class="NoteSection">
<!--text container-->
<!--text header with colors-->
<div class="headeR">
<button class="BtnColor1" onclick="changeColor(this,'green')"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="changeColor(this,'blue')"></button>
<button id="color#1" class="BtnColor3" onclick="changeColor(this,'red')"></button>
<button id="color#1" class="BtnColor4" onclick="changeColor(this,'purple')"></button>
<button class="BtnColor5" onclick="deleteR(this)"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea class="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
<div id="notecopy" style="width:0px; height:0px;">
</div>
Related
I'm a beginner to HTML and JavaScript.
I'm building a tabs bar, in which I want to have the option to scroll it horizontally, not with a traditional browser scroll, but with arrow buttons that I've created.
Here is how my tabs bar looks like:
This is the best I've managed to do:
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
I manage to go to the JavaScript function, but have no idea how to scroll horizontally by JS code. Also I would like to hide the OOTB scroll.
I've also created a fiddle: https://jsfiddle.net/b40c19h6/1/
Use overflow-x: hidden to hide the scrollbar and you can use the scrollLeft or scrollBy function on your tabs element to move the content.
Here how you can do it:
const arrowLeft = document.getElementsByClassName('arrow')[0];
const arrowRight = document.getElementsByClassName('arrow')[1];
const tabs = document.getElementById('tabs_container');
console.log("here")
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
tabs.scrollLeft -= 30;
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
tabs.scrollLeft += 30;
}
body{
height:100vh;
width:100%;
margin: 0;
}
#main_container{
background-color: #3f51b5;
height:100%;
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container{
overflow-x: hidden;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>vacabulary</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
This should work by using element.scrollBy.
The scrollBy() method of the Element interface scrolls an element by the given amount.
Also, you should set overflow-x to hidden instead of auto. overflow:auto will assign scrollbar to it
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
let left = document.querySelector('#left')
let right = document.querySelector('#right')
left.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(-20,0);
});
right.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(20,0);
});
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: hidden;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<button id='left'>Left </button>
<button id='right'>Right</button>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
I made this log-in and register form in which an onclick submit button of the form its display which form is submitted, left or right to implement it. I have used onclick property and passed a function to it fun() which has one parameter of the type no. So I used two functions fun(0) and fun(1) used to display a message which forms submitted by the user but it does not display the message.
And also I have a problem with the CSS it's not scaling according to the screen size as I used bootstrap for CSS and try the width, position property scale in % but then also it's not working.
function fun(Number n) {
if (n === 1) {
document.getElementsByClassName('m1').style.display = 'none';
} else {
document.getElementsByClassName('m2').style.display = 'none';
}
document.getElementsByClassName('modal').style.display = 'flex';
}
body {
background: linear-gradient(45deg, #fff722, #ff26f9);
font-weight: bold;
letter-spacing: 2px;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
text-align: center;
}
input[type=radio] {
width: 9%;
}
input, #e {
width: 100%;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.row {
position: relative;
}
form {
font-size: 20px;
border-bottom: solid 5px #dedfe0;
border-right: solid 5px #dedfe0;
padding: 5px;
width: 500px;
margin: 80px;
}
label {
font-family: arial;
color: #0000ff;
}
#log {
position: absolute;
top: 20px;
right: 20px;
transform: translate(50, 50);
}
button:hover {
opacity: 0.8;
}
.modal, .modal1 {
display: none;
justify-content: center;
align-items: center;
border-radius: 6px;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fff722, #ff26f9);
position: absolute;
text-align: center;
padding: 2%;
justify-content: center;
align-items: center;
border: solid 5px rgba(100, 0, 50, 0.5);
left: 500px;
top: 180px;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: black;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: zoom 10000;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(2)
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<form class="jumbotron" class="column" id="register">
<h1 class="container " style="border: solid 3px grey; color:magenta;
"><b>REGISTER<b></b></h1><br>
<label>First Name:</label><input type="text"><br>
<label>Last Name:</label> <input type="text"><br>
<label>D.O.B:</label> <input type="date"><br>
<label>City:</label> <input type="text"><br>
<label>Mobile No.: </label>
<select style=" width: 20%;">
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select> <input type="text"><br>
<label>Gender:</label>
<div style=" "> <input type="radio" value="Male" name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Other" name="Gender">Other<br></div>
<label>Employment Status:</label>
<select id="e">
<option>Employed</option>
<option>Unemployed</option>
</select><br><br><br>
<input type="submit" onclick="fun(0)" class="btn-info btn-lg" value=Register>
<input type="reset" class="btn-info btn-lg" value=Reset>
</form>
<div class="column" id="log">
<form class="jumbotron">
<h1 style="border: solid 3px grey; color:magenta;"><b>LOG-IN</b></h1><br>
<label>Email-Id:</label><input type="email"><br>
<label>Username:</label><input type="text"><br>
<label>Password:</label><input type="Password" min,="5"></br><br><br>
<input type="submit" class="btn btn-info btn-lg " onclick="fun(1)" value="LOG-IN">
</form>
</div>
</div>
<nav class="modal">
<div class="modal-content">
<span onclick="document.querySelector('.modal').style.display='none'" class="close">×</span>
<div style="border:solid 5px #dedfe0" class="container">
<h3 class='m1'>Left form submited</h3>
<h3 class='m2'>Right form submited</h3>
</div>
</div>
</nav>
</body>
<script type="text/javascript">
</script>
</html>
I have been trying to get this simple menu example going but I have two problems.
The buttons wiggle when hovered.
The image/text inside of the hover box is not centered.
Any help that you would be willing to provide is really appreciated. I am really trying to learn what I am doing wrong, so any explanation you can provide would be very awesome.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<title>Cool Button Menu Example</title>
</head>
<style>
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
}
#coolButtonTtopMenu .divButtons img {
margin-top: -15px;
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
float: left;
margin: auto;
margin: 2px;
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
padding: 3px;
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
border: 3px dotted #F59595;
}
</style>
<script>
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
</script>
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</a>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Thing</p>
</a>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>
</html>
The problem that you are facing when hovering over the buttons is that a border takes up space and that border is applied when you hover, creating the "wiggle". To resolve this, you may consider moving away from a border and instead use an outline, which does not increase the size.
As far as centering the content goes, you need to be applying text-align: center; to the parent element for which you would like the child elements centered. In your case, you would apply this rule to #coolButtonTopMenu .divButtons.
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
text-align: center;
}
#coolButtonTtopMenu .divButtons img {
/*margin-top: -15px;*/
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
/*float: left;*/
margin: auto;
/*margin: 2px;*/
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
/*padding: 3px;*/
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
margin: 3px;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
outline: 3px dotted #F59595;
}
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
</a>
<p class="btnSmallText">New Thing</p>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>
I am wondering if any one could direct me to some online resources where I can find out how to put a vertical line inside of my content2 border which will then split the element names from the element values? Also, how do I get my content2 border from outside of border-radius content? I want it to come inside of the content border-radius. Right now it looks tacky being outside of the border-radius content. Any suggestions would be much appreciated. HTML code and CSS code.
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#para1 {
padding: 0px 1050px 0px 20px;
position: relative;
}
#para2 {
padding: 0px 1099px 0px 20px;
position: relative;
}
.username-label,
.password-label {
margin: 10px 0px 0px 350px;
position: relative;
top: -70px;
}
.existingUsername,
.existingPassword,
#username_error1,
#password_error2
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 425px;
position: relative;
top: -70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -500px;
position: relative;
top: -10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 330px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 40px;
}
span{
color: red;
margin-left: 300px;
position: relative;
top: -70px;
}
.content2{
display: none;
border-style: solid;
border-width: 1px;
top: -320px;
position: relative;
margin-left: 20px;
}
.accountName{
border: none;
}
.ElementOne{
font-weight: bold;
}
#Content2-Button1,
#Content2-Button2{
background-color: #add8e6;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.accountName,
.accountEmail,
.accountGpa{
margin-left: 200px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text"/>
<br><span id="New_Username_error"></span><br>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password"/>
<br><span id="New_Password_error"></span><br>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email"/>
<br><span id="New_Email_error"></span><br>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email"/>
<span id="Repeat_Email_error"></span>
<button id="button2">Create Account</button>
</div>
</div>
<div class="content2">
<label class="ElementOne" for="accountName">AccountName</label>
<input class="accountName" type= "text"><br><br>
<label class="ElementTwo" for="accountEmail">EmailAddress</label>
<input class="accountEmail" type= "email"/> <button id="Content2-Button1">Update</button><br><br>
<label class="ElementThird" for="accountGpa">CurrentGPA</label>
<input class="accountGpa" type= "number"/> <button id="Content2-Button2">Update</button>
</div>
<br/>
</div>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
<script src="Home.js"></script>
</body>
</html>
To create a vertical line, you just need to create a class and add it in the html.
.vertical-separator {
border-left: 1px solid black;
margin: 0 5px;
}
And then in your html just add a div tag, in the place you want the separator. (For example between the <label> and <input> tag.
<div class="vertical-separator"></div>
Also, to make this work, you should do a better layout, for example, the <input>and <label>tags should be inside another div. And make the elements inside element display: inline-block.
If you don't want to do this, and stick with your layout, just add to .vertical-separator a fixed height and it will work. But I strongly recommend you to practice css layout, flexbox, and some other things to improve your code.
I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle
You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>
try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/