jQuery: resizing element cuts off parent's background - javascript

I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?

Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)

Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.

Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.

Related

Javascript height to impact content not just div

I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)

How to adjust height of a HTML element to cover all free spaces of it's parent?

Suppose we have a DIV element like this:
<div id='parent'>
<!-- The childs will come here -->
<div id='footer'>This is footer</div>
</div>
and this function that create HTML elements dynamically and inserts them into the div#parent
function addChild(name)
{
$("<div></div>").text(name).prependTo( $("div#parent") );
}
CSS:
div#parent
{
height:400px;
background-color:yellow;
}
div#footer
{
/* height: ??? */
background-color:red;
}
Now I want, the element div#footer covers whole available/remaining height of the element div#parent, How I can do this by CSS or Javascript?
Thanks
Another solution using CSS. The solution here is using display:table and display:table-row
div#parent
{
display:table;
height:400px;
width:100%;
background-color:yellow;
}
div{
display:table-row;
height:20px;
}
div#footer
{
/* height: ??? */
background-color:red;
height:auto;
}
http://jsfiddle.net/aawbE/
If you simply want the footer to always be at the bottom of the page, then I would suggest checking out http://www.cssstickyfooter.com/. They have a great concept for making sure that the footer will either be at the end of the content, or touch the bottom of the page.
Example
If you want the footer to cover the entire bottom portion of the screen (beginning where the content ends and ending at the bottom of the screen) then you do need to know the total height being used by all of the elements inside of the "container" element as well as the height of the "container" element.
An easy way to do this is to put all child elements into a different div (the height of which you can easily track.
//find the difference in height between the
//"parent" div (minimum of 100% of page height) and
//the "main" div (the total height of its child elements)
height = document.getElementById('parent').offsetHeight -
document.getElementById('main').offsetHeight;
//Set the top margin of footer to minus the height
//(make footer go up 'height' number of pixels
document.getElementById('footer').style.marginTop = -height+'px';
//Set the height of the footer to 'height'
document.getElementById('footer').style.height = height+'px';
It's important to note that these calculations are based off of the cssStickyFooter code. This makes sure that the bottom of the footer remains at the bottom of the screen (unless it passes the bottom of the screen).
Example
For this example I added a green border around the 'main' div so that you can see where it ends. I also make sure to change the footer whenever the page is re-sized in case the child elements move around (re-size the page to see this happen). I also added a min-height to the footer so there will still be a footer even if #main.height >= #parent.height.
I hope this helps.

jQuery to update css height of element after animating

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');

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

Hide an element without masking item over top

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/

Categories