I have a select list with a specified width. text-overflow: ellipsis is working only with Firefox v15. It is not working with IE7-IE9 and Chrome. Is text-overflow : ellipsis supported in IE7- IE 9 and chrome? If yes, what am i missing here? Is there a work around to get a similar effect? Please help. Thanks in advance. Html is given below
<!DOCTYPE html>
<html>
<body>
<select style="white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;width:70px;
">
<option>Volvooooooooooooo</option>
<option>Saabbbbbbbbbbbb</option>
<option>Mercedesaaaaaaaaaa</option>
<option>Audiiiiiiiiiiiiiii</option>
</select>
</body>
</html>
I think that text-overflow:ellipsis is not supported in Chrome when you put it into a select element, you can see an exemple here: http://jsfiddle.net/t5eUe/
You can do this programming. For example, if you use Rails, you have the function "truncate", if you use php, you have the function "substr".
I studied on net that text-overflow:ellipsis does not work on IE, when the container is a div or width attribute is not defined.
We can also use in IE -ms-text-overflow:ellipsis but is not recommended by MDN.
and coming to chrome, I think this link will solve your problem.
check this browser compatibility for text-overflow.
If these all doesnt work then go through jQuery to achieve this which works on all browsers.
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>
jquery.ellipsis.js
(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);
if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
})(jQuery);
Related
I'm trying to prevent line-wrapping long filenames in a load widget, and instead just have any overflow be hidden.
The filename is in a span, which is in a table td.
My instinct was to just add overflow: hidden onto the span, but that does nothing.
A bit of googling has led me to white-space: nowrap, which does constrain the long filename to a single line as desired, but as a side-effect it seems to break the display for the rest of the table.
Without white-space: nowrap:
The "Builder Mode auto-save" line displays perfectly, and if I scroll down the list every other entry displays properly as well. I'd like every line to have the same padding and positioning as this, regardless of filename length.
But with white-space: nowrap it changes the layout to look like this:
With white-space: nowrap on that one "Seventeen monkeys" span (not even on the span's class, just on the one element at an inline-CSS level) all the rows in the table end up getting displayed with more height than they should have, causing extra space above and below the text in them, and it also seems to shove the text to the left so it ends up overlapping where the thumbnail images will go.
I've made sure overflow: hidden is set on the parent td and on the table. Same results.
More googling has led me to setting the span's display as inline-block, but that doesn't seem to have any effect.
CSS for the span:
.ll_nm {
display: inline-block;
font-size: min(4vw, 4vh);
color: #0a0;
}
CSS for the parent TD:
.ll_deets {
overflow: hidden;
vertical-align: middle;
text-align: left;
}
So TL;DR: is there a way to prevent the span from line-wrapping and just have the extra text get truncated/hidden, without disrupting the layout of the rest of the table?
(Ideally also adding an ellipsis, but text-overflow: ellipsis doesn't seem to have any effect anywhere I put it.)
EDIT: As per comment request, here's the HTML:
<table id="load_list">
<tbody id="ll_tbody"></tbody>
</table>
And the table gets filled with rows programmatically via JS:
for (let l in list) {
let item = list[l];
// tr
let tr = document.createElement('tr');
tBody.appendChild(tr);
// td - thumb
let td = document.createElement('td');
tr.appendChild(td);
td.className = 'll_thumb_td';
// div - thumb
let div = document.createElement('div');
td.appendChild(div);
div.className = 'll_thumb';
div.id = `ll_thm_${item.nameFull}`;
// td - deets
td = document.createElement('td');
tr.appendChild(td);
td.className = 'll_deets';
// span - name
let span = document.createElement('span');
td.appendChild(span);
span.className = 'll_nm';
span.id = `ll_nm_${item.nameFull}`;
span.innerHTML = `${gName}`;
// span - timestamp
span = document.createElement('span');
td.appendChild(span);
span.className = 'll_ts';
span.id = `ll_ts_${item.nameFull}`;
span.innerHTML = `Last saved: ${tsStr}`;
}
}
Here is the code for the overflow hidden example. I have one more thing you could try involving JavaScript. Ill update my answer in a moment but for now.
for .ll_nm:
display: block you could just us a paragraph instead of a span
changed your font size (you can change it back)
width: 275px (or any width you would like)
add overflow: hidden
add white-space: nowrap
EDIT: I commented out the CSS... have a look at the JavaScript. If your title is longer than 22 use substing to shorten it to 22 and add a ... at the end of it. That way you wont have a bunch of text hanging off the page. Unless you want it to be there for when they resize the screen. In that case just use the CSS provided earlier.
const title = document.querySelectorAll(".ll_nm");
title.forEach(element => {
const text = element.innerText;
if(text.length > 22) {
const shortText = text.substring(0, 22) + "..."
element.innerText = shortText;
}
})
.ll_deets {
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.ll_nm {
display: block;
font-size: 1.75rem;
color: #0a0;
/* width: 275px;
overflow: hidden;
white-space: nowrap; */
}
<table>
<tbody>
<tr>
<td class="ll_thumb_td">
<div class="ll_thumb">
<img src="https://via.placeholder.com/50" alt="thumb">
</div>
</td>
<td class="ll_deets">
<span class="ll_nm">Lorem ipsum dolor sit.</span>
<span class="ll_ts">Last Saved: 0000-00-00 at 00:00:00</span>
</td>
</tr>
<tr>
<td class="ll_thumb_td">
<div class="ll_thumb">
<img src="https://via.placeholder.com/50" alt="thumb">
</div>
</td>
<td class="ll_deets">
<span class="ll_nm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur debitis
sed harum ratione sit minima pariatur quod, obcaecati fugit adipisci.</span>
<span class="ll_ts">Last Saved: 0000-00-00 at 00:00:00</span>
</td>
</tr>
<tr>
<td class="ll_thumb_td">
<div class="ll_thumb">
<img src="https://via.placeholder.com/50" alt="thumb">
</div>
</td>
<td class="ll_deets">
<span class="ll_nm">Lorem ipsum dolor sit.</span>
<span class="ll_ts">Last Saved: 0000-00-00 at 00:00:00</span>
</td>
</tr>
</tbody>
</table>
Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
I am not good with javascript or jquery, so maybe i will get help here. I need script, which automatically find element height, and put that height as css style in div.
I made simpe hover (overlay) effect, but as you can see in demo, when i am hovering image, overlay effect shows in all div. I need, that overlay will be displayed only in image dimensions.
I found this script:
$(document).ready(function() {
$('.overlay').click (function () {
alert($(this).height());
});
});
But this script is not what i am searching for. It gives me height when i am clicking on the element. But how i can make it to show me automatically when page is loaded? How can i post height to div style?
HTML
<div class="item">
<img src="http://placekitten.com/450/550" class="image">
<a class="overlay" href="#">
<h3 class="title">Some title</h3>
<div class="description">
<p>
Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit.
</p>
</div>
</a>
<div class="information">
<span>Some information, long text... etc</span>
</div>
</div>
CSS
.overlay {
width: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
text-decoration: none;
color: #fff;
display: none;
}
DEMO http://codepen.io/anon/pen/raVLgV
Sorry for my BAD english, and thank you for any help.
in first: make sure the jQuery has beed loaded in document, so add follow code in demo
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
Second the script
window.onload = function() {
$('.overlay').css('height', $('.image').height() );
}
why no using $(document).ready() ?
because window.onload will run after DOM and image load completed.
$(document).ready() run just DOM load completed.
Demo http://codepen.io/anon/pen/azOmom
I'm having a following template:
<div class='content'>
{{content}}
</div>
And following style:
.content {
margin-top: 30px;
background-color: skyblue;
width: 300px;
transition: all linear 0.5s;
}
Please note that {{content}} will grow or shrink (technically to extend a card to show more information or hide it). I've already set the css transition and it does work when manually setting a different height to the element. However when more content is injected into content no transition is made, just a plain old resizing. Any help of getting the transision right?
See following plunkr
Thanks,
Amit.
I believe that's quite normal, transitions apply only to changes to the CSS, not for computed changes.
One option might be to have a nested div, set overflow: hidden on the outer one, then get the computed height of the inner one and set it on the outer one to get the transition.
CSS:
#outer {
margin-top: 30px;
background-color: skyblue;
width: 300px;
transition: all linear 0.5s;
overflow: hidden;
}
HTML:
<button id="more" onclick="increase();">More</button>
<button id="more" onclick="decrease();">Less</button>
<div id="outer">
<div id="inner">
lorem ipsum
</div>
</div>
JS:
function increase()
{
var o = document.getElementById('inner');
var t = o.innerHTML;
for (var i=0 ; i<20;i++)
t += " lorem ipsum";
o.innerHTML = t;
adjustHeight();
}
function decrease()
{
var o = document.getElementById('inner');
o.innerHTML = "lorem ipsum";
adjustHeight();
}
function adjustHeight()
{
var i = document.getElementById('inner');
var o = document.getElementById('outer');
o.style.height = window.getComputedStyle(i).height;
}
Working fiddle: http://jsfiddle.net/Lnts7w1f/
With the help of #jcaron answer I managed to sort this in a react component. So when the 'activeSubsection' button is clicked the useEffect hook is run.
const [topicsHeight, setTopicsHeight] = React.useState("0px")
const topicsDiv = React.useRef();
React.useEffect(() => {
setTopicsHeight(topicsDiv?.current?.offsetHeight + "px")
}, [activeSubsection])
{!hideTopics &&
<div style={{ overflow: "hidden", height: topicsHeight, transition: "0.2s" }}>
<Topics ref={topicsDiv} className="largeScreen">
{!!subsectionTopics && subsectionTopics.sort((a, b) => a.node.slug.localeCompare(b.node.slug)).map((topic, index) =>
<Link key={index} href={'/'+slug+'/'+topic.node.slug} scroll={false}>
<Topic
active={activeTopic == topic.node.slug} transition={true} bold={activeTopic == topic.node.slug}
>
{topic.node.title}
</Topic>
</Link>
)}
</Topics>
</div>
}
Ovbiously that's not the full component but hopefully enough to give you an idea.
Well... There's a trick you can do for that... I don't know if it will fit your needs.
The css transition effect is applied on css properties that have a previous value, and then change. Though you are indeed changing the content's height of the div, the actual css property height is not explicitly changing. That's why you don't get the animation.
A workaround is to find the inner height of the div and then set it to the element, causing it to animate. I've created a function for that, and added a span to control the inner size of the div.
Just call the function on every change:
<div class='content'>
<span id="height-control">
{{ctrl.content}}
</span>
</div>
JS function:
var spn = document.getElementById("height-control");
var UpdateHeight = function () {
var h = spn.offsetHeight;
spn.parentNode.style.height = h + "px";
};
http://plnkr.co/edit/p6QRAR5j4C8d0d0XRJRp?p=preview
I'm looking for an HTML/CSS solution to this challenge:
I have multiple elements with the same class or same id, and I want to show/hide them all at the same time, using a button or toggle switch. So I then have a click event, when I click that class or ID representing all those elements, they all hide. When I click again, they must show again.
I would appreciate
Thanks
HTML and CSS are used to describe a static representation of content - there is no way dynamically hide/show content using HTML/CSS. You would need to use Javascript to do this. Code example (very simplistic and unelegant example):
<div id="somediv">Hide This</div>
<input type="button" onclick="hide('somediv')" value="Hide Div"/>
<script type="text/javascript">
function hide(div_id) {
document.getElementById(div_id).style.display = "none";
}
</script>
A nicer solution would be to use jQuery but I think for your case you should first learn the basics of Javascript and HTML/CSS before moving onto jQuery.
Do not use same ID for HTML elements! Use element class attribute. jQuery is nice thing, but is overkill for such thing :)
<div class="hide1">One</div>
<div class="hide2">Two</div>
One
Two
No hide
And simple JS code:
function ToggleVisibility(divClass)
{
var els = document.getElementsByClassName(divClass);
for(var i = 0; i < els.length; i++)
{
els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
}
}
According to W3Schools, visibility is standart thing for all major browsers
http://www.w3schools.com/jsref/prop_style_visibility.asp
You can do it with just CSS.
See this simple example http://jsfiddle.net/rHSmV/ (Code Pasted Below).
See here http://dev.opera.com/articles/view/css3-show-and-hide/
and here http://cssdeck.com/labs/css-only-showhide
for more in depth examples
<html>
<head>
<style type='text/css'>
/* Use a checkbox to workaround showing and hiding */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
/* Shown */
div.showhide {
display: inline;
}
/* Hidden */
input[type=checkbox]:checked ~ div.showhide {
display: none;
}
</style>
</head>
<body>
<label for="showHide">Show/Hide</label>
<input type="checkbox" id="showHide">
<div class="showhide">
<p>Show and hide me without JavaScript!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="showhide">
<p>Show and hide me too without JavaScript!</p>
</div>
</body>
</html>
You can use jquery...
$("id of button").click(function(e) {
if($("class of elements").css("display") != "none") {
$("class of elements").hide();
$("class of elements").css("display","none");
} else {
$("class of elements").show();
$("class of elements").css("display","block");
}
});
There is no CSS solution for your task. Look for JQuery function .toggle().
$('.button').click(function(){
$('.some_class').toggle();
});
In Jquery, you could simply call:
$('.ToggleMe).toggle();
where .ToggleMe is the class of your element.
To toggle by ID:
$("#ToggleMe").toggle();
And to toggle my name:
$('div[name=ToggleMe]')