|
JavaScript - Problems With Changing 3 Frames On 1 Click
Hello,
I am making a website with 4 frames lined up vertically. Frame 1 (from the left) is the menuFrame, Frame 2 (mainFrame) is a frame with subcategories/information, Frame 3 (rightFrame) is a frame where some information pops up on a click on one of the subcategories and Frame 4 (rightFrame1) is where a pictures pops up corresponding to the information about the subcategory. I have been working on getting frame 3 and frame 4 to clear on one click on one of the menu links and I have got it to work using this java script in the head of my frames and framset file: Quote: <html> <head> <SCRIPT LANGUAGE="JavaScript"> function setFrame(frameName, frameSrc) { parent[frameName].location=(frameSrc); } </SCRIPT> </head> </html> and links like this in the body section: Quote: <a href="javascript:setFrame('mainFrame','information.html');setFrame('rightFrame','blank.html');setFra me('rightFrame1','blank.html')">LINK</a> I have tried uploading the site to the Internet and when I access it from the computer where I made it, it works like a charm. The problem is: when I access the website from other computers these java links doesn't work - no information or anything pops up in any of the frames. Any thoughts on where I could have made an error? Best Regards, Similar TutorialsHello, I'd need some help for scripting. Here is what I need to do. I got links in frameA which open pages in frameB. Pages might be long to load, so when I click on the link, from frameA, I want to have the "wait" cursor until body of frameB loads, then return to "default" cursor in frameA. I'd also want the cursor to be on "wait" in all my 4 frames during the load if possible. I can't do it with a:active in CSS cause the cursor is stuck on "wait" when it's clicked even after page in frameB is loaded. I searched hours in forums, tried lots of things and didn't fix my problem. Would need help, thanks 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!!!! How come this isn't working? document.getElementById('glance').style.display='block'.color='gold'; Hi, I used this on-click changeable background code for my website: http://www.codingforums.com/showthread.php?t=136821 And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files? website is: http://mintymix.com/ I hope it's ok to post here, the other thread is from 2008. Thanks for reading =) *edit* Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this? OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html>
<head><title>menu</title>
<script type="text/javascript">
var element = null;
function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
}
element = xx;
xx.style.backgroundColor='navy';
}
</script>
<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:white}
a:hover {color:white}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; }
.start {text-align:center; background-color:navy; }
</style>
</head>
<body>
<table id="layout">
<tr>
<td width="188">
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">CPAs</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">Doctors</div>
</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Hi all, I hope that someone can help me with this strange problem I have here. I have some script which changes a button and changes the onclick event. The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter. Here's my Code. Code: var AllocPeople = window.opener.document.getElementById('AllocPeople');
if(AllocPeople.value.length > 0)
{
var people = AllocPeople.value.split(",");
var Controls = new Array();
for(var P in people)
{
var id = people[P];
Controls[P] = document.getElementById('bt_AP_'+id);
Controls[P].innerHTML = "Deallocate";
Controls[P].onclick = function() {Remove_Player(id)};
}
}
Thanking you all in advance. Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser I have a web page with two frames, frame1 and frame2. I am trying to get the body tag of frame2 from frame1. I have declared two variables in javascript in frame1: var mainFrameDoc = parent.frame2.document; var mainFrameBody = mainFrameDoc.body; When I try to utilize the variable mainFrameBody I get an error stating that it is null or undefined. How can I get a handle to the body tag of frame2? Hi Friends......... I have two frames in page and in top frame i have a menu.... some of the submenus are clipped because they hide below second frame as height of first frame is small...however i dont want to change height of frames.... So is there any way so that i could display rest of submenus which are being clipped over second frame...... Please help..... I need to display a picture when it is clicked within various color mats and frames. Does anyone know the code for it? Thanks.
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. i have a simple frame that looks like this http://i307.photobucket.com/albums/n...aker/help2.jpg i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load i cant figure out what the code for this is and googling for the solution isn't getting me anywhere help please 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>
I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please.... (roll over image) In the <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif"; staticImage1 = new Image(); staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif"; ........................................................... (button) <a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a> ........................................................... (two frames at once text) In the <head> <script language="javascript"> function loadTwo(iframe1URL, iframe2URL) { parent.frame1.location.href=iframe1URL parent.frame2.location.href=iframe2URL } </script> ........................................................... (button) <a href="javascript:loadTwo('info.html','home.html')">info</a> Thanks! Please take a look at my site at http://purdypoodles.webs.com/index2.html to see what I have set up with frames. I'm looking for code that will allow users to click on "meet the parents" in the top frame, for example, and nicely scroll from the current position in the bottom frame to the Meet the Parents section also in the bottom frame. Then, if the user wants to go to Poodle Facts from there, it'll scroll smoothly from Meet the Parents to Poodle Facts. etc. I got a JS code somewhere, but it doesn't work. Any ideas??
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... |
|||||||