JavaScript - Cross-platform Issue

With Blogger you have to 'pre-install' the jQuery code into the main coding, which I already did. Installed correctly, per help of other online forums. The problem I'm having now, is the CSS & HTML is coming together beautifully, but the hover effects are not working on the two drop-down options with multiple links. It is supposed to yield this: Ardor | CSS MenuMaker

This is the proposed Javascript, that for some reason is not working.
Code:

<script type="text/javascript">
(function($){
$(document).ready(function(){

$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
  $('#cssmenu #menu-button').on('click', function(){
    var menu = $(this).next('ul');
    if (menu.hasClass('open')) {
      menu.removeClass('open');
    } else {
      menu.addClass('open');
    }); });
})(jQuery); </script>

The HTML portion is:
Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  z-index: 999;
  width: 750px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
  background: url('bg.png');
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li {
  float: left;
  display: inline-block;
}
#cssmenu.align-center > ul {
  float: none;
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li > a {
  padding: 18px 25px 21px 25px;
  border-right: 1px solid rgba(80, 80, 80, 0.12);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #a19393;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #ffffff;
  background: #f7f7f7;
  background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #a19393;
  right: 17px;
  top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
  border-top-color: #ffffff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 60px;
  z-index: 9999;
  padding-top: 6px;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
  -o-transition: top 0.2s ease, opacity 0.2s ease-in;
  transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ffffff;
  top: -4px;
  left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 20px;
}
#cssmenu ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #ffffff;
  top: 11px;
  left: -4px;
}
#cssmenu.align-right ul ul ul::after {
  border-right-color: transparent;
  border-left-color: #ffffff;
  left: auto;
  right: -4px;
}
#cssmenu > ul > li > ul {
  top: 120px;
}
#cssmenu > ul > li:hover > ul {
  top: 49px;
  left: 0;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
  padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
  left: 140px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 100%;
  opacity: 1;
}
#cssmenu ul ul li a {
  text-decoration: none;
  font-weight: 400;
  padding: 11px 25px;
  width: 140px;
  color: #a19393;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
  position: absolute;
  display: block;
}
#cssmenu ul ul li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #a19393;
  right: 17px;
  top: 14px;
  top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  border-left-color: transparent;
  border-right-color: #a19393;
  right: auto;
  left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    background: #ffffff;
  }
  #cssmenu > ul {
    display: none;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu.align-right > ul {
    float: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
    border-right: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #a19393;
    padding: 18px 25px 18px 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url('bg.png');
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul li:hover > ul,
  #cssmenu.align-right > ul > li > ul,
  #cssmenu.align-right ul ul ul,
  #cssmenu.align-right ul ul li:hover > ul {
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    box-shadow: none;
    padding-left: 35px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu #menu-button::after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    border-bottom: 2px solid #a19393;
    right: 25px;
    top: 18px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    right: 25px;
    top: 28px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
}

The CSS portion is:
Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  z-index: 999;
  width: 750px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
  background: url('bg.png');
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li {
  float: left;
  display: inline-block;
}
#cssmenu.align-center > ul {
  float: none;
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li > a {
  padding: 18px 25px 21px 25px;
  border-right: 1px solid rgba(80, 80, 80, 0.12);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #a19393;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #ffffff;
  background: #f7f7f7;
  background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #a19393;
  right: 17px;
  top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
  border-top-color: #ffffff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 60px;
  z-index: 9999;
  padding-top: 6px;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
  -o-transition: top 0.2s ease, opacity 0.2s ease-in;
  transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ffffff;
  top: -4px;
  left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 20px;
}
#cssmenu ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #ffffff;
  top: 11px;
  left: -4px;
}
#cssmenu.align-right ul ul ul::after {
  border-right-color: transparent;
  border-left-color: #ffffff;
  left: auto;
  right: -4px;
}
#cssmenu > ul > li > ul {
  top: 120px;
}
#cssmenu > ul > li:hover > ul {
  top: 49px;
  left: 0;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
  padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
  left: 140px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 100%;
  opacity: 1;
}
#cssmenu ul ul li a {
  text-decoration: none;
  font-weight: 400;
  padding: 11px 25px;
  width: 140px;
  color: #a19393;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
  position: absolute;
  display: block;
}
#cssmenu ul ul li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #a19393;
  right: 17px;
  top: 14px;
  top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  border-left-color: transparent;
  border-right-color: #a19393;
  right: auto;
  left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    background: #ffffff;
  }
  #cssmenu > ul {
    display: none;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu.align-right > ul {
    float: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
    border-right: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #a19393;
    padding: 18px 25px 18px 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url('bg.png');
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul li:hover > ul,
  #cssmenu.align-right > ul > li > ul,
  #cssmenu.align-right ul ul ul,
  #cssmenu.align-right ul ul li:hover > ul {
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    box-shadow: none;
    padding-left: 35px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu #menu-button::after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    border-bottom: 2px solid #a19393;
    right: 25px;
    top: 18px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    right: 25px;
    top: 28px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
}

It generates into a drop-down menu that uses jQuery as part of the effects (simple fade drop-down); any help is greatly appreciated. Java is not my forte

Hello,

I am trying to create an imageuploader for my forum hosted on domain forum.com (fictional domain name)

The image uploader is hosted on domain uploader.com (fictional domain name)

When the uploader is done i want info to be passed from the uploader to the texteditor on the forum using javascript.

I tried everything i could think of with document.getElementById but to no avail.

The element on the forum is clickableEditor.textarea

Is it possible and if so, can someone please help me out?

I have a web page with two frames, frame1 and frame2. I have javascript code and an unordered list (<ul><li>...) in frame1. In the javascript code I am creating a new <div> element, but I am creating it in the html of frame2. Then I am attempting to append the <ul> node from frame1 to the <div> of frame2. Internet Explorer does not appear to allow this, I am getting an error when I attempt this. Firefox seems to allow this. Is this a security issue in IE? If so, is there any way to do this in IE?

I am having some problems with some JS code that does not work cross browsers

Here is my code

Code:

<html>
<head>
	<link rel="STYLESHEET" type="text/css" href="../../include/css/tab.css">
	<script src="../../include/js/tabpane.js" type="text/javascript"></script>
</head>
<body>
<div name="objBody">
	<div id="tabpane">
		<div>
			<h2>Contact</h2>
			<div>
				<br>THIS IS CONTACTS TEXT
			</div>
		</div>
		<div>
			<h2>Contact2</h2>
			<div>
				<br>THIS IS CONTACTS TEXT2222
			</div>
		</div>
	</div>
</div>
	<script type="text/javascript">
		var tp = new TabPane(document.getElementById("tabpane"));
	</script>

</body>
</html>

CSS
Code:

.tab_pane_holder {
	width: 100%;
	background-color: #336699;
	font-family: verdana;
	font-size: 8pt;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-top: 1px solid black;
}
.tab_normal {
	border-right: 1px solid black;
	border-left: 1px solid white;
	border-bottom: 1px solid black;
	border-top: 1px solid white;
	padding: 5px;
	background-color: #5a7edc;
	text-align: center;
	/*width: 100px;*/
	height: 10px;
	color: white;
}
.tab_active {
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-top: 1px solid black;
	background-color: white;
	padding: 5px;
	text-align: center;
	/*width: 100px;*/
	height: 10px;
	color: black;
}
.tab_after_active {
	border-right: 1px solid black;
	border-left: 0px solid black;
	border-top: 1px solid white;
	border-bottom: 1px solid black;
	background-color: #5a7edc;
	padding: 5px;
	text-align: center;
	/*width: 100px;*/
	height: 10px;
	color: white;
}
.tab_before_active {
	border-left: 1px solid white;
	border-bottom: 1px solid black;
	background-color: #5a7edc;
	border-top: 1px solid white;
	text-align: center;
	padding: 5px;
	/*width: 100px;*/
	height: 10px;
	color: white;
}

JS
Code:

function TabPane(el)
{

	var tmp = this;
	this.element = el;
	this.tabs = new Array();
	this.divs = new Array();
	this.selected = null;
	for(var i = 0; i < el.childNodes.length; i++)
	{
		this.tabs[i] = this.element.childNodes[i].childNodes[0].innerHTML;
	}
	for(var i = 0; i < this.element.childNodes.length; i++)
	{
		this.divs[i] = this.element.childNodes[i];
	}
	for(var i = 0; i < this.element.childNodes.length; i++)
	{
		this.element.childNodes[i].removeChild(this.element.childNodes[i].childNodes[0]);
	}
	this.tabPane = document.createElement("div");
	this.element.insertBefore(this.tabPane,this.element.childNodes[0]);
	this.tabPane.className = "tab_pane_holder";
	for(var i = 0; i < this.tabs.length; i++)
	{
		var x = this.tabs[i];
		this.tabs[i] = document.createElement("span");
		this.tabPane.appendChild(this.tabs[i]);
		this.tabs[i].innerHTML = x;
		this.tabs[i].className = "tab_normal";
		this.tabs[i].style.cursor = "hand";
		this.tabs[i].onselectstart = function()
		{
			return false;
		}
		this.tabs[i].onclick = function()
		{
			tmp.showPage(this);
		}
	}
	for(var i = 0; i < this.divs.length; i++)
	{
		this.divs[i].style.display = "none";
		this.divs[i].style.width = this.element.style.width;
		this.divs[i].style.height = this.element.style.height;
		this.divs[i].style.overflow = "auto";
		this.divs[i].style.borderRight = "1px solid black";
		this.divs[i].style.borderBottom = "1px solid black";
		this.divs[i].style.borderLeft = "1px solid black";
	}
	this.showPage = function(el)
	{
		var x,y;
		for(var i = 0; i < this.tabs.length; i++)
		{
			if(el == this.tabs[i])
			{
				x = i;
			}
		}
		y = ((x-1) < 0)?0:(x-1);
		for(var i = 0; i < this.tabs.length; i++)
		{
			this.tabs[i].className = "tab_normal";
		}
		this.tabs[y].className = (y == x)?"tab_active":"tab_before_active";
		if(this.tabs[y+1])
		{
			this.tabs[y+1].className = (y == x)?"tab_after_active":"tab_active";
		}
		if(this.tabs[y+2])
		{
			this.tabs[y+2].className = (y == x)?this.tabs[y+2].className:"tab_after_active";
		}
		if(x == 0)
		{
			this.tabs[x].style.borderLeft = "0px solid black";
		}
		for(var i = 0; i < this.divs.length; i++)
		{
			var show = (i == x)?"block":"none";
			this.divs[i].style.display = show;
		}
	}
	this.showPage(this.tabs[0])
}

I am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out.
You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx
To start, go to the box for duty amount or freight charges and press enter
The following code is what I used to handle this event.
Code:

function handleKeyPress2(e,control)
{
    var evt = e ? e : window.event;
    var bt = control.id;
    if (bt)
    {
        if (evt.keyCode == 13)
        {
            //bt.click();
            jumptoNext(control, e);
            stopEvent(e);
            return false;
        }
    }
}
function jumptoNext(field, event)
{
    for (i = 0; i < field.form.elements.length; i++)
        if (field.form.elements[i].tabIndex == field.tabIndex + 1)
        {
            field.form.elements[i].focus();
            if (field.form.elements[i].type == "text") field.form.elements[i].select();
            break;
        }
}


function stopEvent(e)
{
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;

    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
}

Is there a method for breaking out of frames that's truly cross-browser compatible?

I've seen a ton of examples on how to do this, but I'm not sure which method works the best.

Thanks!

hi, in my page he http://www.mypubspace.com/dashtest/order.html

I would like this working Cross Domain and output in JSON?

Can anyone please help me?

thanks

code:
Code:

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var townRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		townRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			townRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				townRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	townRequest.onreadystatechange = function(){
		if(townRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = townRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
	townRequest.send(null);
}

function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
	countyRequest.send(null);
}



function townlistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		
		
	 if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxTownlist');
			var county = document.getElementById('county').value;
			var town = document.getElementById('town').value;
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
	ajaxRequest.send(null); 
}

function countylistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxCountylist');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
	ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

hi,

my working project (needs a proxy): http://www.mypubspace.com/dashtest/order.html

currently working through this tutorial, I have setup a proxy and saved it as proxy.php
http://www.wait-till-i.com/2010/01/1...query-and-yql/


I just need to put this piece of code in my JavaScript but not sure where?!

Code:

var url = $(this).attr('href');
    if(url.match('^http')){
      url = 'proxy.php?url=' + url;
    }

here is my project code
Code:

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var townRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		townRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			townRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				townRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	townRequest.onreadystatechange = function(){
		if(townRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = townRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
	townRequest.send(null);
}

function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
	countyRequest.send(null);
}



function townlistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		
		
	 if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxTownlist');
			var county = document.getElementById('county').value;
			var town = document.getElementById('town').value;
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
	ajaxRequest.send(null); 
}

function countylistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxCountylist');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
	ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

please help?!

Hi All,

I'm writing this post as there are alot of questions about Cross Domain AJAX request so i'm going to give an overview of the different ways and the best practices

Ok so there are 2 systems for this the key difference is how much control you have.

If you control the Requested site you can use Javascript Safe calling to that server, this is all done via a few Headers so to do this

all you have to do is send some headers from the page your requesting.

The first is tell the browser that the site the AJAX call is coming from is allowed this is done with

"Access-Control-Allow-Origin: "
Now this can be set to a wild card and allow all sites to access the page

"Access-Control-Allow-Origin: *"

Or you can say only a set server can
"Access-Control-Allow-Origin: mydomain.com"

This header allows GET requests but what if you need to post data to the site well you need to tell the browser that POST data is allowed to be sent

Access-Control-Allow-Headers: GET,POST

Now we run into the problem that sending post data the browser will send the header Content-Type but your server has not told the browser its allowed to send that header so
Access-Control-Allow-Methods: Content-Type

Will allow the header to be sent if you wish to send any other custom headers you have to make your server tell the browser its allowed to send them this is done by adding them as a comma delimited list via the "Access-Control-Allow-Headers" header

Now if you dont have control well then your back to using a script that is local to the AJAX script then sending the data via cURL or another connection method to the remote server

Please note i will be uploading examples in php later.

Example Scripts

Remote Server
PHP Code:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: GET,POST");
header("Access-Control-Allow-Methods: Content-Type");
$output = array(
    'response' => 'hello world!',
    '_GET' => $_GET,
    '_POST' => $_POST,
);
echo json_encode($output); 


Client Script -- please note built for Google Chrome
PHP Code:
var getExample = new XMLHttpRequest();
getExample.open("GET", "http://www.test.com/remote.php?test=set", true);
getExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); }
getExample.send(null);

var postExample = new XMLHttpRequest();
postExample.open("POST", "http://www.test.com/remote.php?test=set", true);
postExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); }
postExample.setRequestHeader("Content-Type", "x-www-urlencoded-data");// this is sent to prevent the requested server not saving post data
postExample.send("?set=test"); 


If you are unable to Edit files on the remote server you can use the link provided by Kor
http://www.troywolf.com/articles/

This will give you all the information you require to use php to talk to the remote server (basic proxy in effect)

So I was reading up on how to load and parse an XML file into an html page and I found through w3 a great tutorial with sample code:

http://www.w3schools.com/xml/xml_dom.asp

It appears to work fine on their website but when I try it from my desktop it doesn't work. So what I have is an html file with contents:
Code:

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

And then the xml file named "note.xml":

Code:

<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

I have no idea what I am missing or not seeing that is causing this not to work but if anyone knows I would appreciate the input. For the record I have tried this in chrome and ie.

Hi,

I have searched and searched...

Is there a way of using the Ajax httpRequest cross domain?

thanks

JavaScript code is not traversing via Iframe with Cross Domain.

Actually i was assigned with a project, to grab the top page URL, which has many Iframes, which are coming from different domains. The final sub domain has the JavaScript code, which has to grab the top page URL.

Can anyone help me out in this????