/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Problem with centering <div>

Copy linkTweet thisAlerts:
Feb 23.2009

Hi friends,
I have investigated a little about how to center a <div> element at different screen resolutions but unfortunately can’t get a working solution.
I have a <div id=”flashicerik”> with flash content.

I found and tried to modify logically a script:

[CODE]
<script language=”javascript” type=”text/javascript”>
[COLOR=”Blue”]winWidth[/COLOR] = parseInt((navigator.userAgent.indexOf(“MSIE”)!= -1) ? document.body.offsetWidth : window.innerWidth);
[COLOR=”Blue”]winHeigth[/COLOR] = parseInt((navigator.userAgent.indexOf(“MSIE”)!= -1) ? document.body.offsetHeigth : window.innerHeigth);
centerdiv = document.getElementById(‘flashicerik’);
w = centerdiv.style.width;
h = centerdiv.style.heigth;
xc=Math.round((winWidth-w)/2);
yc=Math.round((winHeigth-h)/2);
[COLOR=”Blue”]centerdiv.style.Left = xc + “px”;
centerdiv.style.Top = yc + “px”;[/COLOR]
</script>
[/CODE]

but no effect….?
Need help

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@mimartjauthorFeb 23.2009 — I get this to work in Firefox, Chrome, Opera but not IE

[CODE]<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
winWidth = parseInt((navigator.userAgent.indexOf("MSIE")!= -1) ? document.body.offsetWidth : window.innerWidth);
winHeight = parseInt((navigator.userAgent.indexOf("MSIE")!= -1) ? document.body.offsetHeight : window.innerHeight);

$('flashicerik').style.left = (winWidth-500)/2 +"px";
$('flashicerik').style.top = (winHeight-600)/2 +"px" ;
//--><!]]>
</script>[/CODE]
In IE the "top" is not working its as if "0"

Any opinion?
Copy linkTweet thisAlerts:
@mimartjauthorFeb 24.2009 — Hi friends,

The definition I have given fot IE was not working:

it must be
[CODE][COLOR="Blue"]document.documentElement.clientHeight[/COLOR][/CODE]

not:
[CODE][COLOR="Red"]document.body.offsetHeight [/COLOR][/CODE]


[CODE]

<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
[COLOR="Blue"]winWidth = parseInt((navigator.userAgent.indexOf("MSIE")!= -1) ? document.documentElement.clientWidth : window.innerWidth);
winHeight = parseInt((navigator.userAgent.indexOf("MSIE")!= -1) ? document.documentElement.clientHeight : window.innerHeight);
$('flashicerik').style.top = (winHeight-300)/2 +"px" ;
$('flashicerik').style.left = (winWidth-500)/2 +"px"[/COLOR]
//--><!]]>
</script>[/CODE]

where "300" and "500" are my <div> elements dimentions.

this code worked for me.?
×

Success!

Help @mimartj 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 5.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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