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.
Related
Well, I'm trying to make a responsive menu... I already have the web menu structure, now I'm working on the mobile menu. Said menu must occupy the entire screen, when I close it what I do is reduce its width to 0 with a transition. The problem is that only the div is reduced, its content is still there... in this case only the button, obviously it will have more content later, but to begin with I want that button to disappear every time it is closed.
//Variables
let openMenu = document.getElementById('open_menu');
let contentMenu = document.getElementById('content_menu');
let iconsTopBar = document.querySelectorAll('.icon-top-bar');
let topBarWeb = document.getElementById('top_bar_web');
let topBarMobile = document.getElementById('top_bar_mobile');
let closeMenuMobile = document.getElementById('close_menu_mobile');
let mobileMenu = document.getElementById('mobile_menu');
//Functions
openMenu.addEventListener('click',function(e) {
contentMenu.classList.toggle('close-menu');
});
window.addEventListener("resize", function(){
iconsTopBar.forEach(icon => {
if( window.innerWidth <= 1000){
if(icon.classList.contains('fad')){
icon.classList.remove('fad');
icon.classList.add('fas');
}
}else{
if(icon.classList.contains('fas')){
icon.classList.remove('fas');
icon.classList.add('fad');
}
}
});
if( window.innerWidth <= 768){
contentMenu.classList.add('close-menu');
}else{
contentMenu.classList.remove('close-menu');
}
showMenu();
});
window.onload = showMenu();
function showMenu(){
if( window.innerWidth <= 600){
topBarWeb.style.display = "none";
topBarMobile.style.display = "flex";
contentMenu.style.display = "none";
// this.alert('asdfas');
}else{
topBarWeb.style.display = "flex";
contentMenu.style.display = "flex";
topBarMobile.style.display = "none";
}
}
closeMenuMobile.addEventListener('click',function(e){
mobileMenu.style.width = "0vw";
mobileMenu.style.transition = ".5s";
// alert('sdfsd');
});
#import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
--bg-color: rgba(78, 78, 78, 0.1);
--white:rgb(255, 255, 255);
--blue: rgb(67, 140, 248);
--gray: rgba(0, 0, 0, 0.6);
--red: rgba(212, 34, 34, 0.797);
--orange: rgb(255, 147, 74);
--purple:rgb(222, 83, 155);
--yellow:rgb(255, 238, 88);
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 3px;
}
* {
padding: 0;
margin: 0;
}
body {
background: var(--bg-color);
display: flex;
}
.content-menu {
display: inline-flex;
background: var(--white);
width: 280px;
height: 100vh;
transition: 0.6s;
}
.content-body {
width: 100%;
height: 100vh;
}
.content-body .content-top-bar {
display: block;
padding: 10px;
background: var(--white);
top: 0;
width: 100%;
background-image: url('../img/cardinal/top-bar.png');
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
}
.content-body .content-top-bar .top-bar {
display: flex;
}
.content-body .content-top-bar .top-bar #open_menu {
display: inline-flex;
font-size: 25px;
cursor: pointer;
padding: 2px;
color: var(--blue);
width: auto;
}
.content-body .content-top-bar .top-bar .content-search-input {
border: 1.5px solid var(--blue);
margin-left: 20px;
border-radius: 5px;
background: var(--white);
width: 35%;
position: relative;
}
.content-body .content-top-bar .top-bar .content-search-input .search {
padding: 2px 0 2px 10px;
border: none;
background: var(--white);
color: var(--gray);
width: 80%;
outline: none;
border-radius: 5px 0 0 5px;
}
.content-body .content-top-bar .top-bar .content-search-input button{
border: none;
background: var(--white);
padding: 2px 5px;
border-radius: 0 5px 5px 0;
color: var(--gray);
position: absolute;
right: 0px;
}
.content-body .content-top-bar .top-bar .icons{
display: flex;
align-items: center;
position: absolute;
right:20px;
color: rgba(48, 132, 222, 0.934);
}
.content-body .content-top-bar .top-bar .icons i{
padding: 5px 10px 5px 10px;
font-size: 20px;
cursor: pointer;
position: relative;
}
/*EFECTO DE PULSO*/
.circle {
width: 7px;
height: 7px;
background: var(--red);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
.circle::before, .circle::after {
content:"";
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
width: 3px;
height: 3px;
border: 10px solid var(--orange);
border-radius:100%;
animation: latido linear 3s infinite;
}
.circle::after {
animation-delay: -1.5s;
}
#keyframes latido {
0% { width:7px; height:7px; border:3px solid var(--orange); }
100% { width:20px; height:20px; border:5px solid transparent; }
}
#button-0 { top: 5px; left: 30px; }
#button-1 { top: 5px; left: 25px; }
/*END EFECTO PULSO*/
.content-body .content-top-bar .top-bar .icons a{
text-decoration: none;
color: rgba(48, 132, 222, 0.856);
}
.content-body .content-top-bar .top-bar .icons img{
margin-right: 7px;
font-size: 20px;
border-radius: 100%;
border: 2px solid var(--blue);
}
#prueba {
width: 225px;
}
.close-menu {
width: 50px;
transition: 0.6s;
}
#top_bar_mobile{
display: none;
}
.mobile-menu{
width:100vw;
height: 100vh;
background: red;
position: fixed;
z-index: 10000;
}
.mobile-menu .i{
position: relative;
}
.body {
width: 100%;
}
.card {
margin: 10px;
height: 600px;
}
<!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">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>Administrador</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::asset('css/cardinal.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/fontawesome.css') }}">
</head>
<body>
<div class="mobile-menu" id="mobile_menu">
<button class="far fa-times" id="close_menu_mobile">cerrar</button>
</div>
<div class="content-menu" id="content_menu">
<div class="nav-bar">
</div>
</div>
<div class="content-body">
<div class="content-top-bar">
<div class="top-bar" id="top_bar_web">
<i class="fad fa-bars" id="open_menu"></i>
<div class="content-search-input">
<input type="text" class="search" id="search" placeholder="Search...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="icons">
<i class="fad fa-envelope icon-top-bar" id="message_icon"><div class="circle button" id="button-0"></div></i>
<i class="fad fa-bell icon-top-bar" id="notification_icon" ><div class="circle button" id="button-1"></div></i>
<i class="fad fa-cog icon-top-bar" id="config_icon"></i>
<a href="/login"><img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
<span>Aldahir Ruiz Valdez</span></a>
</div>
</div>
<div class="top-bar-mobile top-bar" id="top_bar_mobile">
<i class="fad fa-bars" id="open_menu"></i>
<div class="icons " >
<img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
</div>
</div>
</div>
<div class="body">
<div class="card">
<div class="card-header">Headers</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<script src="{{ URL::asset('js/cardinal.js') }}"></script>
</body>
</html>
With your current implementation, you can add overflow: hidden; property to your .mobile-menu CSS rule.
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>
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...
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
I'm trying to make a simple menu that opens when you click the button once, then closes the second time, I did this before but now I can't remember how to do it, I thought this here is the code:
var main = function(){
$('#menuopen').click(function(){
$('.leftbox').show();
$('.leftbox').animate({left: "0"});
$('.topbox').animate({left: "15%", width: "85%"});
},
function(){
$('.leftbox').animate({left: "-15%"});
$('.leftbox').hide();
$('.topbox').animate({left: "0", width: "100%"});
}
);
}
$(document).ready(main);
body {
background-color: #CCCCCC;
}
h2{
text-align: center;
font-family: 'Lato', sans-serif;
}
.topbox{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
background-color: #006699;
}
.leftbox{
display: none;
position: absolute;
background-color: #FFFFFF;
top: 0px;
left: -15%;
width: 15%;
height: 100%;
box-shadow: 10px 67px 5px #888888;
}
#commentbox{
position: absolute;
top: 87%;
left: 30%;
width: 50%;
resize: none;
border-radius: 5px;
outline: none;
box-shadow: 10px 10px 10px #888888;
}
#submitbox{
position: absolute;
background-color: #006699;
left: 82%;
top: 87%;
height: 66px;
width: 132px;
border-radius: 5px;
border: 0px;
outline: none;
box-shadow: 10px 10px 10px #888888;
font-family: 'Lato', sans-serif;
font-weight:;
}
#menuopen{
position: absolute;
top: 25%;
left: 15px;
height: 32px;
width: 32px;
}
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topbox">
<h2> Name's Lobby </h2>
<img id="menuopen" src="menu_icon.png"/>
</div>
<div class="leftbox">
</div>
<div class="inputbox">
<textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea>
<input id="submitbox" type="submit" value="Submit">
</div>
</body>
</html>
What here is wrong with this code, isn't the jQuery correct? :O
Your code is mostly correct but create a variable e.g var open = false; then do a check when the user clicks the button do something like this if(open == false){ execute opening }) then else { execute closing } because jquery doesn't know whether it's open or not so you've got to do checks on it.
#George beat me to it but you can add an opened state variable, which gets toggled after each click:
var main = function(){
var opened = false;
$('#menuopen').click(function(){
if (opened) {
$('.leftbox').animate({left: "-15%"});
$('.leftbox').hide();
$('.topbox').animate({left: "0", width: "100%"});
} else {
$('.leftbox').show();
$('.leftbox').animate({left: "0"});
$('.topbox').animate({left: "15%", width: "85%"});
}
opened = !opened;
});
}
$(document).ready(main);
body {
background-color: #CCCCCC;
}
h2{
text-align: center;
font-family: 'Lato', sans-serif;
}
.topbox{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
background-color: #006699;
}
.leftbox{
display: none;
position: absolute;
background-color: #FFFFFF;
top: 0px;
left: -15%;
width: 15%;
height: 100%;
box-shadow: 10px 67px 5px #888888;
}
#commentbox{
position: absolute;
top: 87%;
left: 30%;
width: 50%;
resize: none;
border-radius: 5px;
outline: none;
box-shadow: 10px 10px 10px #888888;
}
#submitbox{
position: absolute;
background-color: #006699;
left: 82%;
top: 87%;
height: 66px;
width: 132px;
border-radius: 5px;
border: 0px;
outline: none;
box-shadow: 10px 10px 10px #888888;
font-family: 'Lato', sans-serif;
font-weight:;
}
#menuopen{
position: absolute;
top: 25%;
left: 15px;
height: 32px;
width: 32px;
}
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topbox">
<h2> Name's Lobby </h2>
<img id="menuopen" src="menu_icon.png"/>
</div>
<div class="leftbox">
</div>
<div class="inputbox">
<textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea>
<input id="submitbox" type="submit" value="Submit">
</div>
</body>
</html>