form hides as the onscreen keyboard appears in mobile - javascript

Here is the jsfiddle link https://jsfiddle.net/109qve4t/
Here is the code for a mobile website design.The problem here i face is that my form remains static on the window.But what i want is tha the form should jump to the top of the window as the user writes his query in the "Enter your starting" city text box.I dont want to use jquery to accomplish it.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
#form_1 {
width: 20%;
}
}
#form_1 {
position: relative;
border-radius: 15px;
width: 80%;
margin: 15% auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
display: table;
border :solid 2px black;
padding: 15px;
}
.row {
display:table-row;
}
.row label {
text-align: right;
}
</style>
</head>
<body>
<div id="yt" >
<img src="bg.jpg" class="bg">
<form id="form_1" tabindex="0">
<label>Enter Starting City</label>
<div class="row">
<input type="text" name="s_city"></br>
</div>
<div class="row">
<label>Wait While The Cities Appear
</label></br>
<textarea rows="10" cols="30"></textarea></br>
<div class="row">
</form>
</div>
</body>
</html>

I don't think that you can do that without jquery or other javascript. Mostly cause you have to detect focus/blur on a child element (the input) and then modify the parent (form). CSS rules don't have the ability to change parent behaviour.
Some kind of user action is required. A solution using jQuery would be following:
https://jsfiddle.net/6gbk76fx/4/
$(function () {
$('form input, form textarea').on("focus", function (event) {
$(event.target).closest('form').addClass('jump');
});
$('form input, form textarea').on("blur", function (event) {
$(event.target).closest('form').removeClass('jump');
});
});

Related

How to add clickevent to retrieve input text and run function accordingly?

I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard ⛅
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!

Linking to more than one Page via User Input

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");
});
}
});
})();

Dim entire screen except a fixed area?

I want to create a tutorial which will lead the user exactly where to click. I'm trying to cover the entire screen with a <div> which will dim all elements except a specific region which is in a fixed width, height, top and left.
The problem is, I cannot find a way to "cancel" the parent's background-color (which is also transparent).
In the snipped below, hole is the div that is supposed to be without any background-color, including its parent's.
Can this be accomplished at all? Any ideas?
#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}
<div id="bg">
<div id="hole"></div>
</div>
Here's a mockup image of what I'm trying to achieve:
You could do it with just one div and give it a box-shadow.
EDIT:
as #Nick Shvelidze pointed out, you should consider adding pointer-events: none
Added vmax value for box-shadow as #Prinzhorn suggested
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* for IE */
box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
/* for real browsers */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
pointer-events: none;
}
<div></div>
You can create an SVG which is filled with a path that has the hole where you need it to. But I guess than you need to find a way to handle clicks, since all of them will be targeted to the overlaid svg. I thing document.getElementFromPoint can help you here. mdn
This can also be done similarly to #VilleKoo's answer, but with a border.
div {
border-style: solid;
border-color: rgba(0,0,0,.3);
pointer-events: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border-width: 40px 300px 50px 60px;
}
<div></div>
You can achieve the same as in VilleKoo's answer using CSS outline property. It has excellent browser support (and works also in IE8+). Outlines have the same syntax as borders, but unlike border they don't take up space, they are drawn above the content.
Also for IE9+ you can replace 99999px with calc(100 * (1vh + 1vw - 1vmin)).
Disadvantage of this approach is that outline is not affected by border-radius.
Demo:
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* IE8 */
outline: 99999px solid rgba(0,0,0,.3);
/* IE9+ */
outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
/* for other browsers */
outline: 100vmax solid rgba(0,0,0,.3);
pointer-events: none;
}
<div></div>
Here is simple jQuery code using #VilleKoo css
var Dimmer = (function(){
var el = $(".dimmer");
return {
showAt: function(x, y) {
el
.css({
left: x,
top: y,
})
.removeClass("hidden");
},
hide: function() {
el.addClass("hidden");
}
}
}());
$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });
.dimmer {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */
pointer-events: none;
}
.hidden { display: none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="submit" disabled>
</div>
<input type="button" value="Hide" class="btn-hide">
<input type="button" value="Show" class="btn-show">
<div class="dimmer hidden"></div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
#bg {
background-color: gray;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99998;
}
#hole {
position: fixed;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
z-index: 99999;
}

Trying to get $(document).on('Click') to work for a p tag

I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}
Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');
Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!
You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.
Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.

How to center all list's elements to parent div

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.

Categories