Aligning text vertically from top to bottom HTML5 CSS3

Aligning text vertically from top to bottom HTML5 CSS3 - javascript

I have a multilingual web page. It is required to show the labels on the button on the page upside down. I am using the following CSS:
HTML:
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic 2</div>
</button>
CSS:
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:left;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-transform:uppercase;
font-size-adjust:0.5;
}
So the output is something like this:
The Japanese characters are displayed perfectly according to desire, but the alphabets and numbers aren't, I want BASIC2 to be like the Japanese characterslike
B
A
S
I
C
2
How can I achieve this?
EDIT FOR EXPLANATION:
I am using the same logic to transform my text, but if you look at the Japanese characters they get transformed smoothly, while the normal alphabet characters tend to "ROTATE" I don't want the rotation for English characters, why can't they be displayed the same as Japanese characters.

Use text-orientation: upright; this will solve the problem.
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:left;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-transform:uppercase;
font-size-adjust:0.5;
text-orientation: upright;
}
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic 2</div>
</button>

Updated
Below samples work cross browser , which text-orientation doesn't (yet).
Simplest would be like this, using <br>, manually added or with script.
var elems = document.querySelectorAll('.test div');
for (var i = 0; i < elems.length; i++) {
elems[i].innerHTML = elems[i].textContent.split('').join('<br>')
}
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display: inline-block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:center;
text-transform:uppercase;
font-size-adjust:0.5;
}
.divider{
border-top: 1px solid;
padding: 10px 0;
margin-top: 10px;
}
<button class="btn btn-primary topdown-button">
<div>お<br>客<br>様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>B<br>a<br>s<br>i<br>c<br>2</div>
</button>
<div class="divider">Sample using script</div>
<button class="btn btn-primary topdown-button test">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button test">
<div>Basic2</div>
</button>
2:nd alternative, using word-break
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
text-align: center;
}
.topdown-button div{
text-transform: uppercase;
font-size:18px;
min-height: 148px;
position:relative;
text-align:center;
margin: 0 auto;
word-break: break-all;
width: 12px;
}
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic2</div>
</button>

you can utilize flexbox to make you css look more clean. Look this pen
HTML
<button class="btn btn-primary topdown-button">
<div>お</div>
<div>客</div>
<div>様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>B</div>
<div>A</div>
<div>S</div>
<div>I</div>
<div>C</div>
<br>
<div>2</div>
</button>
CSS
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.topdown-button div{
text-transform: uppercase;
font-size:18px;
}

Related

CSS Position Sticky Is Not Working For All Divs

I'm working on one of mine project and for that I want to make the Search Bar sticky for that I've written a JS code but the problem is that the Search Bar is appear to be sticky on the "Context Section" only, It's not sticking/ working on "Sidebar & Footer". I want to make it sticky for complete body after the OffSet.
I have also tried the "position: fixed;" instead of "position: sticky;" and It's working fine in fixed position but in fixed position the Search Bar goes outside the body (Even with "overflow: hidden;" not working) that's why I'm using the sticky position.
How can I fix this issue?
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main" style="width: 400px;">
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>

you can put the search-bar in the outermost div so that it can include the header and footer
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<div class="main" style="width: 400px;">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<!-- <div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div> -->
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>

How to show sub buttons on hower around the element

i am doing the category tree view for admin panel, and i want to show on hower some sub buttons around the element. How can i do like this?
I want something like this
This is my category tree view

Your html should be
<div class="button-container text-center">
<button class="btn btn-default btn-circle soo top"><i class="fa fa-trash"></i></button>
<button id="subbtnshow" class="btn btn-outline-primary">Help me</button>
<button class="btn btn-default btn-circle soo foo"><i class="fa fa-edit"></i></button>
<button class="btn btn-default btn-circle soo bottom"><i class="fa fa-plus-circle"></i></button>
</div>
and css should be
.button-container{
position:relative;
padding:35px;
width:fit-content;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
border:1px solid;
}
.soo {
position: absolute;
display: none;
font-size: 20px;
padding: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
}
.soo.top{
top:0px;
}
.soo.bottom{
bottom:0px;
}
.foo {
left:initial;
margin-top:auto;
margin-bottom:auto;
top:0px;
bottom:0px;
}

On click is not working with two div nested in same row

I have two HTML div nested in one div class="row"; the first one contains three <button>, the second one four <p>. Before adding the second div, the buttons included in the first div correctly worked if clicked; after having added the second div the button function on.click stopped working - button ID's were not changed, nor the js. If I remove the second div id="stats", buttons turn up and running.
I guess there is a type conflict within the row div but so far couldn't find it.
$('#btn-button-a').on("click", function() {
console.log("click on button")
var url = '....';
window.open(url, '_blank');
});
$('#btn-button-b').on("click", function() {
console.log("click on button")
var url = '....';
window.open(url, '_blank');
});
$('#btn-button-c').on("click", function() {
console.log("click on button")
var url = '....';
window.open(url, '_blank');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="row" style="margin-left:0px !important;">
<div style="float:left; width: 184px; height: 152px; background: #bee0cc; border-radius: 8px; margin-left: 12px; margin-right: 12px;">
<b>
<label style="font-size: 18px; color: white; margin-top: 4px; text-align: center;">Title</label>
<button id="btn-button-a" class="btn btn-primary-custom" style="width: 170px; height: 30px; font-size: 13px; padding-left: 0px !important; margin:6px; text-align: center">
<span>Button a</span> </button>
<button id="btn-button-b" class="btn btn-primary-custom" style="width: 170px; height: 30px; font-size: 13px; padding-left: 0px !important; margin:6px ; text-align: center">
<span>Button b</span> </button>
<button id="btn-button-c" class="btn btn-primary-custom" style="width: 170px; height: 30px; font-size: 13px; padding-left: 0px !important; margin:6px ; text-align: center">
<span>Button c </span> </button>
</b>
</div>
<div id="stats" style="float:left; width: 400px; height: 152px; background: #bee0cc; border-radius: 8px; margin-left: 12px; margin-right: 12px;">
<label style="font-size: 18px; color: white; margin-top: 4px; text-align: center;">report</label>
<p style="font-size: 13px; color: black; margin: 15px; text-align: left;">Frozen users: <b>$result_a$</b>
</p>
<p style="font-size: 13px; color: black; margin: 15px; text-align: left;">Frozen users %: <b>$result_b$</b>
</p>
<p class="status-inline" style="font-size: 13px; color: black; margin: 15px; text-align: left;">Status <b>$result_c$</b>
<!--<span> </span> -->
</p>
<p style="font-size: 13px; color: black; margin: 15px; text-align: left;">t_number: <b>-</b>
</p>
</div>
</div>
</html>
By removing from the second div $result_a$, $result_b$, $result_c$, which are tokens set by a Splunk search, the button work again.

My buttons go down when I press them

I have 9 buttons in a board and I want to show an 'X' or an 'O' whenever I press them. However when I press a button it goes down.
$(document).ready(function(){
var against = 'human';
var board = ['-','-','-',
'-','-','-',
'-','-','-'];
var turn = 'X';
$('.xo-btns').click(function(){
$(this).text(turn);
});
});
body{
padding: 0px;
margin: 0px;
width: auto;
height: auto;
background: black;
font-family: 'Raleway', sans-serif;
}
.container{
text-align: center;
}
.board{
display: inline-block;
text-align: center;
background: red;
padding-top: 15px;
padding-left: 10px;
height: 250px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.xo-btns{
width: 70px;
height: 70px;
padding: 0px;
border-radius: 4px;
background: transparent;
outline: none;
color: white;
/* display: inline-block; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="board">
<button class="xo-btns" id="one" value="1"></button>
<button class="xo-btns" id="two" value="2"></button>
<button class="xo-btns" id="three" value="3"></button>
<br>
<button class="xo-btns" id="four" value="4"></button>
<button class="xo-btns" id="five" value="5"></button>
<button class="xo-btns" id="six" value="6"></button>
<br>
<button class="xo-btns" id="seven" value="7"></button>
<button class="xo-btns" id="eight" value="8"></button>
<button class="xo-btns" id="nine" value="9"></button>
<br>
</div>
</div>
How can I fix it so every time I press one of them, they stay where they started.
Thank you!

This happens because of the vertical-align attribute, which sometimes has a buggy behaviour in my opinion.
Add
vertical-align: middle; to your "xo-btns" class and you should be fine.

Show and hide not working in Firefox with jQuery version 3.1.0

I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.

The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}

This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp

Develop Reference

JavaScript is the programming language of the Web.

Aligning text vertically from top to bottom HTML5 CSS3 - javascript

Related

CSS Position Sticky Is Not Working For All Divs

How to show sub buttons on hower around the element

On click is not working with two div nested in same row

My buttons go down when I press them

Show and hide not working in Firefox with jQuery version 3.1.0

Categories

Resources