|
JavaScript - Automatic Frame Resizing
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. Similar TutorialsHi. 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 back again, another add on to my add more inputs thread Im trying to add automatic number when i add more inputs. but starting from what has already been inputted. For example I have volumes of a series. with volume 1 2 3 and 4 already made and I have a form to input another volume title. or in this case multiple forms. I want to add more inputs with the default values to keep adding +1 so... continueing with 5 6 7 8 and etc. What i have. I think im really bad at math or something or im just stupid. Problem is it resets the var number when i keep pushing to add more inputs. I've tried some if() but im just stupid... var limit = 20; // max number of rows in total var LIMIT=1; var theNumber = 0; var currentNumber = 0; Code: function addRow(number){
var currentNumber = number + 1;
var content1='<input size="3" type="text" name="number[]" value="' + currentNumber + '"/>';
var content2='<input type="text" name="title[]">';
var content3='<input size="10" type="text" name="aka[]">';
currentNumber++;
// NON IMPORTANT STUFF AFTER THIS
if (LIMIT == limit) {
alert("You have reached the limit of adding " + (limit) + " inputs");
return false; // just leave
}
LIMIT++;
tabBody=document.getElementsByTagName("TBODY").item(0);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell1.innerHTML=content1;
cell2.innerHTML=content2;
cell3.innerHTML=content3;
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tabBody.appendChild(row);
}
Hi friends, I am collecting and selling football stickers. Yes, World Cup 2010 stickers. The album have 640 distinct numbers. Everytime I receive a list of that stickers to buy by the user I would need ckeck out the price list because some stickers have different price from another. For example Stickers numbers: 00, 000, 1, 2, 3, 4, 5 and 29 costs 3,00. The stickers number 31, 50, 69, 88, 107, 126, 202, 411, 392, 544 and 637 costs = 1,00. The stickers 30, 49, 68, 87, 106, 125 costs 0,25 The sticker from 32 to 48 51 to 67 70 to 86 89 to 105 (and so on) costs 0,25 I would be glad if someone could help me for building a script which read from a textarea numbers contents and create a "short report" with the stickers numbers followed by its price and total sum. Bob Kuspe Hello I have a html page which just enter the coordinates of a city and appear that processes the data file javascript. this is the part where I put the coordinates manually: Code: <script type="text/javascript"> var date = new Date(); // today var times = prayTimes.getTimes(date, [44, 11], +2); So far we have and everything worked .. just that I want to create a table with all names of cities, click on a city data appear to me .. there is some code that could only enter the coordinates by clicking on the name of the city, instead of entering all the time coordinates? thanks again p.s. sorry for my bad english Hi, hope someone can help. doing some work with google maps api. I have a function called codeaddress, this is triggered by a search button. is there a way to add js to make an automatic click on results after search ? here is code of function.. Code:
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(10);
} else {
alert("City was not found: " + status);
}
});
}
Hi, I admit from the start, I'm not very good with JS, I've used it a few times over the years, but mostly readymade scripts that I can just link to a website and use. Anyway, I need something somewhat specific and I don't know where to find such a code or even if I can modify the one I have found to do what I need. What I need is to be able to update totals on the page as things are changed, but I'm not talking about one total. What I have is a list of spare parts with a quantity box next to them, when someone changes the quatity the price for that part needs to update as well as the total price AND a sum that is an allocated amount minus the total (so they can see how much of their allocation they have left). So far, all I've managed to find is a script that will update just the final total (http://www.mcfedries.com/JavaScript/OrderTotals.asp), but as you can see, that's not that helpful. I've sat and stared at the code and while I can say what things do what, I wouldn't know where to start in changing it. Hope someone can help! Thanks Form cap: http://img38.imageshack.us/img38/8118/partlist.png Hi all, I need help with my problem. I have a plasma TV on which I invoking a lot of different short videos and I need at this TV also displayed a particular Web page. Video length is variable and depends on the actual length of the video currently playing and display the Web page is always 3 minutes. I'd like to do in this format: video1.html (3 minutes) -> pocasi.cz (5 minutes) -> video2.html (10 minutes) -> pocasi.cz (5 minutes)->...-> video30.html (1,5 minutes) -> pocasi.cz (5 minutes) -> video1.html (2,5 minutes )->... . Video's and web page in full screen without buttons. Can someone please advise how the script should look like? Thank you for your advice. how to automatic append picture to a list? check text in span,if it match today,a picture append after meeting（4-22) code like this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.li_title { list-style-type:none;
font-size:12px;
line-height:24px;
}
.date {float:right;margin-right:3px;}
</style>
</HEAD>
<BODY>
<DIV id=Conttab_p_switch1 style="POSITION: relative">
<UL>
<LI class="li_title"><span class="date">2011-04-22</span><A title=meeting（4-22） href="#" rel="nofollow" target=_blank>meeting（4-22）</A></LI>
<LI class="li_title"><span class="date">2011-04-11</span><A title=meeting（4-11） href="#" rel="nofollow" target=_blank>meeting（4-11）</A></LI>
<LI class="li_title"><span class="date">2011-04-04</span><A title=meeting（4-04） href="#" rel="nofollow" target=_blank>meeting（4-04）</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
Quote: The parameter A should display the sum of the remaining six fields. I did try adding that using the JAVA script that is mentioned in second code. The total should be display immediately after value is set for any of the text boxes. The text box gets the value using drop down menu. This procedure only works if I use the keyboard tab. If I use the mouse to select YES and No, then it will not display the total Code:
<html>
<head>
<script type="text/javascript" src="javascript/addfunctions.js"></script>
<script type="text/javascript">
function enable1()
{
document.audit_billing_IE.Para_A_A1_comment.disabled = false;
document.audit_billing_IE.Para_A_A1_score.value = 00;
}
function enable2()
{
document.audit_billing_IE.Para_A_A2_comment.disabled = false;
document.audit_billing_IE.Para_A_A2_score.value = 00;
}
function enable3()
{
document.audit_billing_IE.Para_A_A3_comment.disabled = false;
document.audit_billing_IE.Para_A_A3_score.value = 00;
}
function enable4()
{
document.audit_billing_IE.Para_A_A4_comment.disabled = false;
document.audit_billing_IE.Para_A_A4_score.value = 00;
}
function enable5()
{
document.audit_billing_IE.Para_A_A5_comment.disabled = false;
document.audit_billing_IE.Para_A_A5_score.value = 00;
}
function enable6()
{
document.audit_billing_IE.Para_A_A6_comment.disabled = false;
document.audit_billing_IE.Para_A_A6_score.value = 00;
}
function disable1()
{
document.audit_billing_IE.Para_A_A1_comment.disabled = true;
document.audit_billing_IE.Para_A_A1_score.value = 10;
}
function disable2()
{
document.audit_billing_IE.Para_A_A2_comment.disabled = true;
document.audit_billing_IE.Para_A_A2_score.value = 10;
}
function disable3()
{
document.audit_billing_IE.Para_A_A3_comment.disabled = true;
document.audit_billing_IE.Para_A_A3_score.value = 10;
}
function disable4()
{
document.audit_billing_IE.Para_A_A4_comment.disabled = true;
document.audit_billing_IE.Para_A_A4_score.value = 10;
}
function disable5()
{
document.audit_billing_IE.Para_A_A5_comment.disabled = true;
document.audit_billing_IE.Para_A_A5_score.value = 10;
}
function disable6()
{
document.audit_billing_IE.Para_A_A6_comment.disabled = true;
document.audit_billing_IE.Para_A_A6_score.value = 10;
}
function na1()
{
document.audit_billing_IE.Para_A_A1_comment.disabled = true;
document.audit_billing_IE.Para_A_A1_score.value = 00;
}
function na2()
{
document.audit_billing_IE.Para_A_A2_comment.disabled = true;
document.audit_billing_IE.Para_A_A2_score.value = 00;
}
function na3()
{
document.audit_billing_IE.Para_A_A3_comment.disabled = true;
document.audit_billing_IE.Para_A_A3_score.value = 00;
}
function na4()
{
document.audit_billing_IE.Para_A_A4_comment.disabled = true;
document.audit_billing_IE.Para_A_A4_score.value = 00;
}
function na5()
{
document.audit_billing_IE.Para_A_A5_comment.disabled = true;
document.audit_billing_IE.Para_A_A5_score.value = 00;
}
function na6()
{
document.audit_billing_IE.Para_A_A6_comment.disabled = true;
document.audit_billing_IE.Para_A_A6_score.value = 00;
}
function changed1(el)
{
var sel = el.options[el.selectedIndex];
if (sel.value == "Yes")disable1();
if (sel.value == "No")enable1();
if (sel.value == "Na")na1();
}
function changed2(el)
{
var sel = el.options[el.selectedIndex];
if (sel.value == "Yes")disable2();
if (sel.value == "No")enable2();
if (sel.value == "Na")na2();
}
function changed3(el)
{
var sel = el.options[el.selectedIndex];
if (sel.value == "Yes")disable3();
if (sel.value == "No")enable3();
if (sel.value == "Na")na3();
}
function changed4(el)
{
var sel = el.options[el.selectedIndex];
if (sel.value == "Yes")disable4();
if (sel.value == "No")enable4();
if (sel.value == "Na")na4();
}
function changed5(el)
{
var sel = el.options[el.selectedIndex];
if (sel.value == "Yes")disable5();
if (sel.value == "No")enable5();
if (sel.value == "Na")na5();
}
function changed6(el)
{
var sel = el.options[el.selectedIndex];
if (sel.value == "Yes")disable6();
if (sel.value == "No")enable6();
if (sel.value == "Na")na6();
}
</script>
</head>
<body>
<form name="audit_billing_IE" method="POST" action="billing.php">
<table>
<tr>
<td> Parameter A </td>
<td colspan='3'> <input type="text" name="product_name4" id="product_name4" /> </td>
</tr>
<tr>
<td> Procedure </td>
<td>
<select name="Para_A_A1" id = "Para_A_A1" align="center" onchange="changed1(this)">
<option value="s1"> Select</option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value="Na"> Na </option>
</select>
</td>
<td>
<input type="text" name="Para_A_A1_comment" value="" disabled/>
</td>
<td align="center"> <input type="text" name="Para_A_A1_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
</td>
</tr>
<tr>
<td> Days Calculation </td>
<td>
<select name="Para_A_A2" id = "Para_A_A2" align="center" onchange="changed2(this)">
<option value="s2"> Select</option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value="Na"> Na </option>
</select>
</td>
<td >
<input type="text" name="Para_A_A2_comment" value="" disabled/>
</td>
<td> <input type="text" name="Para_A_A2_score" id="Para_A_A2_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
</td>
</tr>
<tr>
<td> request form </td>
<td>
<select name="Para_A_A3" align="center" onchange="changed3(this)">
<option value="s3"> Select</option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value="Na"> Na </option>
</select>
</td>
<td >
<input type="text" name="Para_A_A3_comment" value="" disabled/>
</td>
<td> <input type="text" name="Para_A_A3_score" id="Para_A_A3_score" value="" onFocus="startCalc();" onBlur="stopCalc();" />
</td>
</tr>
<tr>
<td> Case </td>
<td>
<select name="Para_A_A4" align="center" onchange="changed4(this)">
<option value="s4"> Select</option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value="Na"> Na </option>
</select>
</td>
<td >
<input type="text" name="Para_A_A4_comment" value="" disabled/>
</td>
<td> <input type="text" name="Para_A_A4_score" id="Para_A_A4_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
</td>
</tr>
<tr>
<td> interaction </td>
<td>
<select name="Para_A_A5" align="center" onchange="changed5(this)">
<option value="s5"> Select</option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value="Na"> Na </option>
</select>
</td>
<td >
<input type="text" name="Para_A_A5_comment" value="" disabled/>
</td>
<td> <input type="text" name="Para_A_A5_score" id="Para_A_A5_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
</td>
</tr>
<tr>
<td> MIS</td>
<td>
<select name="Para_A_A6" align="center" onchange="changed6(this)">
<option value="s6"> Select</option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value="Na"> Na </option>
</select>
</td>
<td >
<input type="text" name="Para_A_A6_comment" value="" disabled/>
</td>
<td> <input type="text" name="Para_A_A6_score" id="Para_A_A6_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Code:
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
one = document.audit_billing_IE.Para_A_A1_score.value;
two = document.audit_billing_IE.Para_A_A2_score.value;
three = document.audit_billing_IE.Para_A_A3_score.value;
four = document.audit_billing_IE.Para_A_A4_score.value;
five = document.audit_billing_IE.Para_A_A5_score.value;
six = document.audit_billing_IE.Para_A_A6_score.value;
document.audit_billing_IE.product_name4.value = [(one * 1) + (two * 1) + (three * 1) + (four * 1) + (five * 1) + (six * 1)];
}
function stopCalc(){
clearInterval(interval);
}
Hi, I am new to javascript,this is my first time using it, I am wishing to have 2 buttons on my website, one that scrolls to the bottom of my page when clicked and then stops at the bottom and one that scrolls back up the page when clicked, but I want my viewers to be able to see this movement. I have some code (below) which works fine in firefox but it doesn't work in explorer, and I can't get this code to work moving upwards (after taking away the minus from -50). Can anybody please help me I have been battling for days trying to make it work although I am finding it hard to understand javascript being a first time user. I currently have this javascript : [CODE] <head> <script language="JavaScript"> function pageScrollup() { window.scrollBy(0,-50); // horizontal and vertical scroll increments if (window.pageYOffset) { scrolldelay = setTimeout('pageScrollup()',5); } } </script> </head> <body> <a href="JavaScriptageScrollup()">Back to Top</a> </body>[ICODE] Any help is greatly appreciated. OrangeAnt I need to make something that will automatically insert values into a letter based on user input, just like this one right here. please tell me how it works....
Hi, First the background information - I run a website for the FA, they have recently launched an Under 21's League. They want the Fixture & Results posted on the site, with a league table. There is the problem, I need to league table to automatically update according to the results I put in. I believe JavaScript is capable of this, I have spent the last few days learning a basic ~ intermediate level of JS. However, I am still stuck. If you think you could help me out then reply here, I know this is one hell of a lot of coding so if you can only point me in the right direction that would be great! A side note -- I was thinking about it and well the JS needs to pull information from another internal web page, which I believe it cannot do. However, I'm lead to believe it could read it from a file on the server? If so I guess I will need to create a form to submit the results? Hope someone can help me out Thanks, Ben I work at a bar in Louisiana and have been put in charge of the website. Every day (Sun-Sat) we update the main page with who is bartending that night, along with a few other edits. I don't come into the office until 2pm, Mon-Fri. I would really prefer if the website could be updated 'automatically' at like, 4am or something, every day. Instead of me struggling to figure out how I'll update it on weekends. I have to use FrontPage, so I'm limited in the types of codes I can use. But Javascript seems to work well. What I'm thinking is have an 'updates' folder with pages labeled either by weekday (sunday.html monday.html tuesday.html, etc) or by date (072410.html, 072510.html, etc). Then the main page having some code that pulls from those files. (I'd prefer the weekday setup if I have the option) Since the bar doesn't close until 2am most days, I'd rather not have it change over at exactly midnight, but I'm willing to work with that if it means I know it's being updated every day regularly. Is there a script that automatically applies two different styles to the first two lines of text in a container, without using CSS? Example: ====== This Would be Line One as a Title with its Own Style This would be line two as a byline with a separate style This is the main text of the paragraph... etc etc. ====== Thanks for any help. Steph Hello, I'm using google voice search on a simple form: Code: <form action="http://www.google.com/search">
<input type="search" name="q" speech required onspeechchange="startSearch">
</form>
How to activate the voice search, that is generally activated by clicking on the little microphone near the textbox, without clicking it? I want it to start recording the voice after the user starts talking, or alternatively, after a tot # of seconds.. I did not find anything on the API: http://www.w3.org/2005/Incubator/htm...api-draft.html I thank you in advance Hi All, This is in ASP.Net Im creating a task loggin system and this allows the user to raise tasks and update them, im using javascript for validation and if the fields are empty it then changes the fields back ground to Red which is fine but then it goes on to update the data in SQL which i dont want, any suggestions or how i can achieve no post back is the result from the function is False (for fields in error) Html Code where im calling the function Code: <asp:button runat="server" id="btnChangeCommentsAuth" CSSclass="RaiseButton" OnClientClick="CommentsCheck('MainDisplayContentChange_txtAuthCommentsArea');" PostBackUrl="~/RaiseTaskChange.aspx" Text="Auth" />
Javascript function Code: function CommentsCheck(comments)
{
var com;
var result = new boolean();
com = document.getElementById(comments);
if (document.getElementById(comments).value == '') {
com.style.backgroundColor = "#B20635";
result = 0;
}
else
{
result = 1
}
}
Thanks in Advance look forward to your reply. |
|||||||