Center button and text issues HTML - javascript

I am trying to make a onClick() button that when pressed, makes text show. My issue is that when I click the button, the button scoots down when the text shows up.
Is there a way to make the button not move when the text appears? Maybe make it actually be there but hidden and on button unhide it? I don't know, I just don't want it to move when the button is pressed.
angular.module('starter.controllers', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.flip = function() {
$scope.coinResult = "Heads";
}
})
<body ng-app="starter">
<head>
<style>
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<ion-content>
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult"></p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
</ion-content>
</body>

One way would be to fix the height of the text div coin-result and give it overflow-y: auto. This ensures that the button stays put.
Demo below:
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
height: 100px;
overflow-y: auto;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
Let me know your feedback on this. Thanks!

Related

Scroll to top button visible only on desktop (no mobile)

I made a scroll to top button that appears when the user scrolls down 25px from the top of the document (otherwise it's not visible) thanks to JavaScript following a tutorial because I still don't know anything about this programming language.
However, I would like it to be visible only on desktop websites and not also on mobile.
I tried using media queries but they don't work since JavaScript has control over the visibility of the button.
What function can I integrate to manage everything with JS?
Here is the code I'm using.
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
There is a JS way to detect if a media query is matched: this is done by using window.matchMedia(). Then it is a matter of adding the appropriate media query to matchMedia() function, and then checking the .matches property in your if block:
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
const matchesMediaQuery = window.matchMedia('(min-width: 600px)');
if (matchesMediaQuery.matches && (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25)) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
scrollFunction();
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Just Add this css in your css file or if you are using bootstrap then add bootstrap media query to disable display in mobile
#media only screen and (max-width: 600px) {
#to-top-container {
display: none;
}
}
You don't need javaScript to do it, you should have used the "a" tag to jump to other pages. But the "a" tag can also jump to an element on the same page.
As defined in the HTML specification, you can use href="#top" or href="#" to link to the top of the current page.
The #media query is set to max-width: 600px - adjust the max-width to fit your needs.
html {
scroll-behavior:smooth;
}
body {
position: relative;
}
.section {
height: 100vh;
background: #dedede;
margin-bottom: 20px;
font-size: 100px;
}
.scroll-container {
position: absolute;
top: 0;
right:0;
height: 100%;
}
.scroll-container:before {
content: '';
display: block;
height: 100vh;
pointer-events: none;
}
.scroll-container a {
position: sticky;
top: 88vh;
cursor: pointer;
font-size: 20px;
}
#media (max-width: 600px) {
.scroll-container a {
display: none;
}
}
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="scroll-container">
To Top
</div>

how to place the "read more" text next to the end of truncated line- Javascript [duplicate]

This question already has answers here:
Generating ellipsis AND "Read more" link with CSS
(3 answers)
Closed 2 years ago.
I have a text that I have truncated using the css - height and overflow property.
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary {
height: 47px;
/* adjust based on line-height * rows desired */
overflow: hidden;
}
.ellipsis {
height: 0;
}
.ellipsis span {
background: white;
padding-left: 0.5em;
position: relative;
top: -1.2em;
left: 3.2em;
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<strong>testststststs</strong>
</div>
<div class="ellipsis"><span>... Read more</span></div>
</div>
however my issue is when I try placing the "...read more" using he position relative property it does not work: ex below:
http://jsfiddle.net/ctges45w/3/
As you can see the above fiddle the text is floating in middle of the sentence.
http://jsfiddle.net/ctges45w/5/
how can I make sure that the "read more" text always get placed at the end of the line where its truncated regardless of the width of the content?- something like this:
http://jsfiddle.net/ctges45w/4/
I have tried looking up at sources on stack overflow with similar issue and those havent or partially worked for me: ex here:how to place " ...view more " text next to the truncated sentence in a container-Javscript
any ideas?
Forget all the relative positioning. Just simply put the readmore at the end of the text and style it as you wish.
let summary = document.querySelector('.summary')
if (summary.textContent.length > 100){
let truncated = summary.textContent.substring(0, 100)
summary.innerHTML = `<p style="margin:0;">${truncated}<span class='ellipsis'>... Read more</span></p>`
}
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary{
overflow: hidden;
height: 47px;
padding: 0;
}
.ellipsis{
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
<span class="ellipsis">... Read more</span>
</p>
</div>
</div>

Bootstrap table responsive problem when contain more than 10 columns

Description
Responsive table is only able to show 10 columns with sidebar open, if more than that, the table exceeds 100% width on my screen (1366x768). However, responsive table works fine when the sidebar is closed. Please help me, I literally have no idea what's wrong :(
Problem Figure
Fig. 1 (https://drive.google.com/file/d/1dNzjktJ4SmhvnTbltdCbTj8_Mo-f5LFb/view?usp=sharing)
Fig. 2 (https://drive.google.com/file/d/1XHb8ijRPIgXzw0zbmO14QroApR98qPuI/view?usp=sharing)
Fig. 3 (https://drive.google.com/file/d/13UwzEBP5oYfh8laPykcbI80MDhXc8Brm/view?usp=sharing)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="d-flex" id="wrapper">
<div id="sidebar-wrapper"></div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand bg-darkblue">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<button class="btn" id="menu-toggle">Open Sidebar</button>
</li>
<li class="nav-item ml-2 mt-1">
<span class="title">Index</span>
</li>
</ul>
</nav>
<div class="container-fluid mt-4 center">
<form>
<div class="row form-group">
<div class="col-md-3 col-12">
<label for="name">Name</label>
</div>
<div class="col-md-9 col-12">
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
</form>
<div class="table-wrapper">
<table class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>12. Last Field</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
style.css
:root {
--black: #000000;
--white: #ffffff;
--dark-blue: #1565c0;
--dark-gray: #757575;
--light-gray: #e5e5e5;
--lighter-gray: #f6f6f6;
}
body {
overflow-x: hidden;
}
.bg-darkblue {
background-color: var(--dark-blue);
}
.title {
font-size: 1.25rem;
color: var(--white);
}
#wrapper {
overflow-x: hidden;
background: --var(color-white);
}
#sidebar-wrapper {
background-color: var(--light-gray);
width: 250px;
height: 200vh;
padding: 30vh 0;
position: fixed;
z-index: 7;
top: 0;
left: 0;
transition: width .25s cubic-bezier(0.4, 0, 0.2, 1);
overflow-x: hidden;
overflow-y: auto;
}
#page-content-wrapper {
margin-left: 250px;
width: 100%;
min-height: 100vh;
transition: margin-left .25s cubic-bezier(0.4, 0, 0.2, 1);
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#wrapper.toggled #page-content-wrapper {
margin-left: 0;
}
.table-wrapper {
width: 100%;
}
you have padding just override it by adding
this to your css .table td, .table th {padding:0!important;}
I added overflow-x: hidden; on #page-content-wrapper and now it works

Append to a string shortened by text-overflow ellipsis

I'd like to cleanly display a string shortened by an ellipsis in quotation marks for example, the string a long sentence that shouldn't be fully displayed shown as "a long sentence...".
However, when I use the ellipsis provided by text-overflow: it will render as "a long sentence... ". What may be done to remove the extra space included in the ellipsis?
Example taken straight from here: text-overflow
I removed the padding on paragraphs. As you can see there is no "extra space"
p {
width: 200px;
border: 1px solid;
padding: 0;
/* BOTH of the following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
}
.overflow-visible {
white-space: initial;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
/* Not supported in most browsers,
see the 'Browser compatibility' section below */
text-overflow: " [..]";
}
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

showing a div content after scrolling down

hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.
If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/

Categories

Resources