JavaScript - Hide Frames In Javascript
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? Similar TutorialsHi, 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... 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? 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 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!!!! Hi, I know very little about javascript, but it seems like what I need to do is simple, so I'm hoping someone here could help. In my online store.... I have a <div> called "prodprice" which houses a dynamically loaded price {tag_saleprice}. When the price is $0.00, I want the <div> to be hidden. When the price is anything other than $0.00, I want it to be visible. I have no idea how to code it, but it seems like the general logic would be something like this: <div id="prodprice" style="display:none">{tag_saleprice}</div> document.getElementById('prodprice') If prodprice="$0.00" .style.display = "block"; Am I totally off base? I just have no idea what to do and I have an impatient client! Thank you so much. so basically i have javascript code that i've been trying to write. When "Other" is selected in the form's drop down box, its supposed to show the textarea, otherwise its supposed to stay hidden. I made a seperate HTML page so whomever views this didn't have to scroll through my other javascript code / html / php lol... anyhow here it is Code: <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script type="text/javascript"> function update2(f,s,h) { var first=$('#'+f).val(); var hidden=$('#'+h); if(first=="other") { hidden.css('display','block'); else {hidden.css('display','none');} } </script> </head> <body bgcolor="#002E2F"> <form name="Manager" method="post"> <table border="0" style="background-color:#f4fbee" width="651" height="25" cellpadding="3" cellspacing="3"> <tr> <td width="651"><font face="verdana" size="2">Please tell us how you were referred to RSIC</font></td> </tr> <tr> <td width="651"> <form action=""> <select name="referred" id="referred" onchange="update2('referred','othertextarea','otherp');"> <option value="select" selected="selected">Select...</option> <option value="AttendRSIC">Attended RSIC Event</option> <option value="AttendIndus">Attended Industry Event</option> <option value="RefRSIC">Referred by RSIC Staff / Board</option> <option value="CurrentRSIC">Current RSIC business partner</option> <option value="RefThird">Referred by a third party that does business with RSIC</option> <option value="other">Other</option> </select> </td </tr> <tr> <td width="651"><font face="verdana" size="2">If you selected "Other" on the previous field, please describe below</font></td> </tr> <tr> <td width="651"> <p id="otherp" style="display:none;"> <textarea name="othertextarea" id="othertextarea" rows="5" cols="78"> </textarea> </p> </td> </tr> </table> Any help is appreciated, thanks everyone! hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="styling.css"/> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> window.onload = function() { document.getElementById('first_div').style.display = 'none';} function toggle(link, div1id, div2id) { var div1 = document.getElementById(div1id); var div2 = document.getElementById(div2id); if (div1.style.display == 'none') { $('#third_div').hide(); div1.style.display = 'block'; div2.style.display = 'none'; link.innerHTML = 'Login'; } else { $('#third_div').hide(); div1.style.display = 'none'; div2.style.display = 'block'; link.innerHTML = 'signin'; } } function toggleImg(divId) { $('#first_div').hide(); $('#second_div').hide(); $('#third_div').show(); } </script> </head> <body> <div id="first_div" class="container"> <label for="username"> <span>Username:*</span> <input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="password"> <span>Password:*</span> <input type="password" class="text" id="pass" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label> <input type="checkbox" name="remember" id="remember" class="checkbox" value="1" tabindex="3" /> Remember Me? </label> <label> <input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" /> </label> </div> <div id="second_div" class="container1"> <label for="username"> <span> Username:*</span> <input type="text" id="username" class="text" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="password"> <span>Password:*</span> <input type="password" id="password" class="text" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="repass"> <span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="email_id"> <span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label><input type="submit" name="submit" class="button1" value="Submit" /></label> </div> <div id="third_div" class="image"> <img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" /> </div> <div class="header"> <button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button> <button class="button_sign" id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button> </div> </body> </html> I wanted it according to this website https://www.tumblr.com Hello, I have a shopping cart that calculates shipping on products based on weight. What I'm wanting to do is use Javascript to scan the contents of the visitors shopping cart for a particular word, as well as scan the quantity of the product in the cart. The condition: If the product name = some string I want to compare AND if the quantity < some number I want to compare. If these two conditions are met, I wan't to hide a shipping option called 'Free Shipping' once the user clicks the Estimate Shipping & Tax button. Here is a link to the websites cart.php page: All Commercial Furniture.com - Shopping Cart The platform we use is a little limited, so they don't give us access to their PHP files. Having to find a workaround for right now. Please let me know if you need any info. Any point in the right direction would be great. Thanks I do not understand javascript at all. For about eight years I've had a UDM javascript menu on each of about 200 pages. It consists of a bunch of files that live in the top of my website and are called to each page by four lines of script. I have had only to edit appearance and links in one file. Instructions were to leave the others alone. The present version of the UDM menu is not free, as the old one was, and if I did buy it I'm not at all sure I'd be able to cope with it. Unless the names of the new files matched those of the old ones, I'd have to go in and edit each page individually. My problem is that IE9 doesn't display the menu, but does display its background, so there's a big beige block on the top left of every page. It looks bad. Would I be able to add to one of the files something like a conditional comment such as "If IE9 display none"? I would be truly grateful for any ideas that would help me fix this. My site is http://fay.iniminimo.com/ Thank you so much for your interest. Fay Hi to all, i have a javascript on my websute that i want to hide from all users , i want put it on a database mysql and recall it, in order to hide the code, how I can make? you have some idea? please help me. Hey, I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is: I'm working on a web form. The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues. But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well. BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear... Do you understand what I mean? How do I do this? Thanks in advance! I'm making a multiple choice test, it all must be on the same page but the user must not be able to see the next question until they finish the first and click continue. Is this possible in Javascript by manipulating form object or something else? Thanks for any suggestions. Hello everyone. I am building a subscription directory website and I need help developing a code that will perform this function: I want to be able to hide certain spans when another span appears on the page. In other words, the page will normally display <span id="spanA"> and <span id="spanB">. However, when <span id="spanC"> appears on a page, I want to set display:none for spanA and spanB. I know how to toggle between display:none and display:block using a call to a javascript function like a link with an "onClick" Perhaps there a way I could code a span in CSS to toggle this javascript function when it appears on the page? Thank you for any help! hey all- i have been thinking about how i wanted to tackle this for a while now, and it is now "down to the wire"... so in my page i have two nav bars, one for js enabled and one for js disabled... they are styled accordingly (the js disabled is display:inherit; and the js enabled is display:none now i may need to tweak those styles after i get the script working, but that i can toy with after i get this working... anyways- my pages get the navbar inherited from a master page- so my thought was (to prevent loops) make a nav bar that had all js disabled links and a navbar that had all js enabled... then in my code i put in this script Code: <script type="text/javascript"> document.getElementById("Nav_Menu_JS_Content").style.display = "inherit"; document.getElementById("Nav_Menu_Content").style.display = "none"; </script> now i am not amazing with js but i figured this would work... i get an error thrown every time though Quote: Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined now i assume (i am watching in debug) that this is because it is hitting the script before the rest of the page writes... but if i move the script below then the script never fires... ? here are the two nav bar ID's Note: i encapsulated the menus in <div>s and targeted the divs to ensure that there were no conflictions with my asp Code: <div id="Nav_Bar_Menu_Content" class="Nav_Menu"> ......... <div id="Nav_Menu_JS_Content" class="Nav_Menu_JS"> Hi, I have three tables and I want show one table at one time. At the bottom of one table I need to have "next" and "previous" links to go other two tables.Can you please help me. Thank You. Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code: HTML <div > <div id="showhide"> Line 1 </div> <div id="visiblediv" style="display: none;"> Line 2 </div> </div> <div > <div id="showhide"> Line 3 </div> <div id="visiblediv" style="display: none;"> Line 4 </div> </div> <div > <div id="showhide"> Line 5 </div> <div id="visiblediv" style="display: none;"> Line 6 </div> </div> Javascript: <script> function mover(){ document.getElementById("visiblediv").style.display="block" } function mout() { document.getElementById("visiblediv").style.display="none" } document.getElementById('showhide').onmouseover=mover; document.getElementById('showhide').onmouseout=mout; </script> CSS: #visiblediv { visibility:visible; border:1px dotted black; } Any ideas, as to why it's not working? HELP NEEDED URGENTLY... Hi all, previously i posted a thread on How to HIDE a link at a certain time using javascript but now i realize i actually need the codes such that it can be implement inside the sharepoint. http://codingforums.com/showthread.p...085#post894085 One problem i encounter is that the "getElementById" is not able to control the link that i'm trying to hide. Currently what i have is this sharepoint site whereby there is a particular link that i need to hide it at a certain time and the problem now is that in sharepoint i cannot obtain the 'div id' of the control (controls refers to the combo box, text etc) in the sharepoint site. Plz help..thanks! |