I'd like to add a box containing smileys icons above the comment area which opens using jQuery on click. What I come up with is this:
<div class="emo">
<i href="#" id="showhide_emobox"> </i>
<div id="emobox">
<input class="emoticon" id="icon-smile" type="button" value=":)" />
<input class="emoticon" id="icon-sad" type="button" value=":(" />
<input class="emoticon" id="icon-widesmile" type="button" value=":D" /> <br>
</div>
</div>
css:
.emoticon-smile{
background: url('../smileys/smile.png');
}
#icon-smile {
border: none;
background: url('../images/smile.gif') no-repeat;
}
jQuery:
// =======show hide emoticon div============
$('#showhide_emobox').click(function(){
$('#emobox').toggle();
$(this).toggleClass('active');
});
// ============add emoticons============
$('.emoticon').click(function() {
var textarea_val = jQuery.trim($('.user-comment').val());
var emotion_val = $(this).attr('value');
if (textarea_val =='') {
var sp = '';
} else {
var sp = ' ';
}
$('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);
});
However I have difficulty placing buttons in a nice array and make background image for them (the button values appear before image and the array is not perfectly rectangular. So I'm wondering maybe this is not the best way to render this box.
Any ideas to do this properly?
First show images, on hover hide image and show text. No need for input elements to get text of Dom Node
Something like this:
$(document).ready(function() {
$(".wrapper").click(function() {
var value = $(this).find(".smily-text").text();
console.log(value);
alert("Smily text is '" + value + "'");
});
});
.smily {
background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
width: 45px;
height: 45px;
}
.smily-text {
display: none;
font-size: 20px;
text-align: center;
line-height: 45px;
height: 45px;
width: 45px;
}
.wrapper {
border: 1px solid red;
float: left;
cursor: pointer;
}
.wrapper:hover .smily {
display: none;
}
.wrapper:hover .smily-text {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:)</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:(</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:]</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:[</div>
</div>
Related
I'm a visual artist with not that many coding skills. I know some HTML and some CSS but that's it. I like to create a webpage that does the following:
On the left, there is an image with lines. When hovering over a line the window on the right shows an image, movie, or plays a sound. Hovering over the next line triggers another image, movie, or sound.
Anyone can point me in the correct direction? I made a gif to show how it should work...
Simple solution:
Select HTML elements which we want to hover over (left, middle, right), and HTML elements which contain our images/videos/audio etc. (img1, sound, img2)
For every element you want to hover over, you need to add event listener (addEventListener), so you can manipulate your HTML/CSS code with JavaScript.
2.2 Inside each event listener you add or remove class: none, which has CSS value of display: none (this means element won't be shown), depending on what your goal is.
To make images disappear when we don't hover our cursor over the element, we need to again add event listener to elements which already have on mouseover event listener. In this case we use mouseover or blur. When cursor isn't on the element, JavaScript will automatically add none class to it.
const left = document.querySelector('.left-line');
const middle = document.querySelector('.middle-line');
const right = document.querySelector('.right-line');
const img1 = document.querySelector('.image-1');
const sound = document.querySelector('.sound');
const img2 = document.querySelector('.image-2');
left.addEventListener('mouseover', () => {
img1.classList.remove('none');
img2.classList.add('none');
sound.classList.add('none');
});
middle.addEventListener('mouseover', () => {
img1.classList.add('none');
img2.classList.remove('none');
sound.classList.add('none');
});
right.addEventListener('mouseover', () => {
img1.classList.add('none');
img2.classList.add('none');
sound.classList.remove('none');
});
left.addEventListener('mouseout',() => addNoneClass());
middle.addEventListener('mouseout', () => addNoneClass());
right.addEventListener('mouseout', () => addNoneClass());
function addNoneClass() {
img1.classList.add('none');
img2.classList.add('none');
sound.classList.add('none');
}
* {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
main {
display: flex;
width: 100%;
height: 100%;
}
section.left {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.line-container {
width: 150px;
height: 150px;
display: flex;
align-items: center;
border: 2px solid black;
}
.left-line, .middle-line, .right-line {
width: 50px;
height: 90%;
margin: 0 10px;
}
.left-line { background-color: green; }
.middle-line { background-color: red; }
.right-line { background-color: blue; }
section.right {
width: 50%;
display:flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
border: 2px solid black;
}
img {
width: 200px;
height: 200px;
}
.none {
display: none;
}
<main>
<section class="left">
<div class="line-container">
<div class="left-line">
</div>
<div class="middle-line">
</div>
<div class="right-line">
</div>
</div>
</section>
<section class="right">
<div class="box">
<div class="image-1 none">
<img src="https://play-lh.googleusercontent.com/aFWiT2lTa9CYBpyPjfgfNHd0r5puwKRGj2rHpdPTNrz2N9LXgN_MbLjePd1OTc0E8Rl1" alt="image-1">
</div>
<div class="sound none">
<img src="https://sm.pcmag.com/pcmag_uk/review/g/google-pho/google-photos_z68u.jpg" alt="sound">
</div>
<div class="image-2 none">
<img src="https://cdn.vox-cdn.com/thumbor/I2PsqRLIaCB1iYUuSptrrR5M8oQ=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/68829483/acastro_210104_1777_google_0001.0.jpg" alt="image-2">
</div>
</div>
</section>
</main>
You can do this by the following code example.
HTML:
<div class="lines">
<span id='line-1'>|</span>
<span id='line-2'>|</span>
<span id='line-3'>|</span>
</div>
<div id='output'></div>
JS
const line1 = document.getElementById('line-1')
const line2 = document.getElementById('line-2')
const line3 = document.getElementById('line-3')
const output = document.getElementById('output')
line1.addEventListener('mouseover', () => {
output.innerHTML = 'Content One'
})
line2.addEventListener('mouseover', () => {
output.innerHTML = 'Content Two'
})
line3.addEventListener('mouseover', () => {
output.innerHTML = 'Content Three'
})
Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
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;
}
So I have a chat UI that is a box where messages go, and at the bottom of the box of messages is a text input element. It works fine at the beginning, but once enough messages appear then the text input element scrolls up, along with the messages, and will not stay positioned at the bottom. How can I do this? Any useful thoughts would be appreciated.
<html>
<body>
<div id="chatui">
<div id="chatmsgs"></div>
<input type="text" id="chatbox">
</div>
</body>
</html>
Here is my CSS:
#chatui {
z-index:3;
position:absolute;
bottom:5px;
width: 380px;
height: 150px;
border: 3px solid #8AC007;
margin-left:5px;
overflow:auto;
}
#chatbox {bottom:3px;position:absolute;width:378px;}
#chatmsgs {position:absolute;}
Here is my Javascript:
This just says when you press "Enter" on your keyboard to display the text you typed into the "chatmsgs" div.
$(window).keydown(function(e){
if (e.keyCode == 13) {
if (document.activeElement.id == 'chatbox') {
var msg = document.getElementById('chatbox').value;
document.getElementById('chatbox').value = '';
var ms = '<p>'+msg+'</p>';
$('#chatmsgs').append(ms);
}
}
});
Check out this fiddle to see what I am talking about:
https://jsfiddle.net/ev3uymw6/
You have to add overflow:auto and appropriate height to the chatmsgs div, so that it doesn't grow beyond the size of chatui and make it scroll alltogether.
$(window).keydown(function(e) {
if (e.keyCode == 13) {
if (document.activeElement.id == 'chatbox') {
var msg = document.getElementById('chatbox').value;
document.getElementById('chatbox').value = '';
var ms = '<p>' + msg + '</p>';
$('#chatmsgs').append(ms);
}
}
});
#chatui {
z-index: 3;
position: absolute;
bottom: 5px;
width: 380px;
height: 150px;
border: 3px solid #8AC007;
margin-left: 5px;
}
#chatbox {
bottom: 3px;
position: absolute;
width: 378px;
}
#chatmsgs {
position: absolute;
height: 130px;
overflow: auto;
width: 378px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="chatui">
<div id="chatmsgs">
</div>
<input type="text" id="chatbox">
</div>
</body>
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