Learn VBA & Macros in 1 Week!

JavaScript - Layer Questions About Compatibility

Full Excel VBA Course - Beginner to Expert

Layer Questions About Compatibility	View Content

Hello

I have this var set:

var floatingMenu =
{
targetX: -270 ,
targetY: 13,

hasInner: typeof(window.innerWidth) == 'number',
hasElement: document.documentElement
&& document.documentElement.clientWidth,

menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};

I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that?

Also, can i avoid this IE's warning about running active x content? Come on... This is a javascript for making a floating menu, there's no security issue whatsoever!

Full Excel VBA Course - Beginner to Expert

Mac & Pc Compatibility For Javascript....

Similar Tutorials

View Content

Hi, I am not very experienced in programming, but I've noticed I keep running into a problem. I've got a particular javascript coding and for some reason it is only working for my mac visitors, but not PC.

What can I do to make this coding compatible for both? Where might the issues be?

thanks

Js/iframe Compatibility In Ie8?

Similar Tutorials

View Content

Hi--

I have the following javascript which is setting up a quiz (delivered from off-site) into an iframe. The javascript code determines if the visitor has Flash or not, and then sets up the page, on button click, to deliver the appropriate version of the quiz into the iframe.

For some reason, this code works in everything (it seems) except IE8. In IE8 without Flash, something (perhaps in the code itself?) kicks the viewer into a blank page. If someone could just test the URL below and tell me if they get the same problem, that would help! Maybe (I am thinking) it is because the computer I tested it on did not have JS enabled? Or maybe there is something in the code? Or maybe with the quiz delivered from off-site?

Here is the code:
Quote:


<article id="page_7c">
<div class="box" id="page1">
<a href="#page_1" class="close"></a>
<div class="wrapper pad_bot1">
<div class="grid_16 prefix_4">

<p></p>
<div id="tester">

</div>

</div>
</div>
</div>
</article>


<SCRIPT>

</SCRIPT>
And here is the URL of the site:

Quote:
http://www.ABCsofUFOs.com
If you click on the link bottom left ("Test Your Knowledge of UFOs") that should send you to the appropriate version of the quiz.

Many thanks for any help!

Ie Compatibility Issue

Similar Tutorials

View Content

EDIT: i think the problem was i had an html element named 'comment' so IE was getting confused when i made a js variable 'comment'
(don't use IE it is the worst browser)

i am in the process of debugging a website, it works wel in Google Chrome and firefox but not in IE
i am putting all the relevant code below.
this is in the head tag, and is the only JavaScript executed when the debugger show the error
Code:

function first_run(){
answer_state=document.getElementById('state');//set node for 'show_answer' function
answer_ab=document.getElementById('ab');//set node for 'show_answer' function
answer_capitol=document.getElementById('capitol');//set node for 'show_answer' function
answer_next=document.getElementById('next');
comment=document.getElementById('comment')//line marked with error
ui=document.getElementById('UI');//sets 'ui' to form location
score_right=document.getElementById('right');//returns null
score_wrong=document.getElementById('wrong');
score_right=score_wrong.previousElementSibling//score_right work around
score_show_ans=document.getElementById('show_ans');

runs above code on page load
Code:

<body onkeydown="if (event.keyCode == 13){check()}" onload="first_run()">

in body tag, node that erred line refers to.
Code:

<div id=comment>
</div>

the error message in IE's developer tools debugger is "Object doesn't support this property or method" States javascript.html, line 395 character 1"

i've done all of my coding in Chrome and have no expirence in IE's syntax, any ideas what the problem is?

Compatibility Problems With Ff.

Similar Tutorials

View Content

Hi, I have a piece of code that when executed will change the .onclick and .value of a button,

Code:

/* JAVASCRIPT */

function selectAllDays() {  
	var len = document.booking.days.length;
	for (var i=0; i<len; i++) {
		document.booking.days[i].checked = true;		
	}
	changeDaysButtonD();  
}

function deselectAllDays() { 
	var len = document.booking.days.length;
	for (var i=0; i<len; i++) {
		document.booking.days[i].checked = false;		
	}	
	changeDaysButtonS();  
}

function changeDaysButtonD() {   
	var obj = document.getElementById('selectall');
    obj.onclick = deselectAllDays;
	obj.value = "Deselect All Days";
}

function changeDaysButtonS() { 
	var obj = document.getElementById('selectall');
    obj.onclick = selectAllDays;
	obj.value = "Select All Days";
}

Code:

HTML

<input type="button" id="selectall" name="selectall" value="Select All Days" onclick = "selectAllDays();"><br/>
<input type="checkbox" name="days" value="Monday">Monday<br/>
<input type="checkbox" name="days" value="Tuesday">Tuesday<br/>
<input type="checkbox" name="days" value="Wednesday">Wednesday<br/>
<input type="checkbox" name="days" value="Thursday">Thursday<br/>
<input type="checkbox" name="days" value="Friday">Friday<br/>

So, when the button is initially clicked it runs the selectAllDays() function, which will also run the function to change the state of the button to "Deselect all days" however when I run this in FireFox it gives the error of
Error: selectAllDays is not defined
Source File: http://davidc.herobo.com/groupsite/booking.html

Though in Internet Explorer this runs fine and selects/deselects the checkboxes without any problem.

I'd like to know if anyone knows why it won't work in FireFox?

Help would be much appreciated,
Thanks, Dave.

Draggable Css Layer

Similar Tutorials

View Content

Hi i am trying to create a draggable css layer.

Code:

<html>
<head>
<style type="text/css">
#box {position:absolute;
left:150;top:150;
background-color:blue;
height:100;
width:100;}
</style>
<script type="text/javascript">
       function start(){
var count = cnt.value
var count=0;
while (count=0)
  {
var x;
var y;
var layer = document.getElementById('box');
x=window.event.clientX;
layer.style.left=x;
y=window.event.clientY;
layer.style.top=y;
}
}
            function stop(){
var count = cnt.value;
count = 1;
}

            function shw(){
alert(cnt.value);
}
</script>
<body>
<input type="hidden" name="cnt" value="1">
<div id="box" onclick="start()" onrelease="stop()">
</div>
<br /><br /><br /><br /><br /><br /><br />
<input type="button" name="show" value="Show" onclick="shw()">
</body>
</html>

It doesn't seem to work though. The loop never seems to start.

btw i was also thinking couldn't i just put
while(box.clicked)
{

or something along those lines.

Thanks

Ie8 Compatibility Javascript Code

Similar Tutorials

View Content

Hi,
I have an application in which a popup window is opened from main window, from that popup window on clicking a button, the control goes to a servlet and after some calculations the control returns to the popup window. This works fine in IE6. But the same code behaves improperly in IE8. In IE8 on clicking button on popup window instead of control coming back to same popup window a new popup is opened. Can anybody help me on this?

Browser Compatibility And Javascript

Similar Tutorials

View Content

Dear all, can somebody help me with browser compatibility and this code. Working fine in Opera and Firefox, but do not working in Internet Explorer and Chrome. With one form working fine in every browser, but when I put second form it stops to work in Explorer and Chrome.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
function showDiv(divIndex) {  var f=document.forms[0];  var d=f.getElementsByTagName('div');
for(i=0;i<d.length;i++)d[i].style.display='none'
d[divIndex].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select onchange="showDiv(this.value); ">
<option value="0" selected>option 1</option>
<option value="1">option 2</option>
<option value="2">option 3</option>
</select>


<div style="display:block;"><form action="001.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 1...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

<div style="display:none;"><form action="002.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 2...</option>
<option value="AK">California</option>
<option value="AL">Colorado</option>
<option value="AR">Connecticut</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

<div style="display:none;"><form action="003.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 3...</option>
<option value="AK">Massachusetts</option>
<option value="AL">Maryland</option>
<option value="AR">Maine</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

</form>
</BODY></HTML>

Browser Compatibility Issue

Similar Tutorials

View Content

Hi i have a php file that contain below content and it works great on firefox but not in IE8

actually IE8 doesnt reload the div

Code:

<?php
print <<<HERE
<script type="text/javascript">
$(document).ready(function() {
$("#loader").load("content.php?uname=$uname");
var refreshId = setInterval(function() {
$("#loader").load("content.php?uname=$uname");
}, 5000);
});
</script>
HERE;
?>

<div id="loader"></div>

also i tried like this and same thing happens

Code:

<?php
print <<<HERE
<script type="text/javascript">

setInterval("calldiv()", 5000);
function calldiv(){
$("#loader").load("content.php?uname=$uname");
}

</script>
HERE;
?>
<div id="loader"></div>

any help would be great

Thanks.

Javascript Compatibility Problem

Similar Tutorials

View Content

Hello, so i got one question. I have this Java Script of old facebook chat which works great at chrome and firefox with greasemonkey but when i tried to put this at IE9 with IEPro plugin , facebook just went crazy. Cant open chat at all, also all site is broken. What is problem with this script at IE,Safari or Opera?
Maybe you can help me thx.

You can find that script here : www.fu.sk/107159.user.js

Shim Layer For Bind()

Similar Tutorials

View Content

I have a script that runs a sprite animation on the canvas, adapted from he http://www.kadrmasconcepts.com/blog/...-canvas-style/. After wondering why it wouldn't work on Safari or older versions of Firefox, I saw this: https://developer.mozilla.org/en/Jav.../Function/bind and implemented the suggested shim.

However, I'm still getting some errors that I can't explain for the life of me. To make this easy for everyone, I threw it in a jsfiddle: http://jsfiddle.net/zachgold/AL3AQ/. Any help would be appreciated.

Thanks!

Zach

Settimeout And Elemid Compatibility Problem

Similar Tutorials

View Content

Hello all.

I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one. any ideas?

here is the HTML:

Code:

<div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div>
<div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div>
<div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div>
<div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div>

here is the JavaScript:
Code:

function blackit(elemID)
{
document.getElementById(elemID).style.backgroundColor="#000";
}

function fadeit(elemID)
{
setTimeout("document.getElementById(elemID).style.backgroundColor='red'", 1000);
}

there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second.

thanks

Newbie Stuck On Compatibility Problem

Similar Tutorials

View Content

I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped.

In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth).

The obvious question: HOW DO I FIX IT?!!?

Original script was found at: http://www.caodesigns.com/blog/tutor....php?postID=33

My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box).

But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs.

I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question.

If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it.

Noob Javascript Ie Compatibility Problem

Similar Tutorials

View Content

I am trying to dynamically add rows to a table when the user clicks a button. here my function

Code:

function addFocusArea()
{
	if(addTlFocusAreaCount <= 5)
	{
		//Create new Title row
		var titleRow = document.createElement("tr");
		var titleCol = document.createElement("th");
		var titleText = document.createTextNode("Additional Focus Area " + addTlFocusAreaCount);
		titleCol.appendChild(titleText);
		titleRow.appendChild(titleCol);
		document.getElementById("focusTable").appendChild(titleRow);		
			
		//Create new category row
		var categoryRow = document.createElement("tr");
		var categoryCol = document.createElement("td");
		var categorySelect = document.createElement("select");
		var categories = document.getElementById("<%=DecisionToolKeys.PRIMARY_FOCUS%>");
                
                //copy a dropdown menu that is already existing on the page
		for(var i=0; i<categories.length; i++)
		{
			var option = document.createElement("option");
			option.value = categories[i].value;
			option.text = categories[i].text;
			categorySelect.options.add(option);
		}

		categoryCol.appendChild(categorySelect);
		categoryRow.appendChild(categoryCol);
		document.getElementById("focusTable").appendChild(categoryRow);			
			
		addTlFocusAreaCount++;			
	}

	else
	{
		alert("You cannot add more than five additional practice areas.");
	}
}

And here is my button
Code:

<input type="button" value="Add Focus Area" onclick="JavaScript:addFocusArea()"/>

This is working in Firefox and Chrome, but not IE 8. Any clue as to why?

Thanks,
Nick

Flickering Issue With Floating Layer

Similar Tutorials

View Content

I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously.
The html page is as follows:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JAVASCRIPT TESTING</title>
<script language="javascript" type="text/javascript" src="FloatingMenu.js">
</script>
<link rel="stylesheet" type="text/css" href="formatting.css">
</head>
<body>
<div id="header1">
<b><font color='Red' size='6pts' style='letter-spacing: 2px;'>Floating Layer Testing</font></b>
</div>


<div id="content">
<p>Like many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create.

Signing Scripts
In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to.

With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client.

A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it.

Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following:

Unambiguously assigns ownership of the script to a person or organization.

Allows an HTML page to use multiple signed scripts.

Places the signed script into a Java Archive (JAR) file.

Places the source of the script in the JAR file.

Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script.

.</p>
</div>


<div id="movable">
<b>Please Login or Register</b>
</div>
</body>
</html>

JAVASCRIPT FILE IS AS FOLLOWS:

Code:

var startY=0;
var currY=startY;
var destY=currY;
var timerID=0;
var tmr_on=0;
var temp;
function floatMenu() {
	clearInterval(timerID);
	tmr_on=0;
if (document.documentElement.scrollTop) {
temp=document.documentElement.scrollTop; }
else {
temp=document.body.scrollTop; }
destY=temp+startY;
startFloat();
}

function startFloat() {
if(currY==destY) {
clearInterval(timerID);
tmr_on=0;
}
else if(currY<destY) {
currY+=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
 timerID=setInterval("startFloat()",10);
 tmr_on=1;
 }
}
else if(currY>destY) {
currY-=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
 timerID=setInterval("startFloat()",10);
 tmr_on=1;
 }
}
}
window.onscroll=floatMenu;
window.onresize=floatMenu;

AND CSS FILE IS AS FOLLOWS:

Code:

#header1 {
background-color: #66ccff;
border: 1px solid #66ccff;
margin-bottom: 5px;
}

#content {
padding: 10px;
border: 1px solid #66ccff;
margin-bottom: 5px;
margin-left: 21%;
height: 800px;
}

#content a {
text-decoration: none;
color: blue;
display: block;
}

a {
text-decoration: none;
color: blue;
}

#movable {
position: absolute;
width: 20%;
background: #fdcfcc;
top: 0px;
left: 0px;
}

At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable.
Problem is coming on both IE and FF.Any help seriously appreciated...

Coffeecup Form In Lightbox Or Layer?

Similar Tutorials

View Content

Hi. I've used CoffeeCup Form Builder to create a nice form for my site and would like to have it open in a lightbox/thickbox, or open in a layer? (If it matters, do have an iFrame on the page, FYI).

I've got LightBox Gone Wild to work nicely, except it won't load the form. If I open the HTML page (directly) the form works fine.

This is the code on the HTML page:

Code:

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent"></div>
<script type="text/javascript">
var so = new SWFObject("form.swf", "form.xml", "653", "527", "7,0,0,0", "#ffffff");
so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
so.addParam("quality", "high");
so.addParam("scale", "noscale");so.addParam("salign", "lt");
so.addParam("wmode", "transparent");
so.addParam("FlashVars", "xmlfile=form.xml&w=653&h=527");
so.write("flashcontent");</script>

Thanks in advance...

----

Okay. I used CoffeCup Form Builder for my form and wanted it to open like the examples at their website: http://www.coffeecup.com/form-builder. Having it on the page or in a pop-up was okay, but I like the 'LightBox' effect.

Anyway, someone did help me and I wanted to share the code in case others can use it. It uses an iframe that opens in a new layer. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planing is to use the CSS and JS in an external file rather than in the <head>:

Code:

<style type="text/css">
div#OVERLAY 
{
    position: absolute; top: 0px; left: 0px;
    width: 100%; height: 1200px; 
    background-color: black;
    -moz-opacity: 0.70; 
    opacity: 0.60; 
    filter: alpha(opacity=70); 
    z-index: 10;
    display: none;
}
div#FORMHOLDER
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: transparent;
	text-align: center;
	z-index: 15;
	display: none;
	margin: 0px;
	padding: 0px;
	right: 0px;
	bottom: 0px;
}
div#FORMHOLDER span.closer
{
    padding-left: 100px; padding-right: 100px;
    color: #E5BC9D;
    background-color: black;
}
div#FORMHOLDER iframe
{
	width: 653px;
	height: 527px;
	margin: 0px;
	padding: 0px;
	background-color: #000;
}
</style>

<script type="text/javascript">
function overshow()
{    
    var hold = document.getElementById("FORMHOLDER");
    hold.style.display = "block";
    var stop = parseInt(document.body.scrollTop);
    if ( isNaN(stop) ) stop = 0;
    if ( stop == 0 ) 
    {
        var stop = parseInt(document.documentElement.scrollTop);
        if ( isNaN(stop) ) stop = 0;
    }
    hold.style.top = stop + 50 + "px";
    document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
    document.getElementById("OVERLAY").style.display = "none";
    document.getElementById("FORMHOLDER").style.display = "none";
}
</script>

Next, use the <div> and an <iframe> tag in the fist line after the <body> tag:

Code:

<div id="OVERLAY"></div>
<div id="FORMHOLDER">
   <span class="closer" onclick="overoff()">Click here to close</span><br />
   <iframe src="form.html" scrolling="no" frameborder="0"></iframe>
   <br /><span class="closer" onclick="overoff()">Click here to close</span>
</div>

Finally, when you link to the form page CoffeeCup creates, the code is:

Code:

<a href="#" onclick="overshow(); return false;">link</a>

I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers!

Javascript Hover Add Image Layer?

Similar Tutorials

View Content

Ok. Basically, I will have images, about 150x100 that are all different.

They will be displayed on a page in groups of 4.

I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha.

To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered.

I know this part of the code, but I don't know what to put inside it:

Code:

$(document).ready(function(){
	$("img").mouseenter(function(){
		//add image on top of this image
	})
	$("img").mouseleave(function(){
		//remove covering image
	})
})

What should I replace the comments with?

Thanks

Firefox, Opera, Safari, Netscape Compatibility

Similar Tutorials

View Content

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



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.

Struggling With Floating Div Layer In Internet Explorer

Similar Tutorials

View Content

Hello,
I am using JavaScript to show/hide a floating div layer. The code i have works perfectly in Google Chrome but will not display at all in Internet Explorer. Any solutions would be greatly appreciated - coding below and attached:
Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>James</title>
		<script type="text/javascript" language="JavaScript"><!--

function HideContent(d) {
	if(d.length < 1) { return; }
	document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
	if(d.length < 1) { return; }
	document.getElementById(d).style.display = "block";
}

function ReverseContentDisplay(d) {
	if(d.length < 1) { return; }
	
	// Hide everything but the one we want to toggle
	HideAllContent(d);
	
	if(document.getElementById(d).style.display == "none"){
		document.getElementById(d).style.display = "block";
	}else{
		document.getElementById(d).style.display = "none";
	}
}

/**
 * Hides all the content panes on the page, they must be listed in arr
 * @param except - The id of a div not to hide
 */
function HideAllContent(except){
	// Make an Array with all the id's of the divs we want to hide
	var arr = [
			
				"uniquename1",
				"uniquename2",
				"uniquename3",
				];
	// Loop through the Array and call HideContent to hide them
	for( var i=0; i<arr.length; ++i ){
		if( arr[i] != except )
			HideContent( arr[i] );
	}
}
//--></script>
	</head>
	<body>
		<h1>Showing and hiding divs with javascript</h1>
		<p>Click the links below to show or hide the appropriate divs.</p>
		
		<!--
			Links that you want to click.
			Use onclick to call the ReverseContentDisplay() javascript method.
			This will toggle the display property div of the name passed into
			it to "block" or "none".
		-->
		<a href="#" onclick="ReverseContentDisplay('uniquename1')">link 1</a>
		<a href="#" onclick="ReverseContentDisplay('uniquename2')">link 2</a>
		<a href="#" onclick="ReverseContentDisplay('uniquename3')">link 3</a>
		
		<!--
			The divs that you want to hide.
			Each div has its css display property set to "none" so they are
			hidden when the page first displays.
		-->
		<div id="uniquename1" style="display: none;">
			<p>Div 1</p>
		</div>
		<div id="uniquename2" style="display: none;">
			<p>Div 2</p>
		</div>
		<div id="uniquename3" style="display: none;">
			<p>Div 3</p>
		</div>
	</body>
</html>

Onmouseout On Div Tag--bubbling Problems, Cross Browser Compatibility?

Similar Tutorials

View Content

Hi all, I am having trouble with an onmouseout event on a div tag. I have read about bubbling a little, and put to use some information I found on the internet, but I still can't overcome a few problems.

What I am trying to achieve is that the addStyleDiv function will only call the addStyle function if the user mouses out of the 'rollover' div. As the code stands, the addStyleDiv function is called when any element within the div is moused out (this is expected--bubbling) and the addStyleDiv function handles these instances properly. However, when mousing out of the rollover div, the rollover div is never the source element that triggers the onmouseout event. There is no empty space in the rollover div, that is, it is entirely filled with elements, so that could be part of the problem, but shouldn't bubbling cause the event to be triggered twice-once for the internal element and once for the div itself?

I would also be interested in knowing if the method by which I am handling the events is reliable on most browsers or if someone with more expertise can offer a suggestion to increase cross browser compatibility.

Thanks a million in advance.

HTML
Code:

<div id="rollover" onmouseout="addStyleDiv(event,'feat_main');">
<ul id="featured">  
<li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li>
<li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li>
<li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap&trade;</a></li>
<li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a  href="equipment/parts_washing/hurricane">Hurricane</a></li>
<li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li>
</ul>
<div id="flyout" >
    <ul id="feat_main">
        <h1>Midbrook</h1>
        standard page no rollover
    </ul>
    <ul id = feat_medical>
        <h1>Medical</h1> 
    </ul>
    <ul id = feat_fabrication>
        <h1>Fabrication</h1>
    </ul> 
    <ul id = feat_capsnap>
        <h1>CapSnap</h1>
    </ul>
    <ul id="feat_hurricane">
        <h1>Hurricane</h1>
    </ul>
    <ul id = feat_media>
        <h1>Media</h1>
    </ul>   
</div>
</div>

JS
Code:

function addStyleDiv(e, x)
{
   if (!e) var e = window.event;
   var tg=(window.event) ? e.srcelement : e.target;
 
 if (tg.id != 'rollover') 
 {
     alert('leaving '+tg.tagName + ' '+tg.id);
     return;
 }
   /*These next two lines are NEVER reached no matter what*/
   alert('It must have finally seen rollover');
   addStyle('feat_main');
}
 
function addStyle(x){
 removeAllStyle();
 document.getElementById(x).style.display="block";
}
function removeAllStyle()
 {
     removeStyle('feat_main');
     removeStyle('feat_hurricane');
     removeStyle('feat_fabrication');
     removeStyle('feat_capsnap');
     removeStyle('feat_medical');
     removeStyle('feat_media');
 }

Safari Compatibility Issue With Dynamic Population Of Selects

Similar Tutorials

View Content

Anyone have any issues with Safari in relation to javascript compatibility?

I have a page that loads dynamically through user selections as follows:

There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection.

When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box.

The data is all coming from prepopulated javascript arrays.

This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely.

On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer?

Thanks!!

Dmxsmith