|
JavaScript - Making Main Frame Page And Pages Within Frame Resize To Fit Window
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 Similar TutorialsI' 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 was doing some 3d things with unity3d, and i want to embed them into web pages, or to allow others to embed it into their pages...so i managed to do it with frames. now, there is a problem when i want to open the link to my site from the application that is embedded, it opens the window but in frame, so that is just bad... embedded window is small, a bit larger then youtube default size, so it looks ugly when it opens site in it.... is there a way to pop up the window, or to open new tab from the frame? and not to involve making scripts outside the frame because it will be harder to present the user what he needs to do in order to embed this content into his page? any ideas? thank you! Say you have a document with 2 frames with 2 buttons in one of the frames. If one button opens a window, how can you make the other button close it?
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? Hey All, So to start out, this is my first post on CodingForums! I've only recently started learning web development so I figured it would be a good idea to get involved with some active forums. I am trying to open a random page in a frame, but I am trying to call the Javascript to do so in another frame. I currently have an html page with a frameset which has two frames. One of the frames is a toolbar that sits at the top of the page and it has an image that acts as button. When the user clicks on this image, the bottom frame generates a random page from an array of links I have hardcoded into the Javascript. The bottom frame is just set to google.com as a default because I couldn't really think of anything to put in an html file there. The problem I'm having is when I click on the image to open a random page in the bottom frame, nothing happens. The code for all the files are below. Home.html Code: <head> </head> <frameset rows='44,*' cols="*" frameborder='no'> <frame name="toolbar" noresize="noresize" src="toolbar.htm" marginwidth="5px" marginheight="10px" scrolling="no"> <frame name="main" noresize="noresize" src="http://www.google.com" marginwidth="5px" marginheight="5px" scrolling="auto" > </frameset><noframes></noframes> <body> </body> </html> The code for the frame, toolbar.htm: Code: <head>
<title></title>
<script type="text/JavaScript" src="random.js"></script>
</head>
<body>
<div id="wrapper">
<div id="toolbar">
<a href="javascript:getaPage()"><img src="Images/nextpage.png" align="right" /></a>
</div>
</div>
</body>
</html>
And finally the Javascript, random.js: Code: function get_random()
{
var ranNum= Math.floor(Math.random()*3);
return ranNum;
}
function getaPage()
{
var randomPage=get_random();
var page=new Array(3)
Page[0]="http://www.google.com";
Page[1]="http://www.yahoo.com";
Page[2]="http://www.myspace.com";
top.main.location.href=page[randomPage];
}
And as a follow-up question, how difficult would it be to set up this entire random page generating script via php? I'm learning php so I can eventually set up a database of urls in mysql and have tags associated with each url. Thanks in advance! Hi Im trying to creat a website so when the small image is rolled over a new page opens in the frame ( called main) i will upload it now to http://www.e-z-host.com/GZ/ all help apricated ! at the momment you have to click to open the page in the main frame. Here is the structure I am working with as this html/script was created by the chmProcessor to produce WebHelp files... index.htm contains: Code: <iframe id="mainFrame" name="mainFrame" class="full" src= "frameset.html"> frameset.html contains: Code: <frameset cols="20%,80%"> <frame id="treeFrame" src="tree.html" name="treeFrame" /> <frame id="frameCont" src="2_Welcome.htm" name="Welcome" /> </frameset> tree.html is the navigational panel and contains: Code: <script type="text/javascript" src="tree.js"> </script> I have placed alert() calls in tree.js. When I load index.htm in Chrome, apparently tree.js is not being loaded because I do not see any alert box and the functionality within tree.js does not work. Note: The functionality does work in IE and Firefox If I open tree.html directly in Chrome, the tree.js functionality does get called. I do not know how to solve this problem or why Chrome is not loading the pages and script correctly. Thanks for your help! my password target opens in a new window using the 'open.window' command but i would like a command string that opens this target in the same frame within my frames page that my other pages open in. thanks in advance manj I have an older website consisting of frames (html). Now I want to password protect one page. So far I added the following Javascript which I found on youtube: <SCRIPT> function passWord() { var testV = 1; var pass1 = prompt('Please Enter Your Password',' '); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == "letmein") { alert('You Got it Right!'); window.open('protectpage.html'); break; } testV+=1; var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password'); } if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1); return " "; } </SCRIPT> <CENTER> <FORM> <input type="button" value="Enter Protected Area" onClick="passWord()"> </FORM> </CENTER> This works but the protected page opens in a new window not in the main frame. What do I have to add and where? Will search engines pick up this page and display it on the public? Thank you. CT I have the code below in my popup window which currently brings up a blank page in the background as the main window. Instead I want the popup to come up but the original page I left is in the background as the main window. Does anyone know how I can do that with the code I currently have. Code: <html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function poponload()
{
testwindow = window.open("", "mywindow", "location=0,status=0,scrollbars=0,width=350,height=400");
testwindow.moveTo(0, 0);
testwindow.document.write('<h1>Get outta here!</h1><a href="javascript:void(0);" onclick="window.opener.history.go(-1); self.close();">Parent back button</a>');
testwindow.focus();
}
</script>
<body onload="javascript: poponload()">
</body>
</html>
In my main window, I create a popup window. Is there a way to bring the main window back to the foreground (make the main window the focus window again) from the popup window using JS? Like from a link or a button? Thanks Here is the story... There is a submit button (POST) that targets to a frame, given that there is no way to change it through DOM manipulation. Code:
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() { if (top!=window) top.location=window.location }
-->
</script>
That piece of code is not elegant in the sense that it will show the parent window and the frame for like one second, then the content in the frame takes over to cover up the parent window. Is there a way for the frame to take over the parent window instantly? Hi, I am sure there is a simple thing I am doing wrong. I am using serif plus, (instead of dreamweaver), I have 12 pages, and am using 3 seperate master pages for various pages. Master page B holds the repetitive information for page7.html and contained within page7 is an iframe linked to page18.html. On page7.html, beside the iframe I have six 'hot spots' anchored within the page displayed (page18). This works really well. The problem I have is when page7.html loads it comes up at the top of the iframe, (half way down the main page), not the top of the page that contains it. I have tried putting an anchor at the top of page7.html and inserting code as in OnLoad, go to anchor etc., window.location, and just about everything else I could think of, but nothing seems to make the page open in the correct place. You have to scroll to the top each time. Can anyone help with this please. Not very experienced but hoping to learn. Sybs I have this offer iframed on my website and I want it so that when they get to a certain page (i have the specific url), I can redirect it to another site. Is this possible by any chance?
hi- trying to set frame source from javascript- i cant get it to work.. Code: <script>
stud = mm_adl_API.LMSGetValue("cmi.core.student_id");
newlink = ('https://blah.blah.blah&stud_id='+stud);
// -->
</script>
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="javascript:window.location(this.newlink)" name="thisname" />
<frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="Scorm Handling" onload="mm_adlOnload()" />
</frameset>
In here is an example of a frameset im currently working. i have this frameset: http://www.mediafire.com/?75dvswgvelw19a9 what i want is when i select radio button "YES" and click on the "create" button in form1 http://www.mediafire.com/?eld7a1rb21h799e it will pass the value to radio button "ON" in form 2 http://www.mediafire.com/?f0o060cdpyf06ya and will call the function of the radio button "ON" -shows the hidden textarea. And if i select radio button "NO" in form1 and click on "create" button, it will select radio button "OFF" in form 2. help plsssssssss I have plenty of information in my database now, and I'm thinking of making a double-frame style webpage that can pull content from the db. but the AJAX code I have is sometimes very slow. It might be my server though. Could anyone shed some light on how the following website populates the right side frame with help content? http://vb.mvps.org/hardcore/ if you double click on the file on the left, the content immediately appears on the right. I'm guessing that it doesn't come from a database, because of pages like this: http://vb.mvps.org/hardcore/html/int...elibraries.htm that same content can be seen by one of those help chapters too. So, there's a complete file for the link. Could someone tell me how exactly this works? I have two vertical frames. The left frame has an image that scales to 100% of the window's height. I am trying to make the page automatically resize the width of that left frame so that it exactly fits the scaled image's width in order to always give the right frame as much space as possible, but I can't seem to get it to work. Can anyone help me out? Here's the code for my frameset: Code: <html> <frameset id="MyFrameset" cols="25%,*" frameborder="no" border="0"> <frame noresize="noresize" src="Leftframe.html" name="LeftFrame"> <frame noresize="noresize" src="Rightframe.html" name="RightFrame"> </frameset> </html> And here's the code for my left frame: Code: <html>
<body style="overflow:hidden; margin:0; padding:0"
onload="parent.document.getElementById('MyFrameset').setAttribute('cols', 'document.body.clientWidth,*', 0);">
<img src="image.JPG" style="border:none;" height="100%" alt="image"/>
</body>
</html>
Oh yeah, the reason why I need to do this is so if someone is viewing the page on a widescreen monitor, the left frame won't eat up more space than necessary. . • How do submit your input box value to another frame without the input box vanishing? • This code is bloated. Below is the code with the gist highlighted (scroll). • Relevant options?: --- document.forms[].action --- document.forms[].value --- document.getElementById(typer).value EXAMPLE: Type & Hit Enter (Viewable on: FF 3.6) FRAME 1: 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" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
document.getElementById("typer").focus();
}
</script>
<style type="text/css">
body
{
text-align:left;
background-color: #FFFFFF;
overflow: hidden;
font-family:sans-serif;
font-size: 60px;
}
form, input, select, textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 0;
position:absolute;
top:180px;
left:60px;
}
img
{
position:absolute;
left:0px;
top:300px;
z-index:1;
}
</style>
</head>
<body>
<iframe id="ifm" name="ifm" src="F2.htm" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no"></iframe>
<form name="form2" method=GET action="http://www.google.com/search">
<input type=text id="typer" name=q size=31 maxlength=255 value="">
</form>
</body>
</html>
FRAME 2: Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
<body>
</body>
</html>
. |
|||||||