|
JavaScript - Animating Image Does Not Work Until I Add An Alert
Hi,
I wrote a function which animates an image which looks similar to this: Quote: function animate() { var image = document.getElementById("frontImage"); var cssLeft = image.style.left; var px = cssLeft.substring(0, cssLeft.search("px")); if (px == 100) return; px++; image.style.left = px + "px"; //alert(timage.style.left); setTimeout(this.rotate(), 1); } This seems to be working fine. However, the image goes directly to its final position (100px to the right) and does not go through all the intermediate positions. As soon as I add an alert (the one which is now commented) everything works fine. Anyone knows what the problem is? Thanks in advance for any help Similar Tutorialsso here is my "Project" for this class http://sw.cs.wwu.edu/~strickk/Project2/project2.html and here are the directions where im stuck at, just right click view source to see the code. I believe what i am doing wrong is where i enter my variables and i dont know how to get an alert message to pop up using an if statement as well as getting the values for the distances to show up correctly directions: 8. Now we will write some JavaScript to validate the input. We don’t want the user to be able to enter the same origin and destination city when they book a ticket. So we will use an if statement to check that. If they have entered the same origin and destination city then we will tell them that by using an alert statement and make them select again. All of your code to validate the input code goes in between the single quotes of the onClick event in the Calculate Fare button. Follow these steps: a) Assign the value of the origin city to a variable called origin Note that the value that gets assigned to origin is actually 0, 60, 90, 120 or 150 (and NOT Bellingham, Everett, Seattle etc.) since the value we gave to the each element of the list was its distance from Bellingham. This will make our lives easier later when we compute the fare. b) Assign the value of the destination city to a variable called destination in a similar fashion. c) Write an if statement that will test whether origin is equal to destination and if it is then do two things. i. Issue an alert message that says Please input different origin and destination cities ii. Stop the execution of the JavaScript code in the onClick event. Use return; as the second statement inside the if statement. Remember to use curly braces to denote that two statements are contained within the if statement. Your if statement will have the following structure to it. if (<put the test you want to do here>) { alert(<put the message here>); return; Hey, I had a question about this script I'm working with. I have two functions which I'm using to grow and shrink a div. The growing seems to be working fine but the shrinking function is acting very strange. By strange I mean, in Chrome it will repeatedly shrink and grow over and over. It's all pretty weird. You can view the way it's working here. I'd love any input. Code: <script type="text/javascript">
function grow1(targetid){
set_zindex = document.getElementById(targetid).style.zIndex="1";
thewidth=document.getElementById(targetid).offsetWidth;
if(thewidth<940){
document.getElementById(targetid).style.width=thewidth+10+'px';
}
else if(thewidth>=940){
clearInterval(change);
}
change=setInterval("grow1('div1')",15);
}
function shrink1(targetid){
thewidth2=document.getElementById(targetid).offsetWidth;
if(thewidth2>290){
document.getElementById(targetid).style.width=thewidth2-10+'px';
}
else if(thewidth2<=290){
clearInterval(change2);
}
change2=setInterval("shrink1('div1')",15);
}
</script>
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? Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me. I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.) Is it true? I realise tables are not best used for this purpose, but did this also happen in the good old tables days? Code:
<html>
<body>
var j=0;
var temp,temp2,temp3;
<script>
function scor(j)
{
switch(j)
{
case 1: alert("Απαντήσατε σωστά μόνο σε μία ερώτηση.Προσπαθήστε πάλι");
break;
case 2: alert("Απαντήσατε σωστά στις δύο από τις τρείς ερωτήσεις");
break;
default: alert ("Συγχαρητήρια απαντήσατε σωστά και στις τρεις ερωτήσεις");
}
}
</script>
<meta http-equiv="content-type" content="text/hmtl; charset=iso-8859-7">
<p align="center"><font size="5">Σε μία σελίδα html πόσα είναι τα μέγιστα frames που μπορούμε να τοποθετήσουμε; </p></font>
<form name="for1">
<input type="radio" name="fr1"value="1" > 5 <br>
<input type="radio" name="fr1"value="2" > Όσα τα pixels<br>
<input type="radio" name="fr1"value="3" > Δεν υπάρχει όριο<br>
<input type="button" value="Εκχώρηση Απάντησης" onClick="getVal1()">
</form>
<script type = "text/javascript">
function getVal1()
{
for(var i=0; i<document.for1.fr1.length; i++)
{
if (document.for1.fr1[i].checked)
{
if (document.for1.fr1[i].value==2)
{
j++;
}
}
}
}
function getVal2()
{
for (var i=0;i<document.for2.fr2.length;i++)
{
if (document.for2.fr2[i].checked)
{
if (document.for2.fr2[i].value==2)
{
j++;
}
}
}
}
function getVal3()
{
for (var i=0;i<document.for3.fr3.length;i++)
{
if (document.for3.fr3[i].checked)
{
if (document.for3.fr3[i].value==3)
{
j++;
}
}
}
}
</script>
<p align="center"><font size="5"> Είναι απαραίτητο σε κάθε σελίδα html να υπάρχουν τα tags head και title;</p></font>
<form name="for2">
<input type="radio" name="fr2" value="1"> Ναι <br>
<input type="radio" name="fr2" value="2"> Όχι <br>
<input type="button" value="Εκχώρηση Απάντησης" onClick="getVal2()">
</form>
<p align="center"><font size="5"> Τι κάνει το εξής tag: meta http-equiv="content-type" content="text/hmtl; charset=iso-8859-7" </p></font>
<form name="for3">
<input type ="radio" name="fr3" value="1"> Δημιουργεί τις προυποθέσεις για την απόκτηση τιμών <br>
<input type ="radio" name="fr3" value="2"> Ισσοροπεί τις παραγράφους σε στήλες <br>
<input type ="radio" name="fr3" value="3"> Επιτρέπει την κωδικοποίηση ελληνικών χαρακτήρων στην ιστοσελίδα <br>
<input type="button" value="Εκχώρηση Απάντησης" onClick="getVal3()"
</form>
<input type ="button" value="Υπολογισμός" onClick="scor(j)">
Apart from any logical mistakes this thing i have created might have , my question is this.Why upon pressing the last button and calling the "scor(j)" function , no alerts pop up?Thanks in advance. I'm completely stumbled by this as i have no clue as what might be wrong.But then again , my experience is extremely limited I am currently working in Microsoft Frontpage designing a website for a friend. I was trying to make a JS alert come up when I mouse over an image and I have had no luck at all. This is the bit of code where The alert needs to be. I am a bit new to Javascript so I apologize if this was a stupid question. Code: <img border="0" src="../gallery%20pictures/Home.png" width="468" height="60"><br> <br> <p align="center"> <img <FORM src="../gallery%20pictures/THE%20BUTTON.png" width="388" height="372"> <br> </p> <p> </p> </body> </html> 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. Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/ It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different. Picture this: A Super Mario sprite with him standing normally, but to his right is the word "Home". Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites. I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required. Anyone have any ideas or suggestions? Any help is greatly appreciated!! I am looking to have the same effect as this site when images are hovered over. http://www.istockphoto.com/search/agency#3fa3a34 Is it javascript ? Hi I am a complete novice with Javascript. I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded. Someone responded with the following script: onload= function(){ var n, pic, A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls var pa= document.getElementById('image_set'); // reference the container element pa=mr('evalBlock') while(A.length){ pic=document.createElement('img'); n= Math.floor(Math.random()*A.length); pic.src= A.splice(n, 1); pa.appendChild(pic); } } However - I don't know how to put it into my pages to get it to work and they have not replied to my further query. I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ". Also what code do I then have to put on the page to call the image? Would anyone here be able to help? Many thanks Carol I would like to add a submenu that pops up when the mouse moves over the first-level menu option. I succesfully added the submenu. However, now the image-swap script (the script that makes that the image that you see change as you move your mouse on the image) doesn't work anymore. Does anyone have any idea what I'm doing wrong? The relevant part of the header: Code: <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 20.35em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 0em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 18.35em;
margin-top : -1.35em;
}
#nav li a {
width : 10em;
display : block;
color : none;
font-weight : bold;
text-decoration : none;
background-color : none;
padding : 0 0.5em;
}
#nav li a:hover {
color : none;
background-color : none;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
The relevant part of the body code: Code: <table width="314" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="315"><div align="center"><a href="ob.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','afbeeldingen/menuob2.gif',1)"><img src="afbeeldingen/spacer.gif" alt="spacer" width="5" height="10" hspace="0" vspace="0" border="0" /><br />
<img src="afbeeldingen/menuob1.gif" alt="OB" name="Image10" width="309" height="27" border="0" id="Image10" /></a><br />
<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
<a href="kt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','afbeeldingen/menukt2.gif',1)"><img src="afbeeldingen/menukt1.gif" alt="KT" name="Image12" width="309" height="27" border="0" id="Image12" /></a>
<a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','afbeeldingen/menucontact2.gif',1)"><img src="afbeeldingen/menucontact1.gif" alt="Contact" name="Image15" width="309" height="27" vspace="3" border="0" id="Image15" /><br /></a>
</div></td>
</tr>
</table>
<ul id="nav">
<li>
<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
<ul>
<li>
<a href="aa.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menuaa2.gif',1)"><img src="afbeeldingen/menuaa1.gif" alt="AA" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="bb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menubb2.gif',1)"><img src="afbeeldingen/menubb1.gif" alt="BB" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="cc.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menucc2.gif',1)"><img src="afbeeldingen/menucc1.gif" alt="CC" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
</ul></li></ul>
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slayeroffice Image Slider (altered)</title>
<script>
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
for(var image=[], p=0; p<img.length; p++){
image[p] = new Image();
image[p].src = img[p];
}
var current = 0;
window.onload = function so_init() {
if(!document.getElementById || !document.createElement){
return;
}
for(var q=0; q<img.length; q++){
imgs = document.createElement("img");
imgs.src = img[q];
img[q].style.display = "none";
document.getElementById("imageContainer").appendChild(imgs.cloneNode(true));
}
for(i=1;i<img.length;i++){
img[i].xOpacity = 0;
}
img[0].style.display = "block";
img[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1] ? current+1 : 0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
img[current].xOpacity = cOpacity;
img[nIndex].xOpacity = nOpacity;
img[nIndex].style.display = "block";
setOpacity(img[current]);
setOpacity(img[nIndex]);
if(cOpacity<=0) {
img[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
}
else {
setTimeout(so_xfade,100);
}
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
</script>
<style>
#imageContainer {
height:309px;
}
#imageContainer img {
width:500px;
height:309px;
position:absolute;
top:0; left:0;
}
</style>
</head>
<body>
<div id="imageContainer">
<!--
<img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />
<img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />
<img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />
<img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" />
-->
</div>
</body>
</html>
The script works if the images are stored within the HTML but when I try to store them in the JS array, it fails. Is there any way to store the images in JS with this script? I am validating the value in a text area onBlur. If the value is not good the alert box comes up twice. Is there a way to correct this? Code: <html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function verify_score(val1)
{
var temp = document.getElementById(val1)
if(temp.value == "AF"|| temp.value == "HF" || (temp.value >=0 && temp.value <=17)) {return}
else{
alert("Value entered is not OK. Accetable values a 0 to 17, AF or HF")
temp.focus()
temp.select()
}
}
</script>
</head>
<body>
<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:200px">
<form name="scoresheetform" action="">
<div id="Submitbutton" style="position:absolute; left:52px; top:87px; width:110px; height:33px; z-index:1">
<input type=submit name="Submitbutton" value="Submit Form"></div>
<div style="position:absolute; left:9.822px; top:37px; width:45px; height:29px; z-index:2">
<input id="HomePlayer1Rnd6Pnts" name="HomePlayer1Rnd6Pnts" onBlur="verify_score('HomePlayer1Rnd6Pnts')" size=3></div>
<div style="position:absolute; left:79.822px; top:37px; width:45px; height:29px; z-index:3">
<input id="HomePlayer1Rnd7Pnts" name="HomePlayer1Rnd7Pnts" onBlur="verify_score('HomePlayer1Rnd7Pnts')" size=3></div>
<div id="HomePlayer1TotalPnts" style="position:absolute; left:146px; top:37px; width:45px; height:29px; z-index:4">
<input name="HP1 Total Points" size=3></div>
</form>
</div>
</body>
</html>
Hi, I have this code: var finalsort="("+getvalue+","numvalue")\n" alert(finalsort) however, it is then alerted three seperate times (as it is in a for loop) but i would like this to be displayed in an alert: (david,5) (james,3) (tom,1) How would I do this, am I doing something wrong with the \n? thanks All, I have the following code: Code: <script type="text/javascript">
alert("This picture has received more then 10 down votes so it is now being deleted. You will be redirected back to the pictures page!");
</script>
<?
echo "<meta http-equiv=\"refresh\" content=\"2;url=http://website.com/pictures.php\">";
?>
This is just in the code. I thought it would just execute this but it doesn't. I can't have it appear on a button event or an onload since this snipped gets executed with AJAX. How can I make it appear? Thanks in advance! <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Color Changer</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> window.alert("The page is loading."); </script> </head> <body> <form> <p>Click the button to turn the page: <input type="button" value="Red" onclick="document.bgColor='red';" window.alert("Background is now red.");> </p> <p>Double click the button to turn the page: <input type="button" value="Green" ondblclick="document.bgColor='green';"></p> <p>Click down on the button to turn the page: <input type="button" value="Orange" onmousedown="document.bgColor='orange';"></p> <p>Release the mouse while on the button to turn the page: <input type="button" value="Blue" onmouseup="document.bgColor='blue';"></p> <p> Black button: <input type="button" value="Black" onmousedown="document.bgColor='black';" onmouseup="document.bgColor='white';"></p> </form> <hr> </body> </html> The alert at the top of this function will not show... Code: function getXmlHttpRequestObject() {
alert("HTTP XML REQUEST!");
var httpxml;
if (window.XMLHttpRequest)
{
// code decent browsers like Firefox, Chrome, Opera, Safari. And IE7+...
httpxml = new XMLHttpRequest();
return httpxml;
}
else {
if (window.ActiveXObject) {
//Code for crap like IE
httpxml = new ActiveXObject('Microsoft.XMLHTTP');
return httpxml;
}
else {
httpxml = null;
}
}
if (httpxml == null) {
document.getElementById('p_status').innerHTML = "Status: Could not create XmlHttpRequest Object,
please upgrade your browser!";
return null;
}
else {
return httpxml;
}
When you do an alert confirm you can make if statements to say if they click ok do this and if they click cancel stop the program. Well I am trying to make a prompt that first asks the user to enter in a url and after they do and click enter they url is wraped with img tags. I would like to make it so that if the user clicks cancel the program ends b/c right now if the user click okay with no value the result is [img][/img] and if the user clicks cancel the result is [img]null[/img]. Any step in the right direction would be greatly appreciated! PHP Code: <script language="javascript"> function imgGenerator(){ var question=confirm("Would you like to share an image?"); if (question==true){ var obj=document.getElementById("mngl-board-post-input"); var imgurl = prompt("To Share an image paste the image url here"); var txt=document.createTextNode("[img]"+imgurl+"[/img]"); obj.appendChild(txt); } else {} } </script> thanks this problem has been solved
This is all php except for the java code I am struggling with. Please advise. I have tried this 2 ways and have spent hours on something that should be simple. I have a string that I am trying to display in an alert box with an onclick method 1: $mystring = "<a href=\"mysite.com\">Click</a>"; this does not work echo "<input type='button' value='Grab Code' onClick=alert('$mystring')>"; nor does this echo "<input type='button' value='Grab Code' onClick=alert('".$mystring."')>"; nor does anything I try. All I want to do is display the value of mystring in an alert box. However, this does work .. echo "<script type='text/javascript'> alert('".$mystring."');</script>"; But I cannot call this from an onclick. Any help is appreciated. Thanks JT |
|||||||