JavaScript - Trouble With Checktime And Disp_popup() - Works In Ff, Safari, Not Ie8

ok so ive nearly finished the animated javascript in my site.
http://calumk.com/

to see the effect launch in chrome or safari, it works fine..
but its not working in Firefox
(and i havent tested IE.. if someone could, i would appreciate it)

i have no-idea why.. .
im using the http://berniecode.com/writing/animator.html library
which works fine in all browsers..

Any help would be apreciated...

I would post the code, but its probably easier if you just view source

I can't figure it out hoping for some help. The calendar pops up in IE but will not work in Firefox or safari.

The page can be viewed at http://www.lackawanna.edu/lib-form/e...nt-request.asp

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.

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.

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.

I had a client specifically request that no matter the size of the browser he wants it to immediately enlarge to full screen onload of the flash site. I put this in the header:
Code:

<script type="text/javascript"> 
window.moveTo(0,0); 
if (document.all) {window.resizeTo(screen.availWidth,screen.availHeight)} 
else {window.outerHeight = screen.availHeight; window.outerWidth = screen.availWidth} 
</script>

However, this specific code doesn't work in Safari on a mac. Is there any way I can make this compatible?

My webpage won't load at all in Safari, unless I open it as a link from anbother site or if I manually type in the index.html after the url.

when I take out the javascript though, it work perfectly.

I always works in Firefox though.

Any hints:


<script type="text/javascript" src="stuff/x_core.js"></script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="stuff/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-*******-*");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
var start_z_index = 3000;
function bringtotop( item )
{
item.style.zIndex = start_z_index++;
}

</script>

<script type="text/javascript" src="stuff/x_event.js"></script>

<script type="text/javascript" src="stuff/xenabledrag.js"></script>
<script type="text/javascript" src="stuff/xenabledrag2.js"></script>

the page in question is
http://martysimpson.com

In firefox search the source code for

Code:

<script language="javascript" type="text/javascript">
				<!--
					function submitacajoommod1(formname) {
						var form = eval('document.'+formname);var place = form.email.value.indexOf("@",1);var point = form.email.value.indexOf(".",place+1);
						if (form.name.value == "" || form.name.value == "Name") {
							alert( "Please enter your name." );return false;
						} else
				 if (form.email.value == "" || form.email.value == "E-mail") {alert( "Please enter a valid e-mail address." );return false;
						} else {if ((place > -1)&&(form.email.value.length >2)&&(point > 1)){form.submit();return true;
							} else {alert( "Please enter a valid e-mail address." );return false;}}}
				 //--> 
				</script><form action="http://martysimpson.com/component/acajoom/" method="post" name="modacajoomForm1">

I am on a mac using osx.4.11
firefox version 3.5 renders the above just fine.

Safari version 3.04 just does not show the javascript at all which then makes the input fields on the sign-up for newsletter simply not show up.

Any ideas?

This seems to work ok to serve css to Opera:
Code:

if(history.navigationMode){
document.write('<link rel="stylesheet" type="text/css" href="opera.css">') }

Is there a way to use
Code:

@media screen and (-webkit-min-device-pixel-ratio:0){}

to serve css to Safari? ie, without having to use it on each tag in the main stylesheet?

Tried
Code:

if(@media screen and (-webkit-min-device-pixel-ratio:0)){
document.write('<link rel="stylesheet" type="text/css" href="safari.css">') }

but I think it's missing an 'is true' phrase... ? and this one
Code:

if('@media screen' && '(-webkit-min-device-pixel-ratio:0)'){
document.write('<link rel="stylesheet" type="text/css" href="safari.css">')}

picks up Firefox and Opera as well.

Hi everyone,

I have a javascript which used to delete object(s) when the "delete' button is clicked. The script is working fine on IE, but on Safari it do not wwork at all (when I click delete button the webpage stays the same). I think the reason is Safari is using a different javascript interpreter which cannot parse javascript developed in IE properly, such as "fireEvent". Please help me to fix the script for it to work on Safari. Here is the script:


Code:

function DeleteClick()
        	{
        		var frmSWO = document.getElementById("form");
        		var answer = confirm("Do you really want to delete?")
				if (answer != 0)
				{
					frmSWO.action = "/domsWeb/mtd/doms/web/operation/controller/manageWorkOrder/DeleteJobOrImage.do";
        			frmSWO.method = "post";
        			this.form.fireEvent('onsubmit');
        			frmSWO.submit();
				}   		
        	}

I do appreciate any help.

hi, on my website: http://zend.warrencreative.com/gemini-group/index.html the carousel on the right is not showing unless you hover your mouse over?!

Can some one please help?

I am using : http://www.twospy.com/galleriffic/

Hey all,

I have a sentence generator running on a site. I am using sort to shuffle the array and pop to return the item. All is well, except Safari does not shuffle the array.

Here is the technique I am using:
Code:

<script type = "text/javascript">
var adj=["invisible", "running", "eating", "mad", "talking", "jumping", "living", "weird", "super"];
for (i = 1; i <= 4; i++){
adj.sort(function(){return Math.round(Math.random());});
document.write( [
 "Bob is" + " " + adj.pop() + "." + "<br>"
]);
}
</script>

In most browsers it generates 4 unique sentences. But in Safari it does not shuffle the array so it will always output:

Bob is super.
Bob is weird.
Bob is living.
Bob is jumping.

Any ideas as to what is happening?

Ok, so I have multiple issues, but this is the one I have not been able to work around. I'm building a simple website for personal use, so I know it only has to work on Safari for the iPad, a simple catalog of song charts for use on stage in my piano bar. Everything works GREAT in Safari/Chrome for Windows 7, but doesn't seem to quite work on Safari for iPad.

The issue I'm having is I've set up a DIV with two image buttons on it to execute a ScrollBy command to scroll the page up or down depending on the button. Everything works great on Safari for Windows 7, as in I can keep scrolling down the page by pressing the scroll down button multiple times. On iPad, it only works once, and will not continue to scroll. I've also tried it in Atomic Lite for iPad, with the same effect. I've mocked up a simple page, to take all the other variables out.

http://www.duelingpianopiano.com/jef...testscroll.htm

Eventually, I will be installing it he
http://www.duelingpianopiano.com/jef...testscroll.htm


The code in the head tag is below:
<code>
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2003, Sandeep Gangadharan -->
<!-- For more free scripts go to http://sivamdesign.com/scripts/ -->
<!--
var y1 = 510; // change the # on the left to adjuct the Y co-ordinate
(document.getElementById) ? dom = true : dom = false;

function hideIt() {
if (dom) {document.getElementById("layer1").style.visibility='hidden';}
}

function showIt() {
if (dom) {document.getElementById("layer1").style.visibility='visible';}
}

function placeIt() {
if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";}
if (document.all) {document.all["layer1"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";}
window.setTimeout("placeIt()", 10); }
// -->
</script>

<script language="JavaScript">
function scrollup(){
parent.scrollBy(0,-window.innerHeight-50);
}
function scrolldown(){
parent.scrollBy(0,window.innerHeight-50);
}
</script>
</code>

The code from the body tag:
<code>
<body topmargin="00" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFF00" bgcolor="#FFFFFF" "overflow: visible" onLoad="placeIt(); showIt()">

INSERT CONTENT HERE

<div id="layer1" style="position:absolute; right:0; width:50px; height:150px; visibility:hidden">
<font face="verdana, arial, helvetica, sans-serif" size="2">
<div style="float:left; background-color: ; padding:0px; border:0px solid black">

<img src="upbutton.png" width=50 height=75 border="0" align="left" onClick="scrollup();">
<img src="downbutton.png" width=50 height=75 border="0" align="left" onClick="scrolldown();">
</div>
</code>

Like I said, it works just as needed in Safari/Chrome for Windows 7, but not on iPad. Doesn't seem to work in IE 8, but that doesn't bother me. I have not tested in FireFox.

Your ideas are much appreciated. I'm not an Apple person, so maybe there is a well known issue with scrollBy and Safari for iPad, that I'm not aware of. If that is the case, if anyone has an idea for a direction for a workaround that would be great as well. Eventually, I would like to use the smooth scrolling scripts that I've seen out there, but that is way down the road. I'm more worried about the functionality as is.

Hello! I need a bit of help here, if possible.

This code seems to work well with FireFox. It doesn't work so well with IE or Safari though. The onMouseOver event works properly (changes the bg-color and the bg-image) but the onMouseOut event doesn't work (it changes the bg-color back to normal but not the bg-image).

I don't quite understand the problem.


Code:

<table cellspacing="0" cellpadding="0" width="230" height="20">
<tr>
<td class="font1" align="center" style="color:#2a78c6; background-color: #3c3c3c; background-image:url('images/nav-bg.png')" onclick="window.location.href='#'" cursor: pointer;
onMouseOver="this.style.color='c8c8c8'; this.style.backgroundColor='#2a78c6'; this.style.backgroundImage='url(images/nav-bg-hover.png)'"
onMouseOut="this.style.color='#2a78c6'; this.style.backgroundColor='#3c3c3c'; this.style.backgroundImage='url(images/nav-bg.png'">
LINK
</td>
</tr>
</table>

Here is the website... http://pmportfolio.net/tester/.

Also can't figure out how to get that drop-down menu working for IE, if anyone can lend a hand.
Also can't get the gradients to work with IE 8.

Hi all,

The following script is scrolling my page smoothly, as it is supposed to, in IE and FF however it is not working at all in Safari, any version. The page is:

www.christiantate.net

When working correctly, you click the nav buttons in the left sidebar, the page scrolls to the appropriate section.


The script:

Code:

$(function(){

    $('a[href*=#]').click(function() {
    
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        && location.hostname == this.hostname) {
        
            var $target = $(this.hash);
            
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            
            if ($target.length) {
            
                var targetOffset = $target.offset().top-100;
                
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                    
                return false;
                
            }
            
        }
        
    });
    
});

Any help would be greatly appreciated. Thanks