JavaScript - How Do I Move To A New Line In Javascript
How do I change the <br /> tags in the follow code to javascript code that performs the same function. I need new lines where you see the <br /> tags and I can't use <br /> since my javascript is within the header section of my HTML file and the W3C validator doesn't like it. Therefore, how do I change the following code to pure javascript with no <br />'s. I tried using \n and \r\n but maybe I didn't use this right as it didn't work. Please help, I am new to javascript
txt="Name: "+name+"Sex: "+sex+"<br />Ethnicity: "+ethnicity+"<br />Region: "+region+"<br />Profession: "+profession+"<br />Membership_status: "+membership_status+"<br />Seeking: "+seeking+"<br />Education: "+education+"<br />Body Type: "+body_type+"<br />Eye Colour: "+eye_colour+"<br />Smoker: "+smoker+"<br />Drinker: "+drinker ; Similar TutorialsI'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, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code: THE HTML FILE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Greenbrain</title> <script language="javascript" type="text/javascript" src="greenbrain.js"></script> <link rel="stylesheet" type="text/css" href="greenbrain.css"> </head> <body> <div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div> <div id=img_intrare> <img src="soare.png"; class="soare"> </div> </body> </html> THE .CSS FILE body {background-image:url(fondhome.png); position:fixed;} img.soare {position:absolute; left:-459px; top:100px; z-index:1;} h1.intrare {z-index:2} THE .JS FILE function intr() { var x, xi; x=0; xi=document.getElementById('img_intrare').style.left; if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"} } ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... How do I get new line to work in javascript. Everytime I try to use it, it never works. There should be a new line with 5 * instead of having 17 * on one line. Code: <html> <body> <script type ="text/javascript"> var x=0; for (x=0;x<=12;x++) { document.writeln("*"); } document.writeln("\n"); for (x=0;x<=5;x++){ document.writeln("*"); } </script> </body> <html> I have these line of javascript: Code: $(document).ready(function () { /*$('#first').focus(); $(this).keyup(function (e) { if (e.keyCode == 13) { generate(); } });*/ }); function generate() { if($("input[name='name']").val().length > 1) { fi = $("input[name='name']").val().substring(0,1).toUpperCase(); var sl = ["Cool "]; var sl2 = ["Hand "]; var sl3 = ["Luke",]; { var i = Math.floor(Math.random() * sl.length); var j = Math.floor(Math.random() * sl2.length); var k = Math.floor(Math.random() * sl3.length); var nick = sl[i] + sl2[j] + sl3[k]; } { $("#answer").text("Your Name Is: " +nick); $("#answer").fadeIn("slow"); } ; } } I would like for it to return: Your Name Is: Cool Hand Luke I want the "Cool Hand Luke" to be on a separate line but I don't know how to put a linebreak in the .text string. Is this something somebody could tell me how to do? Where in the line: Code: $("#answer").text("Your Name Is: " +nick); Do I put (<br>) I have this Javascript and I am wanting to create a line break between the tweet and the time it was posted, here is the javascript, I am guessing I need to insert the <BR> tag somewhere but just not sure where? Thanks function twitterCallback2(twitters) { var statusHTML = []; for (var i=0; i<twitters.length; i++){ var username = twitters[i].user.screen_name; var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) { return '<a href="'+url+'">'+url+'</a>'; }).replace(/\B@([_a-z0-9]+)/ig, function(reply) { return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>'; }); statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>'); } document.getElementById('twitter_update_list').innerHTML = statusHTML.join(''); } function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); if (delta < 60) { return 'less than a minute ago'; } else if(delta < 120) { return '<br>about a minute ago'; } else if(delta < (60*60)) { return (parseInt(delta / 60)).toString() + ' minutes ago'; } else if(delta < (120*60)) { return 'about an hour ago'; } else if(delta < (24*60*60)) { return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if(delta < (48*60*60)) { return '1 day ago'; } else { return (parseInt(delta / 86400)).toString() + ' days ago'; } } Hi there, I am working on javascript, the problem i have faced here is, i am unable to break the line in javascript. Actually i am using a javascript to open Microsoft Outlook Express, And in the body text i am sending some value like "Name and Address(Shown in code)". I want after task it should break the line and the value of Address will start from new line. But i am unable to do that. The code i have used is given below. Code: // JScript File function EmailIt(emailTO,strAddress,strName) { var daReferrer = document.referrer; var task = escape(document.URLUnencoded); var issue_id = document.URLUnencoded.split("="); var email = emailTO; var Address = strAddress; var Name = strName; var subject = "Issue Task number is " + issue_id[issue_id.length-1] + " - " + Address ; var body_message = "Name "+ Name + " <br />\r\n " + " Address " + Address; var mailto_link = 'mailto:'+email+'?subject='+subject+'&body='+body_message; win = window.open(mailto_link); if (win && win.open &&!win.closed) win.close(); } Also i have used following syntax to break the line: //body_message += '<br />\r\n'; //body_message += " "; //body_message += "\"\n\"";. But didn't got succeed. Can anybody help me to come out of this problem. Regards Vimal kumar Madhepura, Bihar I have a slideshow that goes through pictures once you click on the Play button and doesn't stop until you press on the Stop button. How can I make it so that it automatically plays once the website loads without having to click on the Play button? Heres the code: Code: <div class="tabs png"><span class="tabs-inner"><a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a></span></div> <div class="slider-indent-button"> <a href="#" onClick='$("div.tabs").tabs().play();'>Play</a> <a href="#" onClick='$("div.tabs").tabs().stop();'>Stop</a> </div> All help is much appreciated!!! Hey guys I export data from Javascript to Xml file. I have tried several ways to break a line in xml file like document.write("<br/>"); or document.writeln(); etc, but seem it is impossible. Maybe you can give me a solution...... Look at below: XML File: <?xml version="1.0"?> <DATA> <Cust>< Select>Debit Card</Select> </Cust ><Cust>[ User>Jan</User ></Cust> <DATA> I want to break <Cust> from another <Cust>. Javascript: function ok_click() { var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.6.0"); xmlDoc.async = false; xmlDoc.load("data.xml"); if (xmlDoc.readyState == 4 && xmlDoc.parseError.errorCode == 0) { var root = xmlDoc.documentElement; var e1 = document.getElementById("Select1"); var _account_type = xmlDoc.createTextNode(e1.options[e1.selectedIndex].value); var e2 = document.getElementById("Select2"); var _user = xmlDoc.createTextNode(e2.options[e2.selectedIndex].value); var account_type = xmlDoc.createNode(1, "Select", ""); var user = xmlDoc.createNode(1, "User", ""); account_type.appendChild(_account_type); user.appendChild(_user); var cust = xmlDoc.createNode(1, "Cust", ""); cust.appendChild(account_type); document.write("<br/>"); cust.appendChild(user); root.appendChild(cust); SaveXML(xmlDoc, "data.xml"); alert("Save!"); } } Your help would much appreciated Thanks Natz Hi there, I could probably say that I'm some sort of "game developer" as we're modifying an old (but great) hockey title that has html frontend. http://z6.invisionfree.com/flyermani...showtopic=1864 My JS skills suck though... I have millions of great ideas but because of my very limited skills I run into all kinds of obstacles all the time. This is yet another. I'd like to redesign the scoring summary layout in the game... so I'm trying to create a scoring line that would show the goal scorers like this: Atlanta Scoring: Antropov (1), Reasoner (1) But currently I'm always getting a line break and I get the scorers like this: Antropov (1) Reasoner (1) etc. Screenshot: My code must be sloppy as hell though: This shows the scorers: Code: var sDataHTML4 = "" var aHeaderText = new Array(nhlMsg(" Goal assist") , nhlMsg("Team"), nhlMsg("# Assists", true) ); var aHeaderWidth = new Array( 300 , 120, 50); var sHeaderHTML4 = createHeaderRow( aHeaderText , aHeaderWidth ); for ( var i = 0; i < oAwayLastGame.nNumPlayers; i++ ) { if (oAwayLastGame.aPlayerStats[i].nAssists > 0) sDataHTML4 += createDataRow4( oManagerInterface.GetPlayerFullName( oAwayLastGame.aPlayerStats[i].nPlayerID), ( oManagerInterface.GetTeamShortName(oAwayLastGame.nTeamID)), oAwayLastGame.aPlayerStats[i].nAssists) ; } return createTable( sHeaderHTML + sDataHTML + sDataHTML2 + sHeaderHTML3 + sDataHTML4 + sDataHTML3 + sGoals ); Datarow arguments: Code: function createDataRow4( args ) { var sHTML = "<tr>"; var nNumArgs = arguments.length; for( nIndex = 0 ; nIndex < nNumArgs ; nIndex++) { (nIndex == 0 ) ? sHTML += "<td class=\"fourthDataCell\">" + arguments[nIndex] + "</td>" :sHTML += "<td class=\"data2\">(" + arguments[nIndex] + ")</td>" } return sHTML += "</tr>"; } What the heck I have to do make the scorers to show all in the same line? Does "create datarow" automatically define them in one separate row? The answer must be simple but I simply can't figure it out... I have tried to Google this for days now. Thanks. I have a Java Applet that I have been managing for some time. Approximately how long would it take to port a 900 line Java Applet to JavaScript? My intention is to reproduce as close as I can to the Java Applet. If you would like to see the Java Applet code, it is available here : http://www.chatapp.comuf.com/AppletClient(Public).java This Java Applet is a chat client that connects to a Java server (I am NOT porting the server). It has a simple interface with panel tabs for various activities (chat room, login, text color chooser, etc). **Note : I have not programmed in JavaScript before. I went over some tutorials before I posted this. ***N00b note : I know Java and JavaScript have NOTHING to do with each other. Hi, I'm having trouble figuring out why my image is disappearing when the user clicks on the arrow image to expand text for viewing. The arrow image only disappears if the link text is is more than one line. It remains if the link is only one line of text. Here is the code: HTML code: Code: <div class="ws-webpart> <div class="hidecat1"></div> <div class="hidecat1"> <!--This comment line added please dont remove this comment line --> <a class="hidecat2" id="za0.91" onclick="showHide('a0.91')" href="javascript:void(0)">Lorem ipsum dolor sit amet</a> </div> <div style="display:none;" id="a0.91"> <!--This comment line added please dont remove this comment line --> <div class="hideqst1"> <a id="sb0.913.92" class="hideqst2" onclick="showHide('b0.913.92')" href="javascript:void(0)"> Sed lectus lectus, varius quis vestibulum non, molestie vel est. Integer enim quam, elementum vel ornare non, egestas non augue. Ut varius vulputate mi, </a> </div> <div style="display:none;" id="b0.913.92"> <!--This comment line added please dont remove this comment line --> <div class="hideAns"> <p>Fusce suscipit tempus magna eget eleifend. Ut lacinia, turpis ac tempus euismod, nulla ipsum vehicula sem, et laoreet augue nunc in neque. Maecenas porttitor lacinia risus, et rhoncus felis vestibulum eget. Sed nec turpis nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In fringilla mollis leo sed auctor. </p> </div> </div> <div class="hideqst1"> <a id="sb0.9134.65" class="hideqst2" onclick="showHide('b0.9134.65')" href="javascript:void(0)"> Integer non urna vel ligula interdum?</a> </div> <div style="display:none;" id="b0.9134.65"> <!--This comment line added please dont remove this comment line--> <div class="hideAns"> <p>Suspendisse pretium gravida tortor, id blandit elit hendrerit porttitor. Mauris at purus id neque mollis placerat vitae in tortor. Morbi porta tincidunt sagittis. Nam quis augue justo, id euismod nisl.</p> <p>• Donec sit amet urna felis. Praesent at erat ligula, eget porttitor diam.<br> • Quisque quis sapien leo. Proin sit amet sem et lectus gravida iaculis a non turpis. Vivamus at metus quis odio mattis </p> </div> </div> </div> CSS code: Code: div.ws-webpart{margin-bottom:15px;clear:both;} .ws-webpart.hidecat1{padding-top:7px;} .ws-webpart.hidecat2{padding-left:2.2ex;color:#000;font-weight:700;text-decoration:underline;background:url(../images/layout/link_arrow.gif) no-repeat 0 3px;} .ws-webpart.hidecat3{padding-left:2.2ex;color:#000;font-weight:700;text-decoration:none;background:url(../images/layout/link_arrow_down.gif) no-repeat 0 3px;} .ws-webpart.collapseqst1{padding-top:7px;padding-left:2.2ex;} .ws-webpart.hideqst2{padding-left:2.2ex;color:#7C902C;padding-right:0;background:url(../images/layout/link_arrow.gif) no-repeat 0 3px; zoom:1;} .ws-webpart.hideqst3{padding-left:2.2ex;color:#7C902C;padding-right:0;background:url(../images/layout/link_arrow_down.gif) no-repeat 0 3px;} .ws-webpart.hideAns{color:#000;padding-left:4.4ex;padding-right:1.5ex;padding-top:7px;} Javascript code: Code: <script language="javascript" > // Function for Collapsible Link function showHide(ID) { if (document.getElementById(ID).style.display == "block"){ document.getElementById(ID).style.display = "none"; if(ID.charAt(0)=="a"){ document.getElementById("z"+ID).className="hidecat2"; } if(ID.charAt(0)=="b"){ document.getElementById("s"+ID).className="hideqst2"; } } else { document.getElementById(ID).style.display = "block"; if(ID.charAt(0)=="a"){ document.getElementById("z"+ID).className="hidecat3"; } if(ID.charAt(0)=="b"){ document.getElementById("s"+ID).className="hideqst3"; } } } </script> I have attached the images. Thanks in advance Need some help here. I'm developing a non-server using form. The form sits on the users local computer, and generates an outlook email. There are boxes that are filled out, and each box is assigned a variable and gets transferred to an outlook email and gets plugged in to a pre-made email template. Here's what I'm trying to accomplish. I've been able to pre-populate the To: field using the variable var email = the CC: field using the variable &cc= and the BCC: field using the variable &bcc= . It would make sense that &from= or even &from: would work, but it doesn't. Appreciate the help. Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.
Hey all im getting used to using .js still and I am trying to figure out how to create a button to move a selected field within a box of fields to the top, instead of just moving it one-by-one to the top. Here is what I currently have that moves the selected just up one. Can someone expand on this and make it so it will move to the top instead of just one? SearchFieldsWindow.prototype.cmdMoveUp_OnClick = function() { var searchFields = this.__searchFields; var items = this.__lstSelected.get_Items(); var selectedIndices = this.__lstSelected.get_SelectedIndices(); var count = selectedIndices.get_Count(); for (var i = 0; i < count; i++) { var selectedIndex = selectedIndices.get_Item(i); // Don't allow when first item selected if (selectedIndex == 0) break; var uniqueID = items.get_ItemValue(selectedIndex); var label = items.get_ItemLabel(selectedIndex); searchFields.MoveUp(uniqueID); items.RemoveAt(selectedIndex); items.Insert(selectedIndex - 1, uniqueID, label); this.__lstSelected.SetSelected(selectedIndex - 1, true); this.__lstSelected.SetSelected(selectedIndex, false); } }; So if the user enters a serial number in the "Serial_Number" field and hits enter I would like the cursor to move DOWN to the next "Serial_Number" field. Is this possible?? Tracy Code: <table> <tr> <td> Serial Number:<br> <input type = "text" size = "30" onclick = "this.select();" onChange = "updateField(this.name,this.id,this.value)"; value = "" name = "Serial_Number" class = "textfield" id = "Serial_Number.4853" > </td> <td>Cat Number:<br> <input type = "text" size = "30" onclick = "this.select();" onChange = "updateField(this.name,this.id,this.value)"; value = "" name = "Cat_Number" class = "textfield" id = "Cat_Number.4853" > </td> </tr> <tr> <td> Serial Number:<br> <input type = "text" size = "30" onclick = "this.select();" onChange = "updateField(this.name,this.id,this.value)"; value = "" name = "Serial_Number" class = "textfield" id = "Serial_Number.4854" > </td> <td> Cat Number:<br> <input type = "text" size = "30" onclick = "this.select();" onChange = "updateField(this.name,this.id,this.value)"; value = "" name = "Cat_Number" class = "textfield" id = "Cat_Number.4854" > </td> </tr> <tr> <td> Serial Number:<br> <input type = "text" size = "30" onclick = "this.select();" onChange = "updateField(this.name,this.id,this.value)"; value = "" name = "Serial_Number" class = "textfield" id = "Serial_Number.4855" > </td> <td>Cat Number:<br> <input type = "text" size = "30" onclick = "this.select();" onChange = "updateField(this.name,this.id,this.value)"; value = "" name = "Cat_Number" class = "textfield" id = "Cat_Number.4855" > </td> </tr> </table> Hi once again! Is it possible to detect was the mouse on the move or not in the moment when button is released ? Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown) { switch(keyValueDown) { case 97: //A Move Left //move it left break; case 100: //D Move Right //move it right break; case 119: //W Move Up //move it up break; case 115: //S Move Down //move it down break; } } p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! Right. I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page. I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it. This is my current code: Code: if(document.getElementById) { var carrier = document.getElementById(btnarea); carrier.style.top = randomHeight + "px"; } if(document.getElementById) { var carrier = document.getElementById(btnarea); carrier.style.left = randomWidth + "px"; } Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now. I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first. Any ideas? You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php. Thanks in advance. Hi there, I am pretty new to javascript coding, and I could use little help... As you can see here, I got this code where I can move image inside of a box, and I do it by clicking these "links". And now I want to ask you, is there any way that I could move image using keys on keyboard (arrows or WSAD)? I'd like to keep this as simple as possible since I am not really into very advanced scripts (although I could probably understand them if you give little explanation). Code: <html> <head> <body> <script type="application/ecmascript"> // X position of image var x = 0; // Y position of image var y = 0; // Move per click var inc = 10; function Init() { document.getElementById('autic').style.left = x + 'px'; document.getElementById('autic').style.top = y + 'px'; } function moveRight() { x += inc; document.getElementById('autic').style.left = x + 'px'; } function moveLeft() { x -= inc; document.getElementById('autic').style.left = x + 'px'; } function moveUp() { y -= inc; document.getElementById('autic').style.top = y + 'px'; } function moveDown() { y += inc; document.getElementById('autic').style.top = y + 'px'; } </script> <style> #box { width: 500px; height: 300px; position: relative; margin: 20px auto 0px auto; border: 5px outset #000; overflow: hidden; } .image { position: absolute; z-index: 100; } </style> </head> <body onload="javascript:Init()"> <div id="box"><img class="image" id="autic" src="auto.png"/></div> <a href="javascript:moveLeft()">Left</a> <a href="javascript:moveUp()">Up</a> <a href="javascript:moveDown()">Down</a> <a href="javascript:moveRight()">Right</a> </body> </html> |