JavaScript - Epoch Calendar Works On Ie But Will Not Pop Up In Firefox Or Safari.

Hey all,

1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens.

2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags?

Code:

$(".image_thumb ul li ul li").click(function(){  			
 
	var imgTitle = $(this).find('a').attr("href");  
	var imgDesc = $(this).find('.block').html();  
	var imgDescHeight = $(".main_image").find('.block').height(); 	

	if ($(this).is(".active")) {   
		return false;  
	} else {
		console.log(imgTitle);
		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
			$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
			$(".main_image embed").attr({ src: imgTitle}); 
		});
	}

	$(".image_thumb ul li ul li").removeClass('active');  
	$(this).addClass('active');  
	return false;

}) .hover(function(){
	$(this).addClass('hover');
	}, function() {
	$(this).removeClass('hover');
});

Thanks for response.

Hey Everyone,

I have a simple Java Script function I setup for a pop up that requests a discount code. Works awesome in Chrome, FF and on smart phones... but IE and Safari don't work at all.

Here is the code..

This is in my header

<script>
function passWord1018() {
var testV = 1;
var pass1 = prompt('Please Enter The Discount Code',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "ultra") {
alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page');
window.open('discounted101018.aspx');
break;
}
if (pass1.toLowerCase() == "sexydiscount") {
alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page');
window.open('discounted201018.aspx');
break;
}
testV+=1;
var pass1 =
prompt('Code Denied - Code Incorrect, Please Try Again.','Code');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</script>

This is in the body

<center>
<form>
<br />
<input type="button" value="Enter Discount Code" onclick="passWord1018()" />
</form>
</center>

I found on another site where someone mentioned the <center> tags are not used anymore, but i tried removing those and still nothing...

Any insight would be helpful...Thanks

Jason

Hi everyone,

My page with my slideshow (with lightbox integrated) is up and running fine on browsers like Firefox, IE, and Google Chrome... But Safari doesn't even show the slideshow.

www.bobbivanstudio.com/work.php

Any ideas why?

Thanks in advance!

Hello,

I am having some trouble with script on some pages I am maintaining. Do to some limitations I need to post the same script on everypage. My intent is for the code to do the following:

*On a particular page, after 15 seconds display a yes/no input box that leads users to another page in a new window
*On 4 other specifc pages, when the user departs, a new window pops with yes/no inputs
*If the user declines on previous inputs (selects no), I am placing a cookie on their machine to prevent future popups.

Everything seems to be working well in FireFox 3.6 and Safari 4.0.4. Unfortunately I have been having no luck in IE 8.0.6. The message does not come up after 15 seconds on the designated page. When leaving subsequent pages, the popup does not pop.

I am guessing there are two areas that might be causing the problem, but to see the code in action and context - here is a link: http://www.userinsight.biz/sharedev/...gitest2/1.html

Here is the first hunk:

Code:

function disp_popup()
{	
	var currUrl=location.href;
	
	var link2="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/2.html";
	var link3="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/3.html";
	var link4="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/4.html";
	var link5="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/5.html";
		
		 if (currUrl.toLowerCase()==link2.toLowerCase())	
				{
				var cookiename="survey2";				
				}
					else if (currUrl.toLowerCase()==link3.toLowerCase())	
				{
				var cookiename="survey3";				
				}
					else if (currUrl.toLowerCase()==link4.toLowerCase())	
				{
				var cookiename="survey4";				
				}
					else if (currUrl.toLowerCase()==link5.toLowerCase())	
				{
				var cookiename="survey5";				
				}
		
			var x = readCookie(cookiename);
					
			if (x) {
				//cookie for this name already set. Page already visited so no popup.
			}
			else
				{
					createCookie(cookiename,'Survey',365);	
					disp();
				}
			
	}
	function disp()
	{
	var currUrl=location.href;
	var surveyno="";
	
	var link2="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/2.html";
	var link3="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/3.html";
	var link4="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/4.html";
	var link5="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/5.html";
		
		
	 if (currUrl.toLowerCase()==link2.toLowerCase())	
				{
					surveyno="survey2";
				
				}
				else if (currUrl.toLowerCase()==link3.toLowerCase())	
				{
								surveyno="survey3";
				}
				else if (currUrl.toLowerCase()==link4.toLowerCase())	
				{
								surveyno="survey4";
				}
				else if (currUrl.toLowerCase()==link5.toLowerCase())	
				{
				surveyno="survey5";
				}
		
				if (surveyno!="")
				{
	testwindow=window.open("http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/surveydisplay.html?survey="+surveyno,"mywindow",
      "location=1,status=1,scrollbars=0,resizable=1,width=350,height=385");
				testwindow.moveTo(200,200);
				
				}		
	}

Here is the other hunk (checkTime):
Code:

function checkTime()
	{
		
var currUrl=location.href;
	var link1="http://www.userinsight.biz/sharedev/shareyourinsights/pgitest2/1.html";
		
		
		if (currUrl.toLowerCase()==link1.toLowerCase())	
			{
				var cookiename="survey1";
			}
				
		
			var x = readCookie(cookiename);
					
			if (x) {
				//cookie for this name already set. Page already visited so no popup.
				
			}
			else
			{
				
					if(cookiename=="survey1")
					setTimeout(function(){timeoutdone(cookiename)},15000);
			
			}
	}
	
	function timeoutdone(cookiename)
	{
		
	createCookie(cookiename,'Survey',365);
	DisplayAlert('AlertBox',200,100);
	}

Thank you, thank you, thank you for any ideas you might have! I am going nutz!

-Mike

I am using javascript to change the buttons on my website so that they load up a different image when hot spots on the buttons are hovered over.

Everything has been working great, but this morning I tried checking out my site and for some reason the javascript wasn't working in Chrome, or on my iphone using Safari.
I tried it in IE and everything still works.

Any ideas on why it would stop working for those two browsers?

Here is the javascript:

Code:

 
function init(){
	
	document.getElementsByTagName('area')[0].onmouseover=function(){
		document.getElementById('crocodileImg').src='Images/crocodileHover.png';	
			this.onmouseout=function() {	
		document.getElementById('crocodileImg').src='Images/crocodile.png';
		}
	}
	
	document.getElementsByTagName('area')[1].onmouseover=function(){		
		document.getElementById('historyImg').src='Images/historyHover.jpg';
			this.onmouseout=function() {
		document.getElementById('historyImg').src='Images/history.jpg';
		}
	}
	
	document.getElementsByTagName('area')[2].onmouseover=function(){
		document.getElementById('applyImg').src='Images/applyHover.jpg';
			this.onmouseout=function() {
		document.getElementById('applyImg').src='Images/apply.jpg';
		}
	}
	
	document.getElementsByTagName('area')[3].onmouseover=function(){		
		document.getElementById('applyImg').src='Images/membersHover.jpg';
			this.onmouseout=function() {
		document.getElementById('applyImg').src='Images/apply.jpg';
		}
	}

	document.getElementsByTagName('area')[4].onmouseover=function(){
		document.getElementById('mediaImg').src='Images/mediaHover.jpg';
			this.onmouseout=function() {
		document.getElementById('mediaImg').src='Images/media.jpg';
		}
	}	
}

if(window.addEventListener){
	window.addEventListener('load',init,false);
}

else { 
	if(window.attachEvent){
	window.attachEvent('onload',init);
	}
}

I'm not sure if seeing the html the js is referencing will help at all, but here it is just in case:

Code:

        <div id="crocodile">
            <img id="crocodileImg" src="Images/crocodile.png" usemap="#crocodileImg" border="0" width="436" height="147" alt="Home" />
            <map id="crocodileImg" name="crocodileImg">
            <area id="crocArea" shape="poly" coords="41,9,23,21,20,58,40,78,72,78,82,86,88,112,117,129,140,126,257,126,274,107,274,79,401,78,420,66,419,26,404,6,369,7,366,0,294,0,291,7," href="index.html" alt="Home" title="Home" /> 	 
            </map>   
        </div>
        
        <div id="history">
            <img id="historyImg" src="Images/history.jpg" usemap="#historyImg" border="0" width="350" height="256" alt="Home" />
            <map id="historyImg" name="historyImg">
            <area id="historyArea" shape="poly" coords="18,77,18,167,48,170,79,208,124,233,174,238,228,218,257,188,266,176,280,184,306,182,338,102,331,93,271,92,254,54,226,27,196,11,169,4,137,7,109,17,82,33,65,51,52,74," href="history2.html" alt="History" title="History" />
            </map>             
        </div>
        
       
        <div id="apply">
            <img id="applyImg" src="Images/apply.jpg" usemap="#applyImg" border="0" width="280" height="223" alt="Apply" />
            <map id="applyImg" name="applyImg">
            <area id="applyArea" shape="poly" coords="17,43,17,57,15,72,20,84,39,83,43,79,56,76,62,62,65,49,77,42,76,36,70,22,65,14,52,14,45,21,38,24,31,32," href="apply.html" alt="Apply" title="Apply" />
            <area id="membersImg" shape="poly" coords="112,49,97,55,77,71,64,89,61,99,47,104,44,123,44,149,46,164,57,168,70,172,82,186,102,197,125,206,146,208,168,201,188,189,201,177,208,166,231,165,254,165,260,150,262,133,262,113,254,97,238,95,221,97,213,97,205,85,197,74,183,63,172,55,159,51,145,48,134,47,"href="members.html" alt="Members" title="Members" />
            </map>           
        </div>
        
        <div id="media">
             <img id="mediaImg" src="Images/media.jpg" usemap="#mediaImg" border="0" width="182" height="149" alt="Media" />
            <map id="mediaImg" name="mediaImg">
            <area id="mediaArea" shape="poly" coords="0,102,16,103,26,117,44,129,67,133,92,128,108,115,118,102,165,102,170,88,173,65,172,52,161,49,141,49,132,42,121,42,110,30,96,22,76,16,60,14,44,18,30,29,19,36,13,48,0,51," href="media.html" alt="Media" title="Media" />
            </map>       
        </div>

Thank you for any replies.

hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone.

i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on.

below is the Java-script code along with my form code too

Javascript:
<script type="text/javascript">

function nextSelect(o) {

if (o.value == '0') {
var next = o.nextSibling;
while (next && next.nodeName != 'SELECT') {
next = next.nextSibling;
}
next.length = 0;

return;
}
var d = document;

var useSelect = d.getElementById(o.name + '_' + o.value);

if (!useSelect) {
alert('Unknown id: ' + o.name + '_' + o.value);
return;
}

var copy = useSelect.cloneNode(true);
copy.style.display = 'inline';

var next = o.nextSibling;
while (next && next.nodeName != 'SELECT') {
next = next.nextSibling;
}
next.parentNode.insertBefore(copy, next);
next.parentNode.removeChild(next);
}
</script>

my form:
<div style="display: none;">

<!-- ##### First Selection ####### -->

<select name="second" id="first_dp" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38">2 3/8'</option>
<option value="dp_4">4'</option>
</select>

<select name="second" id="first_hw" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="hw_3_12">3 1/2'</option>
<option value="hw_4">4'</option>
</select>

<!-- ####### 2nd Selection ####### -->

<select name="third" id="second_dp_2_38" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38_4.85">4.85 lbs/ft</option>
<option value="dp_2_38_6.65">6.65 lbs/ft</option>
</select>
<select name="third" id="second_dp_2_78" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_78_6.85">6.85 lbs/ft</option>
<option value="dp_2_78_10.4">10.4 lbs/ft</option>
</select>

>>>>>>and so on till 3rd selection<<<<<<<<<

</div>

<form action="pdfHandle.php" method="post" id="pdfsearch">
<fieldset>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="146">
<p>
Type:<br />
Size:<br />
Weight:<br />
</td>
<td width="266"><select name="first" onclick="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp">Drill Pipe</option>
<option value="hw">Heavy Weight</option>
</select><br/>
<select name="select">
</select>
<br/>
<select name="select">
</select>
<br/>
<select name="select">
</select>

</td>
</tr>
</table>
<p>
<input type="submit" name="submit" id="submit" value="Create PDF" />
<input type="reset" value="Reset Selection" />
</p>
</fieldset>
</form>
-----------------------------------------------------------------------

i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps

i thank you for viewing this post.

Hi, I have the script below working fine in IE but not FF, can any one help me??

The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF

Live demo: http://hotelendenia.com/sandbox/

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>

  <script type="text/javascript">
  function extend(m, e){
    var e = e || this;
    for (var x in m) e[x] = m[x];
    return e;
};
 
function create(type, opt, parent){
    var el = document.createElement(type);
 
    if (opt.style){
        extend(opt.style,el.style);
    }
 
    delete opt.style;
 
    extend(opt,el);
 
    if (parent){
        parent.appendChild(el);
    }
 
    return el;
}
 
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}

  </script>

</head>
<body>

<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
			
</body>
</html>

Hi,

I have a login script which is working in IE but not firefox or safari. I was hopoing someone might be able to point me in the right direction as i'm at a loss as to why it isn't working

My login form looks like this

Code:

<?php
	session_start();
	include_once("inc.php");
    $wlog='not';
	$msm_error='';
	if (isset($_GET['wlog']))
	{
		$wlog=$_GET['wlog'];
		if($wlog =='out' or $wlog =='not')
		{
			global $HTTP_SESSION_VARS;
			unset($HTTP_SESSION_VARS['client']);
		}
		if($wlog =='not')
		{
			$msm_error='<h1 style="color:#CC0000">Username or Password is incorrect</h1>';
		}
	}else{
	
		$wlog=$_GET['wlog'];
	}

	$cms=check_login_status();

	$show_cat=0;
	$show_cat_sub=0;
	$brand=0;
	$p_size=0;
	$color=0;
	$r_price=0;
	$status=0;
?>

function client_login_signup_form($wlog,$msm_error)
{
	if($wlog =='out')
	{
		global $HTTP_SESSION_VARS;
		unset($HTTP_SESSION_VARS['client']);
	}
?>


<form name='Formlogin' id='Formlogin' method='post' action='check_user.php'  onSubmit='return clientvalidate();'> 
<input type='hidden' name='wlog' id='wlog' value='<?php echo $wlog; ?>'/>
        <div id='logmsm'><?php echo $msm_error; ?></div>
        <h1>Existing Customer - Login</h1>
        <p style='color:#fdca00'>Please enter your email address and password</p>
<table width='100%' border='0' cellspacing='2' cellpadding='2'>
          <tr>
            <td width="20%" align='left'><p>Email Address:&nbsp;</p></td>
            <td width="80%" ><input name='e_mail' type='text' class="input1" id='e_mail' /></td>
          </tr>
          <tr>
            <td align='left'><p>Password:&nbsp;</p></td>
            <td><input name='pass' type='password' class='input1' id='pass' /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input name='submit' type='submit' value='Submit' /></td>
          </tr>
          <tr>
            <td colspan="2"><p style="margin-top:5px; font-size:10px"><a href="forgotten_password.php">Forgot your password ?</a></p></td>
          </tr>
        </table>
</form> 
<?php
}

My Javascript validation looks like this

Code:

function clientvalidate()
{
	//alert('user')
	if (document.Formlogin.e_mail.value=="")
	{
		alert("Please fill the E-mail.")
		document.Formlogin.e_mail.focus()
		return false
	}else{
		var user=document.Formlogin.e_mail.value;
			
	}
		
	if (document.Formlogin.pass.value=="")
	{
		alert("Please fill the password.")
		document.Formlogin.pass.focus()
		return false
	}else{
		var str=document.Formlogin.pass.value
		var v2=replacewithreg(str)
		if(v2==false)
		{
			document.Formlogin.pass.focus();
			return false;
		}else{

			var pass=document.Formlogin.pass.value;
			
		}
	}

	

	var wlog=document.Formlogin.wlog.value;

	url='ajax_check_client_login.php?user='
	url =url+user
	url += '&';
	url += 'pass=';
	url =url+pass;
	url += '&';
	url += 'wlog=';
	url =url+wlog;	
	//alert(url)

	javascript:void(0);
	new Ajax.Updater('', url);
	//updateaccountlink();
			
return true
}

Can someone help me figure out why these two scripts conflict in Firefox and Safari? They work fine in Internet Explorer, and they work fine in ALL browsers when they don't have to work together on the same page. When they both need to work on the same page, it's the div/column resize script that is acting up in Safari and Firefox (again, it works fine in IE). What's really strange is that when I click on my firebug icon (in the lower righthand corner) in Firefox the divs/columns resize like they should and everything looks fine. It's almost as if it's not resizing in real time like it should be, and something about me clicking that icon is making it refresh or update or something. Any help given with this matter would be greatly appreciated!


Resize two Divs (columns) to be the same height:
Code:

// Replace 'center' 'right' and 'left' with the ID names of the columns you want to balance.
// The last one is there to show how you can add more columns.  Just delete the ones you're not using.
var divs = new Array('col1, 'col2');

// Initialize Scripts - is this a browser that understands DOM?
function scriptInit() { if (!document.getElementById) { return; } }

// Set up Event Listener
function addEvent(elm, evType, fn, useCapture) { 
	if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } 
	else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; }
	else { elm['on' + evType] = fn; }
}

// Start Column Script
function setTall() {
	if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
			if (document.getElementById(divs[i]) != null)
			{ var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
		}
	for (var i = 0; i < divs.length; i++) {
			if (document.getElementById(divs[i]) != null)
			{ var div = document.getElementById(divs[i]); div.style.height = maxHeight + 'px'; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight - (div.offsetHeight - maxHeight)) + 'px'; } }
		}
	}
}

// Assign one of the columns to the TextResizeDetector.
function initTall() {
	if (document.getElementById) { for (var i = 0; i < divs.length; i++)
		{ if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
	setTall(); } 
}

// Fire Events
addEvent(window, 'load', initTall, false);
addEvent(window, 'resize', setTall, false);

/*	Detects changes to font sizes when user changes browser settings
	Fires a custom event with the following data:
	iBase  : base font size
	iDelta : difference in pixels from previous setting
	iSize  : size in pixel of text
	author Lawrence Carvalho carvalho@uk.yahoo-inc.com */

// @constructor
TextResizeDetector = function() {
    var el  = null;
	var iIntervalDelay  = 200;
	var iInterval = null;
	var iCurrSize = -1;
	var iBase = -1;
 	var aListeners = [];
 	var createControlElement = function() {
	 	el = document.createElement('span');
		el.id='textResizeControl';
		el.innerHTML='&nbsp;';
		el.style.position="absolute";
		el.style.left="-9999px";
		var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
		// insert before firstChild
		if (elC)
			elC.insertBefore(el,elC.firstChild);
		iBase = iCurrSize = TextResizeDetector.getSize();
 	};

 	function _stopDetector() {
		window.clearInterval(iInterval);
		iInterval=null;
	};
	function _startDetector() {
		if (!iInterval) {
			iInterval = window.setInterval('TextResizeDetector.detect()',iIntervalDelay);
		}
	};

 	 function _detect() {
 		var iNewSize = TextResizeDetector.getSize();

 		if(iNewSize!== iCurrSize) {
			for (var 	i=0;i <aListeners.length;i++) {
				aListnr = aListeners[i];
				var oArgs = {  iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize - iCurrSize + 'px' : "0px"),iSize:iCurrSize = iNewSize};
				if (!aListnr.obj) {
					aListnr.fn('textSizeChanged',[oArgs]);
				}
				else  {
					aListnr.fn.apply(aListnr.obj,['textSizeChanged',[oArgs]]);
				}
			}

 		}
 		return iCurrSize;
 	};
	var onAvailable = function() {
		if (!TextResizeDetector.onAvailableCount_i ) {
			TextResizeDetector.onAvailableCount_i =0;
		}

		if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
			TextResizeDetector.init();
			if (TextResizeDetector.USER_INIT_FUNC){
				TextResizeDetector.USER_INIT_FUNC();
			}
			TextResizeDetector.onAvailableCount_i = null;
		}
		else {
			if (TextResizeDetector.onAvailableCount_i<600) {
	  	 	    TextResizeDetector.onAvailableCount_i++;
				setTimeout(onAvailable,200)
			}
		}
	};
	setTimeout(onAvailable,500);

 	return {
		 	/*
		 	 * Initializes the detector
		 	 *
		 	 * @param {String} sId The id of the element in which to create the control element
		 	 */
		 	init: function() {

		 		createControlElement();
				_startDetector();
 			},
			/**
			 * Adds listeners to the ontextsizechange event.
			 * Returns the base font size
			 *
			 */
 			addEventListener:function(fn,obj,bScope) {
				aListeners[aListeners.length] = {
					fn: fn,
					obj: obj
				}
				return iBase;
			},
			/**
			 * performs the detection and fires textSizeChanged event
			 * @return the current font size
			 * @type {integer}
			 */
 			detect:function() {
 				return _detect();
 			},
 			/**
 			 * Returns the height of the control element
 			 *
			 * @return the current height of control element
			 * @type {integer}
 			 */
 			getSize:function() {
	 				var iSize;
			 		return el.offsetHeight;


 			},
 			/**
 			 * Stops the detector
 			 */
 			stopDetector:function() {
				return _stopDetector();
			},
			/*
			 * Starts the detector
			 */
 			startDetector:function() {
				return _startDetector();
			}
 	}
 }();

/*** end TextResizeDetector */

TextResizeDetector.TARGET_ELEMENT_ID = 'doc';
TextResizeDetector.USER_INIT_FUNC = function() {
	var iBase = TextResizeDetector.addEventListener(setTall, null);
};

Click link to show hidden text:
Code:

function expand(ele) {	
	if (document.getElementById('answer'+ele).style.display == '') 
		document.getElementById('answer'+ele).style.display='none';
	else
		document.getElementById('answer'+ele).style.display='';
	
	for (i=0;i <= 75;i++) {
		if (document.getElementById('answer'+i) != null && i != ele) document.getElementById('answer'+i).style.display='none';
	}
}
function collapse(ele) {
	document.getElementById('answer'+ele).style.display='none';	
}

Hi All I have a content slider, but it only seems to work in FF and not any of the other browsers. I am using Wordpress but its not a plugin

This is what I have:
page.php
Code:

<?php if (is_front_page()) { 
	include ("homepage-slider.php");
} ?>

homepage-slider.php
Code:

<!--  Inner content DIVs should always carry "contentdiv" CSS class  -->
<!--  Pagination DIV should always carry "paginate-SLIDERID" CSS class  -->
<div id="slider1" class="sliderwrapper">
 <div class="contentdiv">
  <div class="home-div1">
   <div class="home-div-logo"></div>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div2">
   <span></span>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div3">
   <span></span>
  </div>
 </div>
</div>
<div id="paginate-slider1" class="pagination" style="display:none;">
</div>

<script type="text/javascript">
featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
</script>

There are 2 other external files :
contentslider.js
contentslider.css

Click Here to see site.

If someone could help I would really appreciate it, been bugging me big time.
Cheers,
Jay

Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right?

The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout.

I have this in the heading:

Code:

<script LANGUAGE="JavaScript">

function ColorBlock(oRegion,sLinkID) 
{	
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	oRegion.className = "MenuSelected";	
	oRegion.style.cursor="hand";
	sLinkID.style.color = "black";
}

function UncolorBlock(oRegion,sLinkID) 
{
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	var oToEl = window.event.toElement;
	if ((oToEl && !oRegion.contains(oToEl))||!oToEl) 
	{
	sLinkID.style.color = "white";
	oRegion.className = "MenuUnSelected";
	}
}
</script>

And this is in the body.

Code:

<table class=MenuTable>
   <tr><td  OnMouseover="ColorBlock(this, Link4);"
            OnMouseout="UncolorBlock(this, Link4);"
            CLASS="MenuUnSelected" nowrap>
      <a STYLE="color:white" ID="Link4"
         OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
      <div style="width:144; cursor=hand; font-weight:bold;">
      Education
      </a></div></td>
    </tr>
</table>

I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas?

I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them.

The page is at www.adam-k-watts.com

<BODY onLoad="populateYearSelect()">
<font face="Verdana">
<title>owner Calendar</title>
</font>

<!--webbot BOT="GeneratedScript" PREVIEW=" " startspan -->

function populateYearSelect()
{
d = new Date();

curr_month = d.getMonth();

document.getElementById('arrivemonth').options[curr_month + 1].selected=true;


curr_year = d.getFullYear();

for(i = 0; i <= 3; i++)
{
document.getElementById('arriveyear').options[i] = new Option(curr_year+i,curr_year+i);
}

}
</script>

This is the function I am using and it works great in IE but all other browsers are not even loading the function at all. What must i do to make this work in other browsers? I need them to work more so in Firefox and Safari more so than Opera, Avant or Netscape.

So I've started learning Javascript some days ago.
Reading 'JavaScript Bible' Seventh Edition.

One of the things the book repeatedly says is:
use:
Code:

if(!document.getElementById()) return;

(and others like:
Code:

if(!document.createTextNode()) return;

)
to filter out all the browser who are in fact not supporting DOM.

As I'm using Safari (and Firefox for testing purpose) the 'document.getElementById()' and therefo DOM is supported.

Now, my browsers (both Safari and Firefox) get returned out of the javascript anyway.

as simple as:
Code:

if(!document.getElementById()) return;
document.write("testIt!");

the document.write doesn't get executed.

Now: I found a simple solutions which seems to work.... partially:
Code:

if(document.getElementById() == "undefined") return;
document.write("testIt!");

This seems to work for Safari, but Firefox still gets returned out of the javascript.

I could just omit the if statements to make it work altogether.
But that doesn't sound like the best method to me, because (so I've read)
it can crash browsers and such.

Now my question: Why are my browsers (or javascript for all I care) acting so strange?
Is there a way to make the if(!document.getElementById()) work?
or is it just a silly rule the writers of the JavaScript Bible made up?

Thanks in advance for any help :)

This works fine in IE only. Any thoughts.

function DisplaySelectedColor(cColor) {
var elToFill = document.getElementById(cFieldOnFocus)
elToFill.value = cColor;

switch(cFieldOnFocus){
case"Page-Background":document.getElementById("Page").style.backgroundColor =cColor;
break;

case"Page-Background":
document.getElementById("Page").style.backgroundColor =cColor;
break;

case"Outside-Border":
document.getElementById("main_container").style.borderColor =cColor;
break;

case"Logo-Background":
document.getElementById("logo_area").style.backgroundColor =cColor;
break;

case"Logo-Font":
document.getElementById("logo_area").style.color =cColor;
break;
case"Outside-Area-Background":
document.getElementById("main_container").style.backgroundColor =cColor;
document.getElementById("linktestdiv").style.backgroundColor =cColor;
break;

case"Outside-Area-Font":
document.getElementById("main_container").style.color =cColor;
document.getElementById("main_nav").style.color =cColor;
document.getElementById("right_column_content").style.color =cColor;
document.getElementById("linktestdiv").style.color =cColor;
document.getElementById("footer").style.color =cColor;
break;

case"Content-Background":
document.getElementById("main_content").style.backgroundColor =cColor;
break;

case"Content-Font":
document.getElementById("main_content").style.color =cColor;
break;

case"Footer-Background":
document.getElementById("footer").style.backgroundColor =cColor;
break;

case"Hyper-Link":
document.getElementById("activelink").style.color = cColor;
break;

case"Hyper-Link-Hover":
document.getElementById("hoverlink").style.color = cColor;
break;

case"Hyper-Link-Visited": document.getElementById("visitedlink").style.color = cColor;
break;
}
}

Thanks for any help. Can't figure it out.

I'm new to HTML and javascript programming, so I apologize if the solution to this is blatantly obvious.

I've got expanding text / menus in javascript on my page. These all work in IE with no problems that I can tell.

Unfortunately, when I view the page in Firefox, only the first expanding menu is actually a link and works - the rest do not even appear as links and don't work (and the expanded text isn't showing either).

You can visit the page at http://www.scienceadvice.ca/uploads/...s/may2010.html

Any help would be most appreciated!
Thanks!