Error in document.getElementById(id).style.background-position = "-200px -500px"?

Ghyslaine Crespe

Hello,

In my script, the line

document.getElementById(id).style.background-position = "-200px -500px";

fails !

So, how can I change the background-position value ?

Thanks, Denis

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style>
div.hr {
border: solid #0000FF;
display: inline;
height: 600px;
width: 300px;
background-image: url(plan_station.gif);
background-repeat: no-repeat;
background-position: -100px -400px;
margin: 0em 0 0em 0;
}

</style>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function goRight(id)
{
document.getElementById(id).style.height="100px";
document.getElementById(id).style.background-position = "-200px -500px";
}

</SCRIPT>
</HEAD>
<BODY>
<a href="#" onclick="goRight('myDiv')">right</a>
<DIV id="myDiv" class = "hr" ></DIV>
</BODY>
</HTML>

Jul 23 '05 #1

Subscribe Post Reply

26548

Andrew Poulos

Ghyslaine Crespe wrote:

Hello,

In my script, the line

document.getElementById(id).style.background-position = "-200px -500px";

[snip]
With hyphenated style properties you are usually meant to refer to them
in code by dropping the hyphen and capitalising the next word (the
intercapitalisation system). In your case, "background-position" becomes
"backgroundPosition"

Andrew Poulos

Jul 23 '05 #2

Michael Winter

On Sun, 26 Dec 2004 00:40:08 +0100, Ghyslaine Crespe
<gh**************@worldonline.fr> wrote:

[snip]

So, how can I change the background-position value ?
Whilst background-position is the correct property name in CSS, it's an
illegal identifier in ECMAScript. You're looking for backgroundPosition.

[snip]
background-image: url(plan_station.gif);
background-repeat: no-repeat;
background-position: -100px -400px;
Be careful when specifying a background image without a background colour.
Make sure that the foreground content is still easily viewable if images
are disabled.
margin: 0em 0 0em 0;
That should be reduced to

margin: 0;

[snip]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
The language attribute is deprecated and besides, specifying the
(required) type attribute makes it redundant.
function goRight(id)
{
document.getElementById(id).style.height="100px";
document.getElementById(id).style.background-position
= "-200px -500px";
It would be more efficient to save a reference to the element, rather than
look it up twice:

var style = document.getElementById(id).style;
style.height = '100px';
style.backgroundPosition = '-200px -500px';

Preferably, it would include feature detection. Something like

var obj, style;
if(document.getElementById && (obj = document.getElementById(id))
&& (style = obj.style))
{
style.height = '100px';
style.backgroundPosition = '-200px -500px';
}

[snip]
<a href="#" onclick="goRight('myDiv')">right</a>

If you don't cancel the click event here, the vertical position of the
document may change:

onclick="goRight('myDiv');return false;"

Hope that helps,
Mike
Merry Christmas

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #3

Ghyslaine Crespe

Yes, it helps me a lot. Thanks for all these clues!

Denis

"Michael Winter" <M.******@blueyonder.co.invalid> a écrit dans le message de
news:opsjk97azvx13kvk@atlantis...

On Sun, 26 Dec 2004 00:40:08 +0100, Ghyslaine Crespe
<gh**************@worldonline.fr> wrote:

[snip]
So, how can I change the background-position value ?

Whilst background-position is the correct property name in CSS, it's an
illegal identifier in ECMAScript. You're looking for backgroundPosition.

[snip]
background-image: url(plan_station.gif);
background-repeat: no-repeat;
background-position: -100px -400px;

Be careful when specifying a background image without a background colour.
Make sure that the foreground content is still easily viewable if images
are disabled.
margin: 0em 0 0em 0;

That should be reduced to

margin: 0;

[snip]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

The language attribute is deprecated and besides, specifying the
(required) type attribute makes it redundant.
function goRight(id)
{
document.getElementById(id).style.height="100px";
document.getElementById(id).style.background-position
= "-200px -500px";

It would be more efficient to save a reference to the element, rather than
look it up twice:

var style = document.getElementById(id).style;
style.height = '100px';
style.backgroundPosition = '-200px -500px';

Preferably, it would include feature detection. Something like

var obj, style;
if(document.getElementById && (obj = document.getElementById(id))
&& (style = obj.style))
{
style.height = '100px';
style.backgroundPosition = '-200px -500px';
}

[snip]
<a href="#" onclick="goRight('myDiv')">right</a>

If you don't cancel the click event here, the vertical position of the
document may change:

onclick="goRight('myDiv');return false;"

Hope that helps,
Mike
Merry Christmas

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #4

Evertjan.

Ghyslaine Crespe wrote on 26 dec 2004 in comp.lang.javascript:

document.getElementById(id).style.background-position

document.getElementById(id).style.backgroundPositi on
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jul 23 '05 #5

by: linuxnooby | last post by:

Hi I want a form field to be selected when the page loads. But I get the error message Error: document.getElementById("ff") has no properties any ideas what I am doing wrong? code below

Javascript

document.body.style.fontsize is not working

by: jnag | last post by:

Hello, Through an onClick() event, I have an inline function to change the font size of the page (actually, I need to do this for the entire website). I have this defined in the header.cfm file...

Javascript

document.body.style.zoom

by: jnag | last post by:

I am trying to implement font changer, where I have links on the banner of the site and when the user clicks on the links, the font size of the page has to change. I tried...

Javascript

Error: document.forms[0].sec11_A has no properties

by: therig | last post by:

I'm having issues, I've spent many hours searching and I'm a noob at javascript, any help will be greatly appreciated. I keep getting the following error: Error: document.forms.sec11_A has no...

Javascript

error C2274: 'function-style cast' : illegal as right side of '.' operator

by: dheerajkoli | last post by:

hello friends , i m getting a problem on when i compiling a my project in vc++6.0 error C2274: 'function-style cast' : illegal as right side of '.' operator. please help me . if any hint...

C / C++

What does "Error: 'document.layers.main is null or not an object" indicate?

by: manjugi | last post by:

Hi, I am running som web application at some point i have one web page contains some buttons,text field etc.when i click on button it gives an error message stating that "error:...

Javascript

javascript error: document.forms[0].elements is null or not an object

by: shiks1305 | last post by:

this js function is giving javascript error: document.forms.elements is null or not an object function DisableText() { var count = document.forms.elements.length; for (i=0; i<count; i++) {...

Javascript

Error: 'document.getElementById(...)' is null or not an object.

by: ananjy | last post by:

Hi when i m trying to execute my ajax code using a link to display datas from another page named second.php., i got an error when the page loads in "ie"., which runs perfectly in firefox., here...

Javascript

[SOLVED] how to document.getElementById().style.padding-left ?

by: jmatos | last post by:

I need to change the style of an element changing its padding-left property (got it in firefox but IE is a different battle..). I can use document.getElementById().style.XX to everything i need,...

Javascript

document.all[...].style is null or not an object

by: sunny1009 | last post by:

Hi Guys, Can you please check this code and see whats wrong with it?? I am getting document.all.style is null or not an object error. Any help will be really appreciated. Thanks Code...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Error in document.getElementById(id).style.background-position = "-200px -500px"?

Similar topics