|
JavaScript - Iframe/doctype Problems In Mozilla
This is a problem that i have googled for hours and can't find an answer so i resort to asking on here because i found similar question on here.
I have a page i use, It has an iframe on it but it is not regular iframe, The iframe has a resizing script that resizes the height of the iframe to the height of the page being viewed. Using this script it eliminates scrolling! This has all been working out great but then i realise for it to function properly in IE i need to add a doctype, When i add a doctype to it it functions properly in IE but it doesn't work in firefox. In firefox the frame doesnt resize and it is like 50px height. I have tried a bunch of different doctypes and they don't work. This is the problem page (with doctype - works properly only on IE): http://ww-chat.com/games.php This is the page without a doctype (Works properly only on FIREFOX - not IE): http://ww-chat.com/games-nodoctype.php This is the code that i use for the iframe: Quote: <iframe id="games" name="games" src="http://ww-chat.com/games/" frameborder=0 scrolling=no width="990" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('games');}"></iframe> This is the script that it uses to resize the frame: http://ww-chat.com/iframeresize.js I have other iframes on my website which don't use the resize script and they work perfectly fine (with doctype!). Thanks, Worldwideebm Similar TutorialsPlease take a look at the Lightbox Content link on my site. It opens fine at first (blue bit is an iFrame) but then when you close it and reopen it, the iframe content doesn't load? click here to go to site Can anyone suggest how to fix this please. Hey, might be a stupid question, but which is the best DOCTYPE to use with JavaScript? Just validating now and its telling me that the<body onLoad="startclock()"> onLoad attribute is not supported.... Anyone understand what it's asking me to do? Thanks I was roughing out a feature I want to add to my site in notepad with no doctype declared. I got it just how I wanted, then realized it didn't work in IE. I added a doctype, it validates at xhtml strict, but it killed IE, while it started adding round corners in IE which wasn't working with no doctype...but now my JS isn't working... So I lost functionality of the JS while adding the round corner style that wasnt working when the JS was mostly working... FF works fine every damn way of course.... I uploaded it to http://pugetsoundtraining.com/Portfolio/spriteTest.html Also when it was functioning, the lower set of icons background wasn't showing. You can load that link ^^ in FF to see exactly what I'm going for....it works in ff css: Code: body {
margin: 0px;
font-family: "Georgia", serif;
}
/* Give headings their own font */
h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */
#content {
position:absolute;
top:70px;
left:500px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear: both;
text-align: center;
border: 1px solid #333;
}
.wideBox h1 {
font-weight: bold;
margin: 0px;
color: #666;
font-size: .5em;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
// margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 250px;
height: 120px;
border: 3px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div */
float: left;
-moz-width:35px;
-moz-height:35px;
width: 35px;
height: 35px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 5 5 5 5px;
// background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0px;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 5px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
#card1.ui-draggable{background:url(iconSprite2.png) 0px 0px no-repeat;}
#card2.ui-draggable{background:url(iconSprite2.png) -36px 0px no-repeat; }
#card3.ui-draggable{background:url(iconSprite2.png) -73px 0px no-repeat; }
#card4.ui-draggable{background:url(iconSprite2.png) -108px 0px no-repeat; }
#card5.ui-draggable{background:url(iconSprite2.png) -143px 0px no-repeat; }
#card6.ui-draggable{background:url(iconSprite2.png) -178px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -213px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -250px 0px no-repeat; }
#card8.ui-draggable{background:url(iconSprite2.png) -285px 0px no-repeat; }
#card9.ui-draggable{background:url(iconSprite2.png) -319px 0px no-repeat; }
#card10.ui-draggable{background:url(iconSprite2.png) -353px 0px no-repeat; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
#displayCardNum {
height:400px;
width:500px;
position:absolute;
top:80px;
right:25px;
}
#score {
width:200px;
font-size:25px;
height:50px;
position:absolute;
top:300px;
right:300px;
}
#status {
width:300px;
font-size:25px;
height:50px;
position:absolute;
top:150px;
right:200px;
}
html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 1.0 Strict validated</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
<div id="reset">
<h2>Reset</h2>
<button onclick="init()">Reset?</button>
</div>
</div>
<div id="displayCardNum">Error Msg: </div>
<div id="score">Sco <span id="myTextToShow"></span>
</div>
<div id="status"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
javascript: Quote: var correctCards = 0; var points = 0; $( init ); function init() { // Hide the success message $('#successMessage').hide(); $('#successMessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); //Card Game Below // Reset the game correctCards = 0; points=0; document.getElementById('score').innerHTML = "Sco "+ points; var status; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); // Create the pile of shuffled cards var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; numbers.sort( function() { return Math.random() - .5 } ); for ( var i=0; i<10; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true } ); } //Create sprite background offset for card slots var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-250px 0px', '-285px 0px', '-319px 0px', '-353px 0px' ]; // Create the card slots var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ]; for ( var i=1; i<=10; i++ ) { $('<div style="background:url(iconSpriteGrey.png)' + pos[i-1] +' no-repeat;>"' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } } //Handle the card drop function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); // If the card was dropped to the correct slot, // change the card colour, position it directly // on top of the slot, and prevent it being dragged // again if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctCards++; win(); //alert('you just dropped ' + cardNumber + " in the correct spot, slot number: " + slotNumber); } else if(slotNumber != cardNumber){ updateCards(); fail(); }; function updateCards() { document.getElementById('displayCardNum').innerHTML = "Sorry but you tried to place a<b> " + cardNumber + " </b>into a<b> " + slotNumber + "</b> socket";} function win() { points+=5; status=' Win 5 points!'; showScore(); $('#status').fadeIn("slow"); $('#status').fadeOut("slow"); } function fail() { points-=3; status=' lose 3 points!'; showScore(); $('#status').fadeIn("slow"); $('#status').fadeOut("slow"); } function showScore() { if(points < 0) {points = 0;} document.getElementById('score').innerHTML = "Sco "+ points; document.getElementById('status').innerHTML="Status: <b>" + status + "</b>"; } // If all the cards have been placed correctly then display a message // and reset the cards for another go if ( correctCards == 10 ) { $('#successMessage').show(); $('#successMessage').animate( { left: '380px', top: '200px', width: '400px', height: '100px', opacity: 1 } ); } } So I didn't know whether to put this in HTML & CSS or here. So I'm just going to put it here and the mods can move it if needed. So I had this script working for auto width of a DIV, then I added DOCTYPE to the top of my document, now it won't change the width ha ha. I have tried with all DOCTYPE's and same thing. The JS I am using is: Code: window.onload=function(){
document.getElementById("right").style.width= + screen.width - 193;
}
As I said this worked before I added DOCTYPE to the top of the HTML. But when I add any one of the DOCTYPES it stops working. Any ideas? Greetings, I had to add the following DOCTYPE to a webpage in order for IE to parse my page design properly, and this caused the form on the page to fail in FireFox (which works fine without the doctype). The form works fine in IE. Here is the DOCTYPE I added to the top of the page; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The error log in FireFox says; frmTest is not defined - Line 30 Here is the block of code it is referring to; function MoveForward(ipage) { if(TestAnswers()) { frmTest.action.value = 'next'; frmTest.p.value = ipage; frmTest.submit(); frmTest.cmdNext.disabled = true; try { frmTest.cmdBack.disabled = true; } catch(err) { } } } Line 30 is: if(TestAnswers()) The opening form code further down the page is; <form action="stress_test.asp" method="post" name="frmTest" id="frmTest"> I have been up against this for a couple days, any help would be very (very) appreciated. Regards, Ross This <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why? Is it possible to fix it so that it works with the doctype in ie? Code: <!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
screenWidth = screen.width;
if (screenWidth == 1024)
{
var yside = 390;
}
else if (screenWidth == 1152)
{
var yside = 400;
}
else if (screenWidth == 1280)
{
var yside = 400;
}
else
{
var yside = 450;
}
if(document.body.scrollTop != "undefined")
sidemenu.style.top = document.body.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}
setInterval("FixY()",100);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi, I have been attempting to transition to use of xhtml strict doctype and my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax, that the attribute 'name' is not allowed in form object, as in any other form element that I tried to use it in. This begs the question, how do I script forms with javascript in the context of this doctype? None of the javascript texts I have address this issue (O'Reilly Rhino book and others). I could figure it out, but it appears to be a complicated process, just doing getElementById() and sorting it out. Does anyone have a reference to material that deals with this issue? Or do I just abandon xhtml strict doctypes? Thanks for time and attention JK I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. HI Friends, I am facing some issue in javascript .my code is working in ie but not in mozilla onkeypress and onkeydown events.please tell me the solution if u knows. my code is givenbellow. in javascript file i have two methods. Code: //========javascript file===========
//will call on keydown
function keyCheck(e)
{
alert('hi---hello --onkeydown');
// var KeyID =(window.event)? event.keyCode : e.which;
var browser=navigator.appName;
// document.write("Browser name: "+ browser);
var asciiValue=event.keyCode;
if(asciiValue=='13' || asciiValue=='32'){
return true;
}
return false;
}
//call on key press
function closePopUpLayer1(e){
alert('hi---onkeypress');
var browser=navigator.appName;
document.write("Browser name: "+ browser);
unHideDropDownLists();
document.getElementById('popupLayerContent').className="popuplayer";
document.getElementById('mainBody').style.display="none";
document.getElementById('Hotels_TnC_popUp').focus();
}
==============my html file===========
<div>
<div class="popup-top-corner-left-img"></div>
<div class="popup-top-image"></div>
<div class="popup-top-corner-right-img"></div>
</div>
<div>
<div class="popup-left-image"></div>
<div class="popup-div1">
<div>
<div class="XX-Large-Dark-Gold-popUpText">credit</div>
//here i am calling two functions in javascript
<div class="sprite-btn-close" id="focusNew1" onkeydown="javascript:return keyCheck(event)" onkeypress="alert('hello');javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div>
</div>
<div class="popup-dark-gray-text">xxxxxdiv>
</div>
<div class="popup-right-image"></div>
</div>
<div class="popup-bottom">
<div class="popup-bottom-corner-left-img"></div>
<div class="popup-bottom-image"></div>
<div class="popup-bottom-corner-right-img"></div>
</div>
Hi, Can anyone tell me why the following js code fails in Mozilla? I call the function from: <tr><td><a href=\"javascript:;\" onClick=\"javascript:ChangeFrame('{$link}')\" ><img src='{$thumbs_fr}' border=0></a></td></tr> Code: var ie45,ns6,ns4,dom;
if (navigator.appName=="Microsoft Internet Explorer") ie45=parseInt(navigator.appVersion)>=4;
else if (navigator.appName=="Netscape"){ ns6=parseInt(navigator.appVersion)>=5; ns4=parseInt(navigator.appVersion)<5;}
dom=ie45 || ns6;
var http=createRequestObject();
var objectId = '';
var loadok = 0;
function createRequestObject(htmlObjectId){
var obj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
obj = new XMLHttpRequest();
}
return obj;
}
function sendReq(serverFileName, variableNames, variableValues,objId) {
var paramString = '';
objectId = objId;
variableNames = variableNames.split(',');
variableValues = variableValues.split(',');
for(i=0; i<variableNames.length; i++) {
paramString += variableNames[i]+'='+variableValues[i]+'&';
}
paramString = paramString.substring(0, (paramString.length-1));
if (paramString.length == 0) {
http.open('get', serverFileName);
}
else {
http.open('get', serverFileName+'?'+paramString);
}
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if (http.readyState == 4) {
responseText = http.responseText;
getobj(objectId).innerHTML = responseText;
} else {
getobj(objectId).innerHTML = "<br><div align=center><img src='images/loading.gif' border=0><br>Loading content ...</div>";
}
}
function change_icon(imgDocID,url) {
document.images[imgDocID].src = url;
}
function showhide(id) {
el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id];
els = dom ? el.style : el;
if (dom){
if (els.display == "none") {
els.display = "";
} else {
els.display = "none";
}
}
else if (ns4){
if (els.display == "show") {
els.display = "hide";
} else {
els.display = "show";
}
}
}
function getobj(id) {
el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id];
return el;
}
function showobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
if (dom){
els.display = "";
} else if (ns4){
els.display = "show";
}
}
function hideobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
if (dom){
els.display = "none";
} else if (ns4){
els.display = "hide";
}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function openPopUp(url, windowName, w, h, scrollbar) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scrollbar ;
win = window.open(url, windowName, winprops);
if (parseInt(navigator.appVersion) >= 4) {
win.window.focus();
}
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
function sendToFlash () {
var txt = document.getElementById("inputField").value;
var txtBold = document.getElementById("txtBold").value;
var txtItalic = document.getElementById("txtItalic").value;
var txtColor = document.getElementById("txtColor").value;
var txtFont = document.getElementById("ls_font").value;
var txtSize = document.getElementById("ls_size").value;
getobj('NDKPhoto').sendText(txt,txtFont,txtColor,txtSize,txtBold,txtItalic);
return false;
}
function ChangeFrame (url) {
getobj('NDKPhoto').sendFrame(url);
}
function ChangeClipart (url) {
getobj('NDKPhoto').sendClipart(url);
}
function updateFile(outFile) {
furl = 'act:savecam|url:'+outFile;
sendReq('index.php', 'cmd', furl,'cam_result');
showobj('cam_result');
}
function Show_Select_Color() {
var newcolor = showModalDialog("select_color.html", "000000", "resizable: no; help: no; status: no; scroll: no; unadorned: no; dialogLeft:400; dialogTop:500;");
if (newcolor != null) {
document.getElementById("txtColor").value = newcolor;
document.getElementById("cl_pick").src = "pick_color.php?c="+newcolor;
sendToFlash();
}
}
function Dao_Gia_Tri(obj) {
var num = document.getElementById(obj).value;
if (num!=1) document.getElementById(obj).value = 1;
else document.getElementById(obj).value = 0;
sendToFlash();
}
function gotopage(p,cat){
change_frame_page(p,cat);
}
function change_frame_page(p,cat) {
furl = 'act:jsload|sub:frame|p:'+p+'|cat:'+cat;
sendReq('index.php', 'cmd', furl,'displayFrame');
}
function gotopage_clip(p,cat){
change_clip_page(p,cat);
}
function change_clip_page(p,cat) {
furl = 'act:jsload|sub:clip|p:'+p+'|cat:'+cat;
sendReq('index.php', 'cmd', furl,'displayClipart');
}
Hello, I have this script (which i didn't program) which is suppose to count down an amount of time, and then redirect the page to another place. It works fine on IE/Opera but it doesn't on Netscape/Mozilla. I was wondering if any one could tell me the couse or another script that will work on most browsers. Thanks a lot Code: time_in_sec = 300;
function nextSec()
{
m = Math.floor(time_in_sec / 60);
s = time_in_sec % 60;
if (s < 10) { s = "0" + s; }
if ((m == 0)&&(s == 0))
{
location.replace("SOME_URL");
} else {
document.all.counter.innerHTML = '<font style="font-size: 13pt" color="#999999">' + m + ":" + s + "</font>";
window.setTimeout('nextSec()',1000);
}
time_in_sec--;
}
I have an online calculator in javascript which works in IE but not Moz. Can anyone help: site: http://www.exigotranslations.com code: function workit() { var xsource = new Array(0,0.09,0.1); // source language var xtarget = new Array(0,0.09,0.10,0.12,0.14); // target language var xtype = new Array(0,0,0.06,0.02,0.06,0.04,0.06,0.03,0.01); // type of text var itemA = parseInt(form1.words.value); if(!itemA){itemA=1}; var itemB = parseInt(form1.source.options[form1.source.selectedIndex].value); var itemC = parseInt(form1.target.options[form1.target.selectedIndex].value); var itemD = parseInt(form1.type.options[form1.type.selectedIndex].value); var total = (itemA*(xtarget[itemC]+xtype[itemD])); if(total < 9) {total = 9}; mytotal.innerHTML = total.toFixed(2); } link to code from webpage is: <script src="Javascript/formcheck.js" type="text/javascript"></script> Can anyone help with what I have done wrong. Thanks, Richard hello Guys , Well, i've a BIG Problem With a HUGE JS application , i'm modifying its javaScript code to work on both IE/Mozilla , currently it works fine on IE but not on Mozilla. My main Point now is events. lets try with a little module, consider this function : Code: function HiliteLectures(Group,Alternatives,ForeColor){
var i,Lecture,EventLecturesGroup,EventLecturesAlternatives,LecSrcElement
//validate event source
if (event.srcElement.id=='Animate'){LecSrcElement=event.srcElement.parentElement}else{LecSrcElement=event.srcElement}
EventLecturesGroup = Group.split(",")
EventLecturesAlternatives = Alternatives.split(",")
//hilite Lecture Group with Red as sections
for(i=0;i<EventLecturesGroup.length;i++){//if item is not selected
Lecture=document.getElementById(EventLecturesGroup[i])
if ((EventLecturesGroup[i]!='') & (Lecture!= null)){
Lecture.style.borderColor='red';
Lecture.style.borderWidth=2
if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
}
}
//hilite Lecture Alternatives with blue as Lectures
for(i=0;i<EventLecturesAlternatives.length;i++){//if item is not selected
Lecture=document.getElementById(EventLecturesAlternatives[i])
if ((EventLecturesAlternatives[i]!='') & (Lecture != null)){
if (EventLecturesAlternatives[i]!=''){
Lecture.style.borderColor='blue';
Lecture.style.borderWidth=2
if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
}
}
}
//Put the current lecture forecolor to ForeColor
LecSrcElement.style.backgroundColor=ForeColor;
}
and it is attached in this place like : Code: temp.onmouseover=new Function("HiliteLectures('"+Lecture.Group+"','"+Lecture.Alternatives+"','"+Day.HiliteColor+"');")
this works fine in IE , i want to modify it to work on Mozilla , Any Help ?? How can we fire/invoke ondragstart diagrammatically in Mozilla?
Could anyone advise on a Mozilla-equivalent of the following line of code: Code: document.getElementById('editorContent').contentWindow.event.srcElement.href
The purpose of this line is to get the "href" value of a link when clicked on inside a content-editable iframe. I have the function working perfectly in IE, but not having much luck with Mozilla browsers. |
|||||||