Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

changeDivHeight() + vertical-align <> cLFlaVA 2

Status
Not open for further replies.
hablablow

hablablow

Programmer
Sep 9, 2000
115
FR
Hi there,
I am loosing my hairs into setting up a css valid way of centering an image in its div container. This container has never the same height as he is stretched trough Javascript to fit the browser window minus 100px at the top used for a nav bar.
Little googlings and i found this great CLflVa script on tek-tips.
This permits to stretch the container div.
Now i'm sure a few more lines and we could center the image
vertically inside this div

<div id="wrapper">
<img src="images/22.jpg" height="232" width="283"/>
</div>

<script language="javascript">
<!--

function changeDivHeight() {

var h = document.documentElement.clientHeight;
document.getElementById('wrapper').style.height = h + "px";
}

onload = changeDivHeight;
onresize = changeDivHeight;
-->
</script>

If someone knows or if cFlaVA is around...
Thanks in advance.
 
Sort by date Sort by votes
Put id="image" on image.

Code: 
function changeDivHeight() {

var h = document.documentElement.clientHeight;
var image = document.getElementById('image');
document.getElementById('wrapper').style.height = h + "px";
image.style.marginTop = Math.floor((h-image.height)/2) + "px";
}
 
Upvote 0 Downvote
give the image a vertical align style.

Code: 
<div id="wrapper">
<img src="images/22.jpg" style="height: 232px; width: 283px; vertical-align: middle;" />
</div>

*cLFlaVA
----------------------------
[tt]i'll be your best-kept secret and your biggest mistake...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
JontyMC > thanks, this looks good. I'll try and i'll let you know.

cLFlaVA > what i want to achieve is to vertical-align an image inside a browser window. I use your script to stretch a div to the fit the browser window > clientHeight.
I have the container now lets vertical align the image inside it. And that's the problem because vertical-align: middle will not work. I think the only way is to use javascript.
 
Upvote 0 Downvote
JontyMC It works !! Thanks a lot
Now just one last question: how can i substract 100px to the wrapper height ( wich is the height of my fixed header as i would like the image to vertical-align in the available browser window space below this header ).

document.getElementById('wrapper').style.height = h + "px";
into
document.getElementById('wrapper').style.height = h - "100px";

breaks everything...
 
Upvote 0 Downvote
document.getElementById('wrapper').style.height = h - 100 + "px";
 
Upvote 0 Downvote
here's another way, if you don't need to take action on the image:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

#wrapper {
    width: 100%;
    border: 3px solid red;
    background: #cccccc url([URL unfurl="true"]http://www.tek-tips.com/images/logo.gif)[/URL] no-repeat left center;
}

</style>

<script language="javascript">
<!--
function changeDivHeight() {
  var h = document.documentElement.clientHeight;
  document.getElementById('wrapper').style.height = h + "px";
}

onload = changeDivHeight;
onresize = changeDivHeight;
-->
</script>

</head>

<body>

<div id="wrapper">
</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]i'll be your best-kept secret and your biggest mistake...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
cFlaVa you are absolutely right...
But my images are fired from a database and i'd like to keep them accessible
 
Upvote 0 Downvote
Thanks a lot guys for your time i really appreciate...
I'll be back for small tweaks
 
Upvote 0 Downvote
Hello there again,
so here is the last version i have
function changeDivHeight() {
var h = document.documentElement.clientHeight;
var image = document.getElementById('image');
document.getElementById('wrapper').style.height = h- 100 + "px";
image.style.marginTop = Math.floor((h-image.height)/2) + "px";
}

wich centers vertically my image...but to low...
In fact i need to substract 100px from the clientHeight and not from h as a result for the height of the wrapper...
Is it clear ?
Somehow this should be:
var h = document.documentElement.clientHeight-100"px";
But i know this isn't the correct syntax.
To explain my goals:
----------------------------------------------
HEADER--> height:100px; top=0; position:fixed;
----------------------------------------------

WRAPPER--> height:the rest of the available space
under the fixed header; top:100px;


image= vertically centered in the /2 of wrapper height
- /2 of image height
________________
I I
I I
I I
I I
________________






---------------------------------------------------
end.
 
Upvote 0 Downvote
Any idea how i can do that ?
In fact i need to substract 100px from the clientHeight and not from h
Somehow this should be
var h = document.documentElement.clientHeight-100"px";
But i know this isn't the correct syntax.
If you can help...
 
Upvote 0 Downvote
var h = document.documentElement.clientHeight-100 + "px";
 
Upvote 0 Downvote
Thanks JontyMC this is what i was searching but it breaks the layout, vertical align effect by adjusting the height of the layer to the same height as the image...so no more vertical align: middle effect...
This shouldn't be that hard...
I just want the wrapper layer to extend from under a layer called header, sticked on top of my browser window, wich has a 100px height to the bottom of the browser window.
The wrapper should have the height of clientHeight minus 100px ( the height of the header )
here is the script again as it is now
Code: 
function changeDivHeight() {
var h = document.documentElement.clientHeight-100 + "px"; [red]<-- this previous line breaks the Layout -->[/red]
var image = document.getElementById('image');
document.getElementById('wrapper').style.height = h+ "px";
image.style.marginTop = Math.floor((h-image.height)/2) + "px";
}
 
Upvote 0 Downvote
var h = document.documentElement.clientHeight-100 + "px";
even if i don't catch any js errors
why does this break the layout and cancels the wrapper height?
Are you sure there is no other way to code this ?
Thanks for your replies...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
406
gmmastros
gmmastros
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
alanatabz
  • Locked
  • Question
Alignment of image
Replies
2
Views
220
vacunita
vacunita
1DMF
  • Locked
  • Question
FileAPI -&gt; I need file path?
Replies
4
Views
225
1DMF
1DMF
1DMF
  • Locked
  • Question
Knockout.js -&gt; Semantic Markup? 3
Replies
7
Views
187
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top