|
JavaScript - How To Alert If User Scrolls Down The Page?
Hi,
Can anyone please tell me that " how to write a JavaScript function to pop up an alert() if a user scrolls down the webpage faster than a certain speed" Looking forward for a urgent reply Thanks Similar TutorialsI've been handed an html document that contains a centered, scrollable <iframe> element with a static height and width. This iframe element displays a simple html document that houses the 'terms of service' text. Their goal is to have it to where the <a href> link at the bottom that is shown to the user as 'next' is disabled until the user scrolls to the bottom of the terms of agreement box. The clickable link could be a button, image or text (no preference). They have to have it this way for legal reasons and radio buttons or checkboxes will not suffice unfortunately. Question: What is the best way to go about doing this that seems to be cross-browser friendly (especially IE7). I offer $10 via paypal for well commented method/script. Hi there guys! My group is working on a basic document management system that includes four users. staff member, department director, division chief and clerk. The programming language that we used is PHP. when staff member logs-in on his homepage and uploads a file he must choose reviewer from a dropdown menu that consists of dep. director and div. chief. When he clicks the upload button the homepage of who he chose as reviewer should receive a prompt/alert box upon log-in saying "you have a document to review". For example: if he chose division chief as the reviewer when the person logs-in on his homepage a prompt/alert should display that he has something to review. The code for uploading file is already up and working. We are looking for advice on how to integrate javascript in this system. Especially in the prompt part. thanks for your ideas. I already asked that question on Stack Overflow, however so far I haven't gotten any answers there, so I thought maybe somebody here could help me. Below is the question, copied from Stack Overflow. I've got this problem that I've been trying to solve for a week and I'm at wit's end (which, well, most likely means my wit's not so great, since it doesn't seem to be a very hard problem; nonetheless I'm very new to Javascript and am trying to look at this as a learning experience). I wanted to have a fixed position element that would rotate as a user scrolls the page. Doing so in CSS is trivially easy, however it doesn't work all that great, especially across browsers (works fine in Chrome, but is janky in Firefox) and under stress (when I turn on FPS meter or some other stuff in Chrome Developer Tools it stops working correctly ― I assume it would also behave similarly if there was another CPU-extensive app open etc.). So I figured that animating in the canvas would be a more stable technique. Doing the basic animation in the canvas is, again, rather easy. However I started having problems while trying to emulate the CSS transition effect. In short, I'm trying to emulate a code like this: Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
#square {
margin: 50px;
width: 150px;
height: 150px;
position: fixed;
background-color: black;
transition: transform linear 0.3s;
}
</style>
<script>
window.onload = function() {
var deg = 0;
var pos = window.pageYOffset;
var square = document.getElementById('square');
window.onscroll = function() {
var npos = window.pageYOffset;
deg += (npos - pos) / 10;
pos = npos;
square.style.transform = 'rotate(' + deg + 'deg)';
}
}
</script>
</head>
<body>
<div id='square'></div>
</body>
</html>
And what I've got currently is below. This is, like, fifteenth try, and if you run it, you'll see that it kind of works but is very ugly and totally not how it should look. I have had better results before, but still not what I was looking for. Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
canvas {
position: fixed;
}
</style>
</head>
<body>
<canvas id='canvas' width='250' height='250'></canvas>
<script>
window.onload = function() {
// some canvas geometry stuff
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.translate(125,125);
var deg = Math.PI / 180;
// initializing variables
var request = null;
var deg = 0;
var ndeg = 0;
var base_degree;
var pos = window.pageYOffset;
var time = 0;
var duration = 300; // in milliseconds
draw();
document.addEventListener('scroll', rotateStart, false);
function rotateStart() {
// at the beggining of the scroll, set the time variable and start the loop.
// if scroll continues, only set the time (thus resetting the animation),
// but don't call loop, since it's already set as a callback to requestAnimationFrame.
if (request == null) {
time = (new Date()).getTime();
loop();
}
else {
time = (new Date()).getTime();
}
}
function loop() {
// time passed as a fraction of total duration of animation. Describes our progress
var fraction = ((new Date()).getTime() - time) / duration;
if (fraction == 0) {
// if current time and old time are the same, skip this frame
request = window.requestAnimationFrame(loop);
}
else if (fraction < 1) {
base_degree = (window.pageYOffset - pos) / 10;
ndeg = deg + base_degree * fraction;
// we operate on ndeg, and preserve deg as a reference point
request = window.requestAnimationFrame(loop);
draw();
}
else {
// clean up code.
// we draw one last time at a definitive degree of rotation because
// in my experience with similar scripts it sometimes doesn't go all the way there,
// e.g. maybe it stops at fraction == 0.95 or something like that.
ndeg = deg + base_degree;
draw();
deg = ndeg;
pos = window.pageYOffset;
request = null;
}
}
function draw() {
c.save();
c.clearRect(-125,-125,250,250);
c.rotate(ndeg * deg);
c.fillRect(-75,-75,150,150);
c.restore();
}
};
</script>
</body>
</html>
Could somebody point out errors in what I'm doing, post a solution, give a hint as to what method would be preferred here, whatever? I have an user table like this:- guid | username | password | firstname | lastname | location | emailad dress | userrole -----------------------------------+----------+----------------------------------+-----------+-----------+----------+-------- ------+--------------- 8024259764dc3e8ee0fb6f5.84107784 | james | 827ccb0eea8a706c4c34a16891f84e7b | james | bond | NY | ny@live .com | administrator 18689183644dc3e91571a364.71859328 | saty | 250cf8b51c773f3f8dc8b4be867a9a02 | saty | john | NY | hk@fd.c om | administrator 2644885344cecd6f2973b35.63257615 | admin | 21232f297a57a5a743894a0e4a801fc3 | System | Generated | | | administrator (3 rows) now my postgre query for delete the row .... $query = "delete from users where username!= 'admin' and guid='".$guid."'"; $result = pg_query($conn, $query); ?> <script type="text/javascript"> alert("Cannot delete this .\n It is system generated(s)."); </script> <?php (1)when I delete the user name one by one then delete occurs in my page userlist.php, I donot want to delete admin so i use username!= 'admin' in where condition as shown above. (2)now when I del any username(3 rows) from user table then alert occurs & it delete from userlist.php after that my page userlist.php is blank. Finaly when i refresh the page then my admin username seen.. when i use return true; function then only alert generate .. delete doesnot occurs ... Actauly i want:- (1)if user is not admin then it delete from userlist.php ... nd also i m continue on this page ... like when james and saty want to delte their acount ..as given in table. (2)if user is admin then alert generate nd i m continue on this page. i m tired now plz help me .... so can anyone put the best condition in my coding. Is there anyway to make a text area scroll down with the page? Code: <textarea name = "scrollBox" rows = "1" cols = "10">A B C D </textarea> So it took me forever but I finally found a floating menu that works with a horizontally scrolling page - but of course, there's still a little bug. View the page he http://uconn.kappaphilambda.org/sisters.shtml As you can see, the more you scroll right, the more the menu "compacts" itself, eventually disappearing altogether. Any ideas as to how to fix it? You can view the code & script codes by viewing the source of the page. Thanks in advance :] So with the below form if the value of any of the select list changes the user is alerted something like "You are about to make 2 changes". How can I do this? Code: <script>
function validate(){
}
</script>
<form method="POST" onsubmit="return validate()" action="--WEBBOT-SELF--">
<select size="1" name="fruits[]">
<option value="apple">apple</option>
<option value="pear">pear</option>
<option value="orange">orange</option>
</select>
<select size="1" name="cars[]">
<option value="ford">ford</option>
<option value="gm">gm</option>
<option value="toyota">toyota</option>
</select>
<input type="submit" value="Submit" name="B1"></p>
</form>
Hi Guys, seen some pages who give alerts or Warnings mentioning that i'm moving away from my webpage. Best example is hotmail when you are on the compose mail screen and when click another link it is asking for confirmation. Can you one please shed some light on how to do this. Your help is greatly appreciated. Cheers Dileep currently working on a project and I cant figure the right coding to get my results to pop up in a new page, same window AND an alert box. I got the alert box part down perfectly but cannot figure out how to get my results. Even if i can figure out how to get them on the same page in their designated field, I can probably figure the rest out, the coding i have so far looks like this: ( i cant figure out how to make it look cool in a diff. window... sorry) <HTML> <HEAD> <b> Here is a pay slip generator that will determine your net annual salary. <br> Simply type in your first and last name along with gross salary and hit calculate. <br> Doing this will let you know how much you will end up paying in both Federal and State taxes. </b> <form action="" method="post"> <p> Enter your First Name: <input name="num1" type="text" id="num1" size="10" maxlength="10"> </p> <p> Enter your Last Name: <input name="num2" type="text" id="num2" size="10" maxlength="10"> </p> <p> Enter your gross salary: <input name="num3" type="#" id="num3" size="10" maxlength="10"> </p> Click this button to calulate your annual net pay! <script type="text/javascript"> function calculate() { var fName = document.getElementById('num1').value; var lname = document.getElementById('num2').value; var sal = Number(document.getElementById('num3').value); alert('Hello '+ fName + ' '+ lname + ', you would pay $'+ sal * .2 + ' in Federal taxes and $'+ sal * .1 + ' in State taxes, leaving you $'+ sal * .7 + ' to take home annually!'); //for testing } </script> <input type="button" onclick="calculate()" value="Generate Pay Slip" /> <input type="button" value="Reset Form" onClick="this.form.reset()" /> <p>Total federal taxes: <input name="num4" type="#" id="num4" size="10" maxlength="10" value= N/A> </p> <p>Total State taxes: <input name="num5" type="#" id="num5" size="10" maxlength="10" value= N/A> </p> <p>Net annual salary: <input name="num6" type="#" id="num6" size="10" maxlength="10" value= N/A> <script type="text/javascript"> function show_results { var ftax = document.getElementbyId('num4').value; var stax = document.getElementbyId('num5').value; var npay = document.getElementbyId('num6').value; } </TEXTAREA> </FORM> </body> </html> </script> Any clues would be very helpful Bear with me, as I do not know where the problem lies. I know this is a lot of code. I have acquired this code and am not sure what to change to make it work how I want it to. Basically it prompts, with a Javascript alert, for the visitor to take a survey. If they hit OK it redirects them to a landing page, if they hit CANCEL it lets them go on their way. FIRST OFF THANK YOU SOOOO MUCH FOR ANY HELP YOU CAN PROVIDE ME!!! I would like for the script to execute even when the visitor types a URL in the address bar and exits that way versus just alerting the visitor when they click an external link. That is the main goal that I need help with. I would also like the script to use cookies so that it doesn't pop up for a visitor more than once in either 7 or 14 days. This isn't as big of a deal as the problem listed above but is more of a bonus if I can get it. I have listed all pages with code that pertain to this code because, as listed above, I do not know where the problem lies. If it helps, this code is also based off of the jQuery code. Below is the page where the code executes: Code: <html>
<head>
<script src="SurveyRelocationManager.js"> <!-- --> </script>
<script type="text/javascript" src="jquery.js"></script>
<script>
<!--
var srm;
function init(){
srm = new SurveyRelocationManager();
srm.setSurveyURL("http://www.poddcorp.com"); //change to the correct survey URL
//add the internal URLs, if internal popup does not deploy
srm.addInternalURL("https://secure3.convio.net/ucs/site/Advocacy/");
srm.addInternalURL("http://ucs.convio.net/site/Ecard/");
srm.addInternalURL("https://secure3.convio.net/ucs/site/Donation/");
srm.addInternalURL("http://ucs.convio.net/site/UserLogin/");
srm.addInternalURL("http://ucs.convio.net/site/PageServer?pagename=sign_up/");
srm.addInternalURL("http://www.ucsusa.org/");
$("a").click(function () {
return srm.onBeforeClick(this);
});
}
window.onload = init;
-->
</script>
</head>
<body>
<a href="http://www.ucsusa.org/internal.html">internal</a><br />
<a href="http://www.themmrf.org/donate-now-take-action/join-an-event/powerful-athletes/mmrf-triathlon-and-cycling.html">external link</a><br />
<a href="internal.html">internal</a><br />
<a href="http://www.yahoo.com">external link</a><br />
<a href="http://www.ucsusa.org/global_warming/">another internal</a>
</body>
</html>
Below is other code (SurveyRelocationManager.js) that helps execute the script: Code: function SurveyRelocationManager(){
//Constr.
this.aInternalURLs = new Array();
}
SurveyRelocationManager.prototype.init = function(){
this.setInternalURLs();
}
SurveyRelocationManager.prototype.setSurveyURL = function(s){
this.sSurv = s;
}
SurveyRelocationManager.prototype.getSurveyURL = function(){
return this.sSurv.valueOf();
}
SurveyRelocationManager.prototype.addInternalURL = function(s){
this.aInternalURLs.push(s);
}
SurveyRelocationManager.prototype.removeInternalURL = function(s){
for(var a = 0; a<this.aInternalURLs.length; a++){
if(this.aInternalURLs[a] == s){
this.aInternalURLs.splice(a, 1);
}
}
}
SurveyRelocationManager.prototype.getInternalURLs = function(){
return this.aInternalURLs.slice(0);
}
SurveyRelocationManager.prototype.getURLIsInternal = function(s){
var t;
/*
KLUDGE: t.indexOf returns -1 if aInternalURLs has no
slash at the end. Somehow forward slashes cancels the eval.
TODO: Refactor t.indexOf.
*/
for(var a = 0; a<this.aInternalURLs.length; a++){
t = this.aInternalURLs[a];
//
if(s.indexOf(t) != -1){
return true;
}else if(s.indexOf('http://') == -1)
return true;
}
return false;
}
SurveyRelocationManager.prototype.onClick = function(o){
var b = this.getURLIsInternal(o.toString());
if(!b){
var c = confirm("Do you want to take the survey?");
if(c){
//TODO: Relocate here.
document.location = this.getSurveyURL();
} else {
return true;
}
} else {
return true;
}
return false;
}
Note: The only other page that isn't located on this post is the jQuery code. Because of it's length it wouldn't allow me to include the code. You can visit jquery.com to view the code. Or message me and I can send it. THANKS A MILLION! Hell All Can some1 give me a function for Alert Visitor before the page Load if he /she Sure wants to See the Page . I have function Onclick alert message but i want the function is when click and go to the page and before the page load to ask 'if want realy to see the page' if yes return true if cancel or no to go back to where he come from. Thank you and hope such function exist. I'm writing a calculator script that will need user input (how much they pay on internet, phone or cable bill) and then multiply those numbers by a known rate and then show the customer the new number. I have the math setup (working right now), and the script works to spit out the answers in an alert. Instead of the alert (which is the only thing I can do correctly at this point), I need the script to give the answers for each bill and then a total answer at the bottom. The script is here, it's all in the index file. http://gotsmith.com/calculator/ Thanks. how i can refresh my main history page without page refresh alert message? i am using the following code on the submitpage.asp <%response.write ("<script>window.location.reload(history.go(-2));</script>")%> i got the attached message when it refreshes the main page. is there is a way to refresh directly without this message? Hi I have a problem with a form in my site he http://www.21centuryanswers.com/submit.php if no field is filled and you click submit, an alert will be shown, yet the next page will still load! How do I fix it? the code for the form is: <form action="privacy.php" method="post" onsubmit="return checkform(this);"> <fieldset> <center> E-mail: <input type="textfield" name="email" size="60" value="" /><br/></br> Question: <input type="textfield" name="question" size="70" value="" /><br/><br/> <input type="submit" value = "Submit"/> </center> </fieldset> </form> and here is the validation script: <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { // ** START ** if (form.email.value == "") { alert( "Please enter your email." ); form.author.focus(); return false ; } if (form.question.value == "") { alert( "Please enter the question." ); form.title.focus(); return false ; } // ** END ** return true ; } //--> </script> Please help! Hi there Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at: http://www.mrjindustrial.com.au/scro..._concrete.html Thanks, hope someone can help. Hey, Is there a method to check if a user refreshed a page? I'm designing an online psychological experiment and I want to see if the user refreshed a page (to see if he was trying to see an image that he was supposed to see only once). Thanks, Ok, im stuck. Ive tryed about 10 solutions from Google. None are working. Ok, I made a site in Flash, and a second site in HTML. I want to automatically redirect people from my flash site (indexhigh.html) to my html site (indexlow.html) if they can't see my flash movie. Here's the flash page URL: http://testnewsite.netau.net/indexhigh.html . Restrictions: This redirect MUST be done using javascript or without having me to download another swfobject file. Please paste completed code. Heres my current code: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '940',
'height', '940',
'src', 'Website',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'Website',
'bgcolor', '#ffffff',
'name', 'Website',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'Website',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="940" height="940" id="Website" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Website.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Website.swf" quality="high" bgcolor="#ffffff" width="940" height="940" name="Website" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
<table width="889" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="91" bgcolor="#FFFFFF">Site created by:</td>
<td width="232"><a href="http://www.christoff.tk"><img src="my_Logo.png" width="197" height="169"></a></td>
<td width="242"><a href="http://www.fcw.comoj.com"><img src="logo3.JPG" width="205" height="62"><br>
Free Charity Websites
</a></td>
<td width="112">And by the</td>
<td width="198"><p><img src="untitled.png" width="77" height="86"><br>
Fort Myers High School <br>
Web Design 2 Students from<br>
1st Period<br>
Team leader: Chris Christoff
</p></td>
</tr>
</table>
</body>
</html>
Chris I wish to make a dropdown box appear when a user leaves a particular page. I have the code for the drop down and it works well. It fires when a function is called: function = initboxv2(); return false; How do I call it when the user attempts to leave the page? So that it goes direct to the dropdown (I've tried onbeforeunload and I get a dialog alert which I do not want.) Thanks I'm working in iWeb (I had to say that first). I need to create (using JAVASCRIPT) a text box with a button. When the button is clicked, the contents of the box are added to the URL (the url is in the code, probably a variable, for this example it is mydomain.wordpress.com/) and the url produced loads. For example, if the text "Hello" was printed in the text box once the button is clicked the page mydomain.wordpress.com/Hello is loaded.
our requirement is client wants to know howmany users leaving the main page without entering data in the application page.at that time we need to show the css popup overlay. in the following scenarios overlay should pop up. 1)when user leaves the page.(e.g. type other address in the address bar).bascially user shy away from the browser. 2)clicks browser close button. we will show one css popup overlay(not browser popup) and in the back ground main application will be greyed out.this overlay consists of some text fields and some buttons will be there and parallely in the back ground we will execute AJAX call. can we accomplish this requirement??is yes how?will it work in all browsers? my concern is how to prevent the browser from closing(e.g.when user chooses browser X button) when css overlay comes up. |
|||||||