JavaScript - How To Determine A Page Offset?
THIS IS NOT HOMEWORK
Hi all, See this image: The image represents an "entire" web page and the bright part the area currently scrolled into by the web browser. I can get the client's screen SIZE, but I don't know how to figure how many pixels down into a page the browser happens to be. To clarify, the distance shown as a question mark would be "zero" if the browser were scrolled all the way to the top of the page and some positive number as the browser scrolls down. Is there any way for me to get this number (in Javascript). What I need it for is to position a pop-up window centered left-to-right and 1/3-2/3 top to bottom on the screen REGARDLESS of where in the page the browser is scrolled. Thanks..... -- Roger Similar TutorialsI have a floating div that stays at the bottom of the browser window while the user scrolls down a long page. The div reads "scroll down for more". How can I determine the current position of the div in relation to the top of the page, not the top of the browser window. I need to determine this because I would like to hide the div when the user scrolls to the top of the last page. I have looked at offsetParent, offsetHeight, scrollHeight, etc. I have the code for everything except determining the position of the div, or the distance of the div from the top of the page. Hello! I do my calendar (vertical) =) and I've done to date were down But how to do that day of the week displayed on the side of the date of Here is code: Code: <html><head><title>Calendar</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> </head> <body><center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin monthnames = new Array("January","Febrary","March","April","May","June","July","August","September","October","November","December"); var linkcount=0; function addlink(month, day, href) { var entry = new Array(3); entry[0] = month; entry[1] = day; entry[2] = href; this[linkcount++] = entry; } Array.prototype.addlink = addlink; linkdays = new Array(); monthdays = new Array(12); monthdays[0]=31; monthdays[1]=28; monthdays[2]=31; monthdays[3]=30; monthdays[4]=31; monthdays[5]=30; monthdays[6]=31; monthdays[7]=31; monthdays[8]=30; monthdays[9]=31; monthdays[10]=30; monthdays[11]=31; todayDate=new Date(); thisday=todayDate.getDay(); thismonth=todayDate.getMonth(); thisdate=todayDate.getDate(); thisyear=todayDate.getYear(); thisyear = thisyear % 100; thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) monthdays[1]++; startspaces=thisdate; while (startspaces > 7) startspaces-=7; startspaces = thisday - startspaces + 1; if (startspaces < 0) startspaces+=7; document.write for (s=0;s<startspaces;s++) { document.write(); } count=1; while (count <= monthdays[thismonth]) { for (b = startspaces;b<7;b++) { linktrue=false; /////displays the date document.write("<br width='30'>"); if (count <= 31) { document.write(monthnames[thismonth]); document.write(" "); } for (c=0;c<linkdays.length;c++) { if (linkdays[c] != null) { if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) { document.write("<a href=\"" + linkdays[c][2] + "\">"); linktrue=true; } } } if (count==thisdate) { document.write("<font color='FF0000'><strong>"); } if (count <= monthdays[thismonth]) { document.write(count); } else { document.write(" "); } if (count==thisdate) { document.write("</strong></font>"); } if (linktrue) document.write("</a>"); document.write; count++; } document.write; document.write("<tr>"); startspaces=0; } document.write("</p>"); // End --> </SCRIPT> </center></body> </html> Hi, I have a click event that changes an element from a span that acts like a text link, to a textbox that the user types in: Code: Event.add(area_el_rename, 'click', function(e) { if(!currently_renaming) { area_el.innerHTML = '<textarea name=\"renaming_area\" id=\"renaming_area\" style=\"width:100px;height:10px;background-color:#DCDCDC; resize:none;font-size:8px;\"></textarea><br>'; currently_renaming=true; } }); I am wondering if there is any way to determine if the user has clicked outside the textbox, and if so, perform an action (in my case revert back to the <span>. The solution probably doesn't need to be tied to anything. It probably just has to be something like: if(click_outside_id("renaming_area")) { //do my desired action } HI all. How do I determine whether a variable exists in a form. I have a form called "theForm". I want to determine whether the variable "THIRD_PARTY" exists in the form and if it has been set. Tracy Referring to following link, I would like to determine the link for "In-Depth.xls", based on following coding, I find related information for Excel.png, does anyone have any suggestions on how to determine the URL for Excel file? Thanks in advance for any suggestions http://fx.aastocks.com/en/forex/mark...0&indicator=47 <img src="../../images/common/Excel.png" id="cp_imgExcel" class="btn" onclick="window.location.href='dbindepth.aspx?country=66970&startdate=2010/12/24&enddate=2011/12/24&indicator=47&excel=1'"/> I have an array of all links on a page (see var wa_links = document.links; below). How do I determine if the target of a link is set to "_blank"? I need to do this because currently with my code below, when a link has target="_blank" it ends up adding the Google Analytics code to the parent window and also opening a new window (so basically the new page opens in both the parent and target window instead of just the target window as expected). Code: /*Regex list of on-site domains, pipe and backslash delimited. */ var wa_onsiteDomains = /mydomain\.com|my2nddomain\.com|my3rddomain\.com|javascript/i; //Display-friendly domain and path name var wa_displayDomain = location.hostname.replace("www.","").toLowerCase(); var wa_displayPathname = location.pathname.toLowerCase(); /*Used to unobtrusivly add events to objects*/ function unobtrusiveAddEvent (element,event,fn) { var old = (element[event]) ? element[event] : function () {}; element[event] = function () {fn(); old();}; } function wa_crossDomainLink(i) { return function () { var thisLink = decodeURI(wa_links[i]); if (typeof(_gaq) == "object") _gaq.push(['_link', thisLink]); return false; }; } var wa_links = document.links; if ( wa_links ){ for(var i=0; i<wa_links.length; i++) { if( wa_links[i].href.match(wa_onsiteDomains) && !wa_links[i].href.match(location.hostname)){ unobtrusiveAddEvent( wa_links[i], 'onclick' , wa_crossDomainLink(i)); } } } With jquery I could just do something like... Code: if (jQuery(link).attr('target') == "_blank") ...but how do I do this in plain old JavaScript? Thanks! When it occurred to me that I needed to calculate this, I knew it was over my head. (although I did come up with what I thought to be a pretty clever solution involving a very complex series of arrays...) So I decided to google it. The trouble is, the solution was a little over my head too... Sooo I hacked away at it for about an hour, and finally it worked, but on closer inspection I had made a typo from the original algorithm. So I thought I would pose the question to you all... Is the original algorithm correct, or flawed? is my interpretation correct/flawed, or the same? I'm not really sure what I did here, but after many tests, I think I got the correct solution. original post on http://stackoverflow.com/questions/3...ranges-overlap Quote: Let CondA Mean DateRange A Completely After DateRange B (True if StartA > EndB) Let CondB Mean DateRange A Completely Before DateRange B (True if EndA < StartB) Then Overlap exists if Neither A Nor B is true ( If one range is neither completely after the other, nor completely before the other, then they must overlap) Now deMorgan's law, I think it is, says that Not (A Or B) <=> Not A And Not B Which means (StartA <= EndB) And (EndA >= StartB) NOTE: This includes conditions where the edges overlap exactly. If you wish to exclude that, change the >= operators to >, and <= to < And finally the test scenario that I finally got to work: Code: <input onclick="this.value=''" onkeyup="TEST()" id=inhour1 value=1> <input onclick="this.value=''" onkeyup="TEST()" id=inminute1 value=1> <br /> <input onclick="this.value=''" onkeyup="TEST()" id=outhour1 value=2> <input onclick="this.value=''" onkeyup="TEST()" id=outminute1 value=1> <br /> <br /> <input onclick="this.value=''" onkeyup="TEST()" id=inhour2 value=3> <input onclick="this.value=''" onkeyup="TEST()" id=inminute2 value=1> <br /> <input onclick="this.value=''" onkeyup="TEST()" id=outhour2 value=4> <input onclick="this.value=''" onkeyup="TEST()" id=outminute2 value=1> <script> function ID(e){return document.getElementById(e)} function TEST(){ intime1=(parseInt(ID('inhour1').value,10)*60*60)+(parseInt(ID('inminute1').value,10)*60) intime2=(parseInt(ID('inhour2').value,10)*60*60)+(parseInt(ID('inminute2').value,10)*60) outtime1=(parseInt(ID('outhour1').value,10)*60*60)+(parseInt(ID('outminute1').value,10)*60) outtime2=(parseInt(ID('outhour2').value,10)*60*60)+(parseInt(ID('outminute2').value,10)*60) comp= (intime1 <= outtime2)&&(outtime1 <= intime2) ID('compare').innerHTML='' ID('compare').innerHTML+=intime1+'<br />' ID('compare').innerHTML+=outtime1+'<br />' ID('compare').innerHTML+=intime2+'<br />' ID('compare').innerHTML+=outtime2+'<br />' ID('compare').innerHTML+=comp+'<br />' } </script> <button onclick="TEST()">compare</button> <div id="compare"></div> Any feedback would help a lot! I fear using an algorithm that I don't fully understand in production code... greetings, I'm unable to find solution for dreamweaver reporting syntax error with the following page: http://www.redskyjewelry.com/test_product_detail.html I am revamping my website so the css is not set up for this page but that's okay. I have put in the various javascripts based on the product so the page is similar to a template. The syntax error is for the second set of boxes, the bracelet length options, and specifically for line with: form.amount.value = 6.5 inches; from the following script-- <SCRIPT language=javascript> function BraceletLength(form) { if (form.os0.value == "6.5 inches") { form.amount.value = 6.5 inches; form.item_number.value = "6.5 inches"; } if (form.os0.value == "7 inches") { form.amount.value = 7 inches; form.item_number.value = "7 inches"; } if (form.os0.value == "7.5 inches") { form.amount.value = 7.5 inches; form.item_number.value = "7.5 inches"; } if (form.os0.value == "8 inches") { form.amount.value = 8 inches; form.item_number.value = "8 inches"; } } </SCRIPT> I hope I have included enough information and I thank any input into this glitch I am having. I'll check back tomorrow, and thank you. judith Hi everyone, Is it possible to determine at the startup of the page if the visitor is using a computer or a phone to access the site? I would like to make the intro process much better than a simple "click here for HTML version or click here for Flash version". I would like for it to simply redirect to the page I set it to go to depending on whether or not they're using a regular browser or a mobile browser. How would I go about this? Thank you all very much in advance. I need the code for if the user enters in a code into the field for example E1 and clicks submit it'll redirect them to a certain form. And if another user entered in E2 it would redirect them to a DIFFERENT form. I hope this is the correct category of the site for me to post this. Wasn't sure if it should be here or PHP.
I have a string of text, and starting from a particular spot (known to be a number), I want to find the length of that number. Here's what I have: Code: ... var start = [...predetermined...] var end = 0; while (!isNaN(sourceCode.charAt(start + end))){ endCurrent++; } var myNum = sourceCode.substr(start, end) * 1; So let's say var sourceCode = "alkdjabjasdsdf-53 dnalsdb..."; , startCurrent will already be at the "5" and I want to be able to extract the "53". What I have works, but it seems cumbersome... Any advice? I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was. More information: I am a C programmer who morphed to a Java programmer who knows some javascript. The JSP page looks like this: -------------------------------------------------------------------- Some text and text fields for some basic information -------------------------------------------------------------------- The javascript wysiwyg editor -------------------------------------------------------------------- The properties box (changes depending on the type of item being inserted) -------------------------------------------------------------------- Submit button, etc. for the page (so the information can be persisted) I have tried: 1. Seven days of searching the web for helpful hints. 2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.) 3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.) I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple. Does anyone have any ideas? Thanks in advance. Carl hi guys. im new to javascript and i require some help on a task so hoping someone on here could help me and possibly push me in the right direction. so i have a website with content on specific pages i need some sort of JS soloution which will fetch an ID/Keyword out of the page content so when a button is clicked it finds the ID/keyword and directs the user to a specific form/page. is this possible and can any1 help? Cheers, Ant. Hi all. I'm having a bit of a problem here. The problem is I'm trying to calculate what EXACT time it is for 238 regions at the same time using their offsets, and as you well know there's 238 regions in the world. The problem is it's only calculating 1 exact time for 2 different offsets depending on what the offset is. here's the code: Code: <script> function calcTime(offset){ var offset=0; var timezone=""; var region=""; timezone = ""; // create Date object for current location var d = new Date(); // convert to msec // add local time zone offset // get UTC time in msec var utc = d.getTime() + (d.getTimezoneOffset() * 60000); // create new Date object for different region // using supplied offset var nd = new Date(utc + (3600000*offset)); var tnd = nd.toLocaleString(); var x=0; x=x+1; if(x>238){x=238;} for(var x=1;x<=238;x++){ if(x==1){offset = -5; if(offset == -5){timezone="CST";region="USA";}} if(x==2){offset = 5; if(offset == 5){timezone="AST";region="Asia";}} a="\The local timezone in \<b\>" + region + "\<\/b\> is \<b\>" + timezone + "\<\/b\> and the local time in \<b\>" + region + "\<\/b\> is \<b\>" + tnd + "\<\/b\>"+'\<br\>'; } return a; } for(var x=1;x<=2;x++){ if(x==1){offset = -5;} if(x==2){offset = 5;} document.write(calcTime(offset)); } </script> ANY help is GREATLY appreciated, ANY ignorance is GREATLY ignored Thanks! ~ p.s. the offsets provided are just a test they are not the actual offsets. Hi guys, Been some time since I've been here. Some health problems have precluded continuing activity, until now. I have an index file that contains absolute barebone html statements and a Flash application. The application is set internally to occupy 100% of the screen. Test site is Flipsauto.info I need to have a content area offset with a DIV statement but can't remember the syntax. In other words, the content area will contain text for search engine spiders to analyze but not be viewable by the user. Thanks for any help. Bob P. Hello all, This is a follow up with a new question from a post I did last week. http://www.codingforums.com/showthre...098#post956098 I have an experimental website where I have music recordings. url removed When you open the site, each page uses a piano keyboard graphic to navigate between pages. If you click on a key that says "Jukebox" it will open a small window and continuously play tunes. The way the jukebox works basically is, when you click the jukebox key it calls an html file which contains the information needed to play the first song. When that song is finished it calls another html file with the information to play the second song and so on. Each html file contains an embedded Windows Media Player in it. I would like to give visitors the option to use the QuickTime player. So I can have one key in the keyboard graphic that say “Jukebox – for Windows Media Players” and then another key in the graphic that would say “Jukebox – for QuickTime players”. I would like to use both keys to call the same html file. So, in the file I would like to: 1. Determine which key was pressed in the graphic. (how to send a parameter from the keyboard graphic file indicating which key was pressed) 2. With that parameter I would then like to invoke the appropriate player. (how to receive that parameter) After the help I received last week I have my html in the keyboard graphic file set up as follows to call the first html file with the first song: Code: <AREA SHAPE="rect" HREF="#" onclick="window.open('ShirleyLee.html','jukebox', 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1 ,resizable=0,copyhistory=0,left=0,top=0,screenX=0,screenY=0,width=410 ,height=300');return false;"onMouseover="document.roll.src=F1 _Down.src"onMouseout="document.roll.src=KeysUp.src"COORDS=" 233,344,335,384" NAME="roll"ALT="F1"> I think we would be talking about the use of forms but not sure how to incorporate along with an onclick event.... The reason for this post is just to get some high level discussion ideas so that I can take that and go research how to do it. I could ask specifics later. Thanks! Dan I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent; function submitParent() { var doc = window.opener.document, theForm = doc.getElementById("finalForm"); theField = doc.getElementById("finalSelected"); theForm.submit(); theField.trigger('click'); } My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script> About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to. When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00. I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top. I appreciate your help. I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya |