JavaScript - Inserting Hidden Content On Page Into Between Tags
Hello,
I was wondering if it is possible to do something like below using JS. Say I have some hidden text at the top of an HTML page... Code: <div id="text" style="visibility: hidden;">text</> and an empty tag at the bottom of the page. Code: <div id="empty_container"></div> Is there any way JS could grab the content inside #text and move it inside #empty_container when the page loads? Thanks. Similar TutorialsHi all, I have: Code: var moreinfo =""; moreinfo+= "here some content"; $("#divMoreInfo").html(moreinfo); And this inserts "here some content" in a div called divMoreInfo. Now divMoreInfo is placed inside an iframe while the rest of the programming has to be in the parent page... How do I insert moreinfo's contents in the iframe's div?? Thanks a lot Hey there everybody, Seems I need help again. Still trying to learn the ways of the javascript. So here is my dilemma: I have a text field and some buttons below it. When I click on the button it insert the text for it into the text field. However, in order for that text to display in the text field a second time in a row I have to click on the text field and then click on the button again. What I would like to be able to do is to click on the button several times in a row so that it inserts the text again and again without having to click on the text field to reselect it. What's wrong with this script that is causing it to work that way? What can I do to fix it? By the way, I will be coupling this code with a popup code. The popup code, which works perfectly fine, has buttons in it as well and insert that text into the main window text area repeatedly. I just need some buttons on my main window that do the same thing. I hope the explanation makes sense. With all of this playing around, I know I'll get the hang of it eventually. I hope. . . Any help is greatly appreciated. Code: <html> <script type="text/javascript"> function insert(el,ins) { window.lstText={}; if (el.setSelectionRange){ el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length); } else if (document.selection && document.selection.createRange) { el.focus(); var range = document.selection.createRange(); range.text = ins + range.text; } } </script> <body> <form> <textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;"> This is sample text, click anywhere in here then choose on of the buttons above to see text inserted. </textarea><br /><br /> <input type="button" value="Hi" onclick="insert(window.lstText,'Hi')"> <input type="button" value="Bye" onclick="insert(window.lstText,'Bye')"> <br /> </form> </body> </html> I dynamically create a hidden form field with some javascript. It works fine, the field gets created and filled in with whatever the user types in the prompt popup. But even though I have specified type="hidden" it is still displaying the field contents at the bottom of my form. Code: var newvar = document.createElement('input'); newvar.setAttribute('name',varname); newvar.setAttribute('type','hidden'); newvar.setAttribute('value',Prompt.show("Enter notes")); document.mainform.appendChild(newvar); Thanks for any help I need for the form to do the following: when age is greater than or equal to 65 enter "yes" in the hidden field when age is less than 65 enter "no" in the hidden filed return true Create a page processAge.htm that Writes the message on the page Hi name. At age # you may retire. or Hi name. At age # you are not ready to retire. Get to work. name is the name entered on the form. # is the age entered on the form. Java: Code: <script type="text/javascript"> /* <![CDATA[ */ function validateSubmission() { var retValue = true; if (document.forms[0].name.value == "") { window.alert("You did not fill in one of the following required fields: Name or Age."); retValue = false; } } function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert("You must enter a numeric value!"); return false; } } /* ]]> */ </script> Body: Code: <form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); "> <table frame="border" rules="cols" > <tr> <td valign="top"> <h2>Retirement</h2> <p>Name<br /> <input type="text" name="name" size="40" /></p> <p>Age<br /> <input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p> <p style="text-align: center"><input type="submit" value="Send" /><input type="reset" /> <input type="hidden" name="Retirement" /></p> </td></tr> </table> </form> Process Page: Code: <script type="text/javascript"> /* <![CDATA[ */ document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>"); var formData = location.search; formData = formData.substring(1, formData.length); while (formData.indexOf("+") != -1) { formData = formData.replace("+", " "); } formData = unescape(formData); var formArray = formData.split("&"); for (var i=0; i < formArray.length; ++i) { document.writeln(formArray[i] + "<br />"); } /* ]]> */ </script> Thanks for any help! Looking for a simple way to have a hidden element made visible when the page scrolls. The idea is to have a back arrow appear only when the page has been scrolled horizontally. trying something along these lines without success ... Code: <script type="text/javascript"> window.onscroll = function () { if $("back").is(":hidden") { $("back").show("slow"); } } </script> The site is he www.milesjaffe.com. Thanks -- I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form: Code: <input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent"> The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe? Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <LINK rel="stylesheet" type="text/css" href="<?php $path = $_SERVER['DOCUMENT_ROOT']; $path .= "/php/fleet/includes/website.php"; include_once($path); ?>/php/font.css"></style> </head> <body> <script type="text/javascript"> var showndiv=false; function show() { document.getElementById('fleet1').innerHTML=""; if (showndiv){document.getElementById(showndiv).style.display = 'none'; } theval=Number(document.getElementById('tb').value); switch (theval){ case 120: showndiv='fleet2' break; case 121: showndiv='fleet3' break; case 122: showndiv='fleet4' break; default: document.getElementById('fleet1').innerHTML="Sorry, nothing found" return; } document.getElementById(showndiv).style.display = 'block'; } </script> <script type="text/javascript"> ///////////////////////////////////////////////////// // Between the quotation marks, list the id values of each div. var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4"; ///////////////////////////////////////////////////// IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," "); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," "); var IDlist = IDvaluesOfEachDiv.split(" "); function ShowAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = ""; } } function HideAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = "none"; } } </script> <form name="myForm"> <input type="text" id="tb"> <input type="button" value="Search" onclick="show()"> </form> <div id="fleet1" style="display:block"> </div> <div id="fleet2" style="display:none" class="fleetdiv"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W599 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table> <table align="right"> <TR> <TD> <a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr> </table> <div id="fleet3" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W601 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> <div id="fleet4" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">122</FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W602 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> </body> </html> http://nctfleetlist.co.uk/div3.php epic thread title! Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case. PHP Code: // save notes against company if ($_POST['a']=="Save Note") { if (addnote($_POST['notetitle'],$_POST['notebody'])) { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>"; } else { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>"; } } I want to then wait until the page load is complete and then do the following. PHP Code: document.getElementById('addevent').style.display='block'; The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown. Now my current fail attempt at doing it was this PHP Code: echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this. Hi All, I am new to javascript and actually I need to insert the data into a textarea from a text file when the user loads the browser.. and I am using this program to do it..but its throwing error 405, I dont know whats the problem..can any one please check the code or give me some code to do the same funtionality. Quote: <script type="text/javascript"> function getfile() { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } var url = "${pageContext.request.contextPath}/static/files/email1.txt"; xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("POST", url, true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { var emm = xmlHttp.responseText; alert(emm); } } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> can one give me some idea regarding this. Thanks in Advance, Best Regards, Rajasekhar. I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user: Code: document.documentElement.style.overflow = document.body.style.overflow = 'hidden'; The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page. I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive. Hi, How I get the images tags from an HTML page with Javascript (SRSc)? Regards FG Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya I'm looking for a simple javascript that can fill in the subject of an email message with whatever is in the title tags of the page they're on and also to include the link the the page in the body. [CODE] <a href="mailto:e@o.com?subject=&body=http://www.o.htm" title="Question"> [CODE] Thanks! Hello Basically I have found and adapted the code: Code: alreadyloading = false; nextpage = 2; $(window).scroll(function() { if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { if (alreadyloading == false) { var url = "page"+nextpage+".html"; alreadyloading = true; $.post(url, function(data) { $('#projectscontainer').children().last().after(data); alreadyloading = false; nextpage++; }); } } }); I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in... I want the new content to appear below "#projectscontainer'" Why won't this work? Anyone know? Thanks I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? I want to create several pages (they can be text or html) with basic informatons for css formatting. example: <div class="appname" name: this app <div class="appdetails"> Version: 1.0 Date: 1/1/2011 Description: this is an app </div> </div> I want to be able to save several of these and load them into a web page where they are formatted and displayed. This needs to be a client side solution so that I can be able to access this offline. Any suggestions? Edit: so far I have tried this but I am not sure about it. <object type="text/html" data="app1.html"> Hi, I wish to get some content from another page. Here is my code. Code: <script type="text/javascript"> jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) { var x = jQuery('#box4 .first:last', ajax).innerHTML; document.write(x); } } }); </script> <script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script> But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png Thanks So I'm trying to get one particular number from a game's grand exchange database. Say I wanted to know the 'Market price' of this item and the item results would change on click of a drop down box. I don't know how I'd go about getting that one section of the entire page though. Any help is appreciated. Code: <html> <head> <title></title> function doit() { var potion = calculate.potion.options[calculate.potion.selectedIndex].text; if (potion=="Sara brew") { var potion = "Saradomin_brew_(3)"; } if (potion=="Zammy brew") { var potion = "Zamorak_brew_(3)"; } calculate.results.value=potion; } </head> <body> Item: <select name="potion" onChange="doit()" /> <option selected>--Potion--</option> <option>Sara brew</option> <option>Zammy brew</option> <br /> <input type="text" name="results" /> </body> </html> I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all. On default.asp, I am calling a function contained in 'ajax_call-contentselection.js' Code: <a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a> Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case: Code: function func_displaycontents(var_type){ var xmlHttp = GetXmlHttpObject(); var url = "../_include/ajax_display-contentselection.asp"; url += "?type="+var_type; if (!xmlHttp){ alert ("Browser does not support HTTP Request") return } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState == 1){ document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>"; }; if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText; } }; xmlHttp.open("GET", url, true); xmlHttp.send(null); } The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript. Please let me know if I sucked at explaining something, or more detail is needed. Thanks in advance, Matt I know that when you "display: none" with CSS it will not show the div content in the browser, but will still show the div and content in page source. Is there a way (via javascript or anything else) to also remove the content from page source at the same time? Thanks. |