|
JavaScript - A Couple Of Firefox Issues With Click() And Onload
I have an ajax member search form that I'm just about done with but I have a couple of really irritating firefox issues.
The first one is the lack of support of the click() method. I added the following but it still doesn't want to work: Code: <script>
if(typeof HTMLElement != 'undefined' && !HTMLElement.prototype.click) {
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
}
</script>
The second issue I'm having is with dependent dropdown selects not hiding in firefox. This seems to be due to the other functions that need to trigger onload and is dependent on what order it's loaded. Here's how I'm handling the onload functions: Code: <script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
ajaxFunction(document.getElementById('country').value);
handleOnChange(country);
setupDependencies('cbcheckedadminForm', 'adminForm', 'locationsearch');
handleOnChange2(cb_state);
});
</script>
I don't have an issue with either of these in chrome. IE is a WHOLE other story, it's all kinds of wonky there. I still need to go through and do some debugging for that. Any quick ideas off hand on these two issues? I'll try and post the full php file in a reply. Similar TutorialsHello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone Hi guys. I have a quick question. What's the code for having a link with the id "autoid" clicked when the body of my html code loads? Thanks, Alex Hello All, I am writing a web page that accesses Mysql database data through PHP then dynamically displayes the Mysql data when the user mouses over different parts of an imagemap. I use Javascript OnLoad function to load the Mysql data into the header and then I use the Onmouseover function to change the display dynamically. Here is my question; when I mouse-over a part of an image the data in my side bar changes (exactly what I want) but I can't seem to make the data linkable. For example, when a user mouse-overs a certain part of the image, on the side bar it displays the companies web adr. How do I make that data a link? On the initial load the default data displayed is linkable but because I use <div> </div> to change the data dynamically, I loose the likability. For anyone that can help I can elaborate more (with code too) but I thought I would throw the general question out there and see if anyone could get my ball rolling. Thanks, Brian Hi CF, I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle. I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page. This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth). Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width. I've tried maybe a dozen different scripts, but here's my most recent: Code: function testImage(){
if (defaultImage.naturalWidth > 320){
wideMode = true;
}
placeImage();
}
function loadFirstImage(){
defaultImage.src = "images/myGIF.gif";
defaultImage.onLoad = testImage();
}
Any ideas on how to accurately get an image object's width after loading, but before placing it on the page? Any help is much appreciated. Thanks, ~gyz Hi, JS newbie here trying to cobble together enough to get this page done. Here's the snippet I'm having trouble with (sorry, I know it's sloppy, if you have a better way to do it by all means please post): Code: function showAdv() {
if(claroxanadvanced.style.display == "none")
{
claroxanadvanced.style.display = "block";
claroxanoriginal.style.display = "none";
smokersformula.style.display = "none";
}
else
{
}
}
function showOri() {
if(claroxanoriginal.style.display == "none")
{
claroxanadvanced.style.display = "none";
claroxanoriginal.style.display = "block";
smokersformula.style.display = "none";
}
else
{
}
}
function showSmo() {
if(smokersformula.style.display == "none")
{
claroxanadvanced.style.display = "none";
claroxanoriginal.style.display = "none";
smokersformula.style.display = "block";
}
else
{
}
}
And the page where it is implemented: http://www.claroxan.com/test/ Firefox's debug window says it might be an issue of undeclared variables - 'claroxanadvanced', 'claroxanoriginal' and 'smokersformula' are all div IDs in the html, what line should I put to declare them? Thanks Hi guys, I created a firefox extension a while ago & have just realised that the right click menu's don't seem to appear anymore... Have the methods I'm using been deprecated? Could someone point me in the right direction? Here's my old code.... Code:
// This is our javascript, which will check the selected link or hyperlink
function myfunction() {
if (gContextMenu.isTextSelected)
{
var focusedWindow = document.commandDispatcher.focusedWindow;
if (focusedWindow == window) focusedWindow = getBrowser().contentWindow;
var url = focusedWindow.getSelection().toString();
var mySplitResult = url.split("\n");
for(i = 0; i < mySplitResult.length; i++){
window.open('http://mysite.com/mypage.php?url=' + mySplitResult[i], 'window name')
}
}
else {
try {url = gContextMenu.linkURL} // new FF, other?
catch(e) {
try {url = gContextMenu.linkURL()} // old FF, SM, other?
catch(e) {url = String(gContextMenu.link)} // either FF, other?
}
window.open('http://mysite.com/mypage.php?url=' + url, 'windowname2')
}
}
Many thanks in return! Hi I wrote following code for the purpose to single right click to open new window, while left click would open another window. It works for IE but does not work for Firefox. Please help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US|zh-Hans|zh-Hant"> <head> <title>Javascript Question</title> <META NAME="LANGUAGE" CONTENT="en"> <META NAME="DOCUMENTCOUNTRYCODE" CONTENT="us"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB18030"> <script language='Javascript' type='text/javascript'> var rightClick = false; window.document.oncontextmenu = new Function("return false"); window.document.onmouseup = mouseUp; function mouseUp(e) { if (!e) var e = window.event; if (e.which) rightClick = (e.which == 3) else if (e.button) rightClick = (e.button == 2); if (rightClick) window.open('http://www.yahoo.com/'); } </script> </head> <body> <a href="#" onclick="window.open('http://www.google.com/')" onmouseup>Open New Window</a> </body> </html> Hi this is my first forum post. I'm developing a website for use in Thai schools in which clicking on link (at the beginning of a line of English text) starts a sound file (ogg or mp3). I've been using the Mouseover/Click sound effect script from by JavaScript Kit (www.javascriptkit.com). It works as designed in Firefox and Opera but doesn't in IE8. The script relies on HTML5 functionality so it should be compatible with IE8 (so I understand). I'm using Ubuntu 10.04 with Windows XP SP3 as the guest OS on VirtualBox. it seems to be a problem specific to IE8 (perhaps, not too surprising!) since the script works OK for Firefox and Opera. Here is the script Code: var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var a=createsoundbite("chot_pic01.ogg", "chot_pic01.mp3")
var b=createsoundbite("chot_pic02.ogg", "chot_pic02.mp3")
.............................
.............................
I only know a little Javascript at present, so I would be thankful of any help Hi all I use the following to verify that a user has entered a number between 0 and 99 in a form: Code: function validate_number(number) { //Checks uploaded files for invalid characters and extensions
if (/^([0-9]|[0-9][0-9])$/gi.test(number)) { // anything but 0-99 is disallowed
return true;
}
return false;
}
It seems to work fine in all browser / machine combos except Firefox on a Mac, when entering 0 returns false (I don't know if entering other numbers also returns false.) Can anybody suggest why? Hello, For starters I'm a real javascript noob. The problem is I've got some code which which should display the contents of a div depending on which of two radio buttons are selected. Works fine in IE, but in Firefox, or even Safari it will display both divs if both are clicked. In other words it won't hide the div while it displays the other. The code is below, and any help would be appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Help! </TITLE>
<style type="text/css">
.hide {display: none}
</style>
<script type="text/javascript">
function hideDivArea(str_area_hide){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++)
{
if(tag[x].getAttribute('id').indexOf(str_area_hide) != -1)
{
tag[x].style.display = "none";
}
}
}
function showDivArea(areas_show, areas_hide){
for (var i = 0; i < areas_show.length; i++)
{
ge = document.getElementById(areas_show[i]);
ge.style.display = "block";
}
for (var i = 0; i < areas_hide.length; i++)
{
hideDivArea(areas_hide[i]);
}
}
</script>
</HEAD>
<BODY>
<form action="feedout.php" method="post">
<input type="hidden" name="action" value="sendmail" />
<table style="width: 435px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="15" valign="bottom">Do you Own or Rent?:<span class="redtext">*</span></td>
<td valign="bottom"> </td>
</tr>
<tr height="30">
<td colspan="2">
<div>
<input type="radio" name="ownRent" value="own" size="34" onclick="javascript:showDivArea(['own'], ['rent'])">Own
<input type="radio" name="ownRent" value="rent" size="34" onclick="javascript:showDivArea(['rent'], ['own'])">Rent
<div class="hide" id="own">
Lawyer Name:<br />
<input type="text" name="lawyerName" size="34"><br />
Address:<br />
<input type="text" name="lawyerAddress" size="34"><br />
Telephone Number:<br />
<input type="text" name="lawyerPhone" size="34"><br />
</div>
<div class="hide" id="rent">
Landlord Name:<br />
<input type="text" name="landlordName" size="34"><br />
Address:<br />
<input type="text" name="landlordAddress" size="34"><br />
Telephone Number:<br />
<input type="text" name="landlordPhone" size="34"><br />
</div>
</div>
</td>
<tr>
<td>
<table width="240" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105" colspan="1" valign="middle" bordercolor="#000000" bgcolor="#ffffff">
<input style="border: solid 1px black;" type="submit" value="Submit Form">
</td>
<td width="20" height="35">
</td>
<td width="54" valign="middle"><input style="border: solid 1px black;" name="reset" type="reset" value="Clear Form"> </span></td>
</tr>
</tbody>
</table>
</td>
<td> </td>
</tr>
</tbody>
</table>
</form>
</BODY>
</HTML>
Hello, Firefox issue with Javascript or CSS here. My sorority website was written several years ago (therefore I'm not thoroughly familiar with the foundations), and upon building a new page, I'd like to add it to the menu in my php header. So I did, however the formatting looks terrible in Firefox! The menu seems like it's not "wide" enough. Here's what it looks like: (called in by http://skmit.com/header.incnew.php ) I added the officers link right between the social and nationals pages. Here's what it looked like befo (called in by http://skmit.com/header.inc.php ) and here's what it SHOULD look like: this screenshot was taken in safari, where it works beautifully! I've searched through the CSS ( http://www.skmit.com/c/master.css ) and found no clues as to why this is going wrong, so I feel like it may be the javascript...however, my Javascript experience is limited and I don't know what I'm looking for or if even relates to the header! Here's the javascript that the header calls in: http://skmit.com/c/nav.js http://skmit.com/c/prototype.js I'm not really sure what the issue is. I'm using Firefox 3.5 on Mac OS X. Safari shows it fine, I'm running it on browsershots.org right now to see which browsers have issues. If you could offer me any advice, I'd be very grateful! Thanks so much! I'm doing an assignment and I'm trying to get these codes to work but nothing works. Can anyone help please? Code: <script type = "text/javaScript">
var animal = prompt("Please enter the name of an animal (elephant would be good!)","");
animal = animal.toUppercase();
if (animal="ELEPHANT")
{
alert ("Elephants are very large and also gentle.");
alert ("Have you ever seen an elephant in the circus?");
}
else
{
alert("You have entered an unknown animal which is called a " + animal);
alert("This program will self-destruct in 10 seconds");
alert(" 10 - 9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 ...");
}
</script>
Code: <script type = "text/javaScript">
var rating = prompt("Enter a movie rating (G, PG, R...)","");
rating = rating.toLowercase()
switch (rating)
{
case "g":
alert("G means this movie is rated for General Audiences");
break;
case "pg":
alert("PG means this movie is rated for General Audiences with Parents attending");
break;
case "r":
alert("R means this movie is rated for Restricted Audiences. May contain violence.");
break;
default: alert ("This program is rated G. We are not allowed to comment on the movie rating " + rating);
}
</script>
Hey all, I'm trying to fully understand javascript and have a couple of questions I was hoping you could answer for me. I'm working through a book and in the book I'm creating a Bingo card that generates a random number. I'm pasting the full script below just in case it's needed. Code: function initAll () {
for(var i=0; i<24; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare= "square" + thisSquare;
var colPlace= new Array (0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis=colPlace[thisSquare] *15;
var newNum=colBasis +getNewNum()+1;
document.getElementById(currSquare).innerHTML=newNum;
}
function getNewNum() {
return Math.floor(Math.random() *15);
}
//-->
</script>
1. What does the [thisSquare] mean in this line of code that is bolded? I mean, I know thisSquare is whatever i is, but am I multiplying it by colPlace or what? 2. Lastly I'm confused by this part of the above code Code: var newNum=colBasis +getNewNum()+1; Why add the +1? I mean, i think getNewNum is set to pull a random number between 1 and 14. If you want to pull a number between 1 and 15, why not multiple Math.random() *16 instead of 15. Am i missing something? Sorry, I'm just not understanding why use the +1 I've put together a spoiler bb code, and I've noticed 2 bugs with it - I'm thinking that it's to do with the javascript end of the code. when the code is used, the page has to be refreshed for the spoiler to open and work correctly, also if there is 2 spoilers on the same page, if i click the second one, it opens the first one and not itself. I didn't type the javascript code I only did the html and css end, so I'm not sure what's going on. If any of you can help me I'd be really grateful. Here is the code: Code: <html>
<head>
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
color: #494949;
font-size: 10pt;
font-weight:bold;
text-align:left;
background-color: #cbeafe ;
border-top: 1px solid #9dc2d9;
border-left: 1px solid #9dc2d9;
border-right: 1px solid #9dc2d9;
border-bottom: 2px solid #9dc2d9;
padding: 2px;
width:90%;
min-height:18px;
margin: 1px auto 1px auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow:0 0 2px #cbeafe;
-webkit-box-shadow:0 0 2px #cbeafe;
}
.show
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
width:25%px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
.hide
{
color: #00a2c5;
font-size: 10pt;
font-weight:bold;
text-align:center;
background-color: #fff ;
border: 1px solid #fff;
padding: 2px;
min-width:25px;
min-height:5px;
margin: 1px auto 1px auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow:0 0 2px #fff;
-webkit-box-shadow:0 0 2px #fff;
}
</style>
<script type="text/javascript">
function hide(id){
document.getElementById(id).style.display = 'none';
}
function show(id){
document.getElementById(id).style.display = '';
}
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</head>
<body>
<div class="spoiler"><img src="http://i.imgur.com/s5tS1.png" align="left"><img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div id="show"><input type="button" class="show" onclick="hide('show'); show('hide'); showSpoiler(this);" value="Show" />
</div>
<div id="hide" class="inner" style="display:none;">
<input type="button" class="hide" onclick="hide('hide'); show('show'); showSpoiler(this);" value="Hide" />
<br /><br />{param}<br /></br>
</div>
</div>
</body>
</html>
Hi there, I've been a web designer for a while and have always used basic javascript in my pages, but decided recently that I would get right into the nitty gritty, however I'm having a problem with some really basic code. Secondly, the book which I'm using is from 2005 and is extolling the virtues of event listeners and so on, is this still the accepted means of handling events? And thirdly, are there still chasms between the browsers in compatability in this area? I'm aware IE has become more and more compliant recently, is it still necessary to write code to cover different browsers or does it all pretty much work nowadays (besides older browsers)? So, to the code! Basically, the browser doesn't get into the function to display the alert(), and i'm not sure why. (Told you it was basic ) Code: <html>
<head>
<title>Javascript Testing</title>
<script type="text/javascript">
<!--
function aKeyWasPressed(e){
alert('Sausages!');
}
var textarea = document.getElementById('myta');
textarea.addEventListener('keyup', aKeyWasPressed, false);
-->
</script>
</head>
<body>
<textarea id="myta"></textarea>
</body>
</html>
Thanks! Hey guys, as of now these lines of code... Code: function lettergrade(grade) {
if (grade >= 9){
document.write("A")
}
else if (grade >= 8){
document.write("B")
}
else if (grade >= 7){
document.write("C")
}
else{
document.write("F | Warning, your letter grade is very low.")
}
};
function goletter() {
document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) +
", <br \> Donald's letter grade on the test is: " + lettergrade(donald))
}
...are supposed to display the "____'s letter grade on the test is: A" or the respective letter, but instead it is displaying this... ABF | Warning, your letter grade is very low.Sam's letter grade on the test is: undefined, Sally's letter grade on the test is: undefined, Donald's letter grade on the test is: undefined Any ideas as to why this is happening? I am a novice javascript user so if there are any good alternatives that are pretty basic i'm open to ideas. Thanks guys. hey guys. got acouple questions for my website. im more of a html guy.. and i usually find my scripts online. i reeaaallly appreciate all answers! i have a box: <img id="imgSearch" src="" alt="Websites" /> <input type="button" value="Toggle Search" id="btnSearch" /> ^being the button to toggle between websites. basically i'd like this button to toggle between different websites when clicked. secondly: changing span tag colors html code: Traffic Light: <span id="trafficLight"></span> <input type="button" value="Prevent Accident" id="btnTraffic" /> i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green and last: changing the font in a bold tag bold by pressing a button html code: (note, the font weight in normal in css for bold) <b>i want this bold when you hit the button!</b> <input type="button" value="Set Bold" id="btnBold" /> Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? Am I saying the onload event wrong or something? PHP Code: <input type="button" value="Mouse" onload="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" /> Other events like onmouseover and onClick work |
|||||||