Connecting Tech Pros Worldwide Forums | Help | Site Map

Setting styles with JS

Mike
Guest
 
Posts: n/a
#1: May 15 '07
Hello,
I am trying to change the style(Position of an image) with a
function.This code worked a month ago and I dont know what I changed
I'm only showing the relevant code. One image is superimposed on
another.
Quote:
>From The html file:
--------------------------------------------------------------------
<script type="text/javascript">
function changenote(element) {

alert ("This Function is being Called");//Checking to see if the
function gets called, it does


var p = document.getElementById(element);
p.style.top =30;
p.style.left=30;

}

</script>

.......
<div id="GridBlock"><img alt="Blank Grid" src="crdgrid4.gif"
class="GridLayout" id="grid1" />
<img id="E"src="Root.gif" alt="none" class="Circle"
style="visibility:visible"></img>
<img id="A"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="D"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="G"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="B"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="e"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
</div>

..........

<td id="NoteA" width="22" class="Cellstyle"
onclick="changenote('E')"><a href="">A</a></td>

----------------------------------------------------------------------------
Quote:
>From the Css:
..Circle {
position: absolute;

top: 63px;
left: 20px;
}

I am trying to change the position of "Root.gif" when I click the link
in the cell with id+"NoteA".
But nothing is changing.
Thanks
Mike


shimmyshack
Guest
 
Posts: n/a
#2: May 15 '07

re: Setting styles with JS


On May 15, 2:28 am, Mike <ampel...@gmail.comwrote:
Quote:
Hello,
I am trying to change the style(Position of an image) with a
function.This code worked a month ago and I dont know what I changed
I'm only showing the relevant code. One image is superimposed on
another.>From The html file:
>
--------------------------------------------------------------------
<script type="text/javascript">
function changenote(element) {
>
alert ("This Function is being Called");//Checking to see if the
function gets called, it does
>
var p = document.getElementById(element);
p.style.top =30;
p.style.left=30;
>
}
>
</script>
>
......
<div id="GridBlock"><img alt="Blank Grid" src="crdgrid4.gif"
class="GridLayout" id="grid1" />
<img id="E"src="Root.gif" alt="none" class="Circle"
style="visibility:visible"></img>
<img id="A"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="D"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="G"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="B"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="e"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
</div>
>
.........
>
<td id="NoteA" width="22" class="Cellstyle"
onclick="changenote('E')"><a href="">A</a></td>
>
---------------------------------------------------------------------------->From the Css:
>
.Circle {
position: absolute;
>
top: 63px;
left: 20px;
>
}
>
I am trying to change the position of "Root.gif" when I click the link
in the cell with id+"NoteA".
But nothing is changing.
Thanks
Mike
that is the worst piece of code i've seen in a long while.
add a return false statement, so from

<td id="NoteA" width="22" class="Cellstyle"
onclick="changenote('E')"><a href="">A</a></td>

to

<td id="NoteA" width="22" class="Cellstyle"
Quote:
><a onclick="changenote('E');return false;" href="">A</a></td>
but seriously, that's all i'm going to say!

=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
 
Posts: n/a
#3: May 15 '07

re: Setting styles with JS


Mike wrote :
Quote:
Hello,
I am trying to change the style(Position of an image) with a
function.This code worked a month ago
Worked? In which browsers? In which browser versions?

and I dont know what I changed
Quote:
I'm only showing the relevant code.
That's not how serious debugging can be done, you see.
Not being able to see the whole code may prevent people from actually
figuring out your problem. Just posting an url would have been better, a
lot better.


One image is superimposed on
Quote:
another.
Quote:
>>From The html file:
--------------------------------------------------------------------
<script type="text/javascript">
function changenote(element) {
>
alert ("This Function is being Called");//Checking to see if the
function gets called, it does
>
>
var p = document.getElementById(element);
p.style.top =30;
[snipped]

W3C DOM2 Reflection of an Element's CSS Positioning Properties

CSS 1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C
standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forwar...atible-parsing
CSS 2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

See section 3.3.1.2 of
Using Web Standards in your Web Pages
http://developer.mozilla.org/en/docs...your_Web_Pages

So, here the correct js code must be
p.style.top = "30px";


Mike, post an url. First make sure your markup code passes HTML
validation and make sure your CSS code is valid.

Gérard
--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages
Pete
Guest
 
Posts: n/a
#4: May 15 '07

re: Setting styles with JS


>
Quote:
So, here the correct js code must be
p.style.top = "30px";
>
Another option would be to work with a class rather than individual
style elements.

p.className = 'newclass';


Mike
Guest
 
Posts: n/a
#5: May 15 '07

re: Setting styles with JS


I want the "R" image superimposed on the Fretboard.And Relative to the
upper left corner on the fretboard

I want it to reposition when I click the "A" Link
http://www.ampsoft.com/Guitar/

Thanks
Mike

Closed Thread