I'm attempting to create a drop-down menu in javascript, html and css however when I run the code nothing is showing on canvas. Is it because the files aren't communicating with each other correctly?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>DropdownMenu</title>
<link rel='stylesheet' type='text/css' href='Stylesheetdropdown.css'/>
</head>
<body>
<canvas id="canvas" width="5000" height="5000">
</canvas>
<script type='text/javascript' src='DropdownMenu.js'></script>
</body>
<body>
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
</body>
</html>
Javascript:
function dropdown() {
document.getElementById("myMenu").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.drpdwnbtn')) {
var dropdowns = document.getElementsByClassName("drpdwncntnt"),
i,
openDropdown = dropdowns[i];
for (i = 0; i < dropdowns.length; i += 1) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
CSS:
.drpdwnbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.drpdwnbtn:hover, .drpdwnbtn:focus {
background-color: #E0FFFF;
}
.dropdown {
position: relative;
display: inline-block;
}
.drpdwncntnt {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.drpdwncntnt a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
Your canvas was over your menu div, your html should look like:
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
<canvas id="canvas" width="5000" height="5000">
</canvas>
, so here is a working fiddle:
https://jsfiddle.net/ahpook4p/
Related
I created a dropdown list Javascript Toggle method. I face a problem a problem. The problem is - After clicking one dropdown, another dropdown still opens. I want others dropdown Will to be closed when I click on dropdown. This happen will be each dropdown. How do I do it?
<html>
<head>
<style>
nav{
width:100%;
height:50px;
background-color:#000;
}
button{
height:50px;
margin-left: 10px;
border:0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div{
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1{
background-color: rgb(0,0,255);
color: #fff;
}
#myDIV2{
background-color: rgb(0,255,0);
color: #000;
}
.show{
display:block;
}
</style>
</head>
<body>
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
<script>
function myFunction1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("show");
}
function myFunction2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("show");
}
</script>
</body>
</html>
here is the solution, all the code is commented.
div1 and div2 are hidden by default...
so with .toggle(): https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
I will add the class .show if there isn't
else I will remove the class from it.
so if the user clicks the first time on the button it will show the div1 then if he reclicked will hide, and this is looped (if he reclick)...
with classList.remove, we will hide the other element (always):
if clicked the button N1 will hide div2
if clicked the button N2 will hide div1
let div1 = document.getElementById("myDIV1");
let div2 = document.getElementById("myDIV2");
function myFunction1() {
div1.classList.toggle("show");
// remove the class for the second div
div2.classList.remove("show");
}
function myFunction2() {
div2.classList.toggle("show");
// remove the class for the first div
div1.classList.remove("show");
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
/* this is the class we add and remove or toggle with javascript*/
.show {
display: block;
}
<!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">
<script src="./script.js" defer></script>
</head>
<body>
<!-- navbar -->
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<!-- 1 -->
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<!-- 2 -->
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
</body>
</html>
You can make this a little easier to scale by using one function for all dropdown menus. This function closes all open drop-downs and toggles the target one.
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button onclick="toggleDropDown('myDIV1')">Dropdown1</button>
<button onclick="toggleDropDown('myDIV2')">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
Here is the same thing, but instead of hard-coding click events, it's better practice to use eventListeners, which get applied through the script after the page loads, like:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button data-dropdown="myDIV1">Dropdown1</button>
<button data-dropdown="myDIV2">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
I am working on a simple note taking app using vanilla javascript. I am trying to have the program add the note with a modal that when clicked would show the text. With what I have so far it is adding the note below the input box and along with the modal button. When I click the modal button it does nothing the first click. On the second click the text and modal button disappear.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Note Tracker</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
</style>
</head>
<body>
<h1>Note Tracker Web App</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<label for="iNote">Input Note:</label><br>
<br>
<textarea id="inote" name="inote" rows="4" cols="50">
</textarea>
<br>
<button type="button" id="btn" onclick="addNote()">Add Note</button>
<br><br>
<div id="noteList">
<span class="close">×</span>
</div>
<script src="scripts.js"></script>
</body>
Javascript is the below that creates the note and then add it along with the modal
function addNote(){
var item = document.getElementById("inote").value
var text = document.createTextNode(item)
var newItem = document.createElement("P")
newItem.appendChild(text)
document.getElementById("noteList").appendChild(newItem)
var x = document.createElement("BUTTON");
x.id = "someId";
//x.onclick ="modalOpen()";
x.onclick = function(){
var modal = document.getElementById("noteList");
var btn = document.getElementById("someId");
btn.onclick = function() {
modal.style.display = "none";
}
};
var t = document.createTextNode("Open Modal");
x.appendChild(t);
document.getElementById("noteList").appendChild(x);
var z = document.createElement("BR");
document.getElementById("noteList").appendChild(z);
var newElem = document.createElement("BR");
document.getElementById("noteList").appendChild(newElem);
}
on first time, you are just attach event listener of click, simply put x.onclick outside the function
Hopefully this one will help.
So we have the "note-list" to handle the list.
I create a modal element that can activate when we click on the "new note" button.
In here I play with opacity and z-index to show this modal. Can be better than this.
const newNote = document.getElementById('new-note'),
addNote = document.getElementById('add-note');
let myModal = document.getElementById('my-modal');
newNote.addEventListener('click', () => {
myModal.style.zIndex = 99;
myModal.style.opacity = 1;
});
addNote.addEventListener('click', () => {
let note = document.getElementById('note'),
noteList = document.getElementById('note-list');
if (note.value !== '') {
let _el = document.createElement('li');
_el.innerHTML = note.value;
let _a = document.createElement('a');
_a.innerHTML = 'delete';
_el.appendChild(_a);
noteList.appendChild(_el);
note.value = '';
myModal.style.zIndex = -1;
myModal.style.opacity = 0;
_a.addEventListener('click', (e) => {
e.target.parentNode.remove();
});
} else {
alert('note can not empty');
}
});
#my-modal {
width: 100%: height: 100%;
z-index: -1;
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modal-wrapper {
border-radius: .5rem;
background: #fff;
display: block;
padding: 1rem;
margin-top: 20%;
}
ul {
display: block;
}
#note-list li {
display: block;
margin-bottom: .5rem;
border: 1px solid #efefef;
background: #f7f7f7;
border-radius: .5rem;
position: relative;
padding: 1rem;
width: 70%;
}
#note-list li a{
position: absolute;
right: 0;
top: 0;
background: tomato;
padding: 1rem;
color: #fff;
}
.modal-wrapper * {
display: block;
margin: .5rem auto;
width: 90%;
text-align: center;
}
<h1>Note Taker App</h1>
<div class="note-wrapper">
<ul id="note-list">
</ul>
<button id="new-note">New Note</button>
</div>
<div id="my-modal">
<div class="modal-wrapper">
<label for="note">Your Note</label>
<input type="text" name="note" id="note">
<button id="add-note">add note</button>
</div>
</div>
With below code I'm trying to change the placeholder for select element on link click. But no changes are seen as of now. Also I'm trying to figure out how to show div when click on gear icon. Currently it works when click on div but not for icon present in it.
<!doctype html>
<html lang="en">
<head>
<!-- Dropdown - > https://stackoverflow.com/questions/43579748/how-to-achieve-autocomplete-feature-over-html-drop-down-or-select-element -->
<!-- focus in-out event > https://stackoverflow.com/questions/57284729/onclick-change-width-of-dropdown-using-javascript/57284975#57284975 -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<script>
$(function() {
$('select')
.select2({
placeholder: 'Search Command...',
width: '200',
multiple: false,
data: [{
id: '',
text: ''
}, {
id: 'rrrrrrr',
text: 'testing1'
}, {
id: 'testing 1,2,3',
text: 'testing 1,2,3gffffff'
}],
tokenSeparators: ['|']
})
$('.select2-container').click(function() {
$(this).css('width','500px');
});
$('.select2-container').focusout(function() {
$(this).css('width','200px');
});
$('#changeCommand').click(function() {
$('select').css('placeholder','Search Command...');
});
$('#changePref').click(function() {
$('select').css('placeholder','Search Preferences...');
});
$('#changeCD').click(function() {
$('select').css('placeholder','Search Customer Default...');
});
});
</script>
<script>
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown -->
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<select></select> <div class="dropdown"><button class="dropbtn" onclick="myFunction()" style="border-radius: 3px;border: none;color: black; background-color: white;"><span>⚙</span></button></div>
<div id="myDropdown" class="dropdown-content">
<a id="changeCommand">Commands</a>
<a id="changePref">Preferences</a>
<a id="changeCD">Customer Default</a>
</div>
</body>
</html>
You can try the following way:
$(function() {
$('select')
.select2({
placeholder: 'Search Command...',
allowClear: true,
width: '200',
multiple: false,
data: [{
id: '',
text: ''
}, {
id: 'rrrrrrr',
text: 'testing1'
}, {
id: 'testing 1,2,3',
text: 'testing 1,2,3gffffff'
}],
tokenSeparators: ['|']
})
.on('select2:open', function() {
$('.select2-container').css('width','600px');
})
.on("select2:close", function () {
$('.select2-container').css('width','200px');
});
$('#changeCommand').click(function() {
$('.select2-selection__placeholder').text('Search Command...');
});
$('#changePref').click(function() {
$('.select2-selection__placeholder').text('Search Preferences...');
});
$('#changeCD').click(function() {
$('.select2-selection__placeholder').text('Search Customer Default...');
});
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
var dropdowns = document.getElementById("myDropdown");
if (event.target.classList.contains('dropbtn')) {
dropdowns.classList.toggle("show");
}
else if (!event.target.classList.contains("dropbtn") && dropdowns.classList.contains("show")){
dropdowns.classList.toggle("show");
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<select></select>
<div class="dropdown"><button class="dropbtn" style="border-radius: 3px;border: none;color: black; background-color: white;">⚙</button></div>
<div id="myDropdown" class="dropdown-content">
<a id="changeCommand">Commands</a>
<a id="changePref">Preferences</a>
<a id="changeCD">Customer Default</a>
</div>
Just remove remove the subscription on the window.onclick event.
The onclick event on you button will be fired when child elements are clicked. Your current logic will show and directly hide the dropdown
Can anyone help me to add search bar as the first value of the dropdown? I used ASP.NET MVC. This is my code
<div class="col-md-8">
<div class="dropdown">
<div class="chzn-dd-width">
#Html.DropDownListFor(
model => model.DriverId,
Model.Drivers,
new { #id = "driverDropDown", #class = " form-control chosen-search" })
</div>
</div>
</div>
Hi Ravindu Saluwadana,
did you try this? solution add search functionality on DropDownListFor
#Html.DropDownListFor(x =>
x.StockCode,
(IEnumerable<SelectListItem>)ViewBag.AllStockList,
new
{
#class = "form-control selectpicker",
#Value = #Model.Description,
onchange = "this.form.submit();",
data_show_subtext="true",
data_live_search="true"
})
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
item test
soheil
bijavar
php
Hello
Support
Tools
</div>
</div>
</body>
</html>
you can use 3rd party plugin who allows multiple dropdowns such as multiselect, with new styles , and also search
use this SELECT2 Dropdown Plugin
https://select2.org/searching
Use this functionality- data_live_search="true" in the dropdownlistfor.
To use that functionality you have to use this following scripts -
1.bootstrap-select.min.js
2.boostrap-select.min.css
you can download that files from here - https://cdnjs.com/libraries/bootstrap-select
Example -
<div class="col-md-8">
<div class="dropdown">
<div class="chzn-dd-width">
#Html.DropDownListFor(
model => model.DriverId,
Model.Drivers,
new { #id = "driverDropDown", #class = " form-control chosen-search" ,data_live_search="true"})
</div>
</div>
I hope it will help you.
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.