How can I make text inside .inside-ob-u which appers after hovering .ob-nth2 not to do 'fitting process' as shown :
As is possible to clearly see the text is fitting when the height and width change is in the process.
How can I do it without absolute position or disabling transition? Works well if I do so.
https://jsfiddle.net/daf7a509/
You could use transform: scale(x). The nice thing is that scale doesn't change the space taken up by the element -> the other elements don't move.
https://jsfiddle.net/am7m384d/
EDIT:
[...] but it also affects the content (childs) and mess things up. – user3734782
You could set the size of .box__hover to the size it should have when being hovered and scale it down when it is not hovered (for the transition). Then the children would have their correct size.
Here is an adapted fiddle: https://jsfiddle.net/b7w40gtp/
If you set the width of .inside-ob-u instead of using a percentage, it won't reflow. See https://jsfiddle.net/daf7a509/1/
Related
[Highcharts]
Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.
Thanks in advance.
Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)
http://jsfiddle.net/af3g18mo/ Code
In your fiddle i can figure out the Problem:
If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag.
The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.
You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.
You can see the solution here:
be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.
http://jsfiddle.net/af3g18mo/2/
So the concrete fixing for your css could be:
svg{
overflow:visible;
}
.highcharts-container{
overflow:visible !important;
}
Description
I'm trying to make a div look like it's growing from where it is. To do this I'm changing the position from relative to fixed which makes the first transition start from top:0, left:0 instead of the element's current top/left. How can I fix this to use the elements current offsets?
JS Fiddle
http://jsfiddle.net/ZjWkD/
Note: After the first click, the code works exactly how I want it to. The very first click is the problem.
Hello and thanks for the fiddle,
It looks like when you first set the css here, you had transitions on your target-div which was messing things up a bit, in addition to setting your initial position inside the click function.
$(this).css({
position:'fixed',
top:$(this).offset().top,
left:$(this).offset().left
});
Setting the position of the target-div before the click function fires will position the div correctly, and applying the css without the animations on it will ensure that the target-div is in the right spot when the document loads (if you keep the animations on that target-div, even if you apply the starting css in $(document).ready it will load the page and run the animation rather than having the div start there).
I used a separate class for the animation and applied it only after the initial positioning was set (see .test class in fiddle below).
http://jsfiddle.net/Jag96/wdh4N/
I've got the following JS Fiddle to demonstrate what I'm trying to accomplish:
http://jsfiddle.net/sVKU8/2/
1) I assume this first part is easy - Is there a way to update the parent label class to automatically have it's width set based on the total width of the two child <div>s so the border only wraps around the green and red <div>s? I thought setting width: auto was supposed to do that, but my CSS skills are apparently lacking.
2) What I'd like to accomplish next would be to remove the width attribute from my label-text class and have the width set (or grow automatically, if possible) whenever I apply text to that <div> via JavaScript without text wrapping (i.e. keeping the original height of the label class).
I wasn't sure if I needed to try to calculate the width based on the actual text, or if there is a way to just apply the text with a width setting that will allow it to grow.
Any input or suggestions would be greatly appreciated!
Add this property to your css :
.based-on-text{
display: inline-block;
}
This way, the div will act like a block but will have exactly the width it needs instead of taking the whole parent level width !
click here
CSS alternative without additional JS using traditional floating elements approach
This fiddle (Click HERE) shows using inline-block on the div text-label and a little JS to set the width on the outer box with the border.
This is the javascript. Pretty ugly. There's probably a better way:
$(".label").css("width",
parseFloat( $(".label-image").css("width"))
+ parseFloat( $(".label-text").css("width"))
);
I tried searching for this on Google, but to no avail.
Can someone point me to a good resource that explains the rendering and visibility rules for CSS ? Or if it is very simple, can someone please write it down here ?
To give you an example, let's say that I have 2 large divs, DIV_LARGE1, DIV_LARGE2, that are not contained within each other and a small div, DIV_SMALL. When DIV_SMALL is defined within DIV_LARGE1, I can see that part of it which falls inside DIV_LARGE1, but the area that is shared with DIV_LARGE2 gets hidden beneath DIV_LARGE2. I am displaying DIV_SMALL (by setting its display:inline) after the page has rendered (on some click), so it should not matter that DIV_LARGE2 comes after DIV_LARGE1 in the HTML code.
What takes precedence over what ? Since my smaller div has position:relative and both the other divs (DIV_LARGE*) have position:absolute, I can infer that absolute positioning takes precedence over relative if the div is not defined inside it. But is this correct ? What are the precise rules ?
Phelios is correct, the issue you're running into is related to the z-index property.
Here's a great article from SmashingMag that explains it in detail: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
For the tl;dr - positioned elements get stacked in the order they're placed in the html code, so your div_small inside the first large div is by default always going to be stacked "under" the second large div. You can fix this by setting the small div's z-index property in css.
I'm trying to format DL list:
http://design.vitalbmx.com/new_html/index.html
(6 items starting with "Troy Merkle on Giant")
Looks good in Firefox, Chrome, IE7-8.
In IE6 DD height is always larger (107px, while it must be 78px). I tried adding smaller height in style, removing all margins / padding etc and nothing seems to help. Attached is a screen shot of what I see in Microsoft SuperPreview.
alt text http://design.vitalbmx.com/new_html/dl-formatting.png
Any idea what might be the problem?
You are giving your anchor tag around the IMG a width and height, making it ipso-facto a block element. This is just a hunch, but try removing the anchor tag, put the mouse event handlers directly on the IMG, and setting the IMG to show a hand cursor with the style "cursor: hand"
Hope that helps.