I have a radius button and want to add an arrow down icon inside this button.
Here is what I have so far:
.test {
border: 2px solid #ffffff;
background: #444444;
width: 25px;
height: 25px;
border-radius: 6px;
text-align: center;
color:#ffffff;
}
.down {
position : absolute;
top : 6px;
left : 10px;
width : 0;
height : 0;
z-index : 100;
border-left : 10px solid transparent;
border-right : 10px solid transparent;
border-top : 10px solid white;
}
<div class="test ">
<div class="down"> </div>
</div>
Just in case the snippet doesn't work, here is a fiddle.
Why isn't the arrow inside the button?
Here's what I want:
.test {
border: 2px solid #ffffff;
background: #444444;
width: 25px;
height: 25px;
border-radius: 6px;
text-align: center;
position: relative;
}
.down {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 0;
height: 0;
z-index: 100;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
margin: auto;
}
<div class="test ">
<div class="down"> </div>
</div>
if you want to know how to show an arrow,you can use Boot Strap by adding it's reference on top of your HTML code and use it's components:
.test {
border: 2px solid #ffffff;
background: #444444;
width: 25px;
height: 25px;
border-radius: 6px;
text-align: center;
}
.down-arrow{
margin-top:7px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="test">
<span class="glyphicon glyphicon-arrow-down down-arrow" aria-hidden="true" style="color:white;"></span>
</div>
</body>
</html>
there is another simple way,in which you can use font awesome components ,check it out on google
try using postion:relative; maring:0px auto; for down class
Related
Hi Everyone!
I want to make an editor for my website with functions like working light/dark toggle button, Working editor that really shows the result and Syntax Hilighting. I have made the frame of the editor...
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(html.value+"<style>"+css.value+"<\/style>" + "<script>"+js.value+"<\/script>")
code.close();
}
}
compile();
* {
padding: 0;
margin: 0;
outline: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
textarea ::-webkit-scrollbar {
width: 8px;
}
textarea ::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
textarea ::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
textarea {
font-size: 15px;
color: #fff;
background: #000000;
}
div#code_output {
height: 100%;
}
<head>
<title>Coding Playground | #Programmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div id="coding_playground_outer">
<header id="playground_header">
<h1>Coding Playground | #Programmer</h1>
</header>
<hr color="#fff">
<div class="page-wrap twilight">
<div class="boxes">
<div id="coding_area">
<textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea>
<textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea>
<textarea id="js" placeholder="JavaScript" class="prism-live language-js"></textarea>
</div>
<div id="code_output">
<iframe id="code"></iframe>
</div>
</div>
</div>
</div>
<body>
This code is 65% working as I imagined it. Just need a working toggle light/dark switch button now and a Syntax Hilight. Please help me as soon as possible...
When sorting an item in a sortable list, the item jumps from its center position in the browser to the far left while sorting/dragging.
Hit add task twice, and then sort an item into new position and you'll see what I'm talking about.
$(document).ready(function() {
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
});
$(document).ready(function() {
$('#add').on('click', () => {
$('.ul').append(
'<div class="divvy">' +
'<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
'<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
'<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
'</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
});
$('.ul').on('click', '.detailcontainer', function() {
$(this).closest('.divvy').find('.panel').toggle();
});
});
$('.panel').hide();
$('.optionBox').on('click', '.remove', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
});
.panel {
display: none;
}
.center {
text-align: center;
margin-top: 58px;
}
.center div {
margin: 0 auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#deletestyle {
background: #f04d25;
border: solid 1px white;
color: white;
font-weight: 700;
height: 45px;
width: 10%;
border-radius: 0px;
}
.divvy {
border: solid 1px black;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
position: relative;
min-width: 325px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.divvy:hover {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
min-width: 325px;
margin: 0 auto;
}
.divvy:active {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
-webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
min-width: 325px;
margin: 0 auto;
}
.inputty {
width: 75%;
height: 45px;
font-size: 22px;
font-family: 'work sans';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="center">
<div class="optionBox" style="position: relative;">
<button class="addtask" id="add" class="center">＋ ADD TASK</button>
<div id="sortable" class="ul" class="center"></div>
</div>
</div>
(fiddle)
You could simply add to your .divvy class :
.divvy {
top:0;
right:0;
left:0;
}
$(document).ready(function() {
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
$(document).ready(function() {
$('#add').on('click', () => {
$('.ul').append(
'<div class="divvy">' +
'<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
'<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
'<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
'</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
});
$('.ul').on('click', '.detailcontainer', function() {
$(this).closest('.divvy').find('.panel').toggle();
});
});
$('.panel').hide();
$('.optionBox').on('click', '.remove', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
});
.panel {
display: none;
}
.center {
text-align: center;
margin-top: 58px;
}
.center div {
margin: 0 auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#deletestyle {
background: #f04d25;
border: solid 1px white;
color: white;
font-weight: 700;
height: 45px;
width: 10%;
border-radius: 0px;
}
.divvy {
border: solid 1px black;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
position: relative;
min-width: 325px;
margin-left: auto;
margin-right: auto;
overflow: auto;
top: 0;
right: 0;
left: 0;
}
.divvy:hover {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
min-width: 325px;
margin: 0 auto;
}
.divvy:active {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
-webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
min-width: 325px;
margin: 0 auto;
}
.inputty {
width: 75%;
height: 45px;
font-size: 22px;
font-family: 'work sans';
}
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="java4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="center">
<div class="optionBox" style="position: relative;">
<button class="addtask" id="add" class="center">＋ ADD TASK</button>
<div id="sortable" class="ul" class="center">
</div>
</div><br>
</div>
</body>
</html>
Specifying a width for #sortable seems to solve the issue:
#sortable {
width: 380px;
}
My div tag named 2nd-bar won't show up below navigation bar and also won't show bottom border and due to that also my list elements won't come inside it.
I am new to HTML and CSS so would be glad to get some help, thank you here is my code.
<htmL>
<head>
<title>Lawyer Up</title>
</head>
<link rel="shortcut icon" type="image/png" href="file:
/User/rahul%20saini/Desktop/Testproject1/index.png"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen"
rel="stylesheet">
<style type = "text/css">
body{
/* background-color:#F8B195; */
}
#navibar{
position: relative;
width: 100%;
height: 45px;
/* background-color: #355C7D; */
padding: 0px;
margin: 0px;
}
#logo{
width:45px;
height: 45px;
float: left;
padding-right:4px;
}
.give-border{
border-bottom-color: darkgrey;
border-bottom-style: inset;
border-bottom-width: medium;
width: 1px;
height: 2px;
}
#searchlogo{
float:right;
width: 25px;
height: 25px;
position: absolute;
top: 2px;
left: 160px;
}
.border{
float:right;
position: absolute;
top: 0px;
left: 154px;
border-left-color:darkslategrey;
border-left-style: solid;
height: 30px;
border-left-width: thin;
}
#loginlogo{
float:right;
position: relative;
top:-24px;
left: -10px;
border-left-color: darkslategray;
border-left-style: dotted;
}
.bordertop{
float: left;
border: 1px;
border-left-color: #302929;
border-left-style: solid;
height: 45px;
padding-left: 4px;
}
#thename{
font-size: 2em;
font-weight: bolder;
font-family: 'oxygen',sans-serif;
color: #000033;
padding-left: 3px;
}
#2ndbar{
float: left
margin: 0px;
width: 20px;
height: 20px;
background-color: antiquewhite;
border-bottom-color: dimgrey;
border-bottom-style: double;
border-bottom-width: thin;
}
#navibar a{
float:right;
font-size: 150%;
color:#F67280;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
a:hover{
font-size: 150%;
text-decoration: underline;
color: wheat;
background-color: skyblue;
background-size: contain;
transition-property: background;
transition-duration: 0.8s;
}
body{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
font-size: 50px;
font-weight: 100;
font-family: sans-serif;
color: brown;
}
.input{
position:relative;
left: 1100px;
width: 185px;
height: 30px;
top:6px;
}
.input input{
position: relative;
height: 30px;
width: 150px;
top:-45px;
background-color: #E9E9E9;
}
ul{
list-style-type: none;
}
.list{
float:left;
padding-right: 10px;
border-right-style: solid;
border: 1px;
border-right-width: thin;
border-right-color: aqua;
}
</style>
<body>
<div id="fullpage">
<div id="navibar" class="give-border">
<img id="logo" src="logo.png">
<div id="thename" >
<span class="bordertop" >Lawyer Up</span>
</div>
<div class="input">
<form>
<input type="search" placeholder="Search">
</form>
<div class="border">
</div>
<img id="searchlogo" src="search.png">
</div>
<div id="loginlogo">
<a href="login.html">
<img src="login.png">
</a>
</div>
</div>
<div id="2ndbar">
<ul>
<li class ="list">name</li>
<li class="list">another name</li>
<li class="list">one more name</li>
</ul>
</div>
<!-- <h1> Welcome </h1> -->
</div> <! div=fullpage >
</body>
</htmL
the problem is the the 2nd bar which isn't working Idk why, I have made some changes but I still can't get it why, I think it might be due to the positions I gave for divs, but I tried that too so it would be a great help if anyone can help me or tell me what am I doing wrong here.
In HTML you cannot begin an id with a number. Try changing the id from 2ndbar to bar2 and your styles should affect it from that point.
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target)
&& (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="write some text bro">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> • </p>
<p class="formtext"> • .</p></div>
</div>
</div>
</body>
</html>
Hi everyone.This is my simple window.Already 3 days im struggling to change S.T.E.A.M. lab text to other text from floating class which one is clicked.And if its possible save this result in cookie.more details more details more details more details (sorry this is for stackoverflow they neeed more details )
You have to add a click listener to your floating Elements and save the text to link. For setting cookie I used hier vanilla JS, but you can use this https://github.com/carhartl/jquery-cookie too
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
$('.floating').click(function(evt){
evt.preventDefault();
$('.link').text(event.target.textContent);
// document.cookie = "cookiename=event.target.textContent";
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target) && (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="Начните вводить название">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> • </p>
<p class="formtext"> • .</p></div>
</div>
</div>
</body>
</html>
Step 1 : Add a click event to the a tag under regions.
Step 2 : On this click event handler get the inner text of the clicked element which is the subject - and store in a variable for display and to be stored in a cookie.
Step 3: Write a cookie save function that takes a string parameter and which is called on step 2 , pass in the subject name to be saved in the cookie.
$("body").on("click" "div.regions a", function(e) {
// Your code here that fetches the event.target.innertext or some such
var txt = $(e.target).text(); // sample code not tested
SetCookie(txt);
SetStemLabText(txt)
});
SetCookie(txt) {
$.cookie("Subject", text);
}
SetStemLabText(txt) {
$('.link').text(txt)
}
so I have a button that creates a div that is both resizable and moveable and adds the div to a container. However, when I try to focus a specific div element clicked it does not focus. I think its something to do with the second click function not being executed in the java script, might be wrong though. Any tips?
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard')
.draggable()
.resizable();
});
$('.newcard').click(function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
<!-- Input JavaScript and jQuery -->
<script src="js/jquery-3.2.0.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Since newcard is generated dynamically you should use event delegation on() when you attach the click event, like :
$('.body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
Hope this helps.
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard').draggable().resizable();
});
$('.newcard').click(function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"><script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
you want attach event to dynamic element, you can find more info here:
In jQuery, how to attach events to dynamic html elements?
$('body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
$(function(){
$(".createcard").click(function() {
var domElement = $('<div class="newcard"></div>');
$('.notecard-container').append(domElement);
$('.newcard')
.draggable()
.resizable();
});
});
$('body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, 0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
transition: .4s;
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
transition: .4s;
}
.newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
border: 1px gray solid;
z-index:100;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
<div class="container">
<div class="notecard-container">
<button class="createcard">New Card</button>
</div>
</div>
<!-- Input JavaScript and jQuery -->
<script src="js/jquery-3.2.0.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
A <div> cannot natively accept focus as it is not an interactive element nor a form control.
You can force it to accept focus programmatically by giving it tabindex="-1" and then toggling it to tabindex="0" when you give it focus. Change it back to -1 when it loses focus and be careful not to get overzealous with tabindex.
However, if you give a non-interactive element focus, you are implying it is an interactive control, so you will also need to give it an accessible name (maybe by aria-label or aria-labeledby in this case), make sure it has focus styles, find an appropriate role so screen readers understand why it can get focus, and generally treat it like a control.
Depending on what it does, you may want to treat it as a non-modal dialog control (with keyboard interaction to match) and if it will have content that overflows, then you will want to make sure a keyboard user can get to it.