I have made my mouse pointer display a circle which inverts colors when hovering over an object by setting cursor: none and tracking a div with jQuery to the mouse position.
The issue is that now when the mouse is stationary it doesn't register and the :hover pseudo-class is essentially useless. Are there any workarounds?
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('#circularcursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#circularcursor {
position: absolute;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
}
body {
min-height: 900px;
background-color: #222;
}
body #cta {
display: flex;
justify-content: center;
}
body #cta #cta_btn {
text-decoration: none;
font-size: 28px;
font-family: 'Roboto Slab', serif;
border: 1px solid #333;
padding: 15px 50px;
text-align: center;
display: inline-block;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
transition-duration: 0.2s;
color: rgb(107, 73, 4);
}
#cta_btn:hover {
transform: scale(120%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Elsie:wght#900&family=Oswald&family=Roboto+Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- This is a div for the mouse pointer -->
<div id="circularcursor"></div>
<!-- This is a div for the mouse pointer -->
<div id="cta">
<a href="http://www.google.com">
<p id="cta_btn">let's talk</p>
</a>
</div>
</body>
</html>
To do what you require you need to amend the #circularcursor element so that it doesn't intercept the mouseover event from firing on the a element underneath it. To do that, set pointer-events: none on it.
jQuery($ => {
$(document).on('mousemove', function(e) {
$('#circularcursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#circularcursor {
position: absolute;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
pointer-events: none; /* add this rule */
}
body {
min-height: 900px;
background-color: #222;
}
body #cta {
display: flex;
justify-content: center;
}
body #cta #cta_btn {
text-decoration: none;
font-size: 28px;
font-family: 'Roboto Slab', serif;
border: 1px solid #333;
padding: 15px 50px;
text-align: center;
display: inline-block;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
transition-duration: 0.2s;
color: rgb(107, 73, 4);
}
#cta_btn:hover {
transform: scale(120%);
}
<link href="https://fonts.googleapis.com/css2?family=Elsie:wght#900&family=Oswald&family=Roboto+Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="circularcursor"></div>
<div id="cta">
<a href="http://www.google.com">
<p id="cta_btn">let's talk</p>
</a>
</div>
Related
Situtation: I am trying to make the div (contains a textbox and button) to be always in the center of the white space left after the design of clip path (as you can see in the image attached).
knowing that clip path is based on percentage it keep changing when the webpage size change
ISSUE: When the webpage size change, the element is no more centered!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Check-in</title>
</head>
<body>
<header>
<h1 id="title">MOUS AIRWAY | <span id="check-in">CHECK-IN</span></h1>
</header>
<div class="userInfo">
<span id="tooltip">É neccessario inserire un codice <br>fiscale (16 caratteri).</span>
<input type="text" id="codiceFiscale" placeholder="cf" oninput="CloseToolTip()">
<button onclick="CheckIn()" id="checkIn">Check-in</button>
</div>
<script src="js.js"></script>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
header{
font-family: bebas;
color: gold;
height: 100vh;
background-color: #00008B;
clip-path: polygon(100% 0, 30% 50%, 100% 100%, 0 100%, 0 0);
z-index: -1;
}
#title{
position: absolute;
margin-left: 50px;
margin-top: 150px;
font-size: 60px;
}
#check-in{
font-size: 30px;
font-family: 'Courier New', Courier, monospace;
color: white;
}
.userInfo{
display: flex;
position: absolute;
margin-top: -450px;
margin-left: 50%;
}
button{
width: 170px;
height: 60px;
background-color: transparent;
font-size: 20px;
color: #00008B;
cursor: pointer;
font-weight: bold;
transition: background-color 0.5s ease;
}
button:hover{
background-color: #00008B;
color: white;
transition: background-color 0.5s ease;
}
#codiceFiscale{
width: 450px;
height: 60px;
margin-right: 30px;
padding-left: 10px;
border: solid 1px black;
font-size: 30px;
text-transform: uppercase;
border-color: #00008B;
}
#codiceFiscale:focus{
outline: none;
box-shadow: 0px 3px 10px #00008B;
}
P.S: i need a solution using only html, css or js. no jquery or bootstrap library.
Thanks!
To keep content always in verticaly center like in my case. here is the solution i found. make it independently from clip-path, the solution was easiest than i was overthinking...just give it position absolute! and of course make sure it always in center by using percentage.
SOLUTION:
.userInfo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-0%,-50%);
align-items: center;
}
I want when I click the menu button, it would expand the width to 300px with smooth transition in 0.5 second but it doesn't work.
var menu = document.querySelector('.menu');
menu.addEventListener('click', () => {
menu.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght#500&family=Roboto:ital,wght#0,300;0,500;1,100;1,300&display=swap');
html{
background: linear-gradient(45deg,#a12626 0%,#550bec 100%) no-repeat;
height: 100%;
}
body{
font-family: 'Poppins', sans-serif;
}
.container{
position: relative;
margin-top: 30%;
}
.menu{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, #a12626 0%, #550bec 100%) no-repeat;
/* border: white solid; */
/* color: white; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 50px;
cursor: pointer;
transition: width 2s ease;
}
.menu.active{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">Menu</div>
</div>
<script src="script.js"></script>
</body>
</html>
If you want to use width transition you have to add a width in your class like this:
var menu = document.querySelector('.menu');
menu.addEventListener('click', () => {
menu.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght#500&family=Roboto:ital,wght#0,300;0,500;1,100;1,300&display=swap');
html{
background: linear-gradient(45deg,#a12626 0%,#550bec 100%) no-repeat;
height: 100%;
}
body{
font-family: 'Poppins', sans-serif;
}
.container{
position: relative;
margin-top: 30%;
}
.menu{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, #a12626 0%, #550bec 100%) no-repeat;
/* border: white solid; */
/* color: white; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 50px;
cursor: pointer;
transition: width 2s ease;
width: 50px;
text-align: center;
}
.menu.active{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">Menu</div>
</div>
<script src="script.js"></script>
</body>
</html>
Im trying to "Code" a cards still in early process of learning to code...i cant figure how to keep IMG from resizing over the headder when trying to zoom it in on hover i've been googling for hours and cant get it right...
now i know there is going to be a LOT of useless code but i still cant recognize a good code so please dont roast me on that :/
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #5c6370;
}
.cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
position: relative;
top: 100px;
}
.card{
background-color: #ffffff;
position: relative;
overflow: hidden;
height: 510px;
width: 380px;
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.671);
text-align: center;
transition: 0.1s ease-in;
margin: 25px;
box-sizing: border-box;
}
.card:hover{
transform: scale(1.07);
}
.card img {
max-width: 100%;
height: 250px;
display: block;
border-radius: 20px 20px 0px 0px;
transition: transform .4s;
overflow: hidden;
}
.card img:hover {
transform: scale(1.2);
transform-origin: 50% 50%;
}
.card-header h1{
margin: 15px;
}
.card-bttns button{
margin: 15px;
position: relative;
top: 15px;
padding: 10px 17px;
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
border: 2px solid black;
cursor: pointer;
background-color: #5c637000;
transition: 0.1s ease-in;
}
.card-bttns button:hover{
background-color: black;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
</head>
<body>
<section class="cards-top">
<div class="cards">
<div class="card">
<img src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains'>
<div class="card-header">
<h1>Pretty Mountain</h1>
</div>
<div class="card-info"><p>Very Much Snowy i like snow <br>i like to throw snowballs wow its cool <br>
do zou like to throw snowballs? Cause i Do!</p></div>
<div class="card-bttns">
<button type="submit">Follow</button>
<button type="submit">Contact</button>
</div>
</div>
</div>
</section>
</body>
</html>
In your case, adding overflow: hidden to the photo doesn't make sense. You need to add this to the div which will contain the photo. Then the image will increase but will not go beyond the div - of course you have to give the constant height.
Try this code:
I added new div to image.
Added css styles to class card-img-hld
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: #5c6370;
}
.cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
position: relative;
top: 100px;
}
.card{
background-color: #fff;
position: relative;
overflow: hidden;
height: 510px;
width: 380px;
display: flex;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.671);
text-align: center;
transition: 0.1s ease-in;
margin: 25px;
box-sizing: border-box;
}
.card:hover{
transform: scale(1.07);
}
.card img {
width: 100%;
height: 250px;
display: block;
border-radius: 20px 20px 0px 0px;
transition: transform .4s;
object-fit: cover;
}
.card img:hover {
transform: scale(1.2);
}
.card-header h1{
margin: 15px;
}
.card-img-hld {
width: 100%;
overflow: hidden;
height: 250px;
}
.card-bttns button{
margin: 15px;
position: relative;
top: 15px;
padding: 10px 17px;
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
border: 2px solid black;
cursor: pointer;
background-color: #5c637000;
transition: 0.1s ease-in;
}
.card-bttns button:hover{
background-color: black;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
</head>
<body>
<section class="cards-top">
<div class="cards">
<div class="card">
<div class="card-img-hld">
<img src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains'>
</div>
<div class="card-header">
<h1>Pretty Mountain</h1>
</div>
<div class="card-info"><p>Very Much Snowy i like snow <br>i like to throw snowballs wow its cool <br>
do zou like to throw snowballs? Cause i Do!</p></div>
<div class="card-bttns">
<button type="submit">Follow</button>
<button type="submit">Contact</button>
</div>
</div>
</div>
</section>
</body>
</html>
I want to make something like - When I press on About, so there will show overlay over the main div with text about. Now when I click, so that div will show, but it will move down that particles-js div. And I don't want to move that div, but I want to make about to show over that particle (fullscreen overlay with 50% opacity)
$(".about").click(function() {
$(".main").fadeToggle('500');
$(".aboutText").fadeToggle('500');
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
display: none;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Is this what you are trying to do? Show the about text when clicked?
$(".about").click(function() {
$("#particles-js").toggleClass("hide")
$(".aboutText").toggleClass("hide")
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
.hide {
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText hide">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
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.