This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 10 months ago.
I had it working earlier at some point but does anyone know why the border isn't wrapping around the whole div when I add new items to the div? I also tried adding a border-bottom to each "item" within the to-do list but whenever I select the "item" div and set a border-bottom, if I add a lot of text within the task, the border doesn't adjust accordingly with the text. Any Ideas?
Here is my work:
https://jsfiddle.net/Nathan269/chzykfx6/86/
// Add To-Do's
var add_todo_btn = document.getElementById('add-btn');
var todo_input = document.getElementById('todo-input');
var list = document.getElementById('list');
add_todo_btn.addEventListener('click', function() {
var todo = todo_input.value;
var item = document.createElement('DIV');
item.classList.add('item');
var item_text = document.createElement('DIV');
item_text.classList.add('item-text');
item_text.textContent = todo;
var edit_input = document.createElement('INPUT');
edit_input.classList.add('edit-input');
edit_input.classList.add('hide');
edit_input.name = 'edit-input';
edit_input.type = 'text';
edit_input.value = todo;
var edit_input_btn = document.createElement('BUTTON');
edit_input_btn.textContent = 'UPDATE';
edit_input_btn.classList.add('action-btn');
edit_input_btn.classList.add('update-btn');
edit_input_btn.classList.add('hide');
edit_input_btn.type = 'button';
var action_btns = document.createElement('DIV');
action_btns.classList.add('action-btns');
var edit_btn = document.createElement('BUTTON');
edit_btn.classList.add('action-btn');
edit_btn.classList.add('edit-btn');
edit_btn.textContent = 'EDIT';
// Edit To-Do's
edit_btn.addEventListener('click', function() {
edit_input.classList.remove('hide');
item_text.classList.add('hide');
edit_input_btn.classList.remove('hide');
edit_input_btn.addEventListener('click', function() {
item_text.textContent = edit_input.value;
edit_input.classList.add('hide');
item_text.classList.remove('hide');
edit_input_btn.classList.add('hide');
});
});
var remove_btn = document.createElement('BUTTON');
remove_btn.classList.add('action-btn');
remove_btn.classList.add('remove-btn');
remove_btn.textContent = 'REMOVE';
// Remove To-Do's
remove_btn.addEventListener('click', function() {
item.parentNode.removeChild(item);
});
action_btns.append(edit_input_btn);
action_btns.append(remove_btn);
action_btns.append(edit_btn);
item.append(item_text);
item.append(edit_input);
item.append(action_btns);
list.append(item);
todo_input.value = '';
});
body {
background-color: #323232;
color: #fff;
} /* body tag */
.app {
margin: 5%;
} /* main div */
.header {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
} /* title div */
.input {
width: 60%;
} /* input tasks div */
.input-element {
width: 80%;
} /* input field */
.input-btn {
float: right;
background-color: #23ba42;
color: #F1F1F1;
} /* add button */
.input input,
.input-btn,
.item-text,
.action-btns,
.edit-input {
font-size: 28px;
} /* sets font size */
.todo-list {
margin-top: 40px;
width: 60%;
border: 1px solid #FEBC11;
} /* to-do list div */
.item-text {
float: left;
width: 60%;
word-break: break-all;
} /* task text */
.action-btns {
float: right;
} /* task action button's div */
.action-btn {
margin-right: 10px;
} /* individual action buttons */
.remove-btn {
background-color: #ce0a0a;
color: #f1f1f1;
font-size: 18px;
} /* remove action button */
.edit-btn {
background-color: #cb960d;
color: #f1f1f1;
font-size: 18px;
} /* edit action button */
.update-btn {
background-color: #23ba42;
color: #f1f1f1;
font-size: 18px;
} /* update action button */
.edit-input {
width: 45%;
} /* edit input field */
.hide{
display: none;
} /* hides input field for editing to-do tasks */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Todo App</title>
</head>
<body>
<div class="app">
<div class="header">
<h1 class="title">My <span style="color: #FEBC11">To-Do</span> List</h1>
</div>
<div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button>
</div>
<div class="todo-list" id="list"></div>
</div>
</body>
</html>
Related
This question already has answers here:
Increasing clickable area of a button
(4 answers)
How to increase the clickable area of a <a> tag button?
(13 answers)
Closed 3 months ago.
If the mouse is about 20px close to the button, I want that the button should be clickable. I tried increasing the width of the button by 20px and making the opacity 0.1 so the big size won't show. Then in the button:hover rule I made the opacity 1.
I did the above cause I don't really know how go about it.
Using vanilla js:
document.getElementById("my-button").onclick = function (e) {
e.stopPropagation();
window.alert("here we go");
};
button {
margin: 20px;
cursor: pointer;
}
div {
cursor: pointer;
background: gray;
width: fit-content;
}
body {
background: gray;
}
<div onclick="document.getElementById('my-button').click()">
<button id="my-button">Button</button>
</div>
$(function() {
var $win = $(window); // or $box parent container
var $box = $(".box");
var $log = $(".log");
$win.on("click.Bst", function(event) {
if (
$box.has(event.target).length == 0 //checks if descendants of $box was clicked
&&
!$box.is(event.target) //checks if the $box itself was clicked
) {
$log.text("you clicked outside the box");
} else {
$log.text("you clicked inside the box");
}
});
});
body,
div,
p {
margin: 0;
padding: 0;
}
body {
background-color: #d6d6d6;
}
.log {
position: relative;
top: 10px;
left: 10px;
color: #000;
}
.box {
position: relative;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
font-size: 18px;
text-align: center;
color: white;
background-color: #79abff;
}
.box p {
color: black;
}
<p class="log">You clicked on: </p>
<div class="box">
Click me
<p>nested p</p>
</div>
I just want to share my code here where I got the Idea on W3schools. I already search of the same topic, but it didn't solve the problem of my Code.
/* The Modal (background) MY CSS CODE*/
.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 */
}
/* The Modal1 (background) */
.modal1 {
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 */
}
And heres the Javascript Code
<!-- Javascript -->
<script>
// Get the modal
var modal = document.getElementByclass("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal1
var modal = document.getElementByIclass("myModal1");
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
And Lastly, the HTML Code
<!-- Trigger/Open The Modal -->
<button id="myBtn">Apply Now</button>
<!-- The Modal -->
<div class="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- Trigger/Open The Modal1 -->
<button id="myBtn1">Apply Now</button>
<!-- The Modal -->
<div class="myModal1" class="modal1">
<!-- Modal content -->
<div class="modal-content">
<span class="close1">×</span>
<p>Some text in the Modalsssssss..</p>
</div>
</div>
I've been kinda stuck with this for a long time. Any opinion or suggestions will be greatly appreciated.
**** UPDATE**
Read your comment and I agree, this is pretty "hacky" and I personally would almost never do this. So I want to show you a solution which is closer to what I would do on a production site. A quick overview:
The code for the actual modal is good, so we can use that.
What I think is "hacky" here is the way we get the data to feed to the modal. Storing data in HTML elements is not terrible, but there are way better ways to do this.
A good way to store this kind of data (strings, numbers, etc.) is with JSON.
We can include the JSON data in the document itself, or we can use AJAX to store it in a different location. Could be a file on the server, or maybe a database somewhere.
More info on $.getJSON() method.
/* Same code from previous example. New code marked with comments */
$("body").on("click", ".toggle-modal", function() {
if ($(".modal").is(":visible")) {
$(".modal").fadeOut("fast", function() {
$(this).remove()
});
} else {
/* Get the data ID from the html element */
const data_id = $(this).data("modal-text");
/* Get JSON data from file on server (simplified)
Replace the url with the path to your JSON file on the server. */
$.getJSON("https://httpbin.org/json", function(response) { // <-- Callback function
/* This is the "callback" function from the "getJSON" method
This fires when the AJAX request has been completed
This function has access to the AJAX response variable which contains the returned data */
/* Light validation here just checks if the response is json */
if (typeof response == 'object') {
/* For kicks let's check out the response */
console.log(response);
/* The response is obviously not our data. Next variable emulates correct response */
response = {
primary_modal: "The message for the primary modal",
secondary_modal: "The message for the secondary modal"
}
/* Get the correct message from the response.
Use the value from the data attribute as the key to find our data in the json structure */
const msg = response[data_id];
/* Launch the modal */
const modal = $("<div />", {
"class": "modal"
}).append(
$("<div />", {
"class": "modal-overlay toggle-modal"
}),
$("<div />", {
"class": "modal-container"
}).append(
$("<div />", {
"class": "modal-close toggle-modal"
}),
$("<div />", {
"class": "modal-content"
}).text(msg) // <-- The message
)
).appendTo("body")
.fadeIn("fast")
.css("display", "flex");
} else {
return "Couldn't get the data";
}
});
}
})
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: cyan;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
padding: 20px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, .8);
cursor: pointer;
}
.modal-container {
background: white;
margin: auto;
position: relative;
font-size: 16px;
line-height: normal;
text-align: center;
font-weight: bold;
z-index: 20;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
font-family: sans-serif;
font-size: 14px;
line-height: 1;
overflow: hidden;
cursor: pointer;
padding: 8px 20px;
background: coral;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.modal-close:before {
content: "X"
}
.modal-content {
padding: 35px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- We removed the modal data and added a reference to the data in the json -->
<div>
<button class="toggle-modal" data-modal-text="primary_modal">Click Here</button>
<button class="toggle-modal" data-modal-text="secondary_modal">Click Here</button>
</div>
Here is a really easy way to re-purpose a modal template for different content using jQuery. Basically you store the message right in the button's data attribute, then just append that content to the dynamically generated modal.
/* Listen for the click event on the button */
$("body").on("click", ".toggle-modal", function() {
/* Check if modal is open */
if ($(".modal").is(":visible")) {
/* if modal is already visible close it out */
$(".modal").fadeOut("fast", function() {
$(this).remove()
});
} else {
/* Get message from button */
const msg = $(this).data("modal-text");
/* dynamically create modal elements */
const modal = $("<div />", {
"class": "modal"
}).append(
$("<div />", {
"class": "modal-overlay toggle-modal"
}),
$("<div />", {
"class": "modal-container"
}).append(
$("<div />", {
"class": "modal-close toggle-modal"
}),
$("<div />", {
"class": "modal-content"
}).text(msg) /* Append text to modal */
)
).appendTo("body") /* Append modal to body */
.fadeIn("fast") /* Fade in modal */
.css("display", "flex") /* Flexbox to center content */
}
})
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: cyan;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
padding: 20px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, .8);
cursor: pointer;
}
.modal-container {
background: white;
margin: auto;
position: relative;
font-size: 16px;
line-height: normal;
text-align: center;
font-weight: bold;
z-index: 20;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
font-family:sans-serif;
font-size:14px;
line-height:1;
overflow: hidden;
cursor: pointer;
padding: 8px 20px;
background: coral;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.modal-close:before {
content: "X"
}
.modal-content {
padding: 35px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Set the modal text right in the data attribute of the button. This approach works for short messages but may not be well suited for more complex content -->
<div>
<button class="toggle-modal" data-modal-text="Short message to be displayed in the first modal">Click Here</button>
<button class="toggle-modal" data-modal-text="A different message for the secondary modal">Click Here</button>
</div>
I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:
Create a group box around certain controls on a web form using CSS
What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.
I would like to create a grey box similar to the ones found on this webpage:
https://img.labnol.org/di/trigger1.png
Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
function changeText()
{
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Here is the CSS (which is referred to in the html as test.css):
body{
background: rgba(0,0,0,0.0);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #0D0D0D;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 140px;
color: #0D0D0D;
font-family: Arial;
}
h2{
text-align: center;
}
form input[type="file"]{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form input[type="button"]{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover{
background: #149174;
color: #0C5645;
}
form input[type="button"]:active{
border:0;
}
form progressBar{
text-align: center;
}
Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.
I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.
Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.
The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.
Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.
Here's a snippet with the changes I just mentioned:
body {
background: rgba(0, 0, 0, 0.0);
}
fieldset {
width: 508px;
height: 270px;
/* fixed width and height*/
margin: 13vh auto;
}
#p1 {
border: 4px dashed #0D0D0D;
/* modified the actual text box instead of the entire form */
width: 508px;
height: 140px;
line-height: 140px;
margin-top: 0px;
}
form p {
text-align: center;
color: #0D0D0D;
font-family: Arial;
}
h2 {
text-align: center;
}
form input[type="file"] {
position: absolute;
margin: 0;
outline: none;
width: 508px;
height: 140px;
margin: 22px 4px;
opacity: 1;
background-color: orange;
/* Last two properties are a visual representation. Delete background-color and set opacity to 0 */
}
form input[type="button"] {
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 100%;
/* width relative to parent fieldset */
height: 35px;
margin-top: -20px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover {
background: #149174;
color: #0C5645;
}
form input[type="button"]:active {
border: 0;
}
form progressBar {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function changeText() {
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<!-- changed progressBar style -->
<progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Hope it helps!
I've created a basic CSS Grid and had everything positioned where I wanted it. When I run my JS (appends info from an API call to a div), the div's dimension push beyond the borders of the viewport. Is there a way to prevent the overall body element from changing and just have the div dynamically increase height?
pics: https://imgur.com/a/wJAcW
I've tried so many different things and can't seem to figure this out. My fallback will be to just overwrite the div rather than append to it. Code is below.
//Set initial latitute and longitude variables, to be used later
var lat = 0;
var long = 0;
//Google Geocode API to find the latitude and longitude of the txtAddress
$("#submit").on("click", function() {
var userInput = $("#txtAddress").val();
//trim the user input to the form needed for the api
var userSearchTerm = userInput.split(' ').join('+');
//call the google geocode api
var queryURLGeocode = "https://maps.googleapis.com/maps/api/geocode/json?address=" + userSearchTerm + "&key=AIzaSyCSAYHZn9fz13c3bsl_RcS13HJu8wDJXCU"
$.ajax({
url: queryURLGeocode,
method: "GET"
})
.done(function(response) {
//Set latitude and longitude from the returned object
lat = response.results[0].geometry.location.lat;
//limit decimal points to 4 (xx.xxxx) - form needed for hiking api
lat = lat.toFixed(4);
long = response.results[0].geometry.location.lng;
long = long.toFixed(4);
//Call the hiking project api
var queryURL = "https://www.hikingproject.com/data/get-trails?lat=" + lat + "&lon=" + long + "&maxDistance=10&key=200206461-4fa8ac1aa85295888ce833cca1b5929f"
$.ajax({
url: queryURL,
method: "GET"
})
.done(function(response) {
// loop through the response trails and add info to the site
for (i = 0; i < response.trails.length; i++) {
var contentDivTitle = $("<div> class='newTrailTitle'");
var contentDivMain = $("<div> class='newTrailDescription'");
contentDivTitle.text("Name: " + response.trails[i].name + " Location: " + response.trails[i].location);
contentDivMain.text("Summary: " + response.trails[i].summary);
$("#search-results").append(contentDivTitle);
$("#search-results").append(contentDivMain);
}
});
});
});
html,
body {
background-color: black;
margin: 10px;
}
h1,
h3 {
color: white;
text-align: center;
padding: 5px;
line-height: 1px;
}
h1 {
/* automatically changes lowercase to uppercase text; */
text-transform: uppercase;
}
sub {
color: white;
text-align: center;
line-height: 1px;
font-size: 15px;
font-weight: lighter;
}
.container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 800px 500px 200px 50px 100px;
grid-gap: 3px;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
font-size: 1em;
}
.container>div:nth-child(1n) {
background-color: black;
}
.container>div:nth-child(2n) {
background-color: blue;
}
.container>div:nth-child(3n) {
background-color: red;
}
.container>div:nth-child(4n) {
background-color: yellow;
}
.container>div:nth-child(5n) {
background-color: green;
}
label {
color: white;
}
#main {
background-image: url("assets/images/etienne-bosiger-367964.jpg");
background-size: cover;
background-repeat: no-repeat;
}
#au,
#cr {
display: block;
margin: auto;
}
#groupPic {
padding: 10px;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div id="main">
<div id="title">
<h1>kairns<sub>®</sub></h1>
<h3>"find your trail"</h3>
<div class="search-div">
<label for="txtAddress">Enter Address: </label>
<input type="text" name="txtAddress" id="txtAddress">
<button type="button" id="submit">Search</button>
</div>
</div>
</div>
<div class="search-results" id="search-results">2</div>
<div>
<p id="au">About Us</p>
<img id="groupPic" src="http://via.placeholder.com/150x150" alt="placeholder image">
<p id="cr">Copyright 2018.</p>
</div>
<div>4</div>
<div>
<p>Powered by
Google Maps,
Open Weather Map, and Hiking Project
</p>
</div>
</div>
<!-- JAVASCRIPT -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- custom javaScript -->
<script type='text/javascript' src='assets/javascript/logic.js'></script>
</body>
</html>
All in-flow children of the #search-results element will align vertically if you apply:
#search-results {
display: flex;
flex-direction: column;
}
I have this html tag which reffers to the backButton provided by the WinJS library:
<button data-win-control="WinJS.UI.BackButton"></button>
I want to change its size. How can I do that? I tried using CSS by adding the ID "backButton" and font-size OR width/height properties, like this:
#backButton {
font-size: small;
}
#backButton {
height: 30px;
width: 30px;
}
EDIT: Code added and a picture of what happens when changing the values of width/height of the button.
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/anime/anime.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
this.renderAnimeInfo(Identifier.file);
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in layout.
},
renderAnimeInfo: function (id) {
// Path for the anime data.
var path = "data/animes.json";
// Retrieve the .json.
WinJS.xhr({ url: path }).then(
function (response) {
var json = JSON.parse(response.responseText);
for (var i = 0; i < json.length; i++) {
if (json[i].file == id) {
var animeData = json[i];
break;
}
}
},
function (error) {},
function (progress) {}
);
},
});
})();
.right {
float: right;
}
.left {
float: left;
}
.active {
background-color: blue;
}
#animeDetails {
background: red;
height: 100%;
width: 300px;
float: left;
}
#animeInfo {
display: -ms-grid;
height: 100%;
width: calc(100% - 300px);
float: right;
}
#navbar {
-ms-grid-row: 1;
padding: 20px 25px;
}
#navbar .right button {
margin-right: 4px;
}
#navbar input {
width: 150px;
}
#details {
-ms-grid-row: 2;
padding: 0 25px;
text-align: justify;
white-space: pre-line;
}
#details h3 {
width: 100%;
padding: 5px 0;
border-bottom: 1px solid #bebebe;
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>anime</title>
<link href="anime.css" rel="stylesheet" />
<script src="anime.js"></script>
</head>
<body>
<div id="animeDetails"></div>
<div id="animeInfo">
<div id="navbar">
<div class="left">
<button class="left" data-win-control="WinJS.UI.BackButton"></button>
<h3>Back</h3>
</div>
<div class="right">
<button type="button" class="active">Details</button>
<button type="button">Episodes</button>
<button type="button">Characters</button>
<button type="button">Staff</button>
<input type="search" placeholder="Search" />
</div>
</div>
<div id="details">
<div id="synopsis">
<h3>Synopsis</h3>
<span>
</span>
</div>
</div>
</div>
</body>
When using the width/height properties, what happens is that the button does resize to the specified value, but the icon inside (which is not a background) doesn't. http://i.imgur.com/lMqmL0G.png
Possibly you have to set display: inline-block to button because the width of an element with display: inline (the default for buttons) is exactly the same as its content because it only takes up the space needed to display its contents so try with:
With id selector
#backButton {
height: 30px;
width: 30px;
display: inline-block;
}
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
With style inline
<button data-win-control="WinJS.UI.BackButton" style="width: 30px; height: 30px; display: inline-block"></button>
Try to set the styles to child element .win-back
#backButton .win-back{
/*---styles---*/
}
You haven't given your button an ID. The CSS does not know what tag to link to.
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
edit: you may find the following reference useful CSS Selectors