'Expand Image Vertically Without Disrupting the Flow with Javascript & CSS

My Progress is @ http://codebucket.webatu.com/code/portfoliotest/index.html

Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/

I want to make the edges of the 'f' and 'l' stretch to the edge of the page. I'm just expanding the height of two images that sandwich the word.

I want the word itself to stay put, and I don't want the expanding images to displace any other elements.

Is there an easy way to achieve this? I imagine it has to do with positioning correctly, but I still don't have a full grasp of the subtleties of CSS positioning.

I apologize if this question is a repost; I couldn't think of a good way to phrase the question without posting my own example.

edit: here's my code (since the link seems to be bad)

<html>
<head>
<style type="text/css">

#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}

</style>
<script type="text/javascript">

var heightBottom;
var heightTop;
var interval;

function addHeight(){
    document.getElementById("portfolioBottom").style.width="249px";
    heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
    heightBottom=heightBottom + 5;
    document.getElementById("portfolioBottom").style.height=heightBottom;
    
    document.getElementById("portfolioTop").style.width="210px";
    heightTop = parseInt(document.getElementById("portfolioTop").style.height);
    heightTop=heightTop + 5;
    document.getElementById("portfolioTop").style.height=heightTop; 
}

</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />

<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />

</body>
</html>
javascriptcssanimationpositioning


Solution 1:[1]

I've gone with positioning the two extended bits and also I put the images as a background image to divs which then did the work.

Have just used your images (with positioning it could probably be done with a single image doing both bits, and sorry I didn't correct the missing pixel off the main image, I just overlapped the pixel for now, hence the cutoff look corrected the missing pixel on the main image would fix that ;) -

then, once positioned - I just animated the height and top/bottom negative positions simultaneously

I can't do JS so the demo's with jQuery, but hopefully the logic of the positioning will help you do the same in JS

also in mine I restricted the body height to stop it scrolling on forever, this might not be practical in real terms, but becasue the two images always go to the same height, the reverse effect brought them back together too.. so advantages maybe?

the live example

Solution 2:[2]

What about just using CSS and positioning it as a background image?

html {
    margin:0;
    padding:0;
    height:100%;
    background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}

Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Marcel

Related Questions