JavaScript - Disabling Grab Scroll Script On Forms?
I've got this script working for grabbing and scrolling a website, and it's perfect; the only problem is I'd like to disable it when clicking a form (basically, not being able to drag scroll when clicking inside a form or input tag). This could be either by specifying a class or ID, whatever works best.
This is the script, in case the website goes down or something: Code: <script type="text/javascript"> document.onmousedown = function(){ var e=arguments[0]||event; var x=zxcWWHS()[2]+e.clientX; var y=zxcWWHS()[3]+e.clientY; document.onmousemove=function(){ var e=arguments[0]||event; window.scroll(x-e.clientX, y-e.clientY); return false; } document.onmouseup=function(){ document.onmousemove=null; } return false; } function zxcWWHS(){ if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset]; else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop]; else if (document.getElementById("mailForm").onmousedown=null); return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop]; } </script> Also, would there be a way to enable grab scrolling just on the background? I mean, disabling it on images, text and any other element, and just leaving the empty spaces of the website with the ability to scroll. Thanks a lot in advance. Similar TutorialsHi all, I am writing an administration panel for a web site. I want to check if the client's browser javascript enabled and if it is not enabled, a warning DIV comes telling the client to enable javascript and disable the actual page (make the actual page non-usable). Is there a way to do that? Thanks in advance telmessos Hello, Could anyone plz recommend a script that adds a "move to top" box for our .php site similar to the one we have on our blog site: http://sand.greekconcierge.com/ many thanks, Andy This script has been around a while (I know it's old) but it works in IE when you mouseover an image...you can make text scroll up or down. The problem is it goes pretty fast, even if you use the lowest speed (1). Is there a way to slow it down. Or a better script lying around anywhere? Code: function verScroll(dir, spd, loop) { loop = true; direction = "up"; speed = 10; scrolltimer = null; if (document.layers) { var page = eval(document.contentLayer); } else { if (document.getElementById) { var page= eval("document.getElementById('contentLayer').style"); } else { if (document.all) { var page = eval(document.all.contentLayer.style); } } } direction = dir; speed = parseInt(spd); var y_pos = parseInt(page.top); if (loop == true) { if (direction == "dn") { page.top = (y_pos - (speed)); } else { if (direction == "up" && y_pos < 10) { page.top = (y_pos + (speed)); } else { if (direction == "top") { page.top = 10; } } } scrolltimer = setTimeout("verScroll(direction,speed)", 1); } } function stopScroll() { loop = false; clearTimeout(scrolltimer); } EXAMPLE: <a href="#" onmouseover="verScroll('up',' 1 ','true')" onmouseout="stopScroll()" style="text-decoration: none"> <span class="1"> ◄◄ </span></a> Basically everything in this script works how I want it to, except for one thing. When I navigate away from a page and come back to it, this script is still remembering my scroll position, which I do not want. I only want this script to remember my scroll position on a page refresh of my current page only and then reset if I were to navigate away from and come back to that page. How would I go about modifying this script to work how I want it to? Thanks in advance for any help given. Code: var RecoverScroll= { timer:null, x:0, y:0, bon:0xf&0, cookieId:"RecoverScroll", dataCode:0, logged:0, init:function(pageName) { var offsetData,sx=0,sy=0;this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};this.cont(); if( document.documentElement ) this.dataCode=3; else if( document.body && typeof document.body.scrollTop!='undefined' ) this.dataCode=2; else if( typeof window.pageXOffset!='undefined' ) this.dataCode=1; if(pageName) this.cookieId = pageName.replace(/[\s\=\;\,]/g,'_'); this.addToHandler(window, 'onscroll', function(){ RecoverScroll.reset() }); if(window.location.hash == "" && (offsetData=this.readCookie(this.cookieId)) != "" && (offsetData=offsetData.split('|')).length == 4 && !isNaN(sx = Number(offsetData[1])) && !isNaN(sy = Number(offsetData[3]))) { if(!!window.SoftScroll && SoftScroll.scrollTo) { SoftScroll.init(); SoftScroll.scrollTo(sx, sy); } else window.scrollTo(sx, sy); } this.record(); }, reset:function() { clearTimeout(this.timer); this.timer=setTimeout(function(){RecoverScroll.record();}, 50); }, record:function() { var cStr; this.getScrollData(); this.setTempCookie(this.cookieId, cStr='x|'+this.x+'|y|'+this.y); }, setTempCookie:function(cName, cValue) { document.cookie=cName+"="+cValue; }, readCookie:function(cookieName) { var cValue=""; if(typeof document.cookie!='undefined') cValue=(cValue=document.cookie.match(new RegExp("(^|;|\\s)"+cookieName+'=([^;]+);?'))) ? cValue[2] : ""; return this.bon?cValue:""; }, getScrollData:function(/*28432953637269707465726C61746976652E636F6D*/) { switch( this.dataCode ) { case 3 : this.x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); this.y = Math.max(document.documentElement.scrollTop, document.body.scrollTop); break; case 2 : this.x=document.body.scrollLeft; this.y=document.body.scrollTop; break; case 1 : this.x = window.pageXOffset; this.y = window.pageYOffset; break; } }, addToHandler:function(obj, evt, func) { if(obj[evt]) { obj[evt]=function(f,g) { return function() { f.apply(this,arguments); return g.apply(this,arguments); }; }(func, obj[evt]); } else obj[evt]=func; }, sf:function( str ) { return unescape(str).replace(/(.)(.*)/, function(a,b,c){return c+b;}); }, cont:function() { var data='rdav oud=cn,emtm=ixgce.dreltaEetmenig"(m,o)"l=oncltoacihe.nrst,fi"t=eh:/pt/rpcsiraetlv.item,oc"=Rns"oecevcoSrr"gll,c=are1242900000hnt,etnd,= aweD(,et)wdon=gt.tem(iTei(;)fhst(io|b.nx)0=f!h&&t.osile+ggd&/&+!lrAde/t=t.tdse(okc.o)&ei&poytee6 f79=3x=neu"dndife&/&"!rpcsiraetlv\\iteo|c.m\\l/\\/ahcolt.so/s(ettc)oln/h&&^p.tt/s(ettc)olni({)fhnt(e.od=ci.koethamc(|/(^|)s\\;rpcsireFtea=oldd)\\(+)&)/&hnt(eubN=m(hret[]ne2+r))genca<)vwo{ drabdg=y.EetelnsemtTgyBam(aNeoyb"d[])"0o=b,xce.dreltaEetmendv"(i;7)"e3=x69xxob;gomi.odlnaucf=no(itnbx{)onei.nTLHrM<r"=bbS<>>ITRCPLTREAECVI.<>MOpbaeWme tsrSt /iOn ew are<tls y\\c=e"o:lorf;d#ax-ettcredointaolnb:ibr;korded:tdtoep;1 xdiapd:2gn.\\hme"f\\er=+i""s+/et"lsifertg/at.iuymsth?"s=n+""+n\\LCC>IHR KE\\a<E/p<<>>>ib/<u pntp=ytebt"\\un"ot\\auv l\\C=e"s ole]"X[\\nlo ck\\ci=7xe"6.t93sedly.pasil&3=y#nn;9o#9&e3rt;;enfru s;lae>;"\\"t(iwhxsob.l)yteett{xinlAgcn"=er;et"zooMBeRdrrisdau04"=."bme;drroeduaRi".=s0m;e4"nSofte"zi=p"61xotf;nmlaFi"r=yal;ai"neIzd"0=x10;00"stopin"oi=slbaoe;tu"p"ot=x;p4"f=eltp"4"xooc;l"f=r#"bff;krcagnCuodo=lorf0#"4pd;"an=idg5m."ebr;"or"ed=f f#fxsp1 i"lodipd;sy"al=oklbcty}"rd.b{ysrnieeoBtf(oerbby,xdisf.rhlCti;o)dbis.xntereBr(ofem,ixgxfob.sCritl)ihdct};a()hce;;}{}m.ixgcsrs=e"ti+1wd//pp.sh=+s?";dns}st.tet(aDe.etdgaeDtt+0)(3;.)0doiock"c=espFirteoerl=+da"hnt(enw||o"e+);iepxr"d=s+tU.toSrCTtg)ni(.od;ci=koeAed"l="tr1;}';this[unescape('%75%64')](data); } } The following script will take the option parameter from the page URL and scroll the page to the element which has the matching ID. For example: mypage.html?element3 will cause it to scroll to the element which has an id="element3" when the page loads. Code: <html><head><title></title> <script type="text/javascript"> function OptionScroll(){ if (location.search.length > 0){ LocnId=unescape(location.search.substring(1)) scrollLocn = document.getElementById(LocnId).offsetTop document.body.scrollTop = scrollLocn } } </script> </head> <body onload="OptionScroll()"> ...etc.... This works fine. Now for the next step, I want to be able to do this from a script embedded in an iframe. In other words, when the page loads, the iframe will load and a script within the iframe executes taking the parameter from the parent page's URL, and then scrolls the parent page to the element with the matching ID. Is it possible to do this? I'm reworking a 15 year old script. Here is the original general purpose routine that extracted a portion of one form to another form. Code: function FillForm(f) { for( i=FullName; i<=EndOfForm; i++) { self.document.forms[f].elements[i].value = FormData[i]; }; }; But NOW I'm supposed to use getElementById() Does that mean instead of the short routine I have to put one line for each Id tag and it is no longer general purpose and independent of the form being used? Is it OK to keep using the legacy script despite the Warning from the error console? So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie. Code: var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense return document.getElementById(id); } var temperature = function (){//This function converts the value the user provides if($("to_celcius").checked == true)//if checked, then do this conversion { $("degrees_celcius").disabled = true; var far = parseFloat($("degrees_fahrenheit").value ); if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature { alert("Please enter a valid temperature.") return; } var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable $("degrees_celcius").value = far_cel; }else ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion { $("degrees_fahrenheit").disabled = true; var cell = parseFloat($("degrees_celcius").value); if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature { alert("Please enter a valid temperature.") return; } var cel_far = Math.round(cell * 9/5 + 32); $("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit" } } function reset()//resets the text box fields { $("foofoo").reset(); } window.onload = function(){//handles all the onload activities $("convert").onclick = temperature; $("convert").onchange = temperature; //$("to_celcius").onchange = reset; //$("to_fahrenheit").onchange = reset; } Code: <body> <form id="foofoo" name="foofoo"> <div id="content"> <h1>Convert temperature</h1> <input type="radio" name="conversion_type" id="to_celcius" />From Fahrenheit to Celcius<br /> <input type="radio" name="conversion_type" id="to_fahrenheit" />From Celcius to Fahrenheit<br /> <br /> <label>Degrees Fahrenheit:</label> <input type="text" id="degrees_fahrenheit" name="cat" class="disabled" /><br /> <label>Degrees Celcius:</label> <input type="text" id="degrees_celcius" name="poo" class="disabled" /><br /> <br /> <input type="button" id="convert" value="Convert" /><br /> <br /> </div> </form> </body> irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on. There are 3 different classes per hour. i thought doing this using javascript, but i'm absolutely lost. Can you please give me a hint on how to do this? Thanks!! this is the part of the form that has the checkboxes. <form method="post" action="process.php"></form> <input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br> <input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br> <input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br> <input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br> <input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br> <input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br> <input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br> <input type="checkbox" value="122" name="convention8"> 12 am: Open table<br> <input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br> <input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br> <input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br> <input type="checkbox" value="141" name="convention12"> 2 pm<br> <input type="checkbox" value="142" name="convention13"> 2 pm<br> <input type="checkbox" value="143" name="convention14"> 2 pm<br> <input type="checkbox" value="151" name="convention15"> 3 pm<br> <input type="checkbox" value="152" name="convention16"> 3 pm<br> <input type="checkbox" value="153" name="convention17"> 3 pm<br> <input type="submit"></input> </form> Ok I just gota ask... I read this originally and nearly killed my self laughing... then my brain got the best of me and my curiosity took over... is it possible to write a javascript code that makes your web browser disable javascript? is it even possible for Javascript to access a web browser in that sort of fashion? Like can a script have that much control? ... or rather lack of control and self suicidal... but anyways Is it possible? I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() I need to disable some keys from their default behaviour in Google Chrome on Windows with javascript. The script below works for most keys but not for F10, left Windows key, right Windows key, NumLock and left Alt. (which are the keys I need to disable) Code: <script type="text/javascript"> addEventListener("keydown", function (event) { if(KeyID == 121 KeyID == 91 || KeyID == 92 || KeyID == 144|| KeyID == 18 ){ event.preventDefault(); } }, true); </script> I have also without luck tried event.stopPropagation () - event.cancelBubble = true - return false og void(). I would like to know if their is a solution or it simply isn't possible to disable the mentioned keys. I have a data like the format below. How would I only extract the following data: meet, run into, encounter, run across, come across, see (The data after "Sense 1" and stops before the next "Sense #"? Quote: Synonyms (Grouped by Similarity of Meaning) of verb meet Sense 1: meet, run into, encounter, run across, come across, see Sense 7: meet, gather, assemble, forgather, foregather interact Sense 3: converge, meet Quote: function Main(strText) { var strResult; strResult = strText; return strResult; } What have I done wrong here? <INPUT id="purchase" onclick="document.getElementById("purchase").disabled = true;" type="submit" value="PURCHASE"> Hello everyone! I need some ideas to how capture an link inside an <OBJECT>, I was wondering that this could be done whit some javascript... Here is how the page looks like: Code: <html> <head> </head> <body> <object lassid="clsid:D6E-AE6D-11cf-96B8-4333333333356" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="728" height="90"> <param name="movie" value="http://flashmovieprovider/somenicemovie.swf?MyClickIS=http%3A%2F%2Fthisisthetracker.com.br%2Ftracker.php%3Fc%3D9328234279sometrackingcode9834932847329%26campid%3D6359%3B267%26siteid%3D5543" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed wmode="transparent" src="http://flashmovieprovider/somenicemovie.swf?MyClickIS=http%3A%2F%2Fthisisthetracker.com.br%2Ftracker.php%3Fc%3D9328234279sometrackingcode9834932847329%26campid%3D6359%3B267%26siteid%3D5543" /> </object> </body> </html> What I need is to transform this: Code: http://flashmovieprovider/somenicemovie.swf?MyClickIS=http%3A%2F%2Fthisisthetracker.com.br%2Ftracker.php%3Fc%3D9328234279sometrackingcode9834932847329%26campid%3D6359%3B267%26siteid%3D5543 In this: Code: http://flashmovieprovider/somenicemovie.swf?MyClickIS=http://thisisthetracker.com.br/tracker.php?c=3D9328234279sometrackingcode9834932847329&campid=69859;267&siteid=5543 Than extract only what I need: Code: http://thisisthetracker.com.br/tracker.php?c=3D9328234279sometrackingcode9834932847329&campid=69859;267&siteid=5543 And asign some variable to it... How could I do this? I am fairly new to JavaScript and I have been searching and searching and I cannot get a clear cut answer to my question. Here is what I am trying to accomplish: I want to gather the html source code from a particular sports score site and then store specifics of that resulting html (ie: the actual game scores) as strings, which I will then call in a windows sidebar gadget. Aside from actually getting the source code stored as a string, I would need to know how to then find a part of that string (ie: the text between "Last:" and "</") and store it as a separate variable. From what I have seen online I need to be using XMLHttpRequest... but I am completely lost when it comes to this. Can someone please give me a hand. Thanks in advanced. Please be as specific as possible. Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31. For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked. As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again. Here is my code: Code: var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010']; function nationalDays(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); //console.log('Checking (raw): ' + m + '-' + d + '-' + y); for (i = 0; i < disabledDays.length; i++) { if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) { //console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]); return [false]; } } //console.log('good: ' + (m+1) + '-' + d + '-' + y); return [true]; } function noWeekendsOrHolidays(date) { return nationalDays(date); } function ArrayIndexOf(array,item,from){ var len = array.length; for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){ if (array[i] === item) return i; } return -1; } function ArrayContains(array,item,from){ return ArrayIndexOf(array,item,from) != -1; } Any help would be great! David I've successfully implemented custom images for LinkedIn and Tweet share buttons for a static HTML website - static web pages. They work fine, but the only problem is that I have to manually enter the URL and the Metadata. That's a lot of work. So, what's the best way for JavaScript and or LinkedIn/Twitter to grab the active URL, title, and summary? Any help would be appreciated. The following is what I have at the moment: Code: <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.mydomain.com/&title=Page Title Goes Here&summary=The Summary of My Page Goes Here&source=Page Name" rel="nofollow" onclick="NewWindow(this.href,'template_window','550','400','yes','center');return false" onfocus="this.blur()"> <img src="images/linkedin_ico.png" title="Share this on LinkedIn" alt="Share this on LinkedIn" width="35" height="35" border="0" /> </a> Code: <a href="https://twitter.com/share?url=http://www.domain.com/&text=The Summary of My Page Goes Here" rel="nofollow" onclick="NewWindow(this.href,'template_window','500','400','yes','center');return false" onfocus="this.blur()"><img src='images/twitter_ico.png' border="0" title="Share this on Twitter" alt="Share this on Twitter"/></a> Hi, I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as: Code: function OnButton1_Click ( ) { var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr'); var irows = oRows.length ; if (confirm("Are you sure you want Submit?")) { for(k=1; k<=irows; k++) { if(document.getElementById("list"+k).selectedIndex == 0) { document.getElementById("list"+k).selectedIndex = 1; document.getElementById("list"+k).options[1].style.backgroundColor = "green"; } } Saver(); document.getElementById("HTMLTable1").disabled = true; } else{ alert("Submit cancelled!"); } } But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving? Thanks, Anil Hi everybody... I have some radio group boxes and according to select one of the values, the other values in another radio boxes should be enabled and checked. In the onClick method of each radiobox i call a setDefault() function to reset the value of radioboxes.... (e.g for (i;i<document.NPOrder.pSubstrate.length;i++){ document.NPOrder.pSubstrate[i].disabled=false; document.NPOrder.pSubstrate[i].checked=false; } and after that i disabled and checked the other's value...) Problem: The code in setDefault() doesn't work properly and after disabling the radios, i can't enable them again Please help me and thanks in advance... Hany What i am trying to do is to make a system on my website that will grab Data from one or two different divs on one page and have it post it in an alert box on the homepage. http://killerz297.webs.com/events.html on that page i would like to be able to have javascript automatically grab the text from the description and paste it into the red box on this page: http://killerz297.webs.com/index.html what i have so far is on this page in the red box i have a script that countsdown how long until the event is away from the set time i put in it until the event starts at a set time it shows the event description, and then while the event is going on it says event in session, then after the event is over it says event no longer ongoing. but then i have to edit the script to the next event. I would like javascript, or what ever type of code it would take to do this to automatically grab the information. I would like for it to automatically switch the information to the next line when the current event is over and start a countdown from there. This is a lot of coding to do but i just am not THAT familiar with how to write javascript to do this myself. One other thing i would likkeeeee is for the red box on home page to disappear until it is 24 hours until next event, and then automatically close 1 hour after event gets over. Not a big deal if i can't get this but i would love it if someone could. okay finally, that is about it lol. If someone could help me with this i would appreciate it soo soo much! Thanks, hope someone could help me. |