problem with js onmousedown
On my web pages that display pictures, "next", "previous" and "index" can be selected by buttons. They work as before, but the button images no longer indicate that they are depressed. This worked perfectly well on the version of Firefox distributed by Debian as Iceweasel, but after the recent upgrade to Firefox-esr it does not. It also does not work on Firefox running on Windows 10, which is of course repeatedly updated. I suspect some feature of the configuration has been changed.The javascript lines that have no effect now are (to give one example)
onmousedown=\"document['nextbu'].src='/U/nextdn.gif';\"
It seems that firefox is ignoring the onmousedown event, but correctly getting the click event. To check an example web page, look at http://molard.ca/C/H/240/4003.html
Asịsa ahọpụtara
ritaopal said
I only have one body.js, easy to edit, but I then have to run the html file generation script multiple times -- that's the chore.
I haven't checked every page, but if they all follow the model of the one I played with: the pages include body.js automatically and you only need to edit the script file. (Plus the .css file if you adopt the alternate approach.) External files are a lifesaver!
I do want to know what changed to make my archaic method stop working.
I don't know when
document['element-id']
stopped working. I would have thought a long time ago.
Firefox logs the following in the web console for that reference:
TypeError: document.nextbu is undefinedGụọ azịza a na nghọta 👍 1
All Replies (10)
Wow, this code dates back to another era... The preferred way to refer to an element by its ID is the following -- this should be compatible with all modern browsers and back to IE6 at least:
<a onclick="nexurl() ;" onmousedown="document.getElementById('nextbu').src='/U/nextdn.gif';" onmouseup="document.getElementById('nextbu').src='/U/nextup.gif';"><img src="/U/nextdn.gif" id="nextbu" class="javabut" alt="nextbutton"> </a>
What do you think about using CSS for the buttons? You can style links to look like buttons. I made a demo for you here:
http://www.jeffersonscher.com/temp/4003.html
(Let me know when I should take it down.)
The computations in head.js do not work with the URL so please ignore that problem for demo purposes.
The code you provide causes the button to appear to be pressed whenever the mouse is moved over it; what is wanted is for the button to appear depressed when the mouse button is pressed, and for the appearance to revert to unpressed when the mouse button is released. That worked before -- the question is why doesn't it work now. It never worked on IE because they do not follow the rules checked by W3C -- the reason why my choice of browser is Firefox.
The response above is to the second message. I shall have to experiment with the first suggestion. Thanks for the assistance.
Whatever the solution, there is a fair bit of work as I must have about 6000 html files; they are all generated by a script, but it will have to be rerun for each directory of 100 pictures.
ritaopal said
Whatever the solution, there is a fair bit of work as I must have about 6000 html files; they are all generated by a script, but it will have to be rerun for each directory of 100 pictures.
Oh no, it's not that bad. For the first edit you only need to update six lines in the body.js file.
document.write("onmousedown=\"document['prevbu'].src='/U/prevdn.gif';\"") ; document.write("onmouseup=\"document['prevbu'].src='/U/prevup.gif';\">") ;
document.write("onmousedown=\"document['nextbu'].src='/U/nextdn.gif';\"") ; document.write("onmouseup=\"document['nextbu'].src='/U/nextup.gif';\">") ;
document.write("onmousedown=\"document['indxbu'].src='/U/indxdn.gif';\"") ; document.write("onmouseup=\"document['indxbu'].src='/U/indxup.gif';\"> ") ;
There probably aren't that many copies of body.js on your site.
ritaopal said
The code you provide causes the button to appear to be pressed whenever the mouse is moved over it; what is wanted is for the button to appear depressed when the mouse button is pressed, and for the appearance to revert to unpressed when the mouse button is released.
Oops, I edited the CSS from changing the appearance on :hover to changing it on :active instead.
Your code now works fine. I am still not sure why mine does not; it works on an ancient laptop running Iceweasel from Debian 7, and does not work on Firefox-esr from Debian 8. To get round the complexity of the script generated code I now have a stand alone webpage
http://molard.ca/button.html
which exhibits the problem -- my question is why?
I only have one body.js, easy to edit, but I then have to run the html file generation script multiple times -- that's the chore.
Thanks for the fast and helpful responses. I have copies of your html now, so the page can be taken down. The method is very elegant and appears to redefine the gif colour table -- a trick I was unaware of. I should obviously update my js literature.
However, as a computer addict I do want to know what changed to make my archaic method stop working. In the Debian upgrade to Firefox-esr there were warnings about recopying customization, but no suggestion about problems with backward compatibility.
Thanks again.
I must correct my conclusion from a cursory glance; the gif buttons are not used as the button can be constructed on the fly using the border-color property. That simplifies life if I ever need new buttons.
Thanks.
Asịsa Ahọpụtara
ritaopal said
I only have one body.js, easy to edit, but I then have to run the html file generation script multiple times -- that's the chore.
I haven't checked every page, but if they all follow the model of the one I played with: the pages include body.js automatically and you only need to edit the script file. (Plus the .css file if you adopt the alternate approach.) External files are a lifesaver!
I do want to know what changed to make my archaic method stop working.
I don't know when
document['element-id']
stopped working. I would have thought a long time ago.
Firefox logs the following in the web console for that reference:
TypeError: document.nextbu is undefined