Here is the fiddle I'm working on: http://jsfiddle.net/fFYqF/
Basically it's a h1 above an h2 with some hidden paragraphs in-between them. This is all contained inside a div which I am trying to make visually centered (horizontally and vertically on the screen. I have used this css on the container div to center it on the page:
div#holder {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height:40%;
width:60%;
min-width:300px;
}
For this to work the width and the height of the div must be specified.
I have 2 problems... first, I don't know the height of the div so I have tried to use jQuery to apply it dynamically:
var h = $('#holder').height();
$('#main').css('height', h + 'px');
Secondly, I have a further bit of jQuery to animate the paragraphs of text open. This changes the height of the holder div thus rendering the earlier calculated height incorrect and the div is no longer vertically centered.
Is there a way to have the holder div always centered on the page? I.e. it should move up when it is opening.
Please see the fiddle above to see what I mean. Thanks
I have updated a branch of your fiddle to use a mixture of using .animate() with the height as well as the top position of the element to make it look like its opening up.
Have you tried the .animate method instead? I haven't tested this in a vertical-centered situation like you're describing, but I've used this method to increase the height of my containers when I'm bringing other elements into view.
$('#main').animate({height: '+='h }, 'slow');
Related
I have a div, and inside that div I have a variety of elements (p, strong, a, etc.) - by default this parent div is going to be at 200px height. When I click a read more button (last child element of the parent div) - I want the div to expand to it's natural height.
I'm using CSS max-height and overflow:hidden to accomplish the effect of a smaller than natural div and hiding the overflowing elements.
I need to accomplish this with javascript and jquery - and no external libraries unless someone can explain to me how to properly reference them in my wordpress site.
I was using this tutorials solution and it works fantastically, except that because I have multiple P tags inside the parent div, it won't expand to the full height of said parent div - thus my question.
EDIT: After some more time working at it, here's a really good solution, that also includes animation. Fiddle.
$('.career-readMore').on('click', function(event) {
var container = $(this).parent();
$(container).toggleClass('expanded');
$(container).css('max-height', '3000px');
https://jsfiddle.net/smo5vz67/
Assuming the structure presented in the fiddle, the solution is as simple as:
$( document ).ready(function() {
$('.read-more').click(function(){
$(this).parent().toggleClass('expanded');
});
});
plus some CSS
.container{
overflow: hidden;
max-height:200px;
position: relative;
border:1px solid #999;
}
.container.expanded{
max-height:none;
}
.read-more{
position: absolute;
right:0;
bottom:0;
}
try something like this
$('#btnExpand').click(function(){
$('#target').css('height', 'inherit');
});
https://jsfiddle.net/aznpqud0/
I'm trying to get a section header to stick to the top of a wrapper div, but the wrapper div needs to have a set height and the overflow set to scroll.
I've seen this example (jsfiddle) that achieves exactly what I'm looking for minus the fact that it doesn't have a wrapper div with a set height or overflow.
Here is (jsfiddle) the same example with the wrapper div added with set height and overflow. You can see that it is not working.
Does anyone have a solution for this, or a work around?
This is the wrapper css that is being used:
.wrapper {
height: 500px;
overflow: scroll;
}
As Thanasis already stated in the comments you have to change the scrolling context from window to .wrapper.
To avoid the 100%-width fixed div to overlap the scrollbars I know no different way than setting the width to calc(100% - 17px) where 17px is the hard-coded width of the scrollbar.
Find the fiddle here: https://jsfiddle.net/nwt58L8j/6/
I have a strange problem that happens when I animate the width of a relative positioned element which contains an absolute element. While the animation is running, inner element dissapears. When the animation is complete, inner element shows.
Here is the demo:
http://jsfiddle.net/R4Cj5/
When I remove parent element position: relative then inner element is shown while animation is running, but then I can't position it relatively to the parent.
Basically box with the % should be visible al the time
Does anyone have any idea whats happening here?
FIXED : I just added overflow: visible !important; to relative
positioned element
working example : http://jsfiddle.net/R4Cj5/26/
I think it might be a jQuery animate thing. I would love to see a working solution without any hacks, but for now here is something you might find useful! :-)
I basically added another function in the animate, upon completion it will animate the 90% to hover above the progress-bar
complete: function() {
$percent.animate({top: "-26px"})
}
in this use-case scenario, you can also remove/comment out the top: -26px from .progressbar .percent in the stylesheet. Also I added height: 20px; to the styling for .progressbar .percentage so you could see the % change as it glides across.
It is quite easy to make two div overlap when the size of the container div is known but what if the div heigh cannot ?
I tried to do it without manipulating container height:
http://jsfiddle.net/AJfAV/
But #text2 go over #text3 and do not "push" it.
How can the #container be resized automatically ?
I manage to achieve my goal using jquery ui but I feel this is not an elegant solution:
http://jsfiddle.net/AJfAV/6/
Is this what you need?
Updated fiddle:
I'm setting height to the default, auto, using jQuery, like this:
$("#container").css("height", "auto");
You can also set: height: auto; in CSS.
Do you need position:absolute? You can use absolute positioning if you don't want to do any arrangement, but a placement. The absolute positioning takes an element completely out of the flow of elements. They know nothing of its existent.
You may use floats and a technique to enclose floats. I'm using clear:
.cl-left {
clear: left;
height: .1px;
font-size: 0;
line-height: 0;
}
Don't forget to add <div class="cl-left"> </div>.
In addition, a negative margin is used. Therefore, #text2 is nailed to the right.
http://jsfiddle.net/AJfAV/7/
this can be solved if you removed absolute positioning of #text1 and #text2.
and make #text2 overlap #text1 by making both float:left and set margin-left:-30px for #text2.
now let's test it: http://jsfiddle.net/RPe4H/
the problem now is that when #text1 is toggled, #text2 will float to top left of #container, this happening because JQuery set display:none on the element when toggling is done.
now to solve this, put #text1 and #text2 inside containers with same width, so #text doesn't affect the flow when it is set to display:none, also you must set min-height:1px on the container of #text1.
now it is working as expected http://jsfiddle.net/MyyF6/1/
I've created an effect whereby an HTML element is initially hidden behind another HTML element, and the CSS 'top' value of the hidden element is animated to expose it from beneath the masking element in a smooth sliding motion.
Does anyone know if there is a way to recreate this effect without the masking element on top?
I want to avoid the jQuery'esque slideDown where the height of the element being shown is animated.
I have the feeling that this just isn't possible, but if someone is otherwise aware, your advise would be much appreciated.
You can easily do this with a wrapper that has overflow set to hidden
http://jsfiddle.net/xvNf6/1/
HTML
<div id="wrapper" style="height:0px;">
<div>content</div>
</div>
Sample CSS
#wrapper{width:300px;height:280px;margin:0 auto; overflow:hidden; background:#eee}
Javascript
//if you must not use jQuery
var animationTimer = setInterval(function(){
var wrapper = document.getElementById("wrapper");
wrapper.style.height = (parseInt(wrapper.style.height) + 1) + "px";
if(parseInt(wrapper.style.height) >= 280)
clearInterval(animationTimer)
},1);
//if you can use jQuery
$("#wrapper").animate({height:"280px"},1000);
Place your element within a parent div with overflow:hidden. Then, position your element beyond bounds of the parent div so that it is hidden.
#wrapper { overflow: hidden; }
#target { height: 100px; top: -100px; } /* shift element out of view */
You can then reveal it by animating to {"top":0} to get the slidedown effect that doesn't resize the height of the element.
Here's a rather crude demo: http://jsfiddle.net/7RSWZ/
Update: Here's another demo that attempts to deal better with different content sizes by dynamically setting the heights and top values. http://jsfiddle.net/7RSWZ/2/