/    Sign up×
Community /Pin to ProfileBookmark

Help with JS border

Copy linkTweet thisAlerts:
Apr 09.2008

My ultimate goal is to have a DIV layer positioned perfectly in the center of the page (currently I’m doing do with CSS, but I think the solution may be to go completely with JavaScript, which I tried but didn’t work for me), that upon resizing the window, will never move closer than 20px from the top of the page (<body>).

I’ve been copying and pasting javscript for about a year or so and am just now starting to teaching myself the syntax and objects etc.

I’ve tried 4 or 5 COMPLETELY different ways and my JavaScript just refuses to work at all with any of them. Here is the most recent attempt:

[CODE]#center {
position:absolute;
height:1px;
width:1px;
left:50%;
top:50%;
}

#blockTable {
position:absolute;
left:-420px;
top:-263px;
width:841px;
height:526px;
z-index:1;
outline-color:#000000;
outline-style:solid;
outline-width:thin;
background-color:#CCCCCC;
}[/CODE]

#center is parent to #blockTable

[CODE]var obj = document.getElementById(‘center’);
var objTop = obj.style.top;
var objY = obj.offsetTop;
var winHeight = window.innerHeight();

function center() {
objTop = winHeight / 2 + ‘px’;
}

function keepLogo() {
if (objY < 283)
{
objTop = 283 + ‘px’;
}
else
{
center();
}
}[/CODE]

Thanks to all who help. Let me know if you need more info.

P.S. Is it possible to set offsetTop/Left, or can they only be read? I thought maybe that was the problem so I used style.top to set a new value, but that didn’t work either.

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@DmitriFApr 09.2008 — Hey there.

This can be done with pure css. Ill post the code and then explain:

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;Title&gt;&lt;/title&gt;
&lt;style&gt;
*{text-align: center; margin: 0; padding: 0;}
div{
display: block;
position: relative;
width: 500px;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: left;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;123&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


The * selector addresses all elements and resets the default browser margin and padding. It then sets a text-align to center, which is a work around for IE in order to center block elements.

In the div selector we specify the size, just so its visible. The relative positioning allows us to offset the div to -20 from the top edge. We set the text-align for inside the div to be the normal left.

For FF and other browsers, following the specs for css, margin-left and margin-right both set to auto, center the object.
Copy linkTweet thisAlerts:
@juststrandedauthorApr 09.2008 — Will I still be able put something else within that 20px margin by using a negative margin on another div?
Copy linkTweet thisAlerts:
@DmitriFApr 09.2008 — in that scenario you can always take off the negative margin on this div, and just insert a div before it with the following style:

display: block;

height: 20px;

width: 200px; /*Just a random number*/
Copy linkTweet thisAlerts:
@juststrandedauthorApr 09.2008 — Maybe I'm implementing it wrong, but this did not work at all.
Copy linkTweet thisAlerts:
@DmitriFApr 09.2008 — Post your code
Copy linkTweet thisAlerts:
@DmitriFApr 09.2008 — works for me,

delete your script for centering though, it isnt needed.
Copy linkTweet thisAlerts:
@juststrandedauthorApr 10.2008 — How can I center vertically without the way I have it?
Copy linkTweet thisAlerts:
@DmitriFApr 10.2008 — <i>
</i> &lt;script type="text/javascript"&gt;
window.onload = function(){centerbox();}
window.onresize = function(){centerbox();}
function centerbox(){
var box = document.getElementById('box');
//Get window height and box height
win_h = window.innerHeight;
box_h = box.clientHeight;
//Center box vertically
box.style.marginTop = (win_h - box_h) / 2;
}
&lt;/script&gt;


this will center it vertically, just change the getElementByID to be whatever element ID you need.
Copy linkTweet thisAlerts:
@DmitriFApr 10.2008 — Offtopic, why did you make the little blocks divs, it seems to be a tabular format, so its easier and better to use a table for that.
Copy linkTweet thisAlerts:
@juststrandedauthorApr 10.2008 — I think I just really don't like tables.

I'm a lot more comfortable with DIVs. It just seemed easier for me to implement the CSS and JS for/into DIVs.
Copy linkTweet thisAlerts:
@DmitriFApr 10.2008 — That might be true, but nowadays when people are striving to replace tables with CSS for layouts, it is a step backwards to go too far and use divs for tabular data imo.

You can create the same block table, and if wanted, you can just give each td a class. but w/e its your call. Just imo it makes css impossible to read.
Copy linkTweet thisAlerts:
@juststrandedauthorApr 10.2008 — Thanks so much for all your help, I figured it out.

[B]SOLUTION:[/B]

All I needed was a JavaScript function that could accurately read and return the document height and all my original attempts now work. I found one that basically puts in every form of retrieving the document height it can for every browser and whatnot so that one of them is bound to work no matter what.

Check out the page and resize it so it's shorter than the height of the blocks:

http://ppp.choosevivid.com/index.shtml

Here's the code that makes it work:

[CODE]
function pageHeight() {return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;}

function center() {
document.getElementById('center').style.top=50 + '%';
}

function keepLogo() {
if (pageHeight() < 586)
{
document.getElementById('center').style.top=293 + 'px';
}
else
{
center();
}
}

</script>

</head>


<body onLoad="keepLogo()" onResize="keepLogo()">[/CODE]

and here's where I got the wonderful function from: http://javascript.about.com/od/guidesscriptindex/a/screen.htm
×

Success!

Help @juststranded spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...