Jump to content

Hadien

Members
  • Posts

    247
  • Joined

  • Last visited

Everything posted by Hadien

  1. If you want to make this smoother, actually cache the images. using jquery to make CSS doesn't count. sprite.png is cached because you have it predefined already in the CSS and theres already an element using the class on the page. so after the 1st load the page will load faster. As was said in the previous thread you made STOP defining events inside other events. this is one of the reasons way its so slow. take a look at this update to your fiddle. All the images have been defined in the CSS, all Jquery is doing is swaping out the class on mouse move its not defining anything its not loading any thing everything is already loaded after the first iteration Also you don't need to type out the function name "jquery()" every time. jquery has a shorthand function so you can make your code more concise
  2. If the web page is redirected, how would splicing the array work? the page is no longer loaded cause you've just been redirected. now if that array was stored in a WebStorage object.... Which then you simply remove the url fro the arry as JSG says and then resave the array back into the session storage.
  3. well for one thing testId() doesn't have a return command so "var a" will always be undefined. add a return statement in testId() and start working from there. function TestId() { return WebService1.GetAppId(onSuccess, onFailure);}
  4. Found the topic, it was called "scroll to a particular direction"
  5. Look under my likes a couple pages in, with posts about rubber-band scrolling. I'd link it myself if I knew how on this phone.Edit: nevermind thought it was in my likes. You should be able to easily search this forum for the post anyway.
  6. Don't use innerHTML to create other html elements into a page. Use the intended method of document.createElement() and appendChild() to create and add elements to a page. Also your onmouseover handler was retrieving an Element object, not a string of the title so your handler wouldn't work even if you were adding elements correctly. Try this code: var sQ = document.getElementById("suggested_query");var ajax = ajaxObj("GET", "suggested_query.php?q="+str+"&type="+type);ajax.onreadystatechange = function() { if(ajaxReturn(ajax) == true) { sQ.style.height = "145px"; var suggested_titels = ajax.responseText.split("S_E_C_R_E_T__S_I_G_N__!_|_!_|"); for(var i =0; i< suggested_titels.length; i++) { var mySpan = document.createElement("span"); mySpan.onmouseover = function(){ sQ.innerHTML = this.title }; mySpan.title = mySpan.innerHTML = suggested_titels[i]; sQ.appendChild(mySpan); } }};
  7. Then we can't help. We don't even know how you are implementing your code or how it has to do with scrolling on the page. It doesn't even sound like a JavaScript issue. If you want help you need to give us some code to work with.You can't find the answer to a math problem without seeing the equation. At least if you want to be accurate.
  8. Is id supposed to be a string or a variable name? You didn't show any code defining any "var id", so I'm assuming that you forgot quotes in your code
  9. This isn't even a "token security measure" I don't even have to provide a password or username to move to the protected site. you need server side scripting and preferably a database of a sort. you can use javascript to partake in the signing in process, via Ajax, but in no way should it be doing the password comparisons itself nor even mentioning the redirect address in it's code.
  10. you can create a "toQuery" function whose job is to parse out the location.search text into an object: var query = {string:window.location.search.substring(1),vars:{}};function toQuery(){ var kVpair, varArray = query.string.split("&"); for(var i=0;i<varArray.length;i++){ kVpair = varArray[i].split("="); query.vars[kVpair[0]] = kVpair[1] | undefined; } }; then you can create a lookup table (LUT) so that the page knows which query variable affects which cell. var activeLUT;$(document).ready(function(){ //link up the querynames to the elements they'll activate activeLUT = { "team":$("#menu-item-234"), "_otheritem_":$("#some-other-element") }; //populate the query object toQuery(); //first remove any and all active classes on navigation elements for(var key in activeLUT){ activeLUT[key].removeClass("active"); } //going by reference in the query, grab each element in the LUT and activate classes for(var key in query.vars){ if(activeLUT[key]!==undefined){ activeLUT[key].addClass("active"); } }} its usually best to stick as much of the javascript into the <head> tag as possible. its good practice to try and keep javascript mostly grouped and separate from the rest of the HTML. Its easier to maintain and cleaner to read through. And ALWAYS place all <script> tags after all <style> tags. This is a more important optimization for larger, involved sites. If you have tons of javascript code before style tags a browser may hang as its trying to compute the javascript, leaving the page unstyled for a short time, or worse the CSS might never load. when browsers come to javascript they like to stop what ever else they are doing to "compile" and later run the code. This can block incoming bandwith thus slowing the load times of a page. placing scripts after styles allows them to download both in parallel.
  11. var KeywordForm ={ urlList:{ tree:true, chocolate:true, candle:true, apple:true }, submitValid:false, warning:undefined, onBlur:function (ele){ this.submitValid= this.urlList[ele.value] === true; this.warning.visibility = this.submitValid ?"hidden" :"visible"; }, onSubmit:function(){ return this.submitValid; }};window.onload = function(){ KeywordForm.warning = document.getElementById("warning").firstElementChild.style; document.getElementById("keyword_Input").onblur = function(){KeywordForm.onBlur(this);}; document.getElementById("keyword_Submit").onsubmit = function(){KeywordForm.onSubmit(this);}; }; <div> <form action=""> <ul> <li> <input id="keyword_Input" class="inputbox" type="text" name="TypeWord" value="" placeholder="Type a word here"/> </li> <li> <input id="keyword_Submit" class="button" type="submit" name="Submit" value="Submit word"/> </li> </ul> </form></div><div id="warning"> <p style="visibility:hidden;">Oops, wrong word, please try again.</p></div>The form will only be submitted if the input was valid (case-sensitive, no whitespace, etc.), there would still need to be server-side scripting to properly re-direct to the right page, but since you're already using PHP thats a no-brainer script.
  12. Hadien

    calculator

    The biggest hint I could say is you heading in the wrong direction. Try to move away from using inline coding (placing javascript inside the html elements). Also never, EVER use eval unless you have to, and you don't have to here. If you intend on making a proper calculator don't "directly" rely on the values taken from the elements to store the numbers for calculation. Remember that HTML is mostly meant for presentation; grab the values, convert them to proper numbers, and place them inside variables for you to mess with on javascript's side. You'll have a much easier time coding the logic if you're not constantly dancing around string manipulation. Similar to what I do in my version... in the "calculate" function, I pull the numbers from the "screen" and put them into the "left" and "right" variables which exist only in javascript's side and not in the html. I have Javascript mess with all the math on it's end. Once the calculations have been solved I then have javascript return the answer back to the screen. Of course, my code is a little bit more involved than that, but that is the basic procedure you should be grasping from what it's doing. My code focuses more on the fact that equations are pretty much made up of 2 things: Operators [+, -, *, /] and Operands [0-9, .]; and it first recognizes those 2 building blocks and then works to combine them to actually build and solve an equation. I try to think up a programs building blocks 1st and then start to code from there. Its a mindset I think you should get into if you plan to start coding as well, especially since its integral to how OOP works. When it comes to making applications, even a simple calculator, having a OOP mindset will really help you both visualize and program out your creations. That being said if you want to add support for negative numbers, even though I said in the fiddle that mine lacked any support, I would simply create an extra button that had "(-)" or "+/-" on it to denote that its meant to denote flipping the polarity of the current number. this button isn't technically an operator nor operand, just a button that flips the polarity of the rightmost operand I guess thats my hint...
  13. Hadien

    calculator

    I've played around with your fiddle a bit and this is what I came up with... http://jsfiddle.net/7D9gR/8/ I made its style appear much like a regular keypad and gave it similar behavior of how a basic calculator displays the input and output. I haven't put it through rigorous testing however.
  14. You mean like this? function inputkeyup(event){ if (event.keyCode!==13){ // do something like this alert(this.value) };}; document.getElementById("myipt").onkeyup = document.getElementById("myipt2").onkeyup = inputkeyup; <input name="myipt" type="text" id="myipt" size="15" maxlength="12"><input name="myipt2" type="text" id="myipt2" size="15" maxlength="12"> When triggering an event, Javascript implicitly passes the "event" object to the function (on most browsers) if you don't directly pass in an actual parameter when the function accepts one. Notice that when I have inputkepup called I didn't pass any variable, Javascript sees that it can take a variable and will automatically pass in the event object for me. You just simply needed to put "event" inside the parameters. I also never need to pass in the "this" reference, the function will already know which element called it. This is because Javascript automatically binds the "this" reference to the element that is triggering the event for you. So you need not worry about passing in the this.
  15. Looking over your code I see a few errors, specifically the attr() function doesn't run strings as an eval() (even if it did that is definitely not the way to do it). I can go over and run a few corrections on your javascript to get it running smoothly. <head> <style> #main{ background-image:url('images/10-star.png'); background: no-repeat; } #main.star05{background-image:url('images/05-star.png')} #main.star10{background-image:url('images/10-star.png')} #main.star15{background-image:url('images/15-star.png')} #main.star20{background-image:url('images/20-star.png')} #main.star25{background-image:url('images/25-star.png')} #main.star30{background-image:url('images/30-star.png')} #main.star35{background-image:url('images/35-star.png')} #main.star40{background-image:url('images/40-star.png')} #main.star45{background-image:url('images/45-star.png')} #main.star50{background-image:url('images/50-star.png')} /******************************************** notice I defined the hover classes after the star classes this way they will have higher priority than the previous group if #main has both classes since the hover classes are the last ones listed at the same specificity level (ID + classname) ********************************************/ #main.hover_star05{background-image:url('images/05-star.png')} #main.hover_star10{background-image:url('images/10-star.png')} #main.hover_star15{background-image:url('images/15-star.png')} #main.hover_star20{background-image:url('images/20-star.png')} #main.hover_star25{background-image:url('images/25-star.png')} #main.hover_star30{background-image:url('images/30-star.png')} #main.hover_star35{background-image:url('images/35-star.png')} #main.hover_star40{background-image:url('images/40-star.png')} #main.hover_star45{background-image:url('images/45-star.png')} #main.hover_star50{background-image:url('images/50-star.png')} </style> <!-- Remember, always put script tags after style tags --> <script src="http://ajax.googleap...1/jquery.min.js"></script> <script> $("#main span").hover( function (){//handler to do while hovering over span //"$(this) will refer to span element while inside each handler function // .parent() tells to move the selection from the current span to the span's parent // ( the #main) // .addClass() will be adding the temporary hover class to the #main $(this).parent() .addClass("hover_"+$(this).attr('class')); }, function (){//handler to do when you leave span //very similar to the mouseenter handler, just removes that same hover class $(this).parent() .removeClass("hover_"+$(this).attr('class')); } ).click( function(){//now the handler when you click on a span //this one removes all classes from #main, including any hover classes // then adds the class with the rating you want to be set. $(this).parent() .removeClass() .addClass($(this).attr('class')); } ); </script> </head> <body> <div id="main"> <span class="star05"></span> <span class="star10"></span> <span class="star15"></span> <span class="star20"></span> <span class="star25"></span> <span class="star30"></span> <span class="star35"></span> <span class="star40"></span> <span class="star45"></span> <span class="star50"></span> </div> </body></html>I made quite a few changes to your code with some optimizations.Sorry to say, I being pulled away from my PC to help someone move so I haven't been able to test the code yet nor will I be back to answer any questions you may have about it until tonight, but hopefully I can just post what I have here and others on the forum can pick up where I left off and help any mistakes I've made or answer any questions you have. I just thought I should post straight away to help steer you in the right direction.
  16. I've tried your code myself and I only see a circle. Perhaps it has something to do with your system? Try the code on another machine (different browser and operating system if possible) and see if you get the same phenomena. Also: var c = document.getElementById("play");var ctx = c.getContext("2d"); you don't need these lines since you've already defined what the context and canvas was. Even more so since you never even use the variables... I've rewritten up your code into jsfiddle to help follow along. I've written two quick examples to making circles in different ways, take a look and see if they look like circles on jsfiddle (possible its something else the the CSS or js files which you haven't posted that is causing the problem). I've also made some small demos to making circles (specifically with the radial gradient) which included mouse interaction on jsfiddle as well way back when I first started playing with canvases. Canvas SpotlightCanvas Eyeballs on an extra note I should ask, when these circles look like ovals, has the circle "moved" on the canvas? its possible you're not properly double-buffering the animation (with clearRect()) or drawing onto the canvas at an improper order that you're getting the illusion of an oval, my spotlight example suffers from this, if you zip the mouse around quickly (due to me running fillRect() in a sub-optimal order).
  17. If you want selestrt to be availible inside changefrom(), simply prepend it with a "this." they're both properties to the same object, so the "this" inside a function should point the the proper reference. changefrom:function(){ this.selestrt; // NOT global, but a local variable to the // object the function is assigned with } its not "technically" a global variable per se, but every function in the object can still access the variable. I just read that stackoverflow link and even in their answer, they would use the "this" keyword. That's important.
  18. Hadien

    FFMPEG PHP how

    each program has their own flags, you can run [program's name] /? or [program's name] /help in cprompt and it will list out all the flags the program can respond to. if you also include the flag then dos should print out some useful description about the flag
  19. Hadien

    FFMPEG PHP how

    It's merely another language. this is command line code, cprompt, DOS. you could open up your command prompt in Windows start menu, set the current directory (the "CD" command) to where ffmpeg is and use the code you just posted. The prompt will know that you are sending a command to the file "ffmpeg" and the flags (delimited via the "-" symbol) will parse out all the variables included.
  20. I saw: if(i < path.length - 1&& i<change.length-1){ i++;} else {i = 0;} I thought: i = ++i %path.length %change.length; so if path has 4 elements (0...3) and change has 5 (0...4), i is first incremented by one (to 1) and then is taken by the modulo of path's length (4). 1%4 is still 1. then its taken by the modulo of change's length (5) 1%5 is still 1. this continues till i reaches 4... 4%4 is 0 and then 0%5 is still 0. though this will mean that the change will have an item that's never accessed.
  21. You're supposed to only call setInterval once (outside myFunction), and it'll keep looping on its own.By using a loop you are ordering it to run an extra time each second. Once for the 1st second, twice (1 from last turn + 1 new one) for the 2nd, and four (2 already running + 2 new ones) times for the 3rd. You're practically telling the loop to copy itself and run the copy too on the next iteration this is really bad, as for n seconds, it has to exponentially run myFunction a total number of times [2^n-1]. so 11 seconds goes by and myFunction will run 2,047 times, not 11 as you're expecting furthermore, you have no terminator here, so even though on the surface the program seems to have stopped, under the hood its still exponentially calling myfunction more and more times. Set "setInterval()" to a variable so that when you want to terminate the loop (if your prompting was false), you have something to to give to "clearInterval()". var intervalId;var output;var i = 11; window.onload = funtion(){ output = document.getElementById("output"); intervalId = setInterval(display,1000); } function display() { i--; var prompting; if (i == 0) { i = 10; prompting = confirm("Do you want to go?"); if (prompting == true) { clearInterval(intervalId); window.location = "http://www.google.com"; } } output.innerHTML = "You will be re-directed in " + i; }
  22. First off you're overwriting txt in each iteration of the loop, not appending. So it'll only store info of the last element in the array Secondly, you don't need to wrap that inside an anonymous function like that inside the for loop. and lastly, thats technically not a closure. all that information is still be available in the global scope. if you can simply write " myPeople[0].firstName" anywhere and be able to both simply access and change the data, then its not in another scope and thus not a closure. This would be closer to a closure: var myPeople = [ person("John", "Doe"), person("Sally", "Rally") ],txt="";function person(first, last){ var firstName = first; var lastName = last; return { first: function(){return firstName;}, last: function(){return lastName;} };};for (var i=0; i<myPeople.length; i++){ txt += myPeople[i].first() +" "+myPeople[i].last();}document.getElementById("demo").innerHTML = txt; in this example, "firstName" and "lastName" only exist inside the person function, if you try to directly access them outside the function, Javascript won't know what they are from the global scope. They are inside a different scope, the function "person" scope. And to bridge the two scopes together we make the person function return an object, which gives us a 'window' to be able to see these two variables. This way we can see and access the firstName and lastName, indirectly, but we cannot change the values. This enables us to have a certain amount of control/security over the data we make in javascript, its a way to let us utilize encapsulation.
  23. Arrays also come with an "every" function. what an "every" function does is that it takes a testing function that you give it and runs a test with it on each element in the array. the every function will then return true if every single element would return true with the testing function, and return false if at least one element would return false. So say that you want to test if the word Apple is in the array... <body> <button onclick="hasFruit('Apple')">Try it</button> <p id="demo"></p> <p id="boo"></p><body> var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits; function hasFruit(item) { //Notice that I'm testing for when the element is NOT the item (Apple) // this is so that the testing function will return true for all elements except apple function tester(e){//e is the element that the Every function will pass automatically return (e !== item); } //When the Every function loops through the elements with the tester function it'll see // [true, true, false, true]. Since there is at least one false in that array it'll return false // then we simply use the ! operator to flip that to true. document.getElementById("demo").innerHTML = fruits; document.getElementById("boo").innerHTML = !fruits.every(tester); }
  24. Index does start at 0. it moves through like [0, 1, 2, 3, 4]. Verbs.length will return the number 5 (since there are five elements). while Math.random() generates a random floating number from 0 to 0.99999 which you then multiply by the length to get a number ranging 0 to 4.99999. Using Math.round() can round the number upto 5 which would cause an out of bounds error. I simply subtracted the length by 1 to avoid that. you can just as well use Math.floor() instead of Math.round() which will always round the floating number down so you don't have to worry about subtracting the verbs.length by 1.
  25. Why are you using a for loop? the function should only need to grab the word once. I've made some other changes as well, should help fix some other issues. <body> <p>Looks like I chose the wrong week to quit <span id="generate"></span></p> <button onclick="fromLists()">Change</button> <script> var verbs = ["kicking.", "chewing.", "annoying.", "hurting.", "breathing."]; function fromLists() { //verbCurr is not needed outside the function // the length of verbs is 5, but should only range from 0 to 4 var verbCurr = verbs[Math.round(Math.random()*(verbs.length-1))]; // verbPrev is also not needed we can simply use the node itself var span = document.getElementById("generate"); if (verbCurr === span.innerHTML ) { //if the current and span words match just redo the function again return fromLists(); } span.innerHTML = verbCurr; } </script> </body>
×
×
  • Create New...