I'm new in coding, so please be nice with me :)
I'm trying to show the hidden text on mouseover.
I would like a transion from right to left, but only where there is actually some hidden/ellipsised text ( I cannot know how long is it)
I'have something like this:
<div class="card">
<div class="text-box">
<h1> /*injected text*/ </h1>
</div>
</div>
css :
.text-box {
background-color: blue;
color:white;
}
h1 {
text-overflow: ellipsis;
overflow: hidden;
#include transition(left 4s linear);
overflow-x: hidden;
position: relative;
right: 0px;
}
.card:hover h1, .card:active h1 {
right:100px;
overflow: visible;
}
I need something similiar to the third, but only for ellipsised text
https://codepen.io/yurigor/pen/mAPkWP
thanks
Here's the code you only need from that codepen snippet
html
<div class="marquee bluebox">
<span><span>Hover over or touch me to see animated scrolling of this string. Fancy but buggy. May be still can be improved.</span></span>
</div>
css
.bluebox, .stuff {
box-sizing: border-box;
padding: 5px;
width: 300px;
border: 1px blue solid;
background-color: rgba(0, 0, 255, 0.4);
margin-bottom: 5px;
float: left;
}
.marquee {
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
width: 100%;
}
.marquee span span {
transition: left 4s linear;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
left: 0px;
}
.marquee:active span, .marquee:hover span {
width: auto;
}
.marquee:active span span, .marquee:hover span span {
left: calc(300px - 15px - 100%);
}
here's a demo
https://jsbin.com/dukukid/edit?html,css,output
the css code with a minor modification to avoid transition when the text going back to initial position. although i highly recommend you learn SASS because it makes the code snippet shorter as you can see in your link.
/*this function take a DOM element as an input, test if this element have an overflow
and then apply ellipsis and transition to it if its the case*/
function transitionEllipsised(element, textToAdd){
/*get the jQuery collection of this element to use jQuery innerHeight and innerWidth
methods on it and add the text to it*/
var $element = $(element).text(textToAdd);
//if the text did overflow in the width or the height of the container apply ellipsis transition
if (element.scrollHeight > $element.innerHeight()
|| element.scrollWidth > $element.innerWidth()) {
var innerHtml = $element.html();
//add marquee class to the element it will hide the overflow
$element.addClass("marquee")
//wrap the element in the two spans that will create the transition effect
.html(`<span><span>${innerHtml}</span></span>`);
}
}
//this is an example to use the function transitionEllipsised
/*when user click on the button the text on the input will be added to the h1 element
and apply transition only if text overflow*/
$("button.add-text").click(function(){
var headerExample = document.querySelector("h1.header-example");
//get the text of the user input
var textToAdd = $("input.text-to-add").val();
transitionEllipsised(headerExample, textToAdd);
});
/*hide overflow*/
.marquee{
white-space:nowrap;
overflow: hidden;
}
/*the css that you need to do the transition effect*/
.marquee span{
display: inline-block;
width: 100%;
}
.marquee span span{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
left: 0px;
}
.marquee:active span,
.marquee:hover span{
width: auto;
}
.marquee:active span span,
.marquee:hover span span{
transition: left 4s linear;
left: calc(300px - 15px - 100%);
}
/*header of the example*/
h1.header-example{
/*important to fix the width and height of the container. if the text is longer the 300px there will be an overflow*/
width: 300px;
height: 40px;
border: red solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- this is an example to use the function transitionEllipsised -->
<p>add some text using the input. if the text is longer then the container there will be transition effect to show the overflow</p>
<input type="text" class="text-to-add"><button class="add-text">add text</button>
<h1 class="header-example"></h1>
Related
How to truncate text with JS/React, and replace the end of the line with a custom SVG icon instead of the CSS default ellipsis (...)?
Example situation:
.container {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #90e4ff;
margin-bottom: 8px;
padding: 2px;
}
<div class="container">
The text here fits.
</div>
<div class="container">
This text here is way too long and certainly doesn't fit.
</div>
The output in the second div with the too long text is: This text here is way...
But the desired output would be: This text here is way<CustomIcon>
Thank you for the good question:)
By CSS only you cannot use an icon. I tried to think out a solution with JS. As you can see if the background of the SVG is transparent, the text below is visible. So better to use white background to cover the text.
Another important thing is that you need to use spans because divs have default width of 100%.
const containers = document.querySelectorAll('.container');
for (let i=0; i< containers.length; i++) {
if (containers[i].offsetWidth > 150) {
containers[i].style.width = "150px";
containers[i].style.setProperty('--height', '20px');
containers[i].style.setProperty('--width', '20px');
}
}
.container {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
background: #90e4ff;
position: relative;
display: inline-block;
}
.container:after {
content: "";
width: var(--width, 0);
height: var(--height, 0);
background: url("https://www.svgrepo.com/show/5044/heart.svg") 0 0 no-repeat;
position: absolute;
top: 0;
right: 0;
display: inline-block;
background-size: contain;
}
<span class="container"> The text here.</span>
<span class="container"> This text here is way too long and certainly doesn't fit.</span>
Result looked for:
MODE 1: when the window is large (say >465px) the TOC items is displayed to the left of the content page
MODE 2: when the window's width gets smaller than 465px, reduce the width of the TOC item using transition
MODE 3: when the window's width gets greater than 465px, increase the width of the TOC item using a transition
finally, when the window's width < 465px and that the TOC is therefore hidden as a result of the mechanism described above, show some text on top that users can click on. When they click on this text, display the TOC item as an overlay. When you click on this text again, hide the TOC item as an overlay.
How to see the problem I try to get rid of:
increase the window to a large width and then back to small width. See the transitions when you go from one to the other. This is good.
make the window small so that the "Show Table of Content" text shows up. Click on the text. The TOC is displayed as an overlay. This is good. Then click again, to HIDE the TOC as an overlay. The cyan TOC disappears, but a transition is played right after. That's the problem. I want to get rid of this transition.
This behavior doesn't make sense to me, because the media query specifies that when the window < 465px the width of the TOC is 0. So why it is reset to 150px is a mystery to me. But the most important for me is, how do I get rid of this unwanted transition when the TOC as an overlay is removed (when the the 'overlay' class is toggled (off)?
function showMenuAsOverlay(caller) {
var node = document.getElementById("toc");
node.classList.toggle('overlay');
if (node.classList.contains('overlay'))
caller.innerHTML = "Hide Table of Content";
else
caller.innerHTML = "Show Table of Content";
}
.wrapper {
display: flex;
flex-direction: row;
border: 3px solid black;
z-index: -1;
position: relative;
}
.container-left {}
#toc {
border: 1px solid green;
flex: 0 0 auto;
white-space: pre;
z-index: -1;
width: 150px;
background-color: red;
transition: width 1s ease-out;
box-sizing: border-box;
}
.container-right {
display: flex;
border: 1px solid red;
flex 1 1 auto;
max-width: 400px;
background-color: white;
z-index:-1;
box-sizing: border-box;
}
.myicon {
cursor: pointer;
visibility: hidden;
}
#media
screen and (max-width: 465px) {
#toc {
width: 0;
background-color: purple;
transition: width 1s ease-out;
}
#toc.overlay {
z-index: 999;
position: absolute;
left: 0px;
background-color: cyan;
bottom: 0;
top: 0;
width: 150px;
transition: left 1s ease-out;
}
.myicon {
visibility: visible;
}
}
<body>
<div onclick="showMenuAsOverlay(this)" class="myicon" id="myicon">Show Table of Content</div>
<div class="wrapper">
<div class="container-left" id="toc" data-state="0">This is some text in the TOC</div>
<div class="container-right">
This is some content this is some content this is some more content, and this is content again and again.
</div>
</div>
</body>
The transition is happening when <div id="toc"> loses the class overlay.
That means you go from applying this rule:
#toc.overlay {
z-index: 999;
position: absolute;
left: 0px;
background-color: cyan;
bottom: 0;
top: 0;
width: 150px;
transition: left 1s ease-out;
}
to applying this rule:
#toc {
width: 0;
background-color: purple;
transition: width 1s ease-out;
}
This makes it clear why the transition is happening. You're going from width: 150px to width: 0 with this transition applied from #toc: width 1s ease-out;
Also, you've got this applied without a media query:
#toc {
border: 1px solid green;
flex: 0 0 auto;
white-space: pre;
z-index: -1;
width: 150px;
background-color: red;
transition: width 1s ease-out;
box-sizing: border-box;
}
This means the transition applies whatever the screen size. I don't think that's what you want. Put a media query around that block to only apply when you really want it to.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I need to add a line to end of a h tag with CSS like this image:
Here is the html code:
<div class="titleContainer">
<h1 class="titleLeft">how We turn your</h1>
<div class="horizontalLineRight orangeLine" style="width: 213px;"></div>
</div>
I set the width of horizontalLineRight with jQuery:
jQuery( document ).ready(function($) {
$( window ).resize(function() {
$( '.titleContainer' ).each(function() {
var titleContainerWidth = $(this).width();
var titleLeftWidth = $(this).find( '.titleLeft' ).outerWidth();
var titleRightWidth = $(this).find( '.titleRight' ).outerWidth();
remainingRight = titleContainerWidth - titleLeftWidth - 2;
remainingLeft = titleContainerWidth - titleRightWidth - 2;
$(this).find( '.horizontalLineRight' ).css("width", remainingRight);
$(this).find( '.horizontalLineLeft' ).css("width", remainingLeft);
});
});
});
It works fine when the h tag doesn't fill 100% width of container.
But when I change the width, the line disappear. I think I have to put <div class="horizontalLineRight orangeLine"> inside <div class="titleContainer"> but I don't know how I can calculate remaining width (free space) with jQuery.
You can try like below:
.titleContainer {
max-width:400px;
animation:change 3s linear infinite alternate;
}
.titleLeft {
background:
/*the line placed at the bottom of the container*/
linear-gradient(orange,orange) 0 calc(100% - 0.5em)/100% 2px no-repeat;
background-color:#000;
}
.titleLeft span {
/*inherit the background-color and hide the line under the text*/
background-color:inherit;
padding:0 5px;
color:#fff;
}
#keyframes change {
to {max-width:100px }
}
<div class="titleContainer">
<h1 class="titleLeft"><span>how We turn your</span></h1>
</div>
<div class="titleContainer">
<h1 class="titleLeft" style="background-color:red;"><span>how We turn your</span></h1>
</div>
In case you want transparency you can try this:
.titleContainer {
max-width: 400px;
animation: change 3s linear infinite alternate;
overflow:hidden; /*you need to hide the extra line width*/
}
.titleLeft span {
position: relative;
padding: 0 5px;
}
/*the line*/
.titleLeft span:after {
content: "";
position: absolute;
left: 100%; /*put at the end of the text*/
width: 100vw; /*use a big width to be sure to cover the need space*/
bottom: 0.5em;
height: 2px;
background-color: blue;
}
#keyframes change {
to {max-width: 100px}
}
body {
background:linear-gradient(to right,pink,red);
}
<div class="titleContainer">
<h1 class="titleLeft"><span>how We turn your</span></h1>
</div>
If you know which word (or group of words) you want the line to be next to, you can wrap those words inside a span and use display: flex + ::after on the span to get the desired effect shown in your first image.
<h1>How we turn <span>your</span> business requirements into</h1>
<style>
h1 span {
width: 100%;
background: black;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 span:after {
content: "";
background: orange;
border-radius: 4px;
display: block;
height: 6px;
min-width: 50%;
flex: 1;
margin-left: 16px;
}
</style>
Here's a sandbox with a complete example.
If you just want it to take the remaining width of the title space, you shouldn't need to do any jQuery shenanigans with this approach.
You could use an empty span with some styling to solve your issue. Try adding <span id='myLine'></span> after the h tag, with some CSS styling:
#myLine {
width: 80%; /*or any percentage that makes it look good for you*/
/*also set the border bottom to look the way you want, e.g.:*/
border-bottom: 2px solid orange;
}
I have pictures in a horizontal scroll and I want to be able to hover over each image, and when I do, I want the picture to be slightly "grayed out" with text over it.
I can't for the life of me figure out how to do it.
I made this fiddle to show what my scroll bar looks like.
https://jsfiddle.net/burgoyne/u1zdn80p/1/
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
Can someone point me in the right direction here? I have been trying different things with CSS to gray it out and add text, with no luck.
Thanks!
You have to specify what you want in a CSS img:hover rule, like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
opacity: .5;
}
<div id="scroll">
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>
About the gray color over the image, you can just add opacity to the image on hover ("opacity: 0.5") and, if you want, some transition between the event and the "grayness" with "transition: 0.5s" or so.
About the problem with the text overlay, I think you should visit this answer: Text on image mouseover?
You can place text inside with class named
<span class="text-content"><span>Some text here</span></span>
and then u can use css to place text on the image, something like ...
span.text-content
{
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
I hope this helps.
I am trying to put together a page that will have a horizontally scrolling pane on it - here is an example of the layout I am looking to get:
The content is dynamically added and has varying dimensions. .
Here's some HTML:
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
Base CSS:
.container {
width: 100%;
height: 100%;
}
.container .inner {
position: relative
}
.container .inner > div {
float: left;
}
Currently the only way I can get it working is by setting an explicit width for .inner. Otherwise, closest I've come is this answer, but it's still pretty far off my desired effect. Is it possible to achieve what I'm looking for with HTML/CSS alone or will I have to resort to javascript?
Is this what you expected? http://jsfiddle.net/GE5Hf/4/
Just use white-space: nowrap together with the inline-block and vertical-align: top. You don't need your .inner div to achieve the desired effect - just use one container with overflow-x: auto:
<div class="container">
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
</div>
CSS
.container {
width: 100%;
height: 100%;
overflow-x: auto;
white-space: nowrap;
}
.container > div {
display:inline-block;
vertical-align: top;
}
Note: it is better to use overflow-x: auto than scroll just in case the scrollbar is not needed.
EDIT: We were speculating whether you actually need that .inner div. If you need it, you can just add it back with no special style required: http://jsfiddle.net/GE5Hf/5/
EDIT 2: To have the .inner div the width as its children, simply give it display:inline-block: http://jsfiddle.net/GE5Hf/8/
EDIT 3: Tried what you suggested in your last deleted comment, i.e. remove the fixed width of the child. This was really tricky, I had to wrap each child element to special div with display: table-cell and the inner div gets dislay: table-row: http://jsfiddle.net/GE5Hf/12/
This can be done using CSS only.
Here's a jsFiddle.
The solution is to set position: relative; on .container, which creates a new stacking context inside the .container, setting position: absolute; and white-space: nowrap; on .inner ensures that .inner's content div's will not wrap to the next line and that .inner will grow with its content, adding display: inline-block; and vertical-align: top; on the .inner > div's ensures that they are treated as inline elements and stick to the top of their containing element.
I believe this is what you are after, I have checked on the latest versions of IE, Chrome, Firefox and Safari and it works fine on all of them, I have no reason to believe that it won't work on older versions.
HTML
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS
.container {
position: relative;
width: 220px;
height: 400px;
overflow-x: scroll;
}
.container .inner {
position: absolute;
white-space: nowrap;
background-color: #FFCCFF;
}
.container .inner > div {
vertical-align: top;
display: inline-block;
margin: 10px;
}
Is position: relative mandatory ?
.container .inner {
position: fixed;
overflow: hidden;
}
demo
#styke You can do that with display:inline-block(and some font-size on .inner > div) and font-size:0 to div.inner.Provided fiddle here: http://jsfiddle.net/zepva/4/ , ignore the colors, i used them only for demonstrationfont-size:0 will remove the gaps between the element using display:inline-block so when you will get the total width of the div.inner, that will be the sum of children divs
Take a look at this, no script was necessary:
.container {
width: 300px;
height: 100%;
background-color: silver;
}
.container .inner {
white-space:nowrap;
padding: 10px;
overflow-x: scroll;
background-color: gray;
}
.container .inner > div {
display: inline-block;
vertical-align:top;
background-color: red;
border: 1px solid black;
}
Demo: http://jsfiddle.net/er144/4FLWK/
display:inline-block, with vertical-align:top , that way your text wont fall at the bottom of the container.
.container .inner > div {
display:inline-block;
vertical-align:top;
}