|
JavaScript - Changing The Innerhtml Of A Div From Within An Iframe In Firefox
I created a page that has an iframe on it. Within this iframe I call an asp page. The asp page is supposed to do some work and then update the innerHTML of a <div> object on the parent page to indicate that processing of the page in the iframe is complete. The code works in IE but not FireFox. I am wondering what is the best way to make the script work for both browsers?
Sub page JavaScript: Code: updateParent()
{
parent.document.getElementById("num2").innerHTML = '<center><strong>Processing complete.</strong></center>';
}
Parent page: Code: <div id="num2"></div> Similar TutorialsI was playing around with some onmouseover/onmouseout and setting innerHTML to various strings depending on what has been mousedover/out. The DIV for the innerHTML was above the items being onmouseovered/out and because the strings sent were of different lengths, sometimes a one or two line wrap would happen and everything below it would be resized accordingly creating a horrible effect. For reference, what is a good way to approach building pages which are immune to this effect? I am currently making a website with 2 Frames, top and bottom. Top Frame will be a table. Bottom Frame will be a row with the information from the last row *you* clicked in Top Frame. ______________________________ | | | TABLE HERE | | | |_____________________________| | | | copy of last row clicked from ^^ | |_____________________________| there is a onclick event for the table in Top Frame that changes the row in Bottom Frame to *this* row. here is the javascript function I think should work.... Code: function changeRow(id)
{
alert(id.innerHTML);
parent.frames.FRAME2.TABLE_B.innerHTML = id.innerHTML;
}
this is index.php Code: <html> <frameset rows = "60%, 40%"> <frame src = "table_driver.php" name = "A" id = "FRAME1"> <frame src = "bottom_row.php" name = "B" id = "FRAME2"> </frameset> </html> and bottom_row.php which creates an empty table to be filled by the onclick event Code: <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css"/> <script type = "text/javascript" src="java_script.js"></script> </head> <body> <table id = "TABLE_B"><tr><td>Hello</td></tr></table> </body> </html> I am ripping my hair out trying to figure out why my innerHTML code is not working. It only works in IE, but keeps failing in Chrome and Firefox. I am using a form text field for customers to enter a Gallery ID (text value in the form field) which I have set up for them in an external js file. I use this code to change the content of div's after it checks the js file for a matching text value. Here is what is happening-- the proper content shows up for a second in Chrome or Firefox if the username value matches, but it pops away really fast and goes back to the login field prompt. Javascript: Code: <head>
<script type="text/javascript">
function setinitialvalues(){
document.getElementById('loginblock').style.visibility = 'visible';
document.getElementById('galleryinfo2').style.visibility = 'hidden';
document.getElementById('expiredmessage').style.visibility = 'hidden';
document.getElementById('republish').style.visibility = 'hidden';
document.getElementById('logoutmessage').innerHTML = "";
document.getElementById('logoutmessage2').innerHTML = "";
document.getElementById('logoutmessage').style.visibility = 'hidden';
document.getElementById('logoutmessage2').style.visibility = 'hidden';
}
</script>
<script type="text/javascript">
function loadcustomer(){
document.getElementById('galleryinfo').innerHTML = "";
document.getElementById('galleryinfo2').innerHTML = "";
document.getElementById('expdatemessage').innerHTML = "";
document.getElementById('expiredmessage').innerHTML = "";
document.getElementById('republish').innerHTML = "";
document.getElementById('logoutmessage').style.visibility = 'hidden';
document.getElementById('logoutmessage2').style.visibility = 'hidden';
document.getElementById('loginblock').innerHTML = "<br /><h4>If you know your Gallery ID, you can enter it here to access your proofing gallery and order page.<br /><br />ENTER GALLERY ID:</h4><form name='form' action='' method='post'><input style='color:#000;' name='username' id='username' onfocus='clearinvalid()' onKeyDown='clearinvalid()'><br /><br /><input style='background-color:#33A1C9;' class='button' id='submitbutton' type='submit' value='Submit' onClick='return galleryid(this.form)'></form><h4><div style='color:#ff0000;' id='invalidmessage'></div></h4><br />Sample Gallery ID: demo<br />(Then click the Submit button. Some browsers do not accept the Enter key.)<br /><br /><a href='#' class='btn btn-lg btn-default'>Back to Menu</a><br /><br />This works on Internet Explorer, Firefox, Opera and Google Chrome. Please use one of these web browsers to log in.";
document.getElementById('loginblock').style.visibility = 'visible';
}
</script>
<script language="javascript" type="text/javascript" src="customergallery.js"></script>
</head>
HTML: Code: <div style="text-align:center;" id="loginblock"></div> <div id="galleryinfo"></div> <div id="galleryinfo2"></div> <div style="color:#ff0000;" id="expdatemessage"></div> <div style="color:#ff0000;" id="expiredmessage"></div> <div id="republish"></div> <div id="logoutmessage"></div> <div id="logoutmessage2"></div> External customer js file: Code: function Submit(){
if(event.keyCode == 13)
{
galleryid();
return false;
}
}
function galleryid(){
if (document.getElementById('username').value == 'demo') {
var name = "My Photomatic Photo Session";
var sessiondate = "02/22/2014";
var location = "Any town, USA";
var orderlink = "<a href='../../accounts/brown/20140222/myphotomatic20140222.html' target='_blank'>CLICK HERE TO VIEW GALLERY</a>";
var todayDate = new Date();
var expdate = new Date(2015,05,30);
comparedate();
}
else if (document.getElementById('username').value == '') {
document.getElementById('invalidmessage').innerHTML = 'Please enter a value in this field.';
}
else {
document.getElementById('invalidmessage').innerHTML = 'Invalid Gallery ID. Please try again.';
}
document.getElementById('username').value = "";
return false;
function comparedate() {
if (todayDate >= expdate)
{
document.getElementById('galleryinfo2').innerHTML = "<br /><br />" + name + "<br />Session Date: " + sessiondate + "<br />" + location + "<br /><br />";
document.getElementById('expiredmessage').innerHTML = "This gallery has expired on " + (expdate.getMonth()+1) + "/" + expdate.getDate() + "/" + expdate.getFullYear();
document.getElementById('republish').innerHTML = "<br />If you would like to have this gallery republished, please email me .<br /><br />";
document.getElementById('logoutmessage2').innerHTML = "<a href='javascript:void(0);' onclick='loadcustomer(); clearusername(); setinitialvalues();' class='btn btn-lg btn-default'>Click here to return to the Login</a><br /><br />";
document.getElementById('galleryinfo2').style.visibility = 'visible';
document.getElementById('expiredmessage').style.visibility = 'visible';
document.getElementById('republish').style.visibility = 'visible';
document.getElementById('logoutmessage2').style.visibility = 'visible';
document.getElementById('loginblock').innerHTML = "";
document.getElementById('loginblock').style.visibility = 'hidden';
}
else {
loadcustomer();
document.getElementById('galleryinfo').innerHTML = "<br /><br />" + name + "<br />Session Date: " + sessiondate + "<br />" + location + "<br /><br />" + orderlink + "<br /><br />";
document.getElementById('expdatemessage').innerHTML = "This gallery will expire on " + (expdate.getMonth()+1) + "/" + expdate.getDate() + "/" + expdate.getFullYear() + ".<br /><br />";
document.getElementById('logoutmessage').innerHTML = "<a href='javascript:void(0);' onclick='loadcustomer(); clearusername(); setinitialvalues();' class='btn btn-lg btn-default'>Click here to return to the Login</a><br /><br />";
document.getElementById('logoutmessage').style.visibility = 'visible';
document.getElementById('loginblock').innerHTML = "";
document.getElementById('loginblock').style.visibility = 'hidden';
}
}
}
function clearinvalid(){
document.getElementById('invalidmessage').innerHTML = '';
}
function clearusername(){
document.getElementById('username').value = "";
}
Where am I going wrong and what can I do to make this work in Chrome and Firefox? It works great in IE. Thanks! hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks Code: <iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe> I would like to change the alignment of an image which currently under div which is under iframe. the page which is called under iframe is readymade html from some other site. I dont have any control on that HTML page which is under iframe. Please tell me how to align image under iframe.
I am looking for an input text that links to a iframe. . ? To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers Ok, 'nother head-banger for the hardcore! I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens. I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out. Here's the code: The snippet on the main page (index.html): Code:
<div id="linkListContact" class="LinkList">
<img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img>
<span>
<ul>
<li>
<div><a id="contact">Contact Us</a>
</div>
</li>
</ul>
</span>
</div>
... and the relevant Javascript: Code:
function setIFrame(frameSource)
{
document.getElementById('mainWindow').src = frameSource;
}
function setContactLink()
{
var contactURL = "http://katabasis.spreadshirt.com/shop/imprint"
document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" );
}
The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com. Thanks. Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. I'm using buttons to scroll content in an iframe. Works fine on IE and Chrome. Firefox cannot identify the frame and I get this error Error: window.frames.iframe is undefined My code is Code: var mypage= eval(window.frames["iframe"].contentlayer.style); My iframe is Code: <iframe id="iframe" src="scroll.asp" width="320" height="480" scrolling="no" marginheight="0" marginwidth="0"> And the scroll.asp is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> </head> <body> <DIV ID="contentlayer" STYLE="position:absolute; width:320px; left: 0px; top: 0px"> <img src="images/scroll.jpg" width=320 height=960> </div> </body> </html> Any idea why Firefox can't understand the reference? I am currently working on a simple site and I was looking into methods to take advantage of html partial rendering to make site maintenance easier without using a server side language. The code for the two pages is as follows: Main html page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css"/>
<link href="../css/default.css" rel="stylesheet" type="text/css"/>
<title>Default</title>
</head>
<body>
<div class="navigation" id="nav_div">
<iframe name="nav_frame" onload="loadNav()"></iframe>
</div>
<script type="text/javascript" language="javascript">
<!--
function loadNav()
{
nav_frame.location="../static_partials/navigation.htm";
}
//-->
</script>
</body>
</html>
And the code of navigation.htm is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" language="javascript">
<!--
function iframeLoad()
{
parent.document.getElementById("nav_div").innerHTML = document.getElementById("navigation_divs").innerHTML;
}
//-->
</script>
<title>Navigation Partial</title>
</head>
<body onload="iframeLoad()">
<div id="navigation_divs">
</div>
</body>
</html>
The works fine in IE, but in Firefox 3.5.7 the iframeLoad generates an exception. The exception states the following: Code: Permission denied for <file://> to get property Window.document from <file://>. Firefox doesn't seem to like my usage of the parent object in that way, but I am unsure of another way to do it without using a server side language. Hello all, my second post! I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers. Here is the header code: Code: <SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
Here is the code on the page where a link click shows the hidden div and loads the iframe contained. Code: <p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>
</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0; border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
As always, any input is greatly appreciated! I came across your forums here and it looked like a great place to get some help, and help is exactly what I need! I have been struggling with this javascript that changes an image and its corresponding useMap. For reference: - All images are the same size and located in the same directory, except the main map image - All images are preloaded (I did this just in case it was an image problem) - The page works fine in Firefox, and fine in IE until it crashes - http://www.forthecode.com/imagemap/untitled.htm The Problem: - When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds. - This even happens in a completely blank page (no other content) Exceptions: - Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem) - Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up! The Javascript function itself: Code: <script language="Javascript">
function changemap(vari){
var vari;
var stoptime;
if(vari=="regionview"){
document.regionmap.src = "/images/branchmap2.jpg";
stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
}
else{
document.regionmap.src = "/images/states/" + vari + ".jpg";
stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
}
}
</script>
The image tag and image maps: Code: <img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
<area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');" alt="Mississippi" title="Mississippi">
<area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');" alt="Arkansas" title="Arkansas">
<area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');" alt="Ohio" title="Ohio">
<area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');" alt="Missouri" title="Missouri">
<area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');" alt="Illonois" title="Illonois">
<area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');" alt="Tennessee" title="Tennessee">
</map>
<map name="arkansas">
<area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="mississippi">
<area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="missouri">
<area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
<area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
<area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="kentucky">
<area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="indiana">
<area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="illonois">
<area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="tennessee">
<area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="ohio">
<area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me. Thanks in advance! Hello, I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
function OpenWindow()
{
var content=document.getElementById('achieve').rows[0].cells;
content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>";
var content=document.getElementById('achieve').rows[1].cells;
content[1].innerHTML="";
var content=document.getElementById('achieve').rows[2].cells;
content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>";
}
</script>
</head>
<body>
<!--id starts-->
<table id="achieve" width="780" height="387" border="0">
<tr>
<td width="10" height="39"> </td>
<td width="340"><div align="center" class="style6">My Title</div></td>
<td width="416"> </td>
</tr>
<tr>
<td> </td>
<td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl Can somebody explain me why this isn't working? Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value
function checkLotto() {
if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
document.getElementById('boldStuff').style.color='#00ff00';
document.getElementById('boldStuff').innerHTML = goed;
}
else {
document.getElementById('boldStuff').style.color='#ff0000';
document.getElementById('boldStuff').innerHTML = fout;
}
}
</script>
When I don't use the var, but give for example this: it works ok. Code: document.getElementById('boldStuff').innerHTML = '6';
Hey, for some reason, this isn't working because of the src="images/edit.png" attribute. Here is my code: Code: <a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a>
Javascript (External) Code: function change(message)
{
document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />';
}
It does nothing. But if I take the src attribute out, it works fine. Any help? Thanks. Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them. Code: function process_code(id, number, print)
{
if (document.getElementById(id))
{
var current = document.getElementById(id);
var code = current.innerHTML.split('\n');
var count = 0;
var xcount = 0;
if (number)
{
if (current.innerHTML.indexOf('<li class="code-entry">') != -1)
{
code = code.join('\n');
code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n');
code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, '');
current.innerHTML = code.replace(/^\n+|\n+$/g, '');
}
else
{
current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'<
/li></ol>';
}
}
else
{
var doc = window.open('', 'code_print');
var newdoc = doc.document;
newdoc.open('text/plain');
newdoc.write(decode_code(code.join('\n')));
newdoc.close();
if (print)
{
if (navigator.userAgent.indexOf('Opera') != -1)
{
window.print();
}
else
{
doc.print();
}
doc.close();
}
}
}
}
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 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 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? |
|||||||