JavaScript - How Can I Set This Script To Work For Firefox Or Other Browsers?

Is there such a thing as a dropdown menu that works in all browsers? (or at least all the commonly used ones)... Is JavaScript a good way to go? and if yes, are there any precoded templates available that are fairly straightforward to integrate and adapt for dropdowns?

I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons.

Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer?

Below is javascript functions:
Code:

function getButtons()
{
	document.getElementById("answerA").class="answerBtnsOff";
	document.getElementById("answerA").setAttribute("class","answerBtnsOff");
	document.getElementById("answerA").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerB").class="answerBtnsOff";
	document.getElementById("answerB").setAttribute("class","answerBtnsOff");
	document.getElementById("answerB").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerC").class="answerBtnsOff";
	document.getElementById("answerC").setAttribute("class","answerBtnsOff");
	document.getElementById("answerC").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerD").class="answerBtnsOff";
	document.getElementById("answerD").setAttribute("class","answerBtnsOff");
	document.getElementById("answerD").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerE").class="answerBtnsOff";
	document.getElementById("answerE").setAttribute("class","answerBtnsOff");
	document.getElementById("answerE").setAttribute("className","answerBtnsOff");
 
	currenttotal=0;
}
function btnclick(btn)
{
 	if(document.getElementById("numberDropId").value=="")
 	{
	 	alert('You must first select the number of answers you require from the drop down menu');
	 	return false;
	}
	if (btn.class=="answerBtnsOn")
	{
		btn.class="answerBtnsOff";
		btn.setAttribute("class","answerBtnsOff");
		btn.setAttribute("className","answerBtnsOff");
 
		currenttotal--;
		return false;
	}
 	if(document.getElementById("numberDropId").value==currenttotal)
 	{
 	 	alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
 		return false;
 	}
	if (btn.class=="answerBtnsOff")
	{
		btn.class="answerBtnsOn";
		btn.setAttribute("class","answerBtnsOn");
		btn.setAttribute("className","answerBtnsOn");
		currenttotal++;
		return false;
	}
 
}

If you html code then this is below:

Code:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
    <td>Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>

Hi everyone
I know this has probably been asked a million times before but I have been searching the net for hours and have not found a solution so I am hoping one of you clever people will be able to help me. PLEASE!!

I am using this snow fall script http://www.dynamicdrive.com/dynamicindex3/rain.htm

It works perfectly in IE but not in Firefox or Safari. I'd like it to work in all or most browsers if thats possible.

Unfortunately, I am still learning so don't understand all the technical speak as yet so if someone can help in simple terms I'd be ever so grateful

Thank you so much to anyone who can help me out!

Not sure if I'm in the right category, apologies if I am not..

I have a small flash/javascript streaming mp3 player on my site that works fine in Chrome and Safari, but doesn't show up at all in Firefox, IE, or Opera.

the site is he www.thehordeandtheharem.com/index2.html

the player is in the top left corner. I don't even know where to begin troubleshooting this as I didn't write the player myself, but copied it from another site. If anyone could shed any light on this for me I would be very grateful, thanks!

This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html

Am using Dynamic Drive's smooth menu javascript

When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do.

thanks for any assistance

Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper,

I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside.

I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout.

I am using a var= images [ with

a series of file locations and info such as below

{
src: 'romanticabride/thumbs/tn_Shauna.jpg',
srcBig: 'romanticabride/images/Shauna.jpg',
title: 'Shauna',
longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
},

what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work .

one of my pages is http://www.cherishbridal.co.uk/romaticabride.html

the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further
or post some code. Thank you in advance

Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here.

Code:

function fade(obj, duration, toggle) {
	steps = 1000;
	elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ i +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}

Thanks,
Jon W

I need to assign a key in the javascript to actually make the javascript work,.

I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys.

i want to declare the key or keycombo in the script itself .,.

the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,.,

So I want it to work it this way .,

select the text
press a key
and it opens a new tab (or window) with an xact search .,.
i want to declare the key or keycombo in the script itself .,.

the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,.,

So I want it to work it this way .,

select the text
press a key
and it opens a new tab (or window) with an xact search .,.


Thanks in advance .,

Nani

I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed.
Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
	position:absolute;
	width:80px;
	height:50px;
	z-index:1;
	left: 0px;
	top: 0px;
}


#eye_wrapper{/*This is a master div for easy placement of the others*/
	position:absolute;
	width:80px;
	height:50px;
	z-index:2;
	left: 275px;
	top: 200px;
}
</style>



<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed
			
function visaOga(){
		document.getElementById(eyes.splice(0,1)).style.display="block";
		if(eyes.length==0){
			document.getElementById("a").style.display="none";
			document.getElementById("b").style.display="none";
			document.getElementById("c").style.display="none";
			
			dBort = function(){
			document.getElementById("d").style.display="none";
			eyes=["a","b","c","d"];
			}
			setTimeout(dBort,1500);//So last image is shown 1.5 sec
			return;//Aborts - dBort -. Sequence can start over
			if(document.getElementById("d").style.display=="none"){
			startAnim;//Strts sequence if last image invisible
			}
			}
			}

            </script>
</head>

<body>


<!--Images in own div invisible at start-->
<div id="eye_wrapper">
  <div class="eyesPos" id="a" style= display:none;>
    <embed src="0.svg" width="80" height="50" />
  </div>
  
  <div class="eyesPos" id="b" style= display:none;>
    <embed src="1.svg" width="80" height="50" />
    </div>
  
  <div class="eyesPos" id="c" style= display:none;>
    <embed src="2.svg" width="80" height="50" />
  </div>
  
  <div class="eyesPos" id="d" style= display:none;>
    <embed src="3.svg" width="80" height="50" />
  </div>
</div>





</body>
</html>

Hello, i have a website at www.djchapperz.co.uk and i want to allow access to only internet explorer and firefox users. I've heard Javascript is good for this. If anyone could help me i would be grateful.

The reason i want to do this is because in Google Chrome my site messes up on several pages.

All help is welcome. Thanks in advance

ChapperZHTID

Heya,

I wrote the following page in a day or two (please don't mind the layout). Everything seems to work excellent, apart from in Firefox (FF) in which it doesn't seem to work at all. None of the other browsers have any trouble with it.

I'm pretty new to Javascript (everything you see in the source code is pretty much all I know) and I have absolutely no idea why it doesn't work in Firefox.

The page in question could be found [link has been removed]. It's all there is to it.

So yeah, how to actually make this work in FF? Thanks a whole bunch in advance! Much appreciated.

Code:

<html>
	<head>
		<script>

		function dt(){
			var dt = new Date();
			document.getElementById("time").innerHTML=dt;
		}


		function changeBgColor1(){
				document.getElementById("bgc").style.backgroundColor='#ee0000';

		}

		function changeBgColor2(){
				document.getElementById("bgc").style.backgroundColor='#880099';

		}

		function changeBgColor3(){
				document.getElementById("bgc").style.backgroundColor='#888888';

		}

		function validate(){
				var a = document.getElementById("input1").value;
				var b = /[abcdef]/;
				if(b.test(a)){
					return true;
				}
				else {
					alert("invalid character");
				}
		}
		</script>

		<style>
			#bgc{
				width:300px;
				height:100px;
				background-color:#cccccc;
				font-weight:bold;
				color:#ff00ff;
			}
			#time{
				width:300px;
				height:50px;
				background-color:#aabb00;
			}
		</style>
	</head>

	<body onload="dt()">
		<p id="time"> </p>
		<p  id="bgc" onmouseover="changeBgColor1()" onmouseout="changeBgColor2()" onclick="changeBgColor3()">
			Hi There, pls change bg color
		</p>
		<form id="form1" onsubmit="validate()">
			<input id="input1" type=text />
			<input id="input2" type="submit" value="Submit" />
		</form>
	</body>
</html>

validate function does not work with IE or Firefox, it always returns true, even if some digits are entered in input box (which should not be validated by regexp). Why does regexp not work ? How to make it work ?

Thanks

i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function fnCheckScroll() {
document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px";
}
function fnSetHeight() {
oID_1.style.height = oID_1.scrollHeight;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>scrollHeight Property Sample</h1>
<p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve
the height of the viewable content.</p>
<div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left">
The <b>scrollHeight</b> property is read-only, allowing you to obtain the
actual height of the scrollable content. Even though the height of this
<b>div</b> is 200 pixels, the height inside the scrolling text box might
be less, since the wrapped text may not use the entire area within the object.
The <b>scrollHeight</b> dimension may be useful for a variety of reasons;
for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b>
to conserve horizontal space while respecting the set width as a maximum.
</div>

<p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight
</button></p>
<p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight
</button></p>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>

</div>
</form>
</body>
</html>

Hi there. Time ago I did come across a rather old but small js library called JQPopUp. it was ideal for a project I am working on (popping out windows with images AND with possibility of CSS styling). I am more skilled at CSS than Javascript and I ignore how to modify it so it works in Firefox. I know that it requires getElementById instead of id's but I don't know how to modify the event.clientX and event.clientY events.

Is there anybody there who can lend a hand? The script is below.

Thanks a lot...

Figaroal

PS: also tried to contact author and website... both gone.

Code:

/*************************************************************
* Program   : JQPopUp.js                                     *
* Purpose   : Genereert diverse Popup schermpjes.            *
* Author    : Ron Bausch                                     *
* Version 1 : 9 mei 2003                                     *
* Copyright : Ron Bausch                                     *
* Website   : www.justquick.com                              *
* Email     : ron.bausch@wanadoo.nl                          *
**************************************************************/
var bStay=false;
var aHelp;
var aFields;
var iWidth;
var sWidth;
var sOption;
var sHtml;
var i,iX,iY,iClX,iClY;
var JQPrompt="";

function JQPopUp(sHelptext) 
{ aHelp=sHelptext.split("|");
  sWidth="";
  iWidth=aHelp[0].length;
  if      (iWidth > 30 && iWidth <= 150) sWidth='width="250"';
  else if (iWidth > 150) sWidth='width="375"';
  if (!bStay)
  { if (aHelp.length==1) 
      idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0"><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
    else if (aHelp.length==2) 
      idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" align="center" cellpadding="0" cellspacing="0"><tr><td>'+aHelp[1]+'</td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
    else if (aHelp.length==3)
    { bStay=true;
      idHelp.innerHTML=
      '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
      '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
      '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
      '</td></tr></table>';
    }
    else if (aHelp.length==4)
    { bStay=true;
      sOption=aHelp[2].replace(/ /g,"");
      if (sOption.toUpperCase()=="CONFIRM")
      { idHelp.innerHTML=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
       '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="'+aHelp[3]+' idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
       '<button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
       '</td></tr></table>'; 
      }
      else if (sOption.toUpperCase()=="PROMPT")
      { sHtml=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr><tr><td>'+
       '<form name="frmJQ">';
       aFields=aHelp[3].split(",");
       for (i=0; i<aFields.length; i++)
       {  sHtml+=
         '<b>'+aFields[i]+'</b><br>\r<input type="text" name="txt'+aFields[i].replace(/ /g,"")+'" size="30"><br>\r';
       }
       sHtml+=
       '</tr></td><tr><td class="JQColorBody" align="center"><button name="cmdOK" class="JQColorTable" onClick="JQPrompt=document.forms.frmJQ; idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
       '<button name="cmdCancel" class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
       '</form></td></tr></table>';
       idHelp.innerHTML=sHtml;
      }
      else
      { idHelp.innerHTML=
       '<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
       '<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
       '<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
       '</td></tr></table>';
      }
    }

    iClX=event.clientX+10;
    iClY=event.clientY;
    iX = document.body.clientWidth  - iClX;
    iY = document.body.clientHeight - iClY;

    if ( iX < idHelp.offsetWidth)
      idHelp.style.left = document.body.scrollLeft + iClX - idHelp.offsetWidth;
    else
      idHelp.style.left = document.body.scrollLeft + iClX;

    if (iY < idHelp.offsetHeight)
      idHelp.style.top = document.body.scrollTop + iClY - idHelp.offsetHeight;
    else
      idHelp.style.top = document.body.scrollTop + iClY;
     
    idHelp.style.visibility="visible"; 
    idHelp.style.position="absolute"; 
  }
}

function JQPopOut() 
{ if (!bStay) idHelp.style.visibility="hidden"; 
}

document.write('<span style="visibility:hidden;" id="idHelp"> </span>');

// EOF

How would I go about having this work for Firefox. Is there away to have JQuery work with it?

Code:

<script type="text/javascript">
region=[//2 dimensional array containing area codes and region pairs
["201","nj"],
["202","dc"],
]


function getRegion(code){
	index=0;
	while(true){
		console.log(index);
		if(region[index][0]==code){
			return(region[index][1]);
		}
		index++;
		if(index>=region.length){
			return(undefined);
		}
	}
}

function getLocation(number){
	out=document.getElementById('output');
	var answer;
	if(number.length<3){
		return(void(0));
	}
	else{
		var code=number.substring(0,3);
		answer=getRegion(code)
		if(answer==undefined){
			out.innerText="unknown area code";
		}
		else{
			out.innerText=answer;
		}
	}
}
</script>
...
<form>
	<input type="text" id="number" onkeyup="getLocation(this.value)">
</form>
<div id="output">
</div>