JavaScript - Print A Span Tag In A Chosen Spot With A Javascript Function
Hi everyone,
First of all sorry for my english (it is not my native tongue so I don't master it really well) I'm starting a form and I would like to add : <span class="true"></span> where it's written HERE in the following if the function checkField finds that the checking is ok : <div><input type="text" value="" placeholder="Nom" name="nom" class="text" onkeyup="checkField()">HERE<div> I'm a beginner in javascript and in spite of my search I still don't know what to use in my checkField after my test to print <span class="true"></span> where I want it. I would really appreciate any help you guys can give me. Thanks a lot. Similar TutorialsIs there a way to call javascript functions based on the text between a span element? In other words if I have <span id="mySpan">Bronze</span> then it will call a javascript function but if I have <span id="mySpan">Silver</span> then it will call a different function? Thanks! I have a CSS file associated with this that sets the width at "200px." However, I am getting a 40px wide dropdown. Can anybody catch an error in here? Using console.log, I found that el, as soon as it is defined, is = div.dropdown. As soon as .width comes into the picture, it returns as six consecutive 101px and a ton of 40px after that... and continues returning those values till the end. I appreciate any input!! Code: var Dropdown = function(el) { this.el = el; this.handle = el.find("div.dropdown-text"); this.options = el.find("div.dropdown-options"); this.optionsWrap = this.options.parent(); this.action = el.attr("action"); this.type = el.attr("type"); this.target = el.attr("target"); this.Init(); } Dropdown.prototype.Init = function() { var self = this; var extraPadding = 40; this.isShown = false; console.log(this); this.width = this.options.outerWidth() + extraPadding; this.height = this.options.outerHeight(); if (this.height > 300) { this.height = 300; this.options .height(300) .width(this.width + 12) .addClass("scroll-pane") .jScrollPane({ showArrows: true, scrollbarWidth: 9 }) this.width += 12; } else { this.options.width(this.options.width() + extraPadding); } var newWidth = (this.width < 220) ? this.width : 220; this.el.width(newWidth); this._AddShadow(); this.optionsWrap.css({ display: "none", visibility: "visible", width: this.width + 5, height: this.height + 5 }); this._SetEvents(); }; Dropdown.prototype.Toggle = function(force) { if (this.isShown && !force) { this.optionsWrap.hide(); this.isShown = false; } else if (!this.isShown && false !== force){ this.optionsWrap.show(); this.isShown = true; } } Dropdown.prototype._AddShadow = function() { var shadowWidth = 5, layer; for (var i = 0; i < shadowWidth; i++) { layer = $('<div class="shadow_layer"> </div>'); layer.css({ opacity: 0.055 * (i + 1), top: (shadowWidth - i), left: (shadowWidth - i), height: this.height, width: this.width }); this.optionsWrap.prepend(layer); } } Dropdown.prototype._SetEvents = function() { var self = this; this.el.bind('click', function(e) { var current = $(e.target); var type = current.attr("type"); if (current.hasClass('dropdown-text') || current.hasClass('dropdown-arrow')) { if (!self.isShown) { page.HideAllDropdowns(); } self.Toggle(); return false; } if (current.hasClass('dropdown-opt')) { switch (type) { case 'auto': case 'basic': var html = current.html(); self.handle.html(html); self.options.find('a.dropdown-opt').each(function() { $(this).removeClass('selected'); }); if ('auto' == type) { page.common.Update({ url: current.attr('path'), params: current.attr('params'), target: self.target, parent: true, method: "POST", handler: { handler: function(results) { var action = this.attr("action"); if (action) { page.events.Fire(action, this, results) }; }, context: current } }); } current.addClass('selected'); self.Toggle(); return false; case 'multi': current.toggleClass('selected'); break; case 'function': var html = current.html(); self.handle.html(html); current.Fire(); self.Toggle(false); break } } return false; }); } Hey all, my first post here. I'm primarily a designer but need to get more into the code aspect of things (and will be getting jQuery asap), but at the moment i'm very behind on time on a project and could use some quick help. Basically, I'm making a dynamically loading text box input area for RMA returns for our products. But thats kind of irrelevant, here's my question: I have an external style sheet with only this in it (more will be added later for future sections, thats why im making it it's own "css-forms.css" file: Code: .formpad { padding:3px 3px 3px 3px; } In my main .html, some of my javascript for my dynamic table contains lines like these: Code: var esnImeiInput = "<INPUT type=\"text\" name=\"esn_imei[]\" size=\"20\">"; var invoiceInput = "<INPUT type=\"text\" name=\"invoice[]\" size=\"8\">"; var datePurchaseInput = "<INPUT type=\"text\" name=\"date_purchase[]\" size=\"8\">"; var noteInput = "<INPUT type=\"text\" name=\"notes[]\" size=\"18\">"; var trOpenTag = "<tr>"; var trCloseTag = "</tr>"; var tbOpenTag = "<table>"; var formRows = modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />"; for(x=0;x<10;x++) { formRows += modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />"; } Where inside those vars (INPUT's) would i REFER to the 'class' of .formpad? Basically I just want to add cellpadding to the table that is being dynamically loaded. If anyone has time to help via IM that'd be cool too, this is pretty easy stuff for true coders. (the test page for all of this is currently at: http://planetcellinc.com/rma-rev726.html Any help appreciated, thanks! -Hrl2k Hello, I have looked through a tutorial that does text gradient without the use of images. I found this tutorial: http://www.thomasfrank.se/text_color_gradients.html However, only the first "SPAN CLASS" gets gradiented and the other spans don't. In the bottom of the page it says: Quote: If you call the gradientText.set() without any arguments it will go looking for all span tags with class names starting with gradient_ and apply gradients to them But I do not know what it means, I have tried learning a bit of Javascript and I think it could mean something like "if something is something, then". But I'm not sure. Please help, thanks. I'm integrating a JavaScript typing tutorial to my website. But I'm not able to store the value to the database. In the below code you can see the speed is updated in a html span. The id of the tag is speed(<span id="speed"></span>). This code will automatically update when user start typing. I want to update this to a database when user press submit button. But i cant able to. Is there any way to input the speed to database ? Please go through the below code and suggest me what i can do....? Code: <script type="text/javascript"> //<![CDATA[ var garray = new Array(); var garrayIndex = -1; var gtext = ""; var gindex = 0; var goldPressed = 0; //previous pressed key code var goldTarget = 0; //previous target key code var gtarget = 0; var gpressed = 0; var ggood = 0; var gtotal = 0; var gtime = 0; var gkeytime = 0; function setup() { setEvents(); //change this array to suit your needs but note that indices //must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";... garray[0] = "a s d f s d f f s d as sd ad fs ds sad af sa fa dafa sda dad das afa sfd add sasd df sf saf dds fd ads safd fsd fas sas dafs as fad"; //more similar lines can easily be added above, dont forget to get the index right! garrayIndex = -1; next(); } function setPatternInit() { //#b note: once we did this using innerHTML but this caused //a leakage of handles in ie var pat = document.getElementById("pattern"); for(; { if (pat.hasChildNodes()) { pat.removeChild(pat.lastChild); } else break; } var cname = "done"; for (j=0; j<gtext.length; j++) { var ch = gtext.charAt(j); if (j>gindex) cname = "future"; else if (j==gindex) cname = "todo"; var kid = document.createElement("span"); kid.className = cname; var txt = document.createTextNode(ch); kid.appendChild(txt); //#b innertext doesnt work on firefox pat.appendChild(kid); } } function setPattern() { var pat = document.getElementById("pattern"); var kids = pat.childNodes; var cname = "done"; for (j=0; j<gtext.length; j++) { if (j>gindex) cname = "future"; else if (j==gindex) cname = "todo"; var kid = kids[j]; kid.className = cname; } } function mapToBoard(code) { if ((code>=97)&&(code<=108)) return (code-32); if ((code>=110)&&(code<=122)) return (code-32); if ((code>=65)&&(code<=90)) return code; if ((code>=48)&&(code<=57)) return code; if ((code==32)) return code; if ((code==44)||(code==46)||(code==47)||(code==59)) return code; return 0; //not on our board picture } function setBoard() { var letter; var elt; var c; var s; if (goldTarget!=0) { c = mapToBoard(goldTarget); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "silent"; elt.className = s; } } if (goldPressed!=0) { c = mapToBoard(goldPressed); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "silent"; elt.className = s; } } if (gtarget!=0) { c = mapToBoard(gtarget); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "target"; elt.className = s; } } if (gpressed!=0) { c = mapToBoard(gpressed); if (c!=0) { letter = "code"+c; elt = document.getElementById(letter); s = "pressed"; elt.className = s; } } } function nextPattern() { goldTarget = gtarget; goldPressed = gpressed; if (++garrayIndex == garray.length) garrayIndex = 0; gtext = garray[0]; gindex = 0; gpressed = 0; setPrompt(); } function prevPattern() { goldTarget = gtarget; goldPressed = gpressed; if (--garrayIndex < 0) garrayIndex = garray.length - 1; gtext = garray[garrayIndex]; gindex = 0; gpressed = 0; setPrompt(); } function next() { nextPattern(); setPatternInit(); setBoard(); } function prev() { prevPattern(); setPatternInit(); setBoard(); } function skip(e) { next(); return false; } function back(e) { prev(); return false; } function setEcho(c, isOK) { var s; if (c<' ') c=' '; var s = "["+c+"]"; if (!isOK) s += " ..OOPS!" var elt = document.getElementById("echo"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); } function setPrompt() { var ch = gtext.charAt(gindex); gtarget = ch.charCodeAt(0); } function adjustStatistics(ch) { return; //could count errors by character } function updateSpeed(ok) { var t = (new Date()).getTime(); var dt = (t-gtime); gtime = t; if (dt > 5000) return; //ignore sleepy user gkeytime += dt; var s = (0.5+ggood*60*200/gkeytime).toFixed(0) + ""; var elt = document.getElementById("speed"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); } function updateScore(ok) { if (ok) ggood++; gtotal++; updateSpeed(ok) var s = ggood.toFixed(0) + ""; var elt = document.getElementById("count"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); s = (gtotal-ggood).toFixed(0) + ""; elt = document.getElementById("accuracy"); txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); var s = (gkeytime/1000).toFixed(2) + " s"; var elt = document.getElementById("time"); var txt = document.createTextNode(s); //#b if (elt.hasChildNodes()) { elt.replaceChild(txt, elt.lastChild); } else elt.appendChild(txt); } function reset(e) { window.location.reload(); } function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html //document.onkeydown=debugKey; //#b document.onkeypress=debugKey; } function debugKey(evt) { //#b var e = (window.event) ? window.event : evt; //#b var k = (e.which)? e.which : e.keyCode; var f = filterKeyCode(k); var s = "k="+k+",f="+f; alert(s); return false; } function setEvents() { //#b document.onkeydown=down; //#b document.onkeypress=press; (document.getElementById('skip')).onmousedown=skip; (document.getElementById('back')).onmousedown=back; (document.getElementById('reset')).onmousedown=reset; } function cleanup() { //pointless, really document.onkeydown=null; //#b document.onkeypress=null; (document.getElementById('skip')).onmousedown=null; (document.getElementById('back')).onmousedown=null; (document.getElementById('reset')).onmousedown=null; } function filterKeyCode(code) { //from key down (0 to ignore) //note: user must have num lock set if they want to use keypad numbers if ((code>=65)&&(code<=90)) return code; //alpha if ((code>=48)&&(code<=57)) return code; //numberic if (code==32) return code; //blank if ((code>=96)&&(code<=105)) return code; //number pad digits if ((code==13)||(code==16)) return code; //enter, shift if ((code>=106)&&(code<=111)) return code; //number pad operators if ((code>=186)&&(code<=192)) return code; //punctuation if ((code>=219)&&(code<=222)) return code; //punctuation return 0; } function filterCode(code) { //from key press as ascii char code (0 to ignore) if ((code==13)||(code==16)) return code; //enter and shift are allowed if (code<32) return 0; if (code>=127) return 0; return code; } function capsLockFilter(e, pressed) { //#b many problems making this cross browser! //#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)? var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b var locked = (((pressed > 64) && (pressed < 91) && (!shifted)) || ((pressed > 96) && (pressed < 123) && (shifted))); if (locked) alert("caps lock!"); } function down(evt) { //#b var e = (window.event) ? window.event : evt; //#b var rawcode = (e.which)? e.which : e.keyCode; pressed = filterKeyCode(rawcode); if (pressed > 0) return true; if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true; if (typeof(e.stopPropagation)!="undefined") e.stopPropagation(); return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!) } function press(evt) { //#b //#b should work in ie, firefox, safari(hopefully), opera(hopefully) var e = (window.event) ? window.event : evt; //#b var pressed = 0; var wc = -1; var kc = -1; var cc = -1; if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox if (typeof(e.which)!="undefined") wc = e.which; //old mozilla if ((kc>=0)&&(cc>=0)) { //firefox pressed = cc; } else if (kc>=0) pressed = kc; //ie else if (wc>=0) pressed = wc; //old mozilla //alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc); pressed = filterCode(pressed); if (pressed==0) { if (kc==13) return skip(); //#b firefox else return false; } if (pressed==13) return skip(); //#b ie capsLockFilter(e, pressed); //hmm var c = String.fromCharCode(pressed); //ie from ascii code var ch = gtext.charAt(gindex); var ok = (c==ch); goldPressed = gpressed; gpressed = pressed; goldTarget = gtarget; if (ok) { gindex++; if (gindex==gtext.length) { if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime >= 20) { alert('Good work! You had fewer than 5 errors and typed faster than 20 WPM! Now try the next exercise!'); setPatternInit(); } else if (gtotal-ggood > 5 && 0.5+ggood*60*200/gkeytime >= 20){ alert('Good speed! You were over 20 WPM but have more than five errors! Slow down a bit for accuracy.') setPatternInit(); } else if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime < 20){ alert('Good accuracy! You had fewer than 5 errors, now try for 20 WPM.') setPatternInit(); } else alert ('Focus on accuracy first, then go for speed!'); setPatternInit(); } else setPattern(); gpressed = 0; setPrompt(); setEcho(c, true); updateScore(true); } else { setEcho(c, false); updateScore(false); setPattern() } setBoard(); return false; } //</XMLCDATA> </script> This is my HTML Code : Code: <body onload="setup()" onunload="cleanup()"> <div id="container1"> <div id="container3"> <div id="body"> <div id="pattern" class="big"> </div> <div id="prompt" class="prompt"> </div> <div id="board" class="board"> <div id="row0" class="row0"> <span id="code49">1</span> <span id="code50">2</span> <span id="code51">3</span> <span id="code52">4</span> <span id="code53" style="margin-left:-5px;">5</span> <span id="code54">6</span> <span id="code55">7</span> <span id="code56">8</span> <span id="code57">9</span> <span id="code48">0</span> </div> <div id="row1" class="row1"> <span id="code81">Q</span> <span id="code87">W</span> <span id="code69">E</span> <span id="code82" style="font-weight:bold">R</span> <span id="code84">T</span> <span id="code89">Y</span> <span id="code85" style="margin-left: -2px;">U</span> <span id="code73">I</span> <span id="code79">O</span> <span id="code80">P</span> </div> <div id="row2" class="row2"> <span id="code65">A</span> <span id="code83">S</span> <span id="code68">D</span> <span id="code70" style="font-weight:bold;">F</span> <span id="code71" style="margin: 0 0 0 -5px;">G</span> <span id="code72">H</span> <span id="code74" style="font-weight:bold;">J</span> <span id="code75">K</span> <span id="code76">L</span> <span id="code59">;</span> </div> <div id="row3" class="row3"> <span id="code90">Z</span> <span id="code88">X</span> <span id="code67">C</span> <span id="code86" style="font-weight:bold">V</span> <span id="code66">B</span> <span id="code78">N</span> <span id="code77" style="font-weight:bold">M</span> <span id="code44">,</span> <span id="code46">.</span> </div> <div id="row4" class="row4"> <span id="code32">[SPACE]</span> </div> <div id="scores"> <div class="count">Characters: <span id="count"></span> </div> <div class="accuracy">Errors: <span id="accuracy"></span> </div> <div class="speed">WPM: <span id="speed"></span> </div> <div class="time">Time: <span id="time"></span> </div> </div> <div align="center"> <button id="reset" class="button123" name="reset" align="center">Restart Exercise</button> </div> </div> <div id="echo" class="echo" style="display:none;"> [] </div> <div style="display:none;"> <button id="skip" class="button123" name="skip">skip</button> to next line ("enter" key is shortcut) </div> <div style="display:none;"> <button id="back" class="button123" name="back">back</button> to previous line </div> </div> </div> I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> Hi all, I have multiple forms on one page with the same element name and one of them is the <span>. Below is my sample code for a simple html file for testing purposes. I have no problem accessing the <input> element, but i had problems with the <span> element. Anyone knows why? In this scenario, i won't be able to use the document.getElementById() as both <span> have the same name. Code: <html> <head> Test <SCRIPT LANGUAGE="JavaScript"> // JavaScript statements go here function test(tmpForm) { window.alert(tmpFrm.elements["weight"].value); window.alert(tmpForm.elements["error"].innerHTML); } </SCRIPT> </head> <body> <form id="form_137" name="form_137"> <input id="weight" name="weight" value="" /> <span id="error" name="error">abc</span> <INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);"> </form> <form id="form_137_down" name="form_137_down"> <input id="weight" name="weight" value="" /> <span id="error" name="error">zzz</span> <INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);"> </form> </body> </html> If the value is negative it should be in red, otherwise it should be in green. It looks like JavaScript completely ignores the css class. Help please. Code: <html> <head> <title>Prva</title> <style type="text/css"> span.Pozitivno { color:green; font-weight:bold; } span.Negativno { color:red; font-weight:bold; } </style> <script type="text/javascript"> function vpisi_stevila() { var a; var b; //Vnos spremenljivk a=prompt("Vnesi stevilo a:") b=prompt("Vnesi stevilo b:") a=a*1 //S tem spremenimo string v int b=b*1 //Izpis stevil if(a<0) { document.write("A:<span class='Negativno'> " + a + " </span> <br />"); } else { document.write("A:<span class='Pozitivno'> " + a + " </span> <br />"); } if(b<0) { document.write("A:<span class='Negativno'> " + a + " </span> <br />"); } else { document.write("A:<span class='Pozitivno'> " + a + " </span> <br />"); } document.write("Vsota:", a+b, "<br />"); document.write("Razlika:", a-b, "<br />"); document.write("Mnozenje:", a*b, "<br />"); document.write("Deljenje:", a/b, "<br />"); document.write("Ostanek:", a%b, "<br />"); if(a>b) //Ce je A vecje od B { document.writeln("A je <b>večje </b> od b") } if(a<b) //Ce je B vecje od A { document.writeln("A je <b>manjse </b> od b") } if(a==b) //Ce sta enaka { document.writeln("A je <b>enako </b> b") } } </script> </head> <body onload="vpisi_stevila()"> </body> </html> 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, I got following script + HTML: Code: <script type="text/javascript"> function tjek() { if ((document.forms[0].spil.value=='HIDDENWORD')) { alert('Correct message'); window.location.reload( true ); } else if ((document.forms[0].spil)) { alert('Wrong message'); } } function tastkontrol() { document.forms[0].spil.value = document.forms[0].spil.value.toUpperCase(); } </script> <form method="post" onsubmit="tjek();return false;"> <input type="text" name="spil" onkeyup="tastkontrol();return false;"> <input type="submit" value="Send"> </form> It's a game, were the person has to guess the hidden word. I know want to add this to the script, so the HIDDENWORD changes into either APPLE or HOUSE when refreshing page: Code: <script type="text/javascript"> code=new Array; code[1]="APPLE"; code[2]="HOUSE"; function Show() { num = Math.random(); num = 1 + ( num * ((code.length - 1)-1)); num = Math.round(num); document.write("" + code[num] + ""); } Show(); </script> I've tried some stuff, but I don't got a clue, how to merge these to scripts into eachother. Thanks in Advance. Hi, I want a link on my website where when you press it, it print screens. somthing like, <a href=printscrn();">Print Screen</a> anyone any ideas? Simon I have the some text loaded in light box with background faded. i want the print button in the light box so that when user click on that only the contents of light box is printed and printer box opens up. How to do that?? Hi, I am trying to print a hard copy from a database using php and javascript. this is my console display: Code: Uni ID Name i1111111 ................................. Maeve O'Neill and this is the best I can make up from my keyboard as to the hard copy output: Code: Uni ID Name |||||||| |||||||||||||||||||||||| 0 DHYH 2 |1 HOQD The php/html code is: Code: echo "<tr bgcolor=lightsteelblue> <th align=left><font face=\"Times\" size=\"3\">Uni ID</font></th> <th align=left><font face=\"Times\" size=\"3\">Name</font></th> </tr> "; echo "<font face=\"courier\"size=\"3\"><tr><td>$row[username]</font></td> <font face=\"courier\"size=\"3\"><td>$row[forename]</font></td> <font face=\"courier\"size=\"3\"><td>$row[surname]</font></td><br/> "; and the javascript is: Code: var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25"; var content_innerhtml = document.getElementById("printArea").innerHTML; var document_print=window.open("","",display_setting); document_print.document.open(); document_print.document.write('<html><head><title>Print using javascript </title></head>'); document_print.document.write('<body style="font-family:arial; font-size:16px;" onLoad="self.print();self.close();" >'); document_print.document.write(content_innerhtml); document_print.document.write('</body></html>'); document_print.print(); document_print.document.close(); return false; It is printing out the words I have given it but not the php variables. I can't for the life of me see where I am losing the encoding and I also can't find anything on web searches as I cannot copy the rubbish that is coming out to try a search on it :-( Any help would be appreciated, thanks. Hello All. What my script does is if you do not select a radio button and you hit submit an error will pop up saying please select game1. this is taken from the name of the radio button.. How can i make it so it prints out the VALUES of the 2 radio buttons. end result should print please select Baltimore Ravens vs. Cincinnati Bengals rather than please select game1. Code: function isChecked(radgrp) { var i = radgrp.length; do if (radgrp[--i].checked) return true; while (i); return false; } function validateTest(els) { var focus_me = null, msg = ""; if (!isChecked(els.game1)) { msg += " Game #1\n"; focus_me = focus_me || els.game1[0]; } if (!isChecked(els.game2)) { msg += " Game #2\n"; focus_me = focus_me || els.game2[0]; } if (!isChecked(els.game16)) { msg += " Game #16\n"; focus_me = focus_me || els.game16[0]; } if (msg != "") { var prefix = "\n WARNING: The following Games(s) were not selected:\n\n"; var suffix = "\nClick OK to submit your picks anyway.\n\n"; var suffix = suffix + "\n Click CANCEL to correct your picks." var ask = confirm(prefix + msg + suffix); if (ask) { if (focus_me) focus_me.focus(); return true; } else{ return false; } } } Here is the radio button. If you dont select the radio button i want the javascript validation pop but to say "please select Baltimore Ravens vs. Cincinnati Bengals rather than game1 like it does now. Code: <INPUT TYPE=RADIO NAME="game1" VALUE="Baltimore Ravens">Baltimore Ravens<BR> <INPUT TYPE=RADIO NAME="game1" VALUE="Cincinnati Bengals">Cincinnati Bengals<BR> Thanks Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript"> <!-- function build() { document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ; //print example: http://www.widget.com/content/ELM-VOC return true; } --> </script> <form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();"> <input type="hidden" name="redirect" value=""> <table class="elqFormTable" border="0" cellspacing="2" cellpadding="2"> <tr> <td valign="top">Grade:</td> <td> <select name="grade"> <option value="ELM">Elementary</option> <option value="MID">Middle School</option> <option value="HIG">High School</option> </select> </td> </tr> <tr > <td valign="top">Solution:</td> <td> <select name="solution"> <option value="VOC">Vocabulary</option> <option value="WRI">Writing</option> <option value="ELD">ELD</option> </select> <!--truncated code --> Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span> <span onclick="document.bgColor = 'grey';">Grey</span> does not change the page grey on this page: u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m any ideas why? I think something is blocking it. When i press button it display output on the next page .How do i get output on the same page. Please help me. Here is my code <input type = "textbox" id = "box1"> <script type ="text/javascript"> function show() { var abc = document.getElementById("box1").value; document.write(abc); } </script> <input type = "button" value ="display on the same page" onclick ="show()"> I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) { x.style.backgroundColor="transparent" } Function ActivationFuction() { activate.function="unhighlight" } thanks |