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);
});
}
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/.
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/
I want a div to go inside another div even if it is somewhere else.how can I do this ?
<div id="main">
</div>
<div id="sub">
</div>
How can I put the div "sub" inside the div "main" without actually writing the div "sub" inside "main".But I want to do this in a relative manner so that if the content of the sub increase the main also increases.Is there any way to do this ?
I don't know about css but this may be helpful to you. You can achieve this by creating a JQuery function with variables as height and width of the div elements (as well as positioning). Keep those variables in relation so that whenever the div elements are resized or changed there respective div elements will change. Thus the sub div element will act as a child div.
For example:
var mainHeight = $('maindiv').height();
var mainWidth = $('maindiv').width();
var subHeight = $('subdiv').height();
var subWidth = $('subdiv').width();
/*and then implement your own function*/
Check this fiddle - http://jsfiddle.net/bXaXS/24/.
It is not a perfect solution as you wanted but it does change the height and width of #main div on changing the height and width of #sub div
Please see this link and see the push and pull classes These classes may give you the idea. You need to do something like left: -40px; etc. As I know it is usually done for SEO purpose
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.
I'm attempting to create a column in css that is 100% height of the page. Specificially the left column with the background transparency.
I've tried to make the contain use the overflow: hidden, but it doesn't seem to be working. I know I'm targeting the issue incorrectly and and I think that the header and footer are messing the columns up.
You could set the height with javascript ( using jQuery in this case) at page load :
$(function () {
$('.left_col').height($(document).height());
});
and just in case the user resizes the window :
$(window).resize( function () {
$('.left_col').height($(document).height());
});
For this idea you want to apply the Faux Column technique. This is how a 100% sidebar is done. You have a repeating image that extends to the bottom of the page, making it appear as it is an actual sidebar.