I want to overlap some elements without using position: absolute. The reason therefore is that I have several vertical sections (which should not overlap) containing elements which overlap. The problem is, I cannot know beforehand whether the overlapping or the overlapped element has the bigger size.
If one of those would receive a position: absolute it would be taken out of flow and therefore the parent container would not be sized accordingly and the sections would overlap.
I have already found this question but nobody seemed to answer the question.
Here is an example:
http://jsfiddle.net/nNhtU/
If it's ok to use jQuery, this can be done quite easily. Set the overflow property of the parent element to scroll:
.designer-question {
overflow: scroll;
}
And then you can set the height of each .designer-question to the height of its img using a simple each loop:
$('.designer-question').each(function () {
var $el = $(this); // Get jQuery of each designer question
var $backImg = $('.back img', $el); // Get background image
$el.css('height', $backImg.height());
});
I've applied this to your jsfiddle to demonstrate: http://jsfiddle.net/jfdPb/1/
Related
I want to create a div with CSS (preferably without any library) whose contents can be slided right/left on mouse-click if the content of the div is larger than the div width. Like below:
I tried with overflow-scroll but that gives a scroll-bar which is not what I want. Is it possible to create this with CSS and JavaScript (AngularJS, which I am using in my app) combination, without using any other library? I can use jQuery if it can done using that.
Update: Created a working demo after #Shnibble's answer.
$("#left").mousedown(function() {
var y = $("#content").offset();
$("#content").animate({
left: 0
}, function callback() {
$("#left").fadeOut();
});
});
$("#right").mousedown(function() {
var y = $("#content").offset();
$("#left").show();
$("#content").animate({
left: y.left - 200
});
$("#info").text(y.left - 100);
});
I'm not sure I know exactly what you want, do you want the <> arrows to scroll the content or do you want to click+drag the content left and right? Both can be accomplished with JQuery.
The former can be done by having the parent container positioned as relative and the content within positioned as absolute. Then you can use JQuery to alter the left offset of the content +/- depending on which arrow is clicked.
For the latter, you would do the same setup but check the mouse coordinates on click and apply the difference to the content left attribute until the mouse button is released.
As for making all of this only happen if the content overflows, you will need to do some checking with JQuery again to measure the width of the content and compare it to the parent container and only allow one of the above functions to run if the content is wider.
Alternatively, you co use overflow-x: auto and then style the scrollbar to fit in with your theme better? See here: https://css-tricks.com/custom-scrollbars-in-webkit/.
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
I've been looking around and I can not find anything that solve this problem.
I have a container div, inside this one, I have few floated div, their content is generated dynamically and can vary from few words to almost a page. this basically create a line of a table (I do not want to use table layout for some reasons).
I successfully made the container expand to the bigger of the content using overflow:hidden;
Now I would like all my divs to adapt to the container height.
you can set a class to all the div's inside the container ... let's say class="contained"
then you can add a js function to run when the document is generated that finds the max-height of all the contained div's and sets the same height to all the others.
$(function() {
var maxheight=0;
$(".contained").each( function () {
if (maxheight<$(this).height()
maxheight=$(this).height();
});
$(".contained").each( function () {
$(this).height(maxheight);
});
}
My jQuery UI dialog contains two div elements. One has a fixed height and should be aligned at the bottom of the dialog at all times. The other one should take up the remaining space.
Basically I’d like all the dimensions highlighted in blue to remain unchanged on resize. Or, in other words, the red div resizes in both dimensions but the green div keeps its height.
What’s the easiest way to do this in jQuery UI or even just plain CSS?
I’ve found a way to do this that doesn’t use any JavaScript. It doesn’t even involve any hacks; just plain normal CSS3. Fiddle here: http://jsfiddle.net/nty5K/16/
Basically, both divs are position: absolute, and each of the sides is anchored individually using the top, bottom, left and right properties. The top div has all four positions specified, making it resize with the container while preserving the exact distance to each edge of the container. The bottom div has three of the positions fixed, whereas the top is defined only indirectly, via a fixed height.
In practice, the divs will need to be placed into a wrapper div that has position: relative, otherwise the top/bottom divs will be positioned relative to the body element.
Not sure about browser compatibility yet, but this worked fine in Firefox 10, IE9 and Chrome 17. Didn’t test this in earlier versions.
Corporate firewall is blocking images, so I am guessing what you are after based on other comments.
EDIT:
Now that I can see what you are after, I have updated my fiddle accordingly. Including the code below for completeness.
I would write a function to calculate the size of the dialog, subtract the height of the fixed div and set the height of the dynamic div to this calculated value. I would then bind a call to this function to the resize event of the dialog. Here is a fiddle, may need some tweaking for your exact layout but should be close.
One gotcha worth noting is that some browsers may not calculate correctly while they are in the middle of a scroll/resize event, queing the calculations to occur after the resize event completes with setTimeout resolves the issues, though it does make the change a bit jumpy while the resize is in progress. See this question and answer for details.
function SetDivHeight() {
var $DynamicDiv = $('div.dynamic');
var $FixedDiv = $('div.fixed');
var $Container = $(window); //Update for containing element
/*Calculate the adjustment needed to account for the margin and
border of the dynamic div.*/
var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height();
/*Get the values of the top and bottom margins which overlap
between the two divs.*/
var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom'));
var FixedTopMargin = parseInt($FixedDiv.css('marginTop'));
/*Adjust for the overlapping top/bottom margin by subtracting
which ever is smaller from the adjustment value.*/
if (DynamicBottomMargin >= FixedTopMargin) {
HeightAdjustment -= FixedTopMargin;
} else {
HeightAdjustment -= DynamicBottomMargin;
}
/*subtract the height of the fixed div from the height of the
container, subtract the calculated height adjustment from that
value, and set the result as the height of the dynamic div.*/
$DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) -
HeightAdjustment);
/*May need to use $Container.innerHeight instead, if container
is not a window element.*/
}
var t;
function QueueSetDivHeight() {
if (t) {
clearTimeout(t);
}
t = setTimeout(function() {
SetDivHeight();
}, 0);
}
$(document).ready(function() {
SetDivHeight();
$(window).resize(QueueSetDivHeight);
//Bind to resize of container element instead/as well
});
Just CSS... check it out!
Set a margin to the container and a margin-top to the bottom fixed div. No jQuery required.
recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height.
a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.net/TUwej/2/. in this fiddle, you can see the basic desired behavior - the scrolling div will fill the height of the main container as is determined by the content in the '#main' element.
i modified this somewhat and used top:0 bottom:0 instead of height:100% to accommodate an element above the scrollable area. the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (i realize there is a little extra markup and class definitions that are empty, and an adjacent sibling combinator that appears redundant - these are vestiges of the actual structure)
everything is fine, except that i had to supply a fixed top coordinate for the scrolling div (note the top:120px declaration for the '.sidebar-list' selector). i'd like this to be relative to the '.sidebar-options' element above it, so that the options container above can have any number of options and the scrollable div will position itself appropriately. using fixed coordinates, if any options are added or removed, either overlap occurs or unnecessary space develops - i'd like to avoid this. the exact number of options that should appear varies between views.
i had thought to wrap the scrolling div in a relatively positioned container, but doing that creates a conflict with bottom:0 no longer indicating the height of the main '.wrapper' container (which it should do). similarly, using height:100% will use the computed height of the '.wrapper' container so the scrollable div will extend beyond the boundary of the '.wrapper'.
is there a way to keep the functionality shown in the second fiddle, but with the top of the scrollable div relative to the bottom of the options div (which will be of variable height)?
thanks in advance for any suggestions.
EDIT: S.O. asked if i wanted to start a bounty, so i did (first time) - hopefully 100 pts isn't considered too low. still looking for a no-script, pure-css solution that doesn't involve fixed coordinates or dimensions for the y-axis (width and left assignments are OK). thx
UPDATE:
Import JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
New Demo:
http://jsfiddle.net/Mutant_Tractor/N6muv/28/
Add this nice little JQuery script to your page:
var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);
OLD
How does this suit your needs?
http://jsfiddle.net/Mutant_Tractor/N6muv/4/
I changed position:absolute; to position:relative and added a static height:190px as well as adding background:pink; (so the bg always looks right)
You can try adding and removing Options from the list above to demo this.
Full code:
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background : pink;
}
I believe you should remove absolute positioning on the inner elements and try overflow:auto.
You need to define the height of the sidebar list coz you have to set this content to scroll-able and min or max height must be defined. And you could set .sidebar-list{position: relative;} See this Fiddle
Edit Your .sidebar-content should also be relatively positioned See this Fiddle whatever your 'options' content contains.