mpsn
-
Posts
264 -
Joined
-
Last visited
Everything posted by mpsn
-
but I thought it only loads the entire script once and since var i is outside the functions, so then later the onmouseover will just call function swap, so seeing as my example can be done in CSS, what about other cases where you have to use JavaScript with a variable i initialized and then updated within a function, so I don't know why my code is not working. Any help appreciated!
-
Is is b/c CSS is faster or is it b/c of shorter typing? I didn't know you could use hover pseudoclass with changing images. Anyways, how would I accomplish this with JavaScript as it is still not working after adding correcting pathway to the images and uncommenting i. var i = 1; var imgList = array( "imgs/test_1.png", "imgs/test_2.png", "imgs/test_3.png" ); function swap() { var imgSrc = document.getElementById("hoverImg").src; var imgNam = "imgs/test_"; if ( i < 2 ) i++; else if ( i == 2 ) i = 0; imgSrc = imgList[i]; } <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type= "text/javascript" src="js_.js" ></script> </head> <body> <p> <img src="imgs/test_1.png" id="hoverImg" onmouseover="swap();" /> </p> </body> </html> Any help appreciated.
-
My mistake, here is the updated JavaScript: var imgList = array( "test_1.png", "test_2.png", "test_3.png" ); function swap() { var imgSrc = document.getElementById("hoverImg").img.src; var imgNam = "imgs/test_"; if ( i < 2 ) i++; else if ( i == 2 ) i = 0; //imgSrc = imgNam+i; //imgSrc+=".png"; imgSrc = imgList[i]; }
-
Hi, this is just a simple JavaScript used where the image should change when you mouse over the image, but it doesn't work. HTML: ==== <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type= "text/javascript" src="js_.js" ></script> </head> <body> <p> <img src="imgs/test_1.png" id="hoverImg" onmouseover="swap();" /> </p> </body> </html> JavaScript: ======= /*External JavaScript*/ //var i = 1; var imgList = array( "test_1.png", "test_2.png", "test_3.png" ); function swap() { var imgSrc = document.getElementById("hoverImg").img.src; var imgNam = "imgs/test_"; if ( i < 4 ) i++; else if ( i == 4 ) i = 1; //imgSrc = imgNam+i; //imgSrc+=".png"; imgSrc = imgList[i]; } You will see the comments which I tried to do instead, I'd appreciated solution to that method too rather than array if possible. Any help appreciated!
-
isn't it better to learn proper javascript first, you see i'm a student in last year and a lot of job requirements need javascript and jQuery, i believe for web development with client side scripting. But I guess I'll take a look at jQuery. Thanks.
-
Thanks for clarifying, do you mind taking a look at my JavaScript post, its fairly simple js, just to show three sets of images side by side and when user clicks on each, it just cycles through the images for a given set and each image set has a link to toggle between hiding or showing the images. here's the link: http://www.phpfreaks.com/forums/index.php?topic=350209.0 I appreciate all the help.
-
I hope someone can help me. Basically the user can click the Click to expand/collapse to toggle to hide or display each sets of images (all layed out side by side). And when clicking each img set, that causes a cycling through the images and once we reach last image, it cycles back to first. The problem: it toggles perfectly, but it only cycles once, then it stays on the last img rather than change/cycle back to the first. Any help appreciated.
-
Hi, I want the three images to cycle through each image when clicked, but for some reason, it only cycles once then stays on the second image. I know it's messy and not the most elegant way, but I haven't used much JavaScript so I'd like to keep my way of implementing this script. here is html: <!DOCTYPE HTML> <html> <head> <title>CSS trial</title> <link rel="stylesheet" type="text/css" href="css.css" /> <script type="text/javascript" src="js.js" ></script> </head> <body> <table style="background-color: #FFFF99;"> <tr> <td> <p><a href="javascript: togglePrograms('leftSide_a', 'leftSide', 'captionL');" id="leftSide_a">Left pix:click to expand</a></p> <img src="left_1.png" id="leftSide" style="display:none" onclick="changeScreenshot('leftSide')" > <p id='captionL' style="text-align:center;">left left left left</p> </img> </td> <td> <p><a href="javascript: togglePrograms('mid_a','mid','captionM');" id="mid_a">Middle pix:click to expand</a></p> <img src="mid_1.png" id="mid" style="display:none" onclick="changeScreenshot('mid')" > <p id='captionM' style="text-align:center;">mid mid mid mid</p> </img> </td> <td> <p><a href="javascript: togglePrograms('rightSide_a','rightSide','captionR');" id="rightSide_a">Right pix:click to expand</a></p> <img src="right_1.png" id="rightSide" style="display:none" onclick="changeScreenshot('rightSide')" > <p id='captionR' style="text-align:center;">right right right right</p> </img> </td> </tr> </table> </body> </html> here is the javaScript: var leftImgList = [ "left_1.png", "left_2.png" ]; var indexL = 0; var midImgList = [ "mid_1.png", "mid_2.png" ]; var indexM = 0; var rightImgList = [ "right_1.png", "right_2.png" ]; var indexR = 0; function changeScreenshot( projLabel ) { if ( projLabel == "leftSide" ) { if ( indexL < 2 ) { document.getElementById( "leftSide" ).src = leftImgList[ indexL + 1 ]; indxL+=1; } else if ( indexL == 2 ) { document.getElementById( "leftSide" ).src = leftImgList[ indexL - 2 ]; indexL = 0; } }//END left BIG IF if (projLabel == "mid") { if ( indexM < 2 ) { document.getElementById("mid").src = midImgList[ indexM + 1 ]; indxM+=1; } else if ( indexM == 2 ) { document.getElementById("mid").src = midImgList[ indexM - 2 ]; indexM = 0; } }//END middle BIG IF if (projLabel == "rightSide") { if ( indexR < 2 ) { document.getElementById( "rightSide" ).src = rightImgList[ indexR + 1 ]; indxR+=1; } else if ( indexR == 2 ) { document.getElementById( "rightSide" ).src = rightImgList[ indexR - 2 ]; indexR = 0; } }//END right BIG IF }//END FCN changeScreenshot //NB: hides or shows the selected screenshots of this program function togglePrograms ( nameId, imgId, captionId ) { var projName = document.getElementById( nameId ); var projScreenshots = document.getElementById( imgId ); var caption = document.getElementById( captionId ); if ( projScreenshots.style.display == "block" ) { projScreenshots.style.display = "none"; caption.style.display = "none"; if ( nameId == "leftSide_a" ) projName.innerHTML = "Left pix: Click to expand"; else if ( nameId == "mid_a" ) projName.innerHTML = "Middle pix:click to expand"; else if ( nameId == "rightSide_a" ) projName.innerHTML = "Right pix:click to expand"; } else { projScreenshots.style.display = "block"; caption.style.display = "block"; if ( nameId == "leftSide_a" ) projName.innerHTML = "Left pix: Click to collapse"; else if ( nameId == "mid_a" ) projName.innerHTML = "Middle pix:click to collapse"; else if ( nameId == "rightSide_a" ) projName.innerHTML = "Right pix:click to collapse"; } }//END togglePrograms FCN Any help appreciated.
-
Hi, why doesn't change the image height after I click the button? <html> <head> <script type="text/javascript"> function addBorder() { document.getElementById("html5_logo.jpg").style='height:500px'; } </script> </head> <body> <img id="html5" src="html5_logo.jpg" alt="html5" width="107" height="98" /> <br /><br /> <input type="button" onclick="addBorder()" value="Up the height" /> </body> </html> Any help appreciated.
-
**my mistake: it's getElementById, NOT getElementsById
-
Hi, why doesn' this simple script run? <html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { var text = document.getElementsById("p_1").innerHTML = "What's up, " + name + "?"; } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> <p id="p_1">Initial text</p> </body> </html> Any help appreciated.
-
Hi, if all browsers support HTML5 with simple the DTD: <!DOCTYPE html>, do I still need to include in header: <meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8">
-
seriously, jokes aside, let's say i have this eg: void printnum ( $begin ) { echo $begin; if ($ begin < 9 ) { printnum ( $begin + 1 ); } echo $begin; } let's say $begin is 5, it will output: 5678998765 I don't understand how it knows to do the decrementing?
-
Hi, recursion is something i love b/c it makes task easier but hard to master and use. Does anyone know any good books recommended for recursion, esp with for loops.
-
so all browsers new and old, also if anyone can take a look, i need some help with css as I am new to it: http://www.phpfreaks.com/forums/index.php?topic=349708.0 all help apreciated.
-
Please feel free to ask if what I am asking is confusing or not completely understandable. I am new to using CSS and I find the absolute/relative positioning hardest for some reason. I understand tha relative position is used as a container for absolute position (as indicated on w3schools.com). Again, any web designers could help a fellow out be the best!
-
Sorry, more specifically, I mean when I zoom in and out with chrome, the background moves whereas in FF, it doesn't. I noticed IE is ok too, and not Safari (since both chrome and Safari run off webkit engine). Please i'd appreciate any help!
-
Hi, I included a doctype, but now I noticed on chrome and ff, the background.png is different, I want the backgrond.png fill up the almost to the bottom, leaving just enough for copyright, which it not displaying below the background.png inside the mainBox element. I don't want any fancy shortcuts or tricks as I am new to CSS and I just built what I have so far with just w3schools.com. Here is css: #mainBox { position:relative; top: 0px; margin-left: auto; margin-right: auto; border: 1px solid; width:300px; height:400px; } p.logo { position:absolute; top: 0px; padding: 0px 15px 30px 15px; } #logoBox { position: absolute; top: 10px; margin-left:auto; margin-right:auto; width:100%; border: 0px solid; background-color: #F60; } #backgroundBox { position:absolute; top:110px; margin-left:auto; margin-right:auto; padding: 0px 0px 20px 0px; } #footer { position:absolute; top: 330px; padding: 5px 5px 5px 5px; border: 2px solid; width: 90%; } here is html: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>CSS trial</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div id='mainBox'> <div id='logoBox'> <p id="logo"> <img src='logo_.gif' style="height:20%; width:25%;"/> </p> </div> <div id='backgroundBox'> <img src='TreeBackground.png' style='height:65%; width:100%;' /> </div> <div id='footer'> <p>©2011</p> </div> </div> </body> </html> I attached the logo and TreeBackgorund.png, any help appreciated.
-
Hi, I hope someone can shed some light as to what is the best doctype to use for html dtd in 2011? I am confused and in my web design course back in 2009, I was told to use html 4 transitional strict, but what should i use now as we approach 2012? I would like the webpages i develop to be viewable by all browsers all the time. All help appreciated?
-
Hi, for my php program running in command line (windows cmd), the user must login first, so my ques is how can they enter the password as ***** when they are typing for example? all help appreciated.
-
Hi, my school say not to use XAMPP, and I already have PHP installed, MySQL installed, Apache I am not sure, but assuming if I have it installed, how do I connect to localhost b/c beforer when I use XAMPP, the default for where to get php/mysql running was: C:\xampp\htdocs\ Please any help appreciated!
-
So there's no way to do it w/o sub-prompting. I mean, enter a character for task (this tells it which function to choose), then it will read the characters that follow the task (these are the arguments) If not, I'll do as told.
-
How would I do it with the example Calculator?
-
Sorry, can you elaborate a little more.
-
Here is concrete exampel of what i mean, let's say a simple calculator class with add, factorial finding, and government sales tax retrieiving, why doesn't this work? <?php #!/usr/bin/php -q class Calculator { function factorial($int) { if ($int == 1) return 1; else return $int*factorial($int-1); } function add($num1, $num2) { return $num1 + $num2; } function getGSTof($price) { return 0.05*$price; } } //RUNNER $c = new Calculator(); $task = ""; //TASKS:f for factorial, then 1 arg, a for add, then 2 args, g for gst, then 1 arg while($task != "q") { echo "Please choose a task: "; $task = trim( fread(STDIN,10) ); //FACTORIAL if ( $task == "f" ) { $num = $argv[1]; $factorial = $c->factorial($num); echo $factorial; echo "\n"; } //ADDITION if ( $task == "a" ) { $num = $argv[1]; $num2 = $argv[2]; $sum = $c->add($num, $num2); echo $sum; echo "\n"; } //GET GST if ( $task == "g" ) { $price = $argv[1]; $gst = $c->getGSTof($price); echo $gst; echo "\n"; } //QUIT if($task == "q" ) break; }//END WHILE echo "\n\n\n\nEnd Calculator program"; ?> All help apprciated.
