JavaScript - Print Partial Content In Document
Hi,
Is there a way to print (sending to printer) the partial contents within the HTML file Ex: Can i print content of div2 only?. <html> <body> <div id='div1'> .... </div> <div id='div2'> .... </div> </body> </html> Can you please let me know your inputs. Thanks.. Similar TutorialsHi, I'm using window.print() to print a document. This is the coding : <th colspan="2" align="right"><a href="JavaScript:window.print();" onclick="return verify()"><img src="image/image.gif" width="25" height="20" /></a></th> How can i print the document without printing together the image? Or is there any other way that you guys know? Thanks serverless situation where applet drives document scanner and captures images. Currently use data uri technique <img src="data:image/jpg;base64,BLAHBLAHBLAH> to dynamically change img src (image fed from the applet) when user wants to view a particular image. Works great in firefox... In ie8, however, the 32K limit on data uri's stops me cold. I researched switching over to MHTML techniques for IE only....but without server-side generation of the MHTML (or CSS), I am running into issues. Does anyone know of a way to dynamically 'inject' MHTML content via javascript into current document for use as MHTML image ? I'm having trouble getting Google Chrome to print the correct content when I change the content of a modal page with JavaScript. This is my code: JavaScript: Code: function printCoupon(couponID) { var originalContents = document.body.innerHTML; var printable = document.getElementById(couponID); var printContents = printable.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; document.getElementById(couponID).scrollIntoView(true); } HTML: Code: <body> <div id="coupon1"><p>Coupon 1 contents</p></div> <div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div> <div id="coupon2"><p>Coupon 2 contents</p></div> <div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div> </body> This works in IE8 and FF 3.6, but Chrome 16 prints the original content, not the printable content. UPDATE: I just discovered another problem with this script. In IE9, the parent page is printed along with the modal (the modal looks transparent), instead of just the modal. Okay, this should be an easy one. I'm a JS newb, so be kind The code I have right now is an autosuggest feature, but currently, it only finds exact matches, not partials. I want it to find partials. I know the line of code I need to rewrite, but I can't figure out what JS function to use. For example, if a user types "pizza", i want "pepperoni pizza" to show up, not just things that start with "pizza". Code: // str is the string that the user is typing in // this.aNames is an array containing all the possible strings to match against // aList is the list of matches from aNames when compared to str autoCompleteDB.prototype.getMatches=function(str,aList,maxSize) { /* debug */ //alert(maxSize+"ok getmatches"); var ctr=0; for(var i in this.aNames) { if(this.aNames[i].toLowerCase().indexOf(str.toLowerCase())==0) /*THIS LINE NEEDS TO BE CHANGED*/ { aList.push(this.aNames[i]); ctr++; } if(ctr==(maxSize-1)) /* counter to limit no of matches to maxSize */ break; } }; I want to have button2 populate form fields in a separate form with certain data I choose. The challenge is that the name of each text box is the same ("inputbox") and the id is dynamic, the first part only staying the same. So, the form element id would be "idb_4555557805340560...". There would only be one form element that begins with "idb." The following code works, but doesn't address the dynamic id. How can I do this? Code: <HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> function writeText (form) { document.getElementById('ida').value = "Have a nice day!"; document.getElementById('idb').value = "Have a nice day!!"; document.getElementById('idc').value = "Have a nice day!!!"; } </SCRIPT> <form name="one"><INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(document.myform)"></form> <FORM NAME="myform" ACTION="" METHOD="GET"> <INPUT TYPE="text" NAME="inputbox" id="ida" VALUE=""> <INPUT TYPE="text" NAME="inputbox" id="idb" VALUE=""> <INPUT TYPE="text" NAME="inputbox" id="idc" VALUE=""> </FORM> </BODY> </HTML> I am currently working on a simple site and I was looking into methods to take advantage of html partial rendering to make site maintenance easier without using a server side language. The code for the two pages is as follows: Main html page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <link href="../css/main.css" rel="stylesheet" type="text/css"/> <link href="../css/default.css" rel="stylesheet" type="text/css"/> <title>Default</title> </head> <body> <div class="navigation" id="nav_div"> <iframe name="nav_frame" onload="loadNav()"></iframe> </div> <script type="text/javascript" language="javascript"> <!-- function loadNav() { nav_frame.location="../static_partials/navigation.htm"; } //--> </script> </body> </html> And the code of navigation.htm is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <script type="text/javascript" language="javascript"> <!-- function iframeLoad() { parent.document.getElementById("nav_div").innerHTML = document.getElementById("navigation_divs").innerHTML; } //--> </script> <title>Navigation Partial</title> </head> <body onload="iframeLoad()"> <div id="navigation_divs"> </div> </body> </html> The works fine in IE, but in Firefox 3.5.7 the iframeLoad generates an exception. The exception states the following: Code: Permission denied for <file://> to get property Window.document from <file://>. Firefox doesn't seem to like my usage of the parent object in that way, but I am unsure of another way to do it without using a server side language. My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE> <META content="text/html"; charset="UTF-8" http-equiv="content-type"> <SCRIPT type="text/javascript"> function createTable(){ var Etudiant = new Array(Number(prompt("How many Students will you put in ?",""))); document.write("<table border=\"1\">"); for (var i=0; i<Etudiant.length; i++) { Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","") alert("Nice to see you "+Etudiant[i]); document.write("<td>"+Etudiant[i]+"</td>"); j = parseInt(prompt("Combien de notes voulez vous calculez ?")); for (h=0;h<j;h++){ notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i])); document.write("<td>"+notes[h]+"</td>"); } document.write("<tr>"); } document.write("</tr>"); document.write("</table>"); document.getElementById('monTab').innerHTML=Etudiant; } </script> <BODY> <H1>Combien de note voulez vous cumulez ?</H1> <br> <br> <input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()"> <div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div> </BODY> </HTML> I use wget in Linux to follow spam links to download malware samples through the firewall, which will send them to a VM and if they are malware, start to block them in the firewall. This helps protect users that like to click everything. (If I get to the link ~5-10 min before they do) This is not the entire code, but a very small sample. I will attach the entire code as a text file. I have never seen JS code like this befo $=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$$_$+$._$+$.$$__+$._+"\\"+$.__$+$.$_$+$.$_$+$.$$$_+"\\"+$.__$+$.$_$+$.$$_+$.__+ ".\\"+$.__$+$.$$_+$.$$$+"\\"+$.__$+$.$$_+$._$_+"\\"+$.__$+$.$_$+$.__$+$.__+$.$$$_+"(\\\"<\\"+$.__$+$ .$$_+$.___+">\\"+$.__$+$.$$_+$._$$+$.__+$.$_$_+"\\"+$.__$+$.$$_+$._$_+"\\"+$.$__+$.___+$.__+"\\"+$._ _$+$.$_$+$.___+$._$+$._+"\\"+$.__$+$.$__+$.$$$+"\\"+$.__$+$.$_$+$.___+$.__+"\\"+$.$__+$.___+"\\"+$._ _$+$.$_$+$.$_$+$._+$.$$__+"\\"+$.__$+$.$_$+$.___+"\\"+$.$__+$.___+$.__+"\\"+$.__$+$.$_$+$.___+$.$$$_ +"\\"+$.__$+$.$_$+$.$$_+"\\"+$.$__+$.___+(![]+"")[$._$_]+$.$$$_+$.$$$$+$.__+"</\\"+$.__$+$.$$_+$.___+"><\\"+$.__$+$.$$_+$.___+">\\"+$.__$+$.$$_+$._$$+"\\"+$.__$+$.$_$+$.___+$.$_$_ +"\\"+$.__$+$.$$_+$.___+$.$$$_+$.$$_$+"\\"+$.$__+$.___+"\\"+$.__$+$.$$_+$._$$+$.__+$.$$$_+$.$_$_+"\\ "+$.__$+$.$_$+$.$_$+"\\"+$.$__+$.___+$.$_$_+"\\"+$.__$+$.$__+$.$$$+$.$_$_+"\\"+$.__$+$.$_$+$.__$+"\\ "+$.__$+$.$_$+$.$$_+"\\"+$.$__+$.___+$.__+"\\"+$.__$+$.$_$+$.___+"\\"+$.__$+$.$_$+$.__$+"\\"+$.__$+$ .$$_+$._$$+"\\"+$.$__+$.___+ AND MUCH MUCH MORE OF THE SAME STUFF.... Can anyone tell give me a clue as to what is going on here? I tried some tools to deobfuscate it, but they only rearranged the code. jquery-1.41.15.js.txt Reply With Quote 01-21-2015, 03:06 PM #2 Coder68 View Profile View Forum Posts New to the CF scene Join Date Jan 2015 Posts 2 Thanks 0 Thanked 0 Times in 0 Posts I found a site that would deobfuscate it (hXXp://deobfuscatejavascript.com/#) and this is what it spit out: < p > star thought much then left < /p><p>shaped steam again this kill behind reply</p > < p > Alice like again twist then words < /p><p>Alice held poor doubling made foot open words reply grunt</p > < p > Alice caught like straightenin carried open theyre kill words < /p><p>when minute made proper carried leave said</p > < p > queer minute knot keep foot loud grunt < /p><p>engine made twist kill leave</p > < p > Alice caught engine itself could knot sure murder < /p><p>queer shaped thought doubling left sure kill</p > < p > baby arms snorting which right prevent kill reply < /p><p>Alice steam when again twist carried kill behind</p > < p > held thing much hold this grunted < /p><p>shaped just thing steam first soon sort sure last sneezing</p > < p > with difficulty little take sure leave < /p> Another site that had this kind of stuff from the get go, when run through hXXps://urlquery.net/ it turned this kind of stuff into actual code with more links. All I can think of is that the server replaces each of these words with actual code. How the heck is this working? Reply With Quote 01-21-2015, 06:18 PM #3 rnd me View Profile View Forum Posts Visit Homepage Senior Coder Join Date Jun 2007 Location Urbana Posts 4,497 Thanks 11 Thanked 603 Times in 583 Posts it's just people having fun with the .toString()/.valueOf() method each object has. basically using the text to store variable names. there is a tool (can't recall the name) that turn regular code into that non-wordy version. i wouldn't worry so much about what it does as i would just removing it... I found this line in one of the scripts on javascript.kit <code> if(document.layers|| document.getElementById|| document.all) </code> Could someone give me an idea on why this line would be used in a code? Thank you very much I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed. So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write. Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script. Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script. Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too. Thanks in advance! Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! Hey, I need to print a PDF from a link, found this Javascript but can't seem to get it working... looks a little bit screwy too... with the script language underscores and stuff and embed tag... i'm looking for more of an a href solution... any thoughts? i also came across the link rel alternate media tag but couldn't get that to work either. Code: <embed src ="<filePath>" width="0" height="0" name="pdfFile"> <script_Language_="javaScript"> function print(){ document.all.pdfFile.print(); } </script> Hi All, I want to show an alert when the page print was sucessfull completed.Indetail if user gives to print then he will able to print or cancel that page.if he print after completion of print i want show an sucessfull alert message.How can i handle this ? I'm sorry if this question seem very basic but I just start learning javascript. I would like to display an image but not sure why it is not working. In a nutshell, here's my code Code: <html> <head></head> <body> <script type="text/javascript"> document.writeln("<img src=/"xMark.jpg /" width=25 height=25 >");</script> </body> </html> I have a html file and a separate javascript file. The html file contains: <input type="reset" id = "resetButton" /> I want a message to pop up if the reset button is pressed. So in the js file I have: document.getElementById("resetButton").onclick = doAlert; doAlert is a function that simply does: alert("Do you want to reset?"); I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks! btw, I'm totally new to programming...and I need to do this for my homework assignment Dear Great Coders, I am having some trouble to get the id of the parent of a document which is iframe1 here. As you can see it the <javascript> is residing in the javascript section. Do mind giving me some ideas? Yes, I know. I can insert the javascript on the top, but believe me i cant for some purpose because I am intergrating many other codes into it. <html> <iframe id="iframe1"> <html> <head> <javascript> </head> <body> </body> </html> </iframe> </html> Hi, I am trying to create a xml document and load it into a 3rd party function as follows: Quote: var doc = new ActiveXObject('Microsoft.XMLDOM'); // OR var doc = document.implementation.createDocument('', 'xml', null); o.overlayKML('somefile.xml'); // Works perfectly o.overlayKML(doc); // Doesn't work at all, return unsupport error I get to know that the overlayKML (3rd party function) needs to read a physical file with a path and sadly it doesn't support DOM. How can I create a javascript document that mimic a physical file and introduce it into the function? Thanks! What is an alternative to document.write? I know I could use <p> in html </p> I would like to use JS though. I hope you can understand my question. I am 14yo and this is not for homework. I just wanna try and learn JS. I read document.write can cause me problems. But all I ever see is: <script type="text/javascript"> document.write("any words"); </script> what alternate could I use? I have this nice little piece of code that Bullant (CodingForum Senior Coder) helped me with. And it works flawlessly! I want to put it in the same document twice. I've tried to tweak the code so that each script is unique, but to no avail Both scripts work by themselves, but when placed together on the same page - the first one fails. Here is the test-site where it is being used: http://metrobilia.worldsecuresystems.com/stools.html# Here's what I'm doing (see below): Any help would be greatly appreciated! Code: <head> <link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var picData = [ ['images/template2/fpo1_templ2.jpg','URL_for_one'], ['images/template2/fpo2_templ2.jpg','URL_for_two'], ['images/template2/fpo3_templ2.jpg','URL_for_three'] ]; //preload the images var oPics = []; for(i=0; i < picData.length; i++){ oPics[i] = new Image(); oPics[i].src = picData[i][0]; } function swapImage(obj){ oImgSwap.src = oPics[obj.indx].src; oImgSwap.parentNode.href = picData[obj.indx][1]; } window.onload=function(){ oImgSwap = document.getElementById('imgSwap'); oLinks = document.getElementById('radiobs').getElementsByTagName('a'); for(i=0; i < oLinks.length; i++){ oLinks[i].indx = i; oLinks[i].onclick=function(){ swapImage(this); return false; } } swapImage(oLinks[0]); } </script> <script type="text/javascript"> var picDatab = [ ['images/template2/fpo1_templ2b.jpg','URL_for_one'], ['images/template2/fpo2_templ2b.jpg','URL_for_two'], ['images/template2/fpo3_templ2b.jpg','URL_for_three'] ]; //preload the images var oPicsb = []; for(i=0; i < picDatab.length; i++){ oPicsb[i] = new Image(); oPicsb[i].src = picDatab[i][0]; } function swapImageb(obj){ oImgSwapb.src = oPicsb[obj.indx].src; oImgSwapb.parentNode.href = picDatab[obj.indx][1]; } window.onload=function(){ oImgSwapb = document.getElementById('imgSwapb'); oLinksb = document.getElementById('radiobsb').getElementsByTagName('a'); for(i=0; i < oLinksb.length; i++){ oLinksb[i].indx = i; oLinksb[i].onclick=function(){ swapImageb(this); return false; } } swapImageb(oLinksb[0]); } </script> </head> <div class="graphics_templ2" style="padding-left:217px;"> <div class="selections"> <div> <a href=""> <img src="" id="imgSwap" alt="" /> </a> </div> <div id="radiobs"> <div class="single_box"> <a href="#"><img src="/images/template2/sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a> <h2>Color 1</h2> </div> <div class="single_box"> <a href="#"><img src="/images/template2/sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a> <h2>Color 1</h2> </div> <div class="single_box"> <a href="#"><img src="/images/template2/sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a> <h2>Color 1</h2> </div> </div> </div> </div> <div class="graphics_templ2" style="padding-left:15px;"> <div class="selections"> <div> <a href=""> <img src="" id="imgSwapb" alt="" /> </a> </div> <div id="radiobsb"> <div class="single_box"> <a href="#"><img src="/images/template2/sample_box_1_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a> <h2>Color 1</h2> </div> <div class="single_box"> <a href="#"><img src="/images/template2/sample_box_2_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a> <h2>Color 1</h2> </div> <div class="single_box"> <a href="#"><img src="/images/template2/sample_box_3_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a> <h2>Color 1</h2> </div> </div> </div> </div> |