CSS Triangle Positioning - javascript

Basically what I want is a CSS Triangle that is vertically aligned in the center of my content, positioned at the right of my content with a slight padding without using explicit measurements based on the triangle's border-width.
The wrapper should expand to contain the CSS Triangle if the triangle is huge like in this example and the CSS Triangle should always be vertically aligned in the middle of the wrapper. If there is a large amount of text, the CSS Triangle should just overlap the text if they cross.
This seems perfectly reasonable, but I ran into some problems; check out this JsFiddle for where I'm at now.
If I assign a min-height, I can get to 1. below. The problem with 1. is that I have to choose an arbitrary height. Moreover, if content grows, it won't be perfectly vertically centered because of the top: 25% which doesn't truly put it in the middle. To allow multiple different sizes of arrows easily, I really don't want to assign a min-height or any height for that matter, I just want it to calculate its size on its own.
I also had to use an overflow: hidden to prevent the scrollbar from appearing because doing a right: -45px will push the "right side" of the CSS Triangle box, so I can't use an overflow: visible anywhere too.
If I remove the fixed height, then I end up with 2.
Is this possible to do without using an explicit height and other explicit measurements; how would you go about correctly vertically aligning it? If you have ideas using jQuery to grab widths and so forth, that's fine too - I've tagged it.

Here is some jQuery to get rid of the hard-coded heights after assigning an arrowBox class to your div:
$(document).ready(function(){
$(".arrowBox").each(function(){
var border = $(this).height()/4;
var right = "-"+(border-5)+"px";
$(this).find(".arrow").css("border-width",border).css("right",right);
});
});
http://jsfiddle.net/wzzRC/1/
That said, the difficulty with any pure CSS solution is that you can't specify border-width in %. So with pure CSS, use one of the other solutions to force the box to grow to accommodate the arrow. If you want a working arrow in smaller boxes, you need JS.

Set position: relative; on the white box container.
Set position: absolute; on the triangle with a top of 50% and margin-top: of half the height of the triangle.
That will make sure that the triangle is always in the middle.

Change the triangle css to have:
top: 50%;
margin-top: -50px;
http://jsfiddle.net/QuwEc/4/

Related

Get true background color of a transparent element that is positioned absolute

I have a transparent element like that is positioned absolutely
header { position: absolute; top: 0px; width: 100%; }
... and it's on top of a colored div.
How do I get the color of the div below of a absolutely positioned transparent div with javascript?
This is the transparent div (the navbar):
This is the navbar when you scroll down a little bit:
Feel free to ask any questions.
This sounds like you have to actually capture a "screenshot" and look at how the page is finally rendered. As far as I know, that is the only way.
Basically you would need to check the rendered color of a single pixel. Not knowing why you want to do this is critical in is this necessary or not.
One way to achieve this is to use something like https://html2canvas.hertzen.com to take a screenshot of the rendered page, put that into a <canvas> element and then once you have that, check the color of a pixel you know to be inside the header; check https://jsfiddle.net/ourcodeworld/8swevoxo/ for an example.

How to use innerHeight for div on both window load & resize?

I am trying to determine the top/bottom padding of a div (.content) based on it's height, and to recalculate it based on load AND resize of the window. This is supposed to align nicely centered next to another div (.character) beside it.
I've tried using CSS calc, but in this case it doesn't do exactly what I want it to do since the syntax doesn't support operators and I have a few media queries that change the size of the font based on the viewfinder, so the height of the .content div is somewhat dynamic.
Below is the JS portion, but here is the JSFiddle of what I've done so far: https://jsfiddle.net/inochiishtal/a9z13fb2/62/
$(function(){
$.w = $(window);
$.w.on('load resize', res);
res();
});
function res() {
$('.content').css('height',($.w.innerHeight()/2)+'px');
}
Any help or suggestions are appreciated. I'm not 100% dedicated to using innerHTML if there is a better solution.
It's a little unclear exactly how you want the items aligned, but based on what you said it seems like you want the .content and the .character to be vertically center aligned with each other.
In your snippet you have both of them absolutely positioned. If that's the way you want to go, you can just ignore their margins and JavaScript in general with this little vertical centering trick applied to both:
top: 50%;
transform: translateY( -50% );
The first line says "Put the top of this element 50% of the way down the element that it's positioned based on." Since it goes by the top, the second line says "Scoot me back up 50% of my height." That's just the way those CSS properties work -- the "top" % is about its parent, and the translateY % is about itself.
Since both of your elements would be vertically centered in their parent, they'd be aligned.
https://jsfiddle.net/qowxezpy/
HOWEVER if you don't need the elements to overlap like they do in this example (which I think looks nice and modern) there's a much easier way, using flex.
The parent would get:
display: flex;
align-items: center;
And the two children get:
flex-basis: 50%; //just to give them some width, since one is empty

Periodic HTML Text Centering

Im building a stopwatch with javascript and the issue is that although centering does work, the dynamic nature of the stopwatch means a very jittery effect when it constantly tries to recenter on every new number. As some numbers are wider or thinner, it means it keeps on "jittering". This is very distracting.
However, I still do wish for the time to centered on screen. I had success with keeping the time on just one side of the screen however it was not aesthetically pleasing. I was wondering if there was a way to only center the text once in say 1 min? (I was thinking of centering and then using padding to pad up to where it was centered, thus meaning it would be aligned against the padding and maybe redoing this proccess every 30secs or something)
Thank you
To stop the jittering effect, you could place the text inside a div and center the div.
stopwatch_container{
width: 100px;
margin: auto; /*This will center the div*/
}
stopwatch_text {
text-align: left;
}
Hope it helps.

Place dynamic DIVs in columns without vertical gaps between them?

Got a series of quotes of varying length to fit in DIVs of fixed width but content determined height. I could individually position each DIV so it looked tidy and there were no vertical gaps. For example - http://www.zergnet.com/. I wondered if there was a CSS solution to problem, as I noted Zergnet uses inline styling and absolute positioning of every news teaser (which makes me think javascript is involved somewhere).
.testimonialBubble {
position: relative;
width:48%;
margin: 8px 0;
padding:0 2% 0 0;
float: left;
}
The idea being no matter what volume of content is thrown (within reason) into the divs in the 2 col layout they'll fit together and fill spaces. At the moment if the 2nd element is longer than the 1st, when 3rd element kicks round under the 1st element there's a gap between the two caused by the 2nd elements height. Is there a CSS only solution or is it only achievable via javascript?
Many thanks for reading.

Two div overlapping with variable height = without height on container

It is quite easy to make two div overlap when the size of the container div is known but what if the div heigh cannot ?
I tried to do it without manipulating container height:
http://jsfiddle.net/AJfAV/
But #text2 go over #text3 and do not "push" it.
How can the #container be resized automatically ?
I manage to achieve my goal using jquery ui but I feel this is not an elegant solution:
http://jsfiddle.net/AJfAV/6/
Is this what you need?
Updated fiddle:
I'm setting height to the default, auto, using jQuery, like this:
$("#container").css("height", "auto");
You can also set: height: auto; in CSS.
Do you need position:absolute? You can use absolute positioning if you don't want to do any arrangement, but a placement. The absolute positioning takes an element completely out of the flow of elements. They know nothing of its existent.
You may use floats and a technique to enclose floats. I'm using clear:
.cl-left {
clear: left;
height: .1px;
font-size: 0;
line-height: 0;
}
Don't forget to add <div class="cl-left"> </div>.
In addition, a negative margin is used. Therefore, #text2 is nailed to the right.
http://jsfiddle.net/AJfAV/7/
this can be solved if you removed absolute positioning of #text1 and #text2.
and make #text2 overlap #text1 by making both float:left and set margin-left:-30px for #text2.
now let's test it: http://jsfiddle.net/RPe4H/
the problem now is that when #text1 is toggled, #text2 will float to top left of #container, this happening because JQuery set display:none on the element when toggling is done.
now to solve this, put #text1 and #text2 inside containers with same width, so #text doesn't affect the flow when it is set to display:none, also you must set min-height:1px on the container of #text1.
now it is working as expected http://jsfiddle.net/MyyF6/1/

Categories