|
JavaScript - Cross-frame Question
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?
Similar TutorialsI have a website, http://www.marcusuav.com and I have the navigation menu setup so that a java-script drop down menu is shown when it is scrolled over. Sometimes when using firefox from different computers, users are complaining of misaligned navigation, when other times, the navigation can seem ok with firefox. I have no idea what to do here, I know add more scripting for this but what? Also, how do I make sure that other browsers show this navigation correctly?
Hi. I have a question about java script code. I'm creating a website with frames. Within the main page frame, there are tables in the main content page. When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want) So I wanted to know what code I put in my files and where to put it? Also, what pages does it need to be in? the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized? I need the main page to be resized to fit the browser as well as the pages in the frames to fit. Can you help? Thanks I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed. Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#eye_wrapper{/*This is a master div for easy placement of the others*/
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>
<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed
function visaOga(){
document.getElementById(eyes.splice(0,1)).style.display="block";
if(eyes.length==0){
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
dBort = function(){
document.getElementById("d").style.display="none";
eyes=["a","b","c","d"];
}
setTimeout(dBort,1500);//So last image is shown 1.5 sec
return;//Aborts - dBort -. Sequence can start over
if(document.getElementById("d").style.display=="none"){
startAnim;//Strts sequence if last image invisible
}
}
}
</script>
</head>
<body>
<!--Images in own div invisible at start-->
<div id="eye_wrapper">
<div class="eyesPos" id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>
</body>
</html>
guys help pls.. i need to pass the data in the textfields from the left frame to the textfields in the right frame of my frameset. (ex: dslnum of frame1 will be pass to txtDSLTN of frame2) frame1: http://www.mediafire.com/?hge1ws29mdhmu7e frame2: http://www.mediafire.com/?k83cb64wbpskw97 thanks in advance! I have a page called answersheet.html which I am popping up using a function called NewWindow; Code: <a href="javascript:myVoid()" onclick="NewWindow('/images/101online/practicetest1/listensubtest1/answersheet.html','PopUp','625','400','no',''); return true;">
It works fine. answersheet.html consists of two frames, the top frame containing a button with onclick="myprint()" to print out the bottom frame: Code: <script type="text/javascript">
function myprint() {
window.parent.bottom.focus();
window.print();
}
</script>
It does the job in Internet Explorer, but Firefox and Chrome only print the top frame with the print button! Is the function myprint() IE only coding? If so, what should I use? Hi, I've a photo gallery with a navigation panel made of little buttons with numbers which, after clicking on them, load the relative photo on the right hand side. This is the page: http://www.newtreedesign.co.uk/test/douglas/_test.html When a number from the navigation panel is clicked, it should turn purple. It all works fine in safari/mac latest versions but there are problems under IE/Win and FireFox/Win, the other 2 environments I'm keen to have compatibility. Could please anyone suggest me what corrections I've to make on the code in order to be sure I've this compatibility issues sorted? Thank you paquito Hello all, I've got a cross browser issue with two javascript codes I'm using within a website: http://www.thewursteditions.com Someone just pointed out today that they don't see my gallery (galleria javascript) nor my rollover on the size guide. The site works great on the iphone, firefox, and safari, but not in Internet Explorer. I really have no idea what the issue could be as I don't do this too often but I would greatly appreciate any of your help! Thanks 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 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'm having a problem with http://taxlienagents.com/ and how it is displaying in Google Chrome. When I open the site in Google Chrome, the center Tab Area seems to cover the main text above it. If you take a look at http://img651.imageshack.us/img651/8869/taxliensite.jpg, you should be able to see what I am talking about versus when opening the site in FireFox. I tried playing around with the Z-Index, but that didn't seem to fix it. The other issue that I seem to be having is with rolling over the buttons ("How to," "Coaching," and "Done for You") the highlight only covers about 2/3 of the button, I think this is an issue with FancyBox.
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! 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;
}
ok, so i am working on a type of Option Box that is heavily formatted with CSS and animated using JS $fx() The $fx framework works fine on all browsers, and i have only used fairly simple code, and yet my page functions perfectly on Chrome and Safari. but will not work in Firefox or IE (Firefox does nothing, and IE has a couple of css issues and doesnt work either...) http://calumk.com/else/blogpoststuff...ng_Option_Box/ if anyone could help me i would really appreciate it. (obviously view in Chrome or safari to see how it is meant to respond) Hi guys. I want to create login form similar like facebook login which web owner can put the script and it will become login for their web and also it will auto register at their web. I believe it need to use javascript because javascript is cross platform. Can someone give me a clue for me to start on? 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???? 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. |
|||||||