|
JavaScript - Hopefully Simple Question About Javascript And Frames
I'm building a webpage using javascript and iframes. Basically I have an iframe in the middle of the index.html page that links to another html page (let's call it iframe.html). My question is, is it possible to call a javascript function from iframe.html to control an object on index.html? If so, how do I do this? I'd like to be able to assign an image in iframe.html with the hyperlink of href="javascript:function()", where the function effects the CSS of a div on index.html.
Thanks Similar TutorialsHello guys, Im new to Javascript,please help me ya in my php code, I retrieve a ID value and assign to variable like below PHP Code: $id = $gettingdata['id']; and I want this id to be include together with javascript "insertsubcat" function like below Code: <a href="javascript:insertsubcat('.$ID.');"/>Click to insert this data</a>
in the javascript page, I dont know how to call back the id value and i try like code below but it doesnt work Code: function insertsubcat(data) {
var data = data.value;
.
.
.
.
}
Any idea? Thanks Azhan Malaysia Hello guys, I'm new to this forum and to Javascript. I need to make a very simple website to check whether a ticket number is valid or not. I have created an array with all the codes necessary, but when I try to loop through it, the only thing that works as it should is the first element of the array. Basically, I want the code to display Correct!, if there is a match between user input and array, or Wrong if otherwise. Here is my code: Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function validate() {
var list = new Array;
list[0]="zDv5BXAc";
list[1]="6YXF3Qwj";
list[2]="k8UKpgwo";
var code= document.getElementById("code");
var name = document.getElementById("name");
for(var i=list.length-1; i>=0; --i) {
if (code.value == list[i])
{
document.all.confirm.innerHTML = "Correct"
}
else
document.all.confirm.innerHTML = "Wrong"
}
}
</script>
</head>
<body>
<input name="Name" type="text" id="name" size="50">
<input name="Code" type="text" id="code" size="10">
<input name="Check Code" type="submit" value="Verify" onClick="validate()">
<div id="confirm"></div>
</body>
</html>
I'm trying to do some rollover images for a webpage I need to design, for class. I have them set up, and they work.. but the issue is that I set it up in such a way that the .js file is dynamic, and works for each page. You know, so that I don't actually have to specify the images within the .js file. The problem with THAT is that it doesn't automatically load the rollover version of each image, when the page loads.. so it's a bit sluggish. Here's my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
Here's how I have it in the HTML Code: <a href="gallery" onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/gallery.jpg')">
<img style = "top:150px; left:100px;" border="0" id="gallery" src="/images/gallery.jpg"/> </a>
Is there anything I can do to force it to load the rollover image, without sacrificing my dynamic .js code? I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "")
{
alert("No Item Chosen")
}
else
{
chosen = ""
len = document.form1.c1.length
for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}
if (chosen == "") {
alert("No Color Chosen")
}
}
else {
itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}
</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>
<form name="form1">
<h4>What item would you like to buy?</h4>
<input type="text" name="item1" value="" /><br />
<br/><br/>
<h4>Color</h4>
<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />
<br/><br/>
<h4>Size</h4>
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<br/><br/>
<button onclick="processform()">Purchase</button>
<br/><br/>
<textarea rows="2" cols="40" name = "txtarea1"> </textarea>
</form>
</body>
</html>
When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? Hi, Im new to javascript so thankyou in advance for reading this! Im trying to create a video gallery, with thumbnails below a main content div, which when clicked display the relevant video in the said div. This isn't a problem and I have managed to do this... However, I also need to display descriptive text (different for every video) in a seperate div, and the first video also needs to autoplay when the page is loaded (rather than waiting until the user requests a video by clicking a thumbnail) I've made an example of where Im at so far and its viewable here... http://www.phixfilm.com/video_thumbn...ideo_test.html The div 'a few lines of info about vid here' is currently just static but this is what i need to change each time a different video is requested by the user (sorry if thats obvious but just in case its not clear) I will be using .movs but I've embedded youtube for now although I don't think that makes any difference... Im presuming it will be a case of having text that is hidden until the thumbnail is clicked...? Which I guess I could do with css but that way seems a little clumsy, I really am a newbie to javascript so a helping hand in the right direction would be very much appreciated. THANKYOU! ps- an example of something similar to what Im trying to achieve is here... http://somesuchandco.com/#670098/Nathalie-Canguilhem I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name. I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg. I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it. Any help appreciated. Hi, I will appreciate if someone could help me with this Case Problem. For some reason that I don't understand, it seems to be working in Firefox, but not IE. Well, most of it is working. The problem is to create a "Demo" which has three frames in rows. The first frame at the top is the title bar with "Submit Code", "show only code", "show only preview", and "show code and preview" buttons. The middle frame has 2 textarea boxes. The html code goes in the left box, and the css styles go in the right box. Once you enter any code in their respected boxes, and press "submit code", it should be rendered as a web page in the third frame below the boxes (which is just an empty document). I have attached a screenshot of how it should look like, and I am posting my entire code below. Everything is working except for the rendering of the web page in the third frame. When I click on submit, I get no errors, nothing happens. Any help or suggestions would be greatly appreciated. Thank you. Code: function showPreview(){
parent.document.getElementById("demo").rows="100,1,*";
}
function showCode(){
parent.document.getElementById("demo").rows="100,*,1";
parent.frames[1].document.getElementById("inputhtml").style.height="300px";
parent.frames[2].document.getElementById("inputcss").style.height="300px";
}
function showBoth(){
parent.document.getElementById("demo").rows="100,210,*";
parent.frames[1].document.getElementById("inputhtml").style.height="150px";
parent.frames[2].document.getElementById("inputcss").style.height="150px";
}
function sendCode(){
var previewFrame=parent.frames[3];
var htmlCode=parent.frames[1].document.getElementById("inputhtml").value;
var cssCode=parent.frames[2].document.getElementById("inputcss").value;
previewFrame.document.write("<html><head><title></title>");
previewFrame.document.write("<style type='text/css'>"+cssCode+"</styles>");
previewFrame.document.write("</head>");
previewFrame.document.write("<body>"+htmlCode+"</body></html>");
//previewFrame.document.close();
}
</script>
</head>
<body>
<form name="control" id="control" action="">
<h2 id="demotitle">Creating Web Pages</h2>
<p>
<input type="button" value="Submit Code" onClick="sendCode()"/>
<input type="button" value="Show Only Code" onClick="showCode()" />
<input type="button" value="Show Only Preview" onClick="showPreview()"/>
<input type="button" value="Show Code and Preview" onClick="showBoth()"/>
</p>
</form>
</body>
</html>
What's Up? OK, So I've been trying to add text to a <textarea> and text field tag inside of a frame via JavaScript, I did find a tutorial and using off-line html's it worked, But when I try to use a online frame, It doesn't work. OK, So one html opens two frames which are. Left.html Code: <HTML> <HEAD> <TITLE>JavaScript Example 13</TITLE> </HEAD> <BODY> <INPUT type="button" value="Button" onClick=""> </FORM> </BODY> </HTML> right.html Code: <form action="posting.php" method="post" name="post" onsubmit="return checkForm(this)"> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <input class="post" type="text" value="" tabindex="2" style="width: 450px;" maxlength="60" size="45" name="subject"/> <textarea onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" class="post" tabindex="3" style="width: 450px;" cols="35" rows="15" name="message"/></textarea> <input type="submit" value="Submit" class="mainoption" name="post" tabindex="6" accesskey="s"/> Anyone Know What To Do? Thanks Bye. Hi, im having a problem adding a frame busting killer that counteracts a frame killer script on sites so i can load them inside my iframes.. here is the code i use <?php $result = mysql_query("SELECT ru.id, ru.username, ru.owid FROM raidbar_users ru LEFT JOIN raidbar_groups rg ON ru.groupid = rg.id WHERE rg.id = '".(int)$_REQUEST['group']."'") or die(mysql_error()); $myRaidid = raidid(); if(isset($_GET['gm'])) { echo '<FRAMESET rows="*,*,*,30" frameborder="0">' . "\n"; echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n"; $i = 0; while($row = mysql_fetch_array($result)) { if ($i == 2) { echo ' </FRAMESET>' . "\n"; echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n"; $i = 0; } echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/joinraid.php?raidid=' . $myRaidid . '&suid=' . $row['owid'] . '&serverid='.$siteConfig['userServer'].'">' . "\n"; $i++; } echo ' <FRAME src="">' . "\n"; echo ' </FRAMESET>' . "\n"; echo ' <FRAMESET frameborder="0" scrolling="no">' . "\n"; echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . $myRaidid . '">' . "\n"; echo ' </FRAMESET>' . "\n"; echo '</FRAMESET>' . "\n"; } else { echo '<table cellspacing=1 cellpadding=1>' . "\n"; echo '<tr>' . "\n"; $i = 0; while($row = mysql_fetch_array($result)) { if ($i == 2) { echo '</tr>' . "\n"; echo '<tr>' . "\n"; $i = 0; } echo ' <td><iframe src="./acct.php?suid=' . $row['owid'] . '" width=450 height=225 scrolling=no frameborder=0></iframe>' . "\n"; $i++; } echo '</tr>' . "\n"; echo '<tr>' . "\n"; echo ' <td><iframe src=http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . raidid() . '&serverid='.$siteConfig['userServer'].' width=250 height=30 scrolling=no></iframe>' . "\n"; echo '</tr>' . "\n"; echo '</table>' . "\n"; } ?> Now im told to use the following.. <script type="text/javascript"> var prevent_bust = 0 window.onbeforeunload = function() { prevent_bust++ } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2 window.top.location = 'http://server-which-responds-with-204.com' } }, 1) </script> or var prevent_bust = 0; // Event handler to catch execution of the busting script. window.onbeforeunload = function() { prevent_bust++ }; // Continuously monitor whether busting script has fired. setInterval(function() { if (prevent_bust > 0) { // Yes: it has fired. prevent_bust -= 2; // Avoid further action. // Get a 'No Content' status which keeps us on the same page. window.top.location = 'http://server-which-responds-with-204.com'; } }, 1); But the window.top.location i dont know how to incorporate that to work. Can anyone help? hi Folks, I am new for HTML FRAMES. I have the code like as shown below. Code: <FRAMESET rows="0,*" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
<FRAME SRC="Javascript:parent.getStartupScreen ()" name="RP" scrolling="no" >
<FRAMESET rows="0,*,0,8%" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
<FRAME SRC="/jsp/hierarchy/control.jsp" name="cF" scrolling="NO">
<FRAME SRC="Javascript:parent.getBlank()" name="vF" scrolling="AUTO">
<FRAME SRC="Javascript:parent.getBlank()" name="dF" scrolling="NO">
<FRAME SRC="/jsp/resourceplanner/ResourcePlannerFooter.jsp" name="RPF" scrolling="NO">
</FRAMESET>
</FRAMESET>
i am currently on "RPF" Frame. I want to refer "RP" Frame loaded "Form" Elements . Please suggest me . Thanks... New assignment. This is the code i have below already supplied now. not exactly correct yet but want to just get something to work from i need to insert an embedded script element in head section of document, purpose os to hide htmlcode and csscode frames to provide more screen space to hide 2 frames i am to change value of rows attribute in demo frameset to "100,1,*" id of the frameset object is demo Code: <title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="demo.htm" type="text/javascript"></script>
<script type="text/javascript">
function showPreview(id,x,y) {
object=document.getElementById(id);
object.style.visibility="hidden";
top.FrameName.rows = "100,1,*";
}
</script>
just for your reference here is the demo part Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 6
Case Problem 3
Web Design Demo
Filename: demo.htm
Supporting files: css.htm, html.htm, title.htm
-->
<title>HTML Demo</title>
</head>
<frameset rows="100,210,*" id="demo" name="demo">
<frame name="title" id="title" src="title.htm" scrolling="no" />
<frameset cols="*,*">
<frame name="code1" id="code1" src="html.htm" />
<frame name="code2" id="code2" src="css.htm" />
</frameset>
<frame name="output" id="output" />
</frameset>
</html>
how does this look so far just remember the top code is what i am working on what should i change and add? suggestions anyone? Hey guys, I'm using javascript in a menu to change the colour scheme of a page with frames and wondered how I could make this Javascript work across frames. The top frame is the colour picker with the Javascript and the bottom frame is the html template that will be changing colour scheme. JS: Code: var cols = {
red: [
{ el: '.headertitle', color: '#FF0000' },
{ el: '#wrapper #maincontent #leftpanel ul.leftnavigation li a.current', bgcolor: '#FF0000', color: '#FFFFFF' },
{ el: '#wrapper #maincontent #leftpanel', border: '#FF0000' },
{ el: '#wrapper #maincontent #leftpanel ul.leftoffers li div.titlebody a', color: '#FF0000' },
{ el: '#wrapper #maincontent #editable h2', color: '#FF0000' },
{ el: '#wrapper #maincontent #rightpanel', border: '#FF0000' },
{ el: '#wrapper #footer', bgcolor: '#FF0000' },
{ el: '#wrapper #maincontent #leftpanel ul.leftoffers li', bgcolor: '#F6D9D9'},
{ el: '.choosecolour', border: '#fff' },
{ el: '#cbred', border: '#000' }
],
orange: [
{ el: '#header', bgcolor: '#ff8c10', color: '#ffffff' },
{ el: '#nav li a', bgcolor: '#d63b18', color: '#ffffff', hoverbgcolor: '#fc6827', hovercolor: '#ffffff' },
{ el: '.primaryBgCol', bgcolor: '#ff8c10', color: '#ffffff' },
{ el: '.secondaryBgCol', bgcolor: '#f8a955', color: '#ffffff' },
{ el: '.footerBgCol', bgcolor: '#f2441c' },
{ el: '.footerTextCol', color: '#ffffff' },
{ el: '.borderCol', border: '#ff8c10' },
{ el: '#logo', src: 'images/logo_orange.gif'},
{ el: '.choosecolour', border: '#fff' },
{ el: '#cborange', border: '#000' }
]
};
function changeColour(col) {
$A(cols[col]).each(function(i) {
$$(i.el).each(function(j) {
if (i.bgcolor)
j.setStyle({ backgroundColor: i.bgcolor });
if (i.color)
j.setStyle({ color: i.color });
if (i.border)
j.setStyle({ borderColor: i.border });
if (i.src)
j.writeAttribute('src', i.src);
// hover colours
if (i.hovercolor || i.hoverbgcolor) {
j.onmouseover = function() { this.setStyle({ backgroundColor: i.hoverbgcolor, color: i.hovercolor }); };
j.onmouseout = function() { this.setStyle({ backgroundColor: i.bgcolor, color: i.color }); };
}
});
});
}
JS picker HTML code: Code: <div class="colours">
<div class="choosecolour" id="cbred" style="background-color: #c90c12;" onclick="changeColour('red');"></div>
<div class="choosecolour" id="cborange" style="background-color: #ff8c10;" onclick="changeColour('orange');"></div>
</div>
Anyone know how I can make the colour scheme of page in lower frame change when colour is picked in top page frame? CHANGE XX to TT CHANGE zero in c0m to O becoming com CHANGE YYY to WWW hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ first an example of what im trying to do: when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically. this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways. Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself. How do I fix it? Thank you!!!! I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean I am using a show/hide script for my sites FAQs. This is the code: However, when you click on one of the Questions it brings you to the top of the page due to the <a href="#" How do I make it so it doesn't bring you to the top of the page? Code: <html>
<head>
<title>TEST TEMPLATE</title>
<script type="text/javascript">
function showHide(id)
{
var current = document.getElementById(id);
for ( var f = 1; f < 99999; ++f )
{
var div = document.getElementById("FAQ" + f);
if ( div == null ) return; // quit when we run out of FAQs
if ( div != current )
{
div.style.display = "none"; // zap all others
} else {
// toggle current one
div.style.display = ( div.style.display == "none") ? "block" : "none";
}
}
return false; // IMPORTANT!
}
</script>
</head>
<body>
<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li> <a href="#" onclick="return showHide('FAQ1')">FAQ one</a></li>
<li> <a href="#" onclick="return showHide('FAQ2')">FAQ two</a></li>
<li> <a href="#" onclick="return showHide('FAQ3')">FAQ three</a></li>
<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>
</body>
</html>
Hello, I am new to javascript. Below is the code that opens a new window when the user clicks on the button "Click here to see". But the code resides outside the <script></script>. As far as i know javascript codes have to be between these tags to work. How will the "window.open" statement work? Code: <form>
<input type="button" value="Click here to see" onclick="window.open('http://www.yahoo.com')" />
</form>
I'm trying to not allow my users to enter in n/a in my form ex... "N/A" "n/A" "na" My code trips the alert every time no matter what is entered in the cell... Why is it doing that? Code: function appliance() {
if (document.ComplianceForm.Appliance.value=="n/a" || "N/A" || "n/A" || "N/a") {
alert("You cannot enter any variation of n/a in this cell.")
}
else {
return false;
};
}
Ok...this is gonna sound very stupid to you guys, but I don't get one part of this code. Code: function range(upto) {
var result = [];
for (var i = 0; i <= upto; i++)
result[i] = i;
return result;
}
show(range(4));
What does result[i]=i mean? I know it adds the value of i into the array, but how? Why couldn't you just write it as result[i] or result[] = i? I want to Count the number of occurrences of character 't' in a string entered by the user (via prompt) and write the result to the web page. For example, if the user enters "Working with strings", you should write a message saying that the string contains 't' 2 times. I know it has something to do with charAt. Im just playing around with it trying to figure it out and got Code: var str = prompt(); document.write(str.charAt(1)); That doesnt count anything up obviously. i need to use a loop but im not sure how to apply a loop and charAt. I have an alert I'm using over in Salesforce to remind sales reps to use a special terms document when quoting. Problem is, the alert is going off for ALL accounts, not just "Account1" and "Account2". Is this line incorrect in syntax or something? if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2")) Thanks all. This forum has been very helpful for me in the past so this was my first stop! Jeremy Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
var isstatus = "{!Opportunity.StageName}";
var acct = "{!Opportunity.Account}"
var msgg = "Please remember to use a special terms and conditions quote template when quoting this opportunity.";
if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
|
|||||||