So, with my code, Im trying to make this bar go to multiple urls based on what I put in. Like, "Take me to cats" will send me to "cats.com". Im trying to go to multiple html pages based on various words from the user. How do I do this? If you could do this it would help alot.
Here is the code:
/**
* Step 2: In your JavaScript, attach an event listener to the input element.
*/
document.getElementById('url-bar')
.addEventListener('keypress', function(event) {
// The keyCode for the "Enter" key is 13.
if (event.keyCode === 13) {
let urlValue = event.target.value
window.location ='Store.html';
}
});
body {
font-family: Arial
}
* {
box-sizing: border-box;
}
/* The browser window */
.container {
border: 3px solid #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Container for columns and the top "toolbar" */
.row {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle {
width: 75%;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Three dots */
.dot {
margin-top: 4px;
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
/* Style the input field */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: #666;
padding: 5px;
}
/* Three bars (hamburger menu) */
.bar {
width: 17px;
height: 3px;
background-color: #aaa;
margin: 3px 0;
display: block;
}
/* Page content */
.content {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="column left">
<span class="dot" style="background:#ED594A;"></span>
<span class="dot" style="background:#FDD800;"></span>
<span class="dot" style="background:#5AC05A;"></span>
</div>
<div class="column middle">
<input id="url-bar" type="text" value="/Home">
</div>
<div class="column right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="content">
<h3>The Poke Browser</h3>
<p>Surf for Things in the Poke World</p>
</div>
</div>
</body>
</html>
Thats the code. I was able to only get it to take me to 1 page based on ANY input instead of a specific input.
youhave to seperate the search value which is entered by user using some kind of seperator such as space or , in your search text field. Then you can make use of split function of javascript to create a array of search url and iterate through it to open it seperately using forEach loop. Sharing with you the codepen link -
https://codepen.io/hims89/pen/WPVjLX
you can make use of IFFY for registering events
(function(){
var seperator=" ";
var searchref=document.getElementById("search");
searchref.addEventListener("keypress",function(ev){
if(ev.keyCode===13)
{
var urlarr=searchref.value.split(seperator);
urlarr.forEach(function(rec){
window.open(rec,"_blank");
});
}
});
})();
How do I put an icon inside a form's input element?
Live version at: Tidal Force theme
The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.
In other words, they have these two CSS rules:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
The CSS solutions posted by others are the best way to accomplish this.
If that should give you any problems (read Internet Explorer 6), you can also use a borderless input inside of a div.
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
It is not as "clean", but it should work on older browsers.
A solution without background-images:
.icon {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}
<input type="text" class="icon" value placeholder="Search">
Or for right to left icon
.icon-rtl {
padding-right: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
background-size: 20px;
}
<input type="text" class="icon-rtl" value placeholder="Search">
You can try this:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
I find this to be the best and cleanest solution. Using text-indent on the input element:
#icon {
background-image: url(../images/icons/dollar.png);
background-repeat: no-repeat;
background-position: 2px 3px;
}
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
A simple and easy way to position an icon inside of an input is to use the position CSS property as shown in the code below.
Note: I have simplified the code for clarity purposes.
Create the container surrounding the input and icon.
Set the container position as relative
Set the icon as position absolute. This will position the icon relative to the surrounding container.
Use either top, left, bottom, right to position the icon in the container.
Set the padding inside the input so the text does not overlap the icon.
#input-container {
position: relative;
}
#input-container > img {
position: absolute;
top: 12px;
left: 15px;
}
#input-container > input {
padding-left: 40px;
}
<div id="input-container">
<img/>
<input/>
</div>
This works for me:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
Use:
.icon{
background: url(1.jpg) no-repeat;
padding-left: 25px;
}
Add the above tags into your CSS file and use the specified class.
Use this CSS class for your input at the start, and then customize accordingly:
.inp-icon {
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
}
<input class="inp-icon" type="text">
You can try this: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
<div class="container">
<form>
<div class="row">
<div class="input-group mb-3 col-sm-6">
<input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
</form>
</div>
I achieved this with the code below.
First, you flex the container which makes the input and the icon be on the same line. Aligning items makes them be on the same level.
Then, make the input take up 100% of the width regardless. Give the icon absolute positioning which allows it to overlap with the input.
Then add right padding to the input so the text typed in doesn't get to the icon. And finally use the right CSS property to give the icon some space from the edge of the input.
Note: The Icon tag could be a real icon if you are working with ReactJs or a placeholder for any other way you work with icons in your project.
.inputContainer {
display: flex;
align-items: center;
position: relative;
}
.input {
width: 100%;
padding-right: 40px;
}
.inputIcon {
position: absolute;
right: 10px;
}
<div class="inputContainer">
<input class="input" />
<Icon class="inputIcon" />
</div>
Just use the background property in your CSS.
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
I had situation like this. It didn't work because of background: #ebebeb;. I wanted to put background on the input field and that property was constantly showing up on the top of the background image, and i couldn't see the image! So, I moved the background property to be above the background-image property and it worked.
input[type='text'] {
border: 0;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
background: #ebebeb;
}
Solution for my case was:
input[type='text'] {
border: 0;
background: #ebebeb;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
}
Just to mention, border, padding and text-align properties are not important for the solution. I just replicated my original code.
Using with font-icon
<input name="foo" type="text" placeholder="">
OR
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
I was able to add an icon to an input field by adding the icon as a background image through CSS. From there, you can adjust the size of the image using the background-size property and finally, position the element with the background-position-x and background-position-y properties. I've shared a code snippet below and linked to a working example in Codepen here:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.input-container {
padding: 50px;
}
input {
box-sizing: border-box;
width: 250px;
padding-left: 36px;
height: 48px;
background-image: url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg');
background-size: 20px;
background-position-x: 10px;
background-position-y: 50%;
background-repeat: no-repeat;
border-radius: 15px;
}
<!DOCTYPE>
<html>
<head>
<title>Icon Inside Input Field</title>
</head>
<body>
<div class="input-container">
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" placeholder="iram.the.goat#mailer.com">
</div>
</body>
</html>
https://codepen.io/Iram_Tech/pen/GRQqrNg
<label for="fileEdit">
<i class="fa fa-cloud-upload">
</i>
<input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
</label>
For example you can use this : label with hidden input (icon is present).
I didn't want to change the background of my input text neither. It will work with my SVG icon.
I added a negative margin to the icon, so it appeared inside the input box.
And adding the same value padding to the input, so the text wouldn't go under the icon.
<div class="search-input-container">
<input
type="text"
class="search-input"
style="padding-right : 30px;"
/>
<img
src="#/assets/search-icon.svg"
style="margin-left: -30px;"
/>
</div>
The inline-style is for readability. Consider using classes.
You could go for a different approach which also allows you to click it and have it do a function. Have a look at the example below:
<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>
#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #FFF; /* CSS Edit Here */
}
#search-bar > button {
background: #FFF;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}
The CSS background solutions do it for most cases, but it has a problem with WebKit (chrome) autocomplete where the icon disappear.
There are other solutions that includes changing the HTML/DOM structure by wrapping the input in a div and adding an extra element (img, div, or similar).
I don't like does solutions because you need to tweak the elements CSS with absolute positions and/or resizing by pixel to get the right place.
Or recreate the input border to "merge" input and img in one.
So this solution is based on a CSS background image not applied over the input element, but applied over a wrapper div.
HTML:
<div class="input-email">
<input type="text" placeholder="Email" name="email" id="email">
</div>
CSS:
.input-email {
background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
display: inline-block;
}
.input-email input{
padding-left: 40px;
background-color: transparent !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
This way with .input-email class I define my icon image as div background (not affected by WebKit autocomplete background).
Next .input-email input definition I pad left the input element to give space for the image and set it as transparent (this works when autocomplete is not applied)
Finally with webkit-autofill classes I remove with transition the background-color set by the autocomplete.
Note: at point 2 I set transparent !important because this -internal-autofill-selected gets rendered at browser and I couldn't overwrite it without setting my also as !important:
input:-internal-autofill-selected {
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}
I got my solution from this post https://www.py4u.net/discuss/1069380.
I have make some tweaks, though major credits are to them.
In case, if you have <i class=''></i> with imported fonts, background: ... (some png) implementation will not be suited for you.
So try this one:
<div class="parent">
<form action='' method='post'>
<i class="fa-solid fa-paperclip"></i>
<input type="text" name="message" placeholder="Type...">
</form>
</div>
.parent > form > i {
position: absolute;
}
.parent > form > input {
text-indent: 40px
}
then, use margin to set Icon inside and text-indent to move placeholder's text.
...
...
Here is full example of my code
.parent {
width: 100%;
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
.parent > form > i {
margin-left: 24px;
margin-top: 13px;
position: absolute;
}
.parent > form > input {
width: 70%;
height: 40px;
margin-left: 8px;
text-indent: 40px;
}
.input_container {
display: flex;
border-bottom: solid 1px grey;
transition: border-color 0.1s ease-in;
background: white;
}
.input {
color: blue;
display: block;
width: calc(100% - 20px);
border: none;
outline: none;
padding: 8px 16px;
}
.input_img {
flex-basis: 20px;
display: inline-block;
padding: 8px 16px;
cursor: pointer;
}
<div class="input_container">
<input type="text" class="input" value>
<span class="input_img" data-role="toggle">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
fill="currentColor"
/>
</svg>
</span>
</div>
This works for me for more or less standard forms:
<button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
I would like to incorporate a form focus feature where it changes the
color of each icon when you focus on that specific field
<div id="rightside">
<div th:replace="fragments/loginform">
<form method="post" id="login" th:object="${credential}">
<p id="errors" class="warning" role="alert">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</p>
<p id="block">
<label for="username" class="has-feedback"><i class="fa fa-user" aria-hidden="true"></i></label>
<span th:if="${openIdLocalId}">
<strong>
<span th:utext="${openIdLocalId}"/>
</strong>
<input type="hidden"
id="username"
name="username"
th:value="${openIdLocalId}"/>
</span>
<span th:unless="${openIdLocalId}">
<input class="required textinput has-feedback"
placeholder="UH Username"
id="username"
size="14"
tabindex="1"
type="text"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
required="required"
autofocus="autofocus"
/>
</span>
</p>
<p id="block">
<label for="password" class="fontawesome-lock"><i class="fa fa-lock" aria-hidden="true"></i></label>
<input class="required textinput"
placeholder="Password"
type="password"
id="password"
name="password"
size="14"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"
required="required"
/>
</p>
Here is the CSS
#rightside {
margin-top: 15px;
float: left;
width: 70%;
}
#rightside h3 {
font-size: 110%;
}
#rightside a {
display: block;
}
#rightside input.textinput {
width: 60%;
float: left;
padding-left: 5px;
height: 35px;
border-radius: 7px;
}
#rightside input.textinput:focus {
outline-width: 0;
}
#rightside form label {
background-color: #e1e1e1;
border-radius: 8px 0px 0px 8px;
border: solid 1px #CCC;
border-right: 1px solid #CCC;
color: #000;
display: block;
float: left;
line-height: 50px;
text-align: center;
font-size: 20px;
width: 15%;
height: 50px;
}
#rightside form input[type="text"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="password"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="submit"] {
float: left;
background: #e1e1e1;
width: 99%;
height: 50px;
border-radius: 5px;
border: solid 1px #978257;
margin-bottom: 1.5em;
color: black;
cursor: pointer;
transition: background 0.3s ease-in-out;
font-weight: 600;
}
#rightside form input[type="submit"]:hover {
background: #b6985a;
color: #fff;
}
When the user focuses on either text field, the font-awesome icon pertaining to that input field should change color. Any help would be great! Thanks! CSS only would be preferable, but a js would work too
I went ahead and made a codepen for you to show you the value of the following blog post:
https://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/
Here's what it offers:
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
The above utilizes jQuery and it works well as a conceptual example.
http://codepen.io/MassDebates/pen/ZBaVJL
If you wanted to do something that leverages CSS's :focus then I would suggest you change your markup to allow something like a sibling (~), adjacent/following sibling (+) or even a descendant selector if you wrap your input in the label.
The key here is to associate your label's icon (<i>) with your input element.
You can play with :focus and :blur pseudo-classes
$(document).ready(function(){
$(".username").focus(function(){
$(".fa-user").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-user").css("color","yellow");
console.log('out');
});
$(".password").focus(function(){
$(".fa-lock").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-lock").css("color","yellow");
console.log('out');
});
});
https://jsfiddle.net/czs3sy0a/2/
I have created a pen that sets a highlighted class on the parent p, and colors the icon using this CSS:
p.highlighted .fa {color: red;}
And this JS:
$(function() {
$('input').focusin(function() {
$(this).parent().parent().addClass('highlighted');
});
$('input').focusout(function() {
$(this).parent().parent().removeClass('highlighted');
});
});
http://codepen.io/anon/pen/pNdqYP
Here is a pure css solution you can use. As we know we dont have any way to select parent element along with css but we can get the next sibling element with the '+' selector. So what i have done is placed the label containing the icon right after the input that will change it's color when focused using the css :focus pseudo element along with the '+' selector of css to get the icon in the label next to the input focused.
In order to set the positions correctly after moving the labels in front of the inputs. I changed the input and label css class from float:left to float:right. This aligned them where label came before input and the width percentage i changed from 77% to 75% just to keep the responsiveness correct on smaller screens. Below is the sample code.
Sample Code: http://codepen.io/Nasir_T/pen/VmrgWw
Hope this helps you and any future coders who do not want work with a JS code solution.
I have an input[type=text] element and another div for selected elements in my form.
I need to create my own custom tag plugin container and my problem is in css style and layout for the tag container and appearance for it.
This is my actual stage (very poor): http://jsfiddle.net/db8upk61/1/
I want something like it:
challenges
how to simulate an input border between these elements?
how to remove border from input element like the example above?
how to mantain tags in the same line as input?
There are a lot of plugins that makes that, but, as you need to do.
You can create a container simulating an input and inside this container you can put the real input with border white, I made an example, take a look:
http://jsfiddle.net/93n2af0e/
CSS code:
.input-select-tag{
background-color: #FFFFFF;
boder: 1px solid #F1F1F1;
height: 36px;
width: 450px;
}
.selected-tags{
padding: 2px;
}
.button{
float: left;
padding: 5px;
margin-left: 2px;
}
.input{
float: left;
border: #FFFFFF;
margin-left: 2px;
padding: 5px;
}
.clear{
clear: both;
}
HTML:
<form class='form-horizontal well'>
<div class='control-group'>
<div class='input-select-tag'>
<div class='selected-tags'>
<span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span>
<span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<input type='text' name='selectTags' class='input' size="40"/>
<div class='clear'></div>
</div>
</div>
</form>
Hope it helps.
var i = 7;
$("input").focus(function(e) {
// set cursor position
if (!this.value.length) {
this.value = $.map(Array(i * $(".alert").length), function() {
return " "
}).join(" ")
}
}).change(function(e) {
// append new "tag"
$(".alert").first().clone().text(function(i, text) {
return text.replace(/tag1/, e.target.value)
}).appendTo($(".alert").parent());
$(this).val("").focus()
}).closest("form").submit(function(e) {
e.preventDefault()
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form class='form-horizontal well'>
<div class='control-group'>
<div class='selected-tags'> <span class='alert alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> <span class='alert alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<label>Tags</label>
<br>
<input type='text' name='selectTags' />
</div>
</form>
<style>
.control-group {
position: relative;
}
.alert {
position: relative;
top: 47px;
font-size: 12px;
padding: 2px;
margin: 2px;
}
input {
white-space: pre;
width: 100%;
}
</style>
jsfiddle http://jsfiddle.net/db8upk61/2/
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.