I want to center a tooltip which can have a varying width depending on content property.
I see in this example that we can moddify pseudo class, But it seems a little bit complicated.
$(".tooltip").prop('id', function(i){
return "p_number_"+i;
}).hover( function() {
var width = window.getComputedStyle( this, ':after').getPropertyValue('width');
document.styleSheets[0].addRule('#'+this.id+':after','margin-left: -"'+width/2+'px";');
})
There not a simplest solution ?
Pseudo elements are a mess to manage. Often, when the changes are static, you toggle a class (like it the exemple). But in your case, every elements have a different width which make it more difficult to control.
Luckily you don't need JavaScript to center the pseudo element. You can use CSS transform if you don't care about IE8. Instead of giving a negative margin of half your width, give it a transform:translate(-50%,0);. It center horizontally. In case you need to center it vertically, use transform:translate(-50%,-50%);
Given the element has position absolute or relative then you can center pseudo element using this css
position: absolute;
left: 50%;
transform: translateY(-50%);
Related
This seems like a suspiciously straight-forward question but having searched StackOverflow and Google and used the usual tricks (getBoundingClientRect, clientWidth, offsetWidth) I've yet to find an answer.
Simply, is there a way to find the width/height of an element including not only border, padding etc, but also the shadow?
See: jsfiddle for an example of how everything returns the width of the element without the shadow.
EDIT: Ideally, I'd prefer not to have to investigate the CSS attribute for the shadow and parse out the dimensions, though perhaps that's the only way.
You're right, I agree it's a pretty straight forward question. Here's the problem, when you give an element a box-shadow, the box-shadow is treated like a sub-element with absolute positioning properties to it's parent element. So automatically the placement of that object under it's parent becomes a relative positioning question. They are essentially now two separate objects and need calculated separately.
My only suggestion would be to calculate the box-shadow's x/y positioning and add them to the width/height of the parent element. For example, in your jsfiddle, the box shadow is protruding 10px along the x-axis, and below 10px along the y-axis. With the 5px blur, add 2.5px to either side and then add the height/width to those values:
104px (width) + 10px (x-axis shadow extension) + 2.5 px (blur) = 116.5px width
104px (height) + 10px (y-axis shadow extension) + 2.5px (blur) = 116.5px height
Use a shadowParent class
Here's another technique which worked well in one specific case for me:
Make a shadow parent class which affects it's height, having the same values as the shadow of the child. If you need to, make a new parent div just for this purpose. You can use CSS classes for this, for example: shadow and shadowParent.
Then whenever you need height+shadow, just get the height of the parent.
Advantages:
Less complexity in JS trying to figure out height.
You control the values in one place (wherever you define the CSS
values).
In this case, I simply set some padding on the parent, to account for the childs' shadow. Then I get the height of the parent.
/* ----------------------- */
/* SHADOW */
/* ----------------------- */
.shadow {
box-shadow: 0px 10px 10px black;
}
.shadowParent {
/* Apply matching values to some property that affects parent height. */
/* I used padding, which worked for my context. */
padding-bottom: 10px; /* Value matches shadow values. */
}
<div id="wrapper" class="shadowParent">
<div id="content" class="shadow">
Content + shadow
</div>
</div>
I would like to make a menu effect such as on the example below, where HR tag is used to create sliding line effect under menu items.
But in the example under the link the "moving" hr is positioned using static settings (see the link for actual example):
http://codepen.io/rm/pen/ldhon
.two:hover ~ hr {
margin-left: 25%;
}
I have a set of images that constitute my website menu, but these are positioned in floating way and I do not know their position at design time. I need therefore to modify code above in such a way that at least margin-left matches the position of the element (image) that has class two (the one that gets hovered) and, if possible, also match its width to the width of the element with class two. How I could possibly achieve that, do I manage with css or have to have a jQuery code?
If you set the hr's position to absolute, you can set its left offset and width with jQuery:
$('.container a').mouseover(function() {
$('.container hr').css({
left: $(this).offset().left,
width: $(this).width()
});
});
I don't think you can do so in CSS alone without hard-coding the widths.
CodePen
I would like to zoom in div by clicking on it, but part of this block is hidden after zoom.
Demo: http://jsbin.com/xumuzine/2/edit
CSS property transform-origin: 0 0; is not suitable, because in the future I will need to track the location where I clicked and increase it to this place.
Thanks.
UPD:
Okay, guys.
I may not accurately explained the problem.
http://jsbin.com/fecaduxidele/2/edit
Here i add click event handler that receives the coordinates of the click, and makes zoom to click position.
And if I click to cell with number 9 (for example), I can't scroll my grid to cell with number 1.
You could set the content size directly instead of scaling and use background-size to scale the image with it, e.g.:
#content {
width: 300px;
height: 300px;
background: url(http://placeimg.com/300/300/any);
background-size: 100%;
}
#content.scaled {
width: 450px;
height: 450px;
/* -webkit-transform: scale(1.5); */
-webkit-transition: all .5s ease-in-out;
}
Edit:
The above already fixes the issue of not being able to scroll to part of the image. You can handle the coordinate issue with a JQuery animation (you can't control scroll position from CSS), but it will not be smooth because it does not synchronize with the CSS animation. Your click handler would be something like:
var x = event.clientX,
y = event.clientY,
$this = $(this),
scaling = !$this.hasClass('scaled');
$this.toggleClass('scaled');
if (scaling) {
$this.parent().animate({
scrollLeft: x,
scrollTop: y
}, 500);
}
Here is the result applied to your second bin:
http://jsbin.com/jikididizice/1/edit
The issue was if the parent and the child is of same size its will show a scroller as you can see in this fiddle
JS Bin
as you can see in the above fiddle i have added scroll and the width and height is same as the parent in px so the scroller is coming
the fix is you can give 100% width and height like in the example i have shown below
if you dont want the scroller to come you can remove overflow:auto from the parent
JS Bin
you can also use transform-origin property to from where you want to scale the image like i have used center center in the example below so that it will scale from center
JS Bin
Few solutions:
Remove the overflow auto of the wrapper.
http://jsbin.com/xumuzine/40/
Scale the wrapper instead of the contents.
http://jsbin.com/mojoyapamuyi/1/
You should try with zoom property:
#content.scaled {
zoom:1.2;
}
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 9 years ago.
I'm looking for a solution where I have a div that grows dynamically depending on the content while maintaining a 1:1 aspect ratio. I've found many solutions where the size of the box is relative to the pages width rather than its content (like this). IE8 compatibility would be a big plus!
A JavaScript solution would work too, but I'd prefer a CSS solution.
Thanks a bunch!
So the answer to your question(s) is/ are:
I have a div that grows dynamically depending on the content
Use 'float' (shrink-to-fit) or 'display: inline-block' for the (containing) DIV element.
while maintaining a 1:1 aspect ratio
To achieve this you can use 'padding-top' or 'padding-bottom' with a percentage value representing the desired aspect ratio (in case of 1:1 it will be 100%) on a 'dummy' element, which will be a child of the containing DIV. The second child then will be absolute positioned (remember to relative position the containing DIV).
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
And if the height is actually heigher than the height set by the width, you additionally need
overflow: auto;
max-height: 100%;
for your element.
That's it - DEMO
You can set the element to have a 1x1 ratio using a function like:
function set_1x1_ratio(el){
//set auto size
el.width('');
el.height('');
var max = Math.max(el.width(), el.height());
el.width(max);
el.height(max);
}
And call that whenever you dynamic adding happens. Like this.
Alternatively you could use a mutation observer to call it whenever the element changes. Like this.
I'm coming from a flash/flex background, so forgive me if this is an off question, but I'm wondering if I can place an element at exactly some pixel position on the screen. Pixel can be substituted for any measurement of position.
Is this even possible in javascript? How do you control where elements are drawn in javascript/html?
myEl.style.position = 'absolute';
myEl.style.left = x+'px';
myEl.style.top = y+'px';
Note that this will position the element absolutely with respect to its positioned parent; you may need to account for the position(s) of the positioned parent(s) to get it absolute to the screen.
Using CSS, you can set the position of any element to an absolute value, like so:
#myelement {
position: absolute;
top: 100px;
left: 100px;
}
One caveat to that is the position can be set to relative to any other element in your HTML. By default, it's relative to the window. You can make the position relative to any other element like so:
#mycontaining-element {
position: relative;
}
The HTML might look like this:
<div id="mycontaining-element">
<h1 id="myelement">Headline</h1>
</div>
More info here: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Yes, this is called absolute positioning.