Trouble making a facebook like div with triangle on top - javascript

on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}

The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.

Related

Why does will-change:opacity treat fixed elements differently than will-change:transform in chrome?

I am trying to optimize the scrolling of my web app. I have data tables with tons of data, and scrolling gets pretty bad. I added will-change: transform to the data table but it broke my table headers that are position: fixed (I make them fixed to allow them to scroll with the viewport). The elements don't move with the viewport at all, they just stay stuck in the flow of the document.
But by chance I discovered that if I use will-change:opacity instead, my fixed headers are fine. Can someone explain this behavior? I haven't been able to find any documentation that says they should act differently.
Here is a code pen with an example of what I am talking about. Toggle between the values, and scroll in blue div.
https://codepen.io/bkfarns/pen/aLYgrN
Here is the basic code from the pen too:
html:
<div class="container">
<div class="fixed">should be position: fixed</div>
<div class="too-tall">div that is too tall</div>
</div>
css:
.container {
margin-left: 100px;
background-color: blue;
width:400px;
height:300px;
overflow: auto;
will-change: transform;//changing this to opacity fixes the issue
}
.fixed {
background-color: grey;
position: fixed;
margin-left: 150px;
margin-top: 100px;
}
.too-tall {
background-color: red;
width: 90px;
height: 600px;
}
The whole point of will-change is to make all possible changes that browser would have to apply when the specified property will change in advance, reducing the time needed for the change itself. Effectively it means that by specifying will-change:transform you make the element transformed (though visually it stays in the same position), and descendants of the transformed elements can't be fixed per the CSS Transforms spec. Opacity doesn't have such effect, so will-change:opacity doesn't break fixed positioning.
Also, will-change per se doesn't have any "optimization magic", it only optimizes the changes of the specified properties. Some properties force the elements to the composite layers that theoretically can be processed by the GPU more efficiently, but if there is too many such elements it may have the opposite effect. For optimizing scrolling, probably other strategies would be more efficient.

Datamaps hover pop up

I'm using datamaps to display the countries of the world, but have the graph centered. When I hover over a country, the pop up appears all the way to the left, accurate to where the country would be if I didn't center it. I believe the issue is the css:
#map {
margin: 0px auto;
width: 700px;
}
But I don't know how to center it in a different way.
Is there any way to change where the pop up appears? Thanks in advance!
(I tried to add a code snippet, but it was getting an error for some reason.)
Changing the position to be relative works. As Eric Hoose's example shows, the <div> is relative, so the hover still works.
#map {
margin: 0px auto;
width: 700px;
position: relative;
}
The hoverover popup is attached to the dom via the datamaps-hoverover class. By default, d3 sets this position: absolute, with top and left attributes being set dynamically based on where the mouse is. Since the position is absolute, it shouldn't matter that you have the map centered.
For example, I added your css (while renaming the id to match the example):
#container1 {
margin: 0px auto;
width: 700px;
}
to the jsbin that datamaps uses as an example here.
As you can see, the popup is still in the correct spot even though the map is centered.

Positioning div to the right with an undefined width

I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/

How can I make kinetic.js full screen background view

I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.

How do I expand selector width from center (or other efficient alternatives)?

I've got a navigational bar (#nav_bar), which has the following CSS properties:
#nav_bar {
background: url(../images/navbar.png) repeat-x;
width: 100%; height: 50px;
margin-bottom: 20px;
}
It takes the width of #wrap which is 1024px wide and has margin: auto;, however I would like to expand it so that it will fit all screen sizes 100%. I attempted to set width: 500%; just to see what it would do, then I realized that it expands from the left -> right, rather than both ways from the center.
So, what I'm asking is;
Is it possible to have an element expand from the center, then
perhaps I could set the max-width property or use javascript to
find out the visitors screen resolution then assign the width from
there; without major inefficiencies, i.e. extended load times/cross-browser compatibility issues?
Just for reference, a link to the particular page I'm talking about
Any answers will be greatly appreciated ;)!
Simply move your #nav_bar out of the #wrap.
Alternatively you can make your #nav_bar have position: absolute; left: 0px; width: 100%; in CSS, that will work too.
Why don't you use CSS3 Media Queries, to find out about screen size of your clients.
If your #nav-bar is a block-level element, like a div, a ul or a p element, then it by default would take the whole width of its container. Thus you don't need to set width: 100%; there. Also, you can use text-align: center; to center align the content.
In your case, you can use absolute positioning with overflow: visible attribute, and set the width of the menu. Also, you may simply extract your #nav-bar out of the wrap, to let it take the whole space.
use margin: auto
you can see an example here: http://jsfiddle.net/s995c/4/

Categories