Using CSS and maybe minimal Javascript (without JQuery), what would be the easiest way to create an upside down diagonal sticky positioned element. An upside down sticky positioned element basically means that it would slide from a list into a horizontal sticky bar as the user scrolled down the page. I think I have figured out the diagonal bit:
element {
transform: rotateX(45deg);
}
But I am still clueless about the rest. Any any all help / constructive criticism / advice would be greatly appreciated.
EDIT #1:
To illustrate what I mean, I drew a picture sort of describing it (I'm not much an artist, sorry).
Based on my own test, as you can see below, sticky positioning appears to be made to be too smart, and not extensible enough for its own good by W3C. What I mean by this is that position: sticky appears to have an awareness of transform hacks (because it switches to position fixed), so you cannot just flip the entire pane it's stuck on to create an upside-down effect where when you scroll down, it goes up. Alas, if only there was a position: absolute version of the current position: fixed behavior of position: sticky However, I may be wrong (I hope I am).
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font-family: Source Serif Pro, serif;
line-height: 1.5;
font-size: 1.3rem;
}
outer {
position: relative;
transform: rotateX(180deg);
transform-origin: 0 100%;
transform-style: preseve-3d;
}
.sticky {
height: 100%;
width: 50%;
padding: 2.2rem;
float: right;
position: -webkit-sticky;
position: sticky;
top: 0px;
transform: rotateZ(180deg);
}
#sticky img {
width: 100%;
display: block;
margin-bottom: 1rem;
}
<p>Rank grass, waist high, grows upon the plain of Phutra—the gorgeous flowering grass of the inner world, each particular blade of which is tipped with a tiny, five-pointed blossom—brilliant little stars of varying colors that twinkle in the green foliage to add still another charm to the weird, yet lovely, landscape.</p>
<outer>
<div class="sticky">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/core.jpg" alt="Visualisation of the Earth's core, showing the planet cut in half with the core bulging from the center">
<p>The Earth's inner core is a solid ball of iron–nickel alloy with a radius of approximately 1220 kilometers, or about 70% that of the Moon. It is thought to have approximately the same temperature as the surface of the Sun: around 5400°C.
</div>
</outer>
<p>But then the only aspect which attracted me was the distant hills in which I hoped to find sanctuary, and so I hastened on, trampling the myriad beauties beneath my hurrying feet. Perry says that the force of gravity is less upon the surface of the inner world than upon that of the outer. He explained it all to me once, but I was never particularly brilliant in such matters and so most of it has escaped me. As I recall it the difference is due in some part to the counter-attraction of that portion of the earth's crust directly opposite the spot upon the face of Pellucidar at which one's calculations are being made. Be that as it may, it always seemed to me that I moved with greater speed and agility within Pellucidar than upon the outer surface—there was a certain airy lightness of step that was most pleasing, and a feeling of bodily detachment which I can only compare with that occasionally experienced in dreams.</p>
<p>And as I crossed Phutra's flower-bespangled plain that time I seemed almost to fly, though how much of the sensation was due to Perry's suggestion and how much to actuality I am sure I do not know. The more I thought of Perry the less pleasure I took in my new-found freedom. There could be no liberty for me within Pellucidar unless the old man shared it with me, and only the hope that I might find some way to encompass his release kept me from turning back to Phutra.</p>
<p>Just how I was to help Perry I could scarce imagine, but I hoped that some fortuitous circumstance might solve the problem for me. It was quite evident however that little less than a miracle could aid me, for what could I accomplish in this strange world, naked and unarmed? It was even doubtful that I could retrace my steps to Phutra should I once pass beyond view of the plain, and even were that possible, what aid could I bring to Perry no matter how far I wandered?</p>
<p>The case looked more and more hopeless the longer I viewed it, yet with a stubborn persistency I forged ahead toward the foothills. Behind me no sign of pursuit developed, before me I saw no living thing. It was as though I moved through a dead and forgotten world.Eget duis at tellus at urna. Purus sit amet volutpat consequat mauris. Ultrices in iaculis nunc sed augue. Duis convallis convallis tellus id interdum. A pellentesque sit amet porttitor eget. Sed felis eget velit aliquet sagittis id consectetur purus ut. Dictumst quisque sagittis purus sit amet volutpat. Sit amet nisl suscipit adipiscing bibendum est ultricies. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Amet porttitor eget dolor morbi. Facilisis volutpat est velit egestas dui. Sit amet aliquam id diam maecenas ultricies mi. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Sagittis purus sit amet volutpat consequat. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Est pellentesque elit ullamcorper dignissim. A cras semper auctor neque vitae tempus quam. Tortor posuere ac ut consequat semper viverra nam libero. Nullam eget felis eget nunc lobortis mattis. Purus gravida quis blandit turpis cursus in hac habitasse. Enim praesent elementum facilisis leo vel fringilla est. Mattis aliquam faucibus purus in massa tempor nec. Sit amet nulla facilisi morbi tempus iaculis urna. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Tempus urna et pharetra pharetra massa. Velit euismod in pellentesque massa placerat. Sed tempus urna et pharetra pharetra massa massa ultricies. Eget dolor morbi non arcu risus quis varius. Id velit ut tortor pretium viverra suspendisse potenti nullam. Varius vel pharetra vel turpis nunc eget lorem. In hac habitasse platea dictumst quisque sagittis purus sit. Egestas purus viverra accumsan in nisl nisi scelerisque. Quis blandit turpis cursus in hac habitasse. In cursus turpis massa tincidunt dui ut ornare lectus. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Mauris cursus mattis molestie a iaculis at erat. Tempus quam pellentesque nec nam aliquam sem et. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Sit amet venenatis urna cursus eget. Mattis pellentesque id nibh tortor id. Quis viverra nibh cras pulvinar mattis nunc. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Laoreet id donec ultrices tincidunt arcu non sodales neque.</p>
Related
I had some troubles with handling div's size with huge walls of texts for mobiles
So, I came with an idea "what If there's an formula that basing on screen's width/height can set proper height to that div?"
And resulted in something hardcode-ish like:
https://jsfiddle.net/qmde87kt/ (Resize view window a few times)
$(window).resize(function() {
var div = document.getElementById("test");
var width = div.offsetWidth;
var height = (div.innerHTML.length * 70) / width;
div.setAttribute("style", "height:" + height + "px");
});
#test {
font-size: 10px;
border: 2px solid red;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa iaculis, elementum dolor bibendum, maximus orci. Aliquam imperdiet metus mi. Vestibulum cursus elementum ex in tempus. Nulla accumsan, ex eget rhoncus mollis, lectus lacus sodales
neque, ut dictum nibh elit eget tellus. Vestibulum tincidunt quis mi quis egestas. Aenean ultricies purus nunc, id facilisis ante eleifend sed. Proin rutrum luctus turpis, sed pellentesque lorem consequat a. Quisque tortor leo, tempus in ante ac, mattis
faucibus risus. Praesent tristique, odio ac finibus tristique, neque sapien aliquet dolor, in finibus mauris urna sit amet mauris. In hac habitasse platea dictumst. Praesent nunc est, fringilla in condimentum et, gravida a ligula. Vivamus hendrerit
mauris a venenatis dictum. Sed vitae mi eget diam dapibus ultricies. Suspendisse varius turpis ante, nec cursus felis luctus et. Etiam ac ligula et tellus viverra tristique sed sodales ex. Nullam accumsan volutpat libero, vel laoreet sem lacinia sit
amet. Nam id mollis justo.
</div>
So, is there an way better (more universal) formula for something like this? or maybe there's an easier way to do that?
As per what Rory suggestion, I would recommend media queries with below-suggested breakpoints
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
Setting with JS is anyway a costly JOB!!!
I am having issues with my jQuery match height... or maybe I just don't understand it fully? Any Help?
Image 1
Image 1: This is how it looks without height matched, which i am happy with just some simple shadowed boxes. But they do not match each others height :/
Image 2
Image 2: This is how it looks currently when I am trying to apply my jQuery of match height. The shadowed boxes are tiny at the top and it pushes the content underneath them...
HTML:
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam.
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p>
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".fade").hide(0).delay(0).fadeIn(500)
$('div').each(function(){
var highestBox = 0;
$('.home-card', this).each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card', this).height(highestBox);
});
});
CSS:
.home-card {
box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
padding: 5px;
margin-top: 6px;
width: 97%;
float: none;
position: relative;
left: 0.5%;
}
.home-card:hover {
box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
padding: 10px;
}
Any Ideas?? Thanks!
ALSO: How would I get it so that height matches on large screens only, and is unaffected on medium and small screens?
Have you considered using a CSS only solution?
You could wrap your columns in a container, let's use a div with a class of container. Make this container a flexbox container and child divs within it will be matching heights.
.container {
display: flex;
}
I prefer using CSS for this type of problem because it's more of a presentational concern and this approach doesn't necessitate writing any messy javascript to manipulate the DOM. Additionally, unless you need to support old versions of IE, browser support for flexbox is pretty good. http://caniuse.com/#search=flexbox
I added a border to the child divs with a class of column simply to illustrate that they are indeed the same height.
https://jsfiddle.net/eulloa/tx5jbdgf/1/
This is a pretty good reference on flexbox, in case you're interested in reading more.
Why the first div looping?
Just the second loop should do what you want.
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
Because if there is another div having no .home-card child... Like a footer...
highestBox sets to 0.
Then all .homecard are setted to zero.
What you actually see as height probably is margin/padding of inner elements... or something.
I have a modal dialog box with 7 columns. one of the column shows comment section. How can i restrict this section to 25 characters. I have used text over floe ellipsis, which shows ellipses after first word. I also want to add functionality to ellipsis such that on click of ellipses it should pop up a small window showing the whole section of the comment. how can i do it? can any body please help me with it?
this is the css i am using
#comment
In CSS i can only see a trick with pointer-events and a pseudo elemet and a tabindex attribute in HTML.
p {
width:12.5em;/* 25 letters space average */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:solid;
pointer-events:none;
position:relative;
pointer-events:none;
}
p:after {
content:'';
position:absolute;
width:1em;
height:1.2em;
right:0;/* lays over the ellipsis */
top:0;
pointer-events:auto;
cursor:pointer;
}
p:focus, p:active {
white-space:normal
}
<p tabindex="0">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
Browser then needs to understand pointer-events.
I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.
is there a way of doing this with css or is javascript the way to go?
You can do this with pure CSS (at least in webkit browsers). You have to use special scrollbar pseudo-classes to achieve this
::-webkit-scrollbar {
display: none;
}
Read this excellent blogpost for further information.
You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).
Something like this:
#outer {
overflow:hidden;
width:200px;
height:400px;
border:1px solid #ccc;
}
#inner {
overflow:scroll;
width:217px;
height:417px;
}
Full example at http://jsfiddle.net/uB6Dg/1/.
Edit:
Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.
#Maloric answer pointed me in the correct direction, however I needed fluid width, and I also wanted to be more accurate on the width of the scrollbar.
Here is a function that will return the exact width of the scrollbar based on what the browser reports.
var getWidth = function () {
var scrollDiv = document.createElement('div'),
scrollbarWidth;
scrollDiv.style.overflow = 'scroll';
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
};
var width = getWidth();
var container = document.querySelector('.overflowing-container');
container.style.paddingRight = width + 'px';
container.style.marginRight = (width * -1) + 'px';
// Just for testing purposes
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()
.container {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: 500px;
}
.overflowing-container {
height: 100%;
overflow-y: auto;
width: 100%;
}
<div class="container">
<div class="overflowing-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu.
Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere.
</div>
</div>
<div class="scrollbar-width"></div>
The above snippet shows this in action.
You need to make use of the jquery plugin from this site http://jscrollpane.kelvinluck.com/
How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
overflow:hidden is not useful, because my div element has many other elements.
So setting overflow does not solve my problem.
You can hide the scrollbar with this...
document.body.style.overflow = 'hidden';
...and unhide it with this:
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.
You have to overwrite the CSS settings as follows:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
<div id="YourSpecialDiv"...>...</div>
I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
The only hide available is (here to hide the Y-axis scrollbar) :
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.
You can use the following on any element:
::-webkit-scrollbar {
width: 0px;
}
Source
This only works on webkit browsers, so no IE and Firefox.
You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.
overflow: hidden;
or
someElement.style.overflow = 'hidden';
The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size
DEMO (may take a while to get the css perfect, but you get the gist)
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);
div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>