Javascript / Client Side Development :: Setting styles with JS


	Setting styles with JS 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 On May 15, 2:28 am, Mike <ampel@gmail.com> wrote: - Hide quoted text - > 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" ><a onclick="changenote('E');return false;" href="">A</a></td> but seriously, that's all i'm going to say! Mike wrote : > 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 > 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 > 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; [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#forward-compatible-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/Using_Web_Standards_in_your_Web_... 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. Grard -- Using Web Standards in your Web Pages (Updated Apr. 2007) http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_... > 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'; 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