/    Sign up×
Community /Pin to ProfileBookmark

Beginner help

Copy linkTweet thisAlerts:
Dec 07.2008

Hi I am just messing around trying to learn some java scripting. I have a div that I am trying to center in another div based on resolution. So I have a external .CSS and a external .JS file that I am trying to use. The JS file is changing the left style of the div defined in the CSS file.

Here is my code:
Java code.
document.getElementById(‘EnterScreen’).style.left = “800px”;

Css code.
#EnterScreen
{
background: white;
position:absolute;
text-align: center;
border: solid 1px white;
padding: 1px;
margin: 1px;
}

This is in the head tag.
<script language=”javascript” src=”js/index.js”></script>
<link rel = “stylesheet” href = “css/index.css” />

Once I get the hard code to work then Ill get it to actually do what I want it to do with regards to the resolution. However, This doesn’t seem to work, I have used Alert() and it returns null. In the html file I have move the .JS to be loaded first and second to see if that would make a difference and nothing… Any help would be appreciated. Also I know that its case sensitive so EnterScreen is spelled out correctly.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@CuppyTeaDec 07.2008 — Hi I am just messing around trying to learn some java scripting. I have a div that I am trying to center in another div based on resolution. So I have a external .CSS and a external .JS file that I am trying to use. The JS file is changing the left style of the div defined in the CSS file.

Here is my code:

Java code.

document.getElementById('EnterScreen').style.left = "800px";

Css code.

#EnterScreen

{

background: white;

position:absolute;

text-align: center;

border: solid 1px white;

padding: 1px;

margin: 1px;

}

This is in the head tag.

<script language="javascript" src="js/index.js"></script>

<link rel = "stylesheet" href = "css/index.css" />

Once I get the hard code to work then Ill get it to actually do what I want it to do with regards to the resolution. However, This doesn't seem to work, I have used Alert() and it returns null. In the html file I have move the .JS to be loaded first and second to see if that would make a difference and nothing... Any help would be appreciated. Also I know that its case sensitive so EnterScreen is spelled out correctly.[/QUOTE]

[CODE]<script>
window.onload = function() {
something.style.width = "800px";
}
</script>
<style>
#something {

background: white;
position:absolute;
text-align: center;
border: solid 1px white;
padding: 1px;
margin: 1px;
}
</style>

<div id="something">Some Text</div>[/CODE]

Works fine for me- make sure the folder paths to the external files are correct, and check the div id is correct.

What are you attemping to alert()?

If none of these suggestions bring any luck, prehaps post more code extracts for us to have a look at.
Copy linkTweet thisAlerts:
@WTBWebHelpauthorDec 07.2008 — Really? I replaced my code with yours and it didn't move the text at all... I must be doing something wrong then. Let me post everything I have. Sorry I don't have a website to make this easier.

html:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>

<script language="javascript" src="js/index.js"></script>

<title>Test</title>
<link rel = "stylesheet" href = "css/index.css" />
<link rel = "shortcut icon" href = "favicon.ico" />
</head>

<body>

<div id = "Wrapper">

<div id = "EnterScreen">

<img src = "Images/EnterLogo.png" alt = "Logo" border = "0">
</img>
<br></br>

<a href="home.html">
<img src = "Images/Enter.png" alt = "Enter" border = "0">
</img>

</div>

</div>
</body>

</html>

css:

body

{

background-color: black;

}

#Wrapper

{

background: blue;

margin: 2em auto 2em auto;

width: 80&#37;;

height: 700px;

}

#EnterScreen

{

background: white;

position:absolute;

text-align: center;

border: solid 1px white;

padding: 1px;

margin: 1px;

}

js:

document.getElementById('EnterScreen').style.left = "800px";

Those are exactly what I have in my files. I have an html, css, and js file just because I like to keep everything more organized looking. Is this possible not sure, maybe that's my problem. Thanks again for the help.
Copy linkTweet thisAlerts:
@CuppyTeaDec 07.2008 — If you javascript is _just_ that, then it is most likely the Javascript is getting ran before the body has been read, stopping the code from having any effect...

Try checking the source, and attached js and css sheets of http://mattlunn.me.uk/ftp/wtb/index.html, to see if it helps.
Copy linkTweet thisAlerts:
@WTBWebHelpauthorDec 07.2008 — So I should put the script after the css? And make it act onload? Also to make it into a function all I have to do is add a function block around ti correct?
Copy linkTweet thisAlerts:
@CuppyTeaDec 07.2008 — So I should put the script after the css? And make it act onload? Also to make it into a function all I have to do is add a function block around ti correct?[/QUOTE]

won't make a difference, yes, yes

?
Copy linkTweet thisAlerts:
@WTBWebHelpauthorDec 07.2008 — Thanks a lot it worked. But now I have another problem:/ I am trying to get the width of my wrapper div to center the other div in the middle of the screen. I used the Alert() to tell me what the width would be and it is just blank. Is there another way to get the width that works?

function MovePos()

{

var EnterDiv = document.getElementById('EnterScreen');

var WrapperDiv = document.getElementById('Wrapper');

alert(WrapperDiv.style.width);

EnterDiv.style.left = (WrapperDiv.style.width / 2) - (EnterDiv.style.width/2);

}
Copy linkTweet thisAlerts:
@NedalsDec 07.2008 — Why use .js?

You could simply use...

#EnterScreen {

margin:0px auto;

width:100px;

background: white;

text-align: center;

}
Copy linkTweet thisAlerts:
@CuppyTeaDec 07.2008 — T

function MovePos()

{

var EnterDiv = document.getElementById('EnterScreen');

var WrapperDiv = document.getElementById('Wrapper');

alert(WrapperDiv.style.width);

EnterDiv.style.left = (WrapperDiv.style.width / 2) - (EnterDiv.style.width/2);

}[/QUOTE]

If you set style.width with javascript, then it will be available, otherwise use

[CODE]WrapperDiv.offsetWidth[/CODE]
Copy linkTweet thisAlerts:
@WTBWebHelpauthorDec 07.2008 — Thanks a lot for the help. Works great!!
×

Success!

Help @WTBWebHelp 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.16,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

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