JavaScript - Incorrect Values Of Element Positions
I'm developing a chess game recorder (records chess games just like electronic score sheet) and i am trying to write a function that handles the "en passent" rule in chess. However, when i try to test to see if a Black pawn is at a particular x,y location, it is always giving me back "50px". Even when it's not at that location.
i uploaded semi-live version to my website he http://daomingjin.googlepages.com/ScoreMate.html you just click on the 'Play' button to start the game here's the function in question: Code: function PossibleEnpassent() { // if a black pawn moved once, and is in the 5th row it is in a situation where maybe can be taken using en passent for (var x = 0; x < 8; x++) { var Offset = x + 1; if (BlackPawnMoved[0] == 1) { alert("alerted"); // the pawn has been moved once var it = document.getElementById("BlackPawn" + Offset + "Image").style.top; alert(it); if(document.getElementById("BlackPawn" + Offset + "Image").style.top == BlockSize * 3) { alert("black pawn in the 5th row"); // and if the white pawn is in the 5th row (y coord) and the x coord of the white piece is 1 block to the right OR left of the black piece if(document.getElementById("WhitePawn" + Offset + "Image").style.top == BlockSize * 3) { if(document.getElementById("WhitePawn" + Offset + "Image").style.left == document.getElementById("BlackPawn" + Offset + "Image").style.left + BlockSize) { // the white pawn and the black pawn are in the 5th row, and they are next to eachother BlackPawnCanEnPassented[x] = 1; alert("ready"); } // Or to the left of it if(document.getElementById("WhitePawn" + Offset + "Image").style.left == document.getElementById("BlackPawn" + Offset + "Image").style.left - BlockSize) { // the white pawn and the black pawn are in the 5th row, and they are next to eachother BlackPawnCanEnPassented[x] = 1; alert("ready"); } } } } } } Similar TutorialsHi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question. Here is the form I need, the post method is email : Name (txtfield) DOB (Date) Address (txtarea) Programme (Select list) : Options : Programme1, Programme2, Programme3 Date (Select list) : options : 10/10/2009 to 12/09/2009 15/10/2009 to 16/10/2009 Venue : Mainland Harvey Waterloo Time : 9am - 12 noon 1 pm - 3 pm 3 pm - 5 pm Here is the Logic : Date : Conditions If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this. Venue : Conditions If Programme = Programme1 then all the venues should be selectable. If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable. If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable. If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it. Time :Conditions : Always should be default selection and greyed out If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon. If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm. If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this. Thanks for having a look and thanks in advance for any help. Cheers var stopper; if ((x-130)!=endpos) { var xpos=130; Hi, im trying to create an effect where by a div moves gradually from one position to another, initially fast and then slowing as it progresses to its final position. The code I have for this is as follows: Code: function up1() { //get objects objImgStrip = document.getElementById("str"); objDivStrip = document.getElementById("strip"); objImgMain = document.getElementById("theImage"); //Get End position var totImg = (objImgStrip.height - 100)/130; var endpos = -(totImg * 130); var pos = objDivStrip.style.top; var C=50; var dx; //Find next stopping position stopper=pos-130; var i=0; while (x!=stopper) { //Find change in pixels to next div position dx = (xpos/C); //xpos - dx xpos-=Math.round(dx); //actual x position - dx x-=Math.round(dx); objDivStrip.style.top = x + "px"; i++; } imgID++; objImgMain.src = "images/gallery/shower/"+imgID+".jpg"; } else { return false; } } The code just seems to freeze the browser when it executes so I'm not sure whether or no this sort of animation is doable in JS. Any help greatly appreciated Cheers Sol Hi, I have a text input that will default to "0.00". However, entries can be for a length of 15 and must include a decimal with 2 positions (hundredths)... How can I force this and prevent 14/15 positions with no decimal being used or a decimal mis placed giving more positions beyond 2 to the right of the decimal? Your response is appreciated -Ron The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="") { document.getElementById('msn1').style.display='none'; } if(document.getElementById('yahoo1').innerHTML=="") { document.getElementById('yahoo1').style.display='none'; } if(document.getElementById('skype1').innerHTML=="") { document.getElementById('skype1').style.display='none'; } if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">') { document.getElementById('facebook1').style.display='none'; } else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">') { document.getElementById('facebook1').style.display='none'; } else { document.getElementById('fbook-add').innerHTML='Facebook Profile'; } What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I have a global variable that I change depending on what's going on in screen. <script> var closed=true; .... hideInfobox(pinInfobox); alert("closed: " + closed) //returns false in Chrome, true in FF </script> And that function changes that variable. function hideInfobox(pinInfobox) { if(pinInfobox != null) pinInfobox.setOptions({ visible: false }); alert("closed: " + closed) //returns false in Chrome, false in FF closed=true; alert("closed: " + closed) //returns false in Chrome, true in FF current_pid=null; } For some reason, in FF, it modifies the variable as expected. But in Chrome, it doesn't. Why is this? Is there any way to have consistent behaviour in both browsers? Thanks for reading! ~ kberry Edit: In fact: var closed=true; alert("closed: " + closed); returns true in FF, but false in Chrome... why....? *sigh* I am using this script to automatically set the current date on a form... However, when I post the form, it is actually putting the Day +1 into the database (the year and month are correct). So for example if I set the date to June 8, 2011 on the form, it will post into the db as 2011-06-09. I am not sure whats going on... Also, if the form has a missing input field (and the form reloads), the date resets back to the current date, instead of retaining the php-printed date values. In the head, I have: Code: <script> var monthtext=['January','February','March','April','May','June','July','August','September','October','November','December']; function populatedropdown(dayfield, monthfield, yearfield){ var today=new Date() var dayfield=document.getElementById(dayfield) var monthfield=document.getElementById(monthfield) var yearfield=document.getElementById(yearfield) for (var d=1; d<32; d++) dayfield.options[d]=new Option(d, d+1) dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day for (var m=0; m<12; m++) monthfield.options[m]=new Option(monthtext[m], monthtext[m]) monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month var thisyear=today.getFullYear() for (var y=0; y<4; y++){ yearfield.options[y]=new Option(thisyear, thisyear) thisyear-=1 } yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year } </script> In the form I have: Code: <script type="text/javascript"> //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select) window.onload=function(){ populatedropdown("daydropdown", "monthdropdown", "yeardropdown") } </script> <tr> <td> <select name="Month" id="monthdropdown"> <option value="<?php print "$Month"; ?>"><?php print "$Month"; ?></option> </select> <select name="Day" id="daydropdown"> <option value="<?php print "$Day"; ?>"><?php print "$Day"; ?></option> </select> <select name="Year" id="yeardropdown"> <option value="<?php print "$Year"; ?>"><?php print "$Year"; ?></option> </select> </td> </tr> Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init() { // Grab the appropriate div theDiv = document.getElementById('scrollbox'); // Grab all of the links inside the div links = theDiv.getElementsByTagName('a'); // Loop through those links and attach the target attribute for (var i=0, len=links.length; i < len; i++) { // the _blank will make the link open in new window links[i].setAttribute('target', '_blank'); } } window.onload = Init; But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! 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. Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code: <html> <table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> <tr><td id="leftcolumn" width="170" align="left" valign="top"> <div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> <a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br /> <a rel="nofollow" target="_top" href="between.htm" >Between Days</a> <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> var cal1, cal2; window.onload = function () { cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1')); cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; /*............*/ function confirmation(f) { var startdate = f.fromdate.value var enddate = f.todate.value var myday=new Date() var yr=myday.getFullYear() var mn=myday.getMonth()+1 var dt=myday.getDate() var today="" var present, ys, ms, ds, ye,me,de, start, end if(mn < 10) { mn = "0" + mn } if(dt <10) { dt = "0" + dt } today= yr + "/" + mn + "/" + dt present=yr + "/" + mn + "/" +dt if (today < startdate ) { alert (" Start date should not be exceed to-day's date " + present ) startdate.focus() return false } if (today < enddate ) { alert (" End date should not be exceed to-day's date " + present ) enddate.focus() return false } if (today == startdate ) { alert(" You are selected to-days date as Starting day" ); } var answer = confirm("Do you want to continue ?") if (answer) { if( startdate < enddate) alert("Dates between " + startdate + " to " + enddate + " are confirmed" ) else alert("Dates between " + enddate + " to " + startdate + " are confirmed" ) } else { alert("Date not confirmed") window.location="to_date.htm"; } ys= startdate.substring(0,4); ms= startdate.substring(5,7); ds= startdate.substring(8,10); start=ys + "" + ms + "" +ds ye= enddate.substring(0,4); me= enddate.substring(5,7); de= enddate.substring(8,10); end=ye + "" + me + "" +de } /*.......................................................*/ </script> <div style="margin-left:100px;"> <body> <style type="text/css"> #conf { margin-left:115px; } </style> <td align="left" valign="top"> <table width="100" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:0px"> </table> <h4>From Date</h4> <form name= "formbet" id="placeholder" method="post" action="#" > <input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/> <td align="left" valign="top"> <table width="300" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:20px"> <h4>To Date</h4> <input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br /> <input id="conf" type="button" onclick="confirmation(this.form)" value="Submit"> </form> </body> </html> In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script> function alertValues(){ } </script> <input type="checkbox" class ="normal2" value="131971" name="list[]" > <input type="checkbox" class ="normal2" value="131973" name="list[]" > <input type="checkbox" class ="normal2" value="131975" name="list[]" > <input type="checkbox" class ="normal2" value="131977" name="list[]" > <input type="button" onClick="alertValues()" Hi, What's a good way/ideal data structure to achieve this? The objective of the code/function is to map user-inputted strings into a pair of specific, hard-coded strings. For example, say the user types "firefox" or "ff", or "fx". The output would be the pair ["browser", "mozilla"], for example. I'm currently using a multidimensional array, but it feels inefficient and I'm having trouble mapping an arbitrary number of inputs into 2 outputs. Code: var strings = [ ["input1", "output1a"], ["input2", "output1a"], ["input3", "output1a"], ["input1", "output1b"], ["input2", "output1b"], ["input3", "output1b"] ]; How should I map the elements ["input1", "input2", "input3"] => ["output1a", "output1b"] ? Another method I used previously was a massive switch statement. This fulfills my needs, but I'm not sure about the efficiency (though if I remember correctly, switch statements become more efficient as size grows, since it uses a hash table?). Code: switch (input) { case "ff": case "firefox": case "fx" : case "ffox": return ["browser", "mozilla"]; case "ie": case "internet explorer": return ["browser", "microsoft"]; ... } Hi, (new to javascript) Code: digAudio = document.createElement("audio"); digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a'); digAudio.id = "diggingAudio"; newAudio = document.getElementById("diggingAudio"); //returns null the audio element is added (I can play the audio) but I can't get it by its id ? thank you I have the following code Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a></td> </div> what i want to do is this: Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td> </div> how can i go about achieving this? Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div> <script type="text/javascript"> function loading(){ ? </script> <input type="button" name="submit" id="submit" onclick="loading();"/> How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript"> $(document).ready(function() { $('#submit').click(function(){ //Get the values var amount = $('#amount').val(); var from = $('#from').val(); var to = $('#to').val(); var params = "amount=" + amount + "&from=" + from + "&to=" + to; $.ajax({ type: "POST", url: "change.php", data: params, success: function(data){ $('#results').html(data).fadeIn("slow"); } }); }); }); </script> I know for sure that lastRowTD_s[i] does not have "textarea" element ! The whole page is html valid. Code: else if (lastRowTD_s[i].getElementsByTagName('textarea')) { alert(lastRowTD_s[i].id); //checked, it is the row that does not have "textarea" element. alert(lastRowTD_s[i].getElementsByTagName('textarea')); // gives me [Object HTML collection] !? alert(lastRowTD_s[i].getElementsByTagName('textarea')[0]); //gives me "undefined", heh where has it gone since previous line ? } HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks Hello I am fairly new to Javascript and found this code online but can't seem to get it to work right. here is the code I am using it is suppose to apply a style attribute the the id "toplink" but I can't seem to get it to work right. Code: $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { var offset = menuYloc+$(document).scrollTop()+"px"; $("#toplink").animate({top:offset},{duration:500,queue:false}); }); }); Thanks in advance Hi, Would someone here please help me with this script. I know I am a complete hack at this, but I need to get it to work. Your help is appreciated. As you can see, based on the if statement, I need to leave the Div element below hidden, or un-hide it. I know the first part works. The second part (after "else" ) is where I am having the problem. Code: <td> <script type="text/javascript"> if ([fieldXX]==1) { document.write("<a href='page1.asp?itemid=1234'><img src='images/btn-choose.gif' border='0' alt='choose button'</a>"); } else { var id = 'hide-buy-btn'; var item = document.getElementById(id); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script> <div id="hide-buy-btn" class="hidden"> x xother button code x </div> </td> I'm trying to add an input element to all forms using appendChild. The script first searches for input elements with the name of "myinput". If it finds an input element with that name, it assigns the value "myvalue". If it can't find an input element with that name, it tries to create a new one for all forms. Code: if (document.getElementsByName('myinput')) { var testcode = document.getElementsByName('myinput'); for (var i=0; i < testcode.length; i++){ testcode[i].value = "myvalue";} } else { var z = document.createElement("input"); z.type = "hidden"; z.name = "myinput"; z.value = "myvalue"; z.id = "mycode"; var d = document.getElementsByTagName('form'); for (var i=0; i < d.length; i++){ d.appendChild(z);} } What's wrong with my code? Thanks! Hi all i have the following code. Code: $(document).ready(function(){ $("ul, li, a, p, img").hover( function(){ var origBorder = $(this).css("border"); var elementID = $(this).attr("id"); $(this).css("possition", "absolute").css("z-index", "100").css("border", "1px solid red"); }, function(){ $(this).css("border", "none").css("z-index", "1"); } ); }); it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over? |