I want the same functionality that can be seen here.
I need a directive that loops over the array that is displayed within the textare/highlighter and compares if the value matches the following regExp(integers, floats and scientific notation both positive and negative values):
/-?\d+[\.,]?\d*[eE]?-?\d*/g
If it matches there will be no span around that element in the "highlighter" div, otherwise it will be wrapped in a "span" and therefore highlighted in red.
Best approach?
Template:
<script type="text/ng-template" id="form_field_float">
<div>
<div class="highlighter" id="mirror">
<p ng-repeat=" x in dbo.attributes[attobj.name]"><span>{{ x }}</span></p>
</div>
<textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="
" ng-trim="false"></textarea>
</div>
</script>
CSS:
.highlighter, #textarea {
width: 400px;
height: 300px;
font-size: 10pt;
font-family: 'verdana';
}
.highlighter p {
font-size: 10pt;
font-family: 'verdana';
margin:0 0 0 0;
}
.highlighter {
position: absolute;
padding: 1px;
margin-left: 1px;
color: white;
}
.highlighter span {
color: red;
background: red;
opacity:.4;
}
#textarea {
position: relative;
background-color: transparent;
}
Ok my brain finally came around and found a solution:
Template:
<script type="text/ng-template" id="form_field_float">
<div spellcheck="false">
<div class="highlighter" id="mirror">
<div ng-repeat=" x in dbo.attributes[attobj.name] track by $index" ng-controller="textVal">
<div ng-if="!check(x)"><span>{{ x }}</span></div>
<div ng-if="check(x)">{{ x }}</div>
</div>
</div>
<textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="
" ng-trim="false"></textarea>
</div>
</script>
Controller:
app.controller('textVal', ['$scope',
function ($scope) {
$scope.check = function(valueToCheck){
if(!isNaN(valueToCheck)){
return true;
} else{ return false;}
}
}
]);
CSS:
.highlighter, #textarea {
width: 100%;
}
.highlighter {
position: absolute;
padding: 1px;
margin-left: 1px;
color: white;
}
.highlighter span {
color: red;
background: red;
opacity:.4;
}
#textarea {
position: relative;
background-color: transparent;
}
STILL HAVE ONE ISSUE MAYBE SOMEONE CAN GIVE ME A NICE CLEAN SOLUTION FOR!!!:
"If enter is pressed, no value is typed and enter is pressed again, an offset will occur between the textarea value and the highlighter-div":
Related
I created a div element called main-middle-column-container in my HTML and styled it with CSS. Basically, main-middle-column-container will create a twitter-like message box that will have a name, date/time, and the message.
I want to reuse main-middle-column-container and all the code inside of it with jQuery so that when new data comes in, it will use a fresh main-middle-column-container as a template to add in the new values (like how twitter would work). When new data comes in, #username, date/time, and This is a random message. #random will be replaced with the incoming data or leave the elements empty and have the new data fill it in.
I thought about using $('.main-middle-column-container').clone().appendTo('.main-middle-column-wrapper'); but that will keep double cloning it (1 box -> 2 box -> 4 box -> 8 box...) instead of cloning it once. I also have an issue of getting rid of main-middle-column-container before I receive any data because I don't want an empty box on the website I am trying to create. I want main-middle-column-container to be created right when I get some kind of data/message.
CSS and HTML (message box)
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
This is a random message. #random
</div>
</div>
</div>
</div>
I think i have a solution for you, you can create a 'template' and retrieve that template with jquery.
If you put this in your main html file
<script id="hidden-template" type="text/x-custom-template">
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
this is a story all about how my life got flipped turned upside down and id like to take a minute and just sit right there id like to tell you how i became a prince in a town called belair.
</div>
</div>
</div>
</div>
</script>
You can get the content with jquery like this
var template = $('#hidden-template').html();
Now you have your html 'template' in your javascipt, now your can create more than one of these elements.
$('#target').append(template);
Or you can use a better/simpler method with plain javascript
const card = ({ img_alt, img_src, title, username, date, msg }) => `
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${img_src}" class="tweet-pic" alt="${img_alt}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${title}</span>
<span class="msg-acc-name">#${username}</span>
<div class="msg-date">${date}</div>
</div>
<div class="tweet-msg">${msg}</div>
</div>
</div>
</div>
`;
You can use this as a function to create your elements dynamically with all kinds of data.
Create a function that returns a Template Literal with the desired HTML markup structure. Map your tweets and insert them into a target parent:
const tweets = [
{
_id: 321,
pic: "https://placehold.it/80x80/0bf",
title: "My Twitter",
name: "#username",
date: "2020-01-18",
msg: "this is a story"
},
{
_id: 231,
pic: "https://placehold.it/80x80/f0b",
title: "My alter Twitter",
name: "#user",
date: "2020-01-19",
msg: "Again, another story"
}
];
const newTweet = tweet => `<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${tweet.pic}" class="tweet-pic" alt="${tweet.title}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${tweet.title}</span>
<span class="msg-acc-name">${tweet.name}</span>
<div class="msg-date">${tweet.date}</div>
</div>
<div class="tweet-msg">${tweet.msg}</div>
</div>`;
const populateNewTweets = (tweets, parent) => {
if (!tweets.length) return;
$('<div>', {
class: 'main-middle-column-container',
appendTo: parent,
append: tweets.map(newTweet)
});
};
populateNewTweets(tweets, '.main-middle-column-wrapper');
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
The best solution to this would be to use some kind of templating engine, for example Mustache. If that however is out of the question, the solution to your problem would be something like this:
jQuery(document).ready(function() {
/* this should store the container templates clone in a variable */
mainMiddleContainerTemplate = jQuery(".main-middle-column-container").get(0).clone();
/* this should remove every main middle container from the view, in case
you have multiple containers that are not templates, consider adding
an additional class to your template container */
jQuery(".main-middle-column-container").remove();
});
function addNewContainer(containerData) {
var newContainer = mainMiddleContainerTemplate.clone();
/** add and replace all the data needed on the newContainer **/
newContainer.find('.message-title').html(containerData.title);
newContainer.find('.msg-acc-name').html(containerData.accountName);
....
jQuery(".main-middle-container-wrapper").append(newContainer);
}
But still, I would advice you, to use a templating engine for these kinds of stuff.
$('.main-middle-column-container').first().clone().appendTo('.main-middle-column-wrapper');
The key is to select only one element to be cloned. First is as good as any other.
I want to create an input that holds an integer value. The input value will be increased by 1 if the caret-up button is clicked and decrease by 1 if the cater-down button is clicked.
My problem is the style of the down-caret is wrong. I would like to place the down-caret at the top of the blue rectangle.
Currently, the down-caret is at the bottom of the div. Below is an image of the currently output.
I tried several things like flex, absolute position, etc. But these are overlapping areas of the Red div and Blue div.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
/* style the qty div to display both input and buttons div in the same line*/
.qty {
width: 250px;
height: 50px;
}
/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
width: 230px;
float: left;
height: 100%;
}
/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
width: 220px;
height: 100%;
}
/* style the buttons div to display input and caret in the same line*/
#buttons {
width: 20px;
height: 100%;
float: right;
display: block;
}
/* style the action button to fit the height of the div*/
.action_btn {
height: 25px;
}
#plus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid red;
cursor: pointer;
}
#minus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid blue;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<!-- change the fas to fa for the right class of font-awesome -->
<i class="fa fa-caret-up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
Your description is somewhat unclear, if I understood you correctly, check out the example below to see whether it is what you want or not.
* {
box-sizing: border-box;
}
.qty {
position: relative;
}
.new {
position: absolute;
right: 0;
top: 0;
}
#plus_remind, #minus_remind {
margin: 0;
height: 24px;
width: 22px;
font: 33px/1 Arial,sans-serif;
cursor: pointer;
}
#plus_remind {
border: 1px solid blue;
}
#minus_remind {
border: 1px solid red;
}
input {
height: 48px;
font-size: 1.5rem;
margin: 0px;
padding: 0px;
line-height: 1.5rem;
width: 100%;
}
<div class="qty">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
<div class="new">
<div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
<i class="fas fa-caret-up"></i>
</div>
<div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
<i class="fas fa-caret-down"></i>
</div>
</div>
For number, there is another solution that uses the input with type number
<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">
Another way, I remove usage of font-awesome and create triangle by pure CSS
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
.qty {
width: 200px;
}
#remind_number_wrapper {
float: left;
}
i {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
cursor: pointer;
}
.up {
border-bottom: 5px solid black;
margin-bottom: 0px;
}
.down {
border-top: 5px solid black;
margin-top: 0px;
}
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<i class="up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="down"></i>
</div>
</div>
</div>
I have a simple "dice" roller, where the user can choose how many sides and how many dice based on input.
My issue is that if the user selects a large number of dice, it will force the page to scroll left in order to view the other dice.
I have tried to keep these dice within a div , even trying word-wrap: break-word; within the css, but this stacks the dice on top of eachother.
heres my code.
$(document).ready(function() {
$('#autoLoadR').click(function() {
$('#buttnLodr').html("");
if ($('#sideNum').val() < 100) {
if ($('#diceNum').val() < 20) {
for (i = 0; i < $('#diceNum').val(); i++) {
let index = i + 1;
let roll = index;
sidesAmount = $('#sideNum').val();
roll = Math.floor(Math.random() * sidesAmount) + 1;
$('#buttnLodr').append("<span id='diceBox'>" + roll + "</span>")
}
} else {
alert("Please enter a number for less than 20 for number of dice")
}
} else {
alert("Please enter a number less than 100 for number of sides")
}
});
});
body {
background: #add8e6;
margin-left: 2%;
margin-top: 2%;
width: 500px;
}
#spaceR {
color: lightblue;
}
.rollMeNow {
display: block;
color: #fff;
cursor: pointer;
border: 1px solid #d7d7d7;
font-size: 72px;
height: 156px;
line-height: 156px;
width: 256px;
background: #df1f3b;
border-radius: 4px;
text-align: center;
}
#optionDice {
border: solid;
width: 100%;
}
#diceBox {
border: solid;
padding: 7px 14px;
box-shadow: 10px 5px;
margin: 2%;
}
#rollTable {
width: 100%;
background: #fff;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<div id="optionDice">
<h1>Number of Dice :
<span id='spaceR'> :</span>
<input type="text" id="diceNum" placeholder="Dice" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
</h1>
<h1>Number of Sides :
<input type="text" id="sideNum" placeholder="Sides" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
</h1>
</div>
<br><br>
<div class="rollMeNow" caption="Populate" id="autoLoadR">Roll</div>
<br>
<h1>
<div id='rollTable'>
<br>
<div class="container">
<div class="row">
<!-- <div class="col-sm"> -->
<div id='buttnLodr'> </div>
</div>
</div>
</div>
</div>
</h1>
#diceBox {
// ...
display: inline-block;
}
Also, some other suggestions:
you have some implicitly declared variables (i in your for loop and sidesAmount in that loop)
use const instead of let whenever you are not re-asigning a variable
why looping from 0, then add 1 and then store it to another variable. And then you overwrite that variable with Math.floor
try to avoid selecting DOM elements (event if its only single) by IDs. Always use class.
I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example
I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});
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.