|
JavaScript - Recommended Javascript Development Environment?
hi, im new to javascript, and programming on the whole, what software do you all use for composing code?
this seems to me like somewhat of a common question, but i did a search using the search function and couldnt find any threads on this. sorry if i was being inept and if this question really has been asked a lot before. in that case, help is still greatly appreciated though. Similar TutorialsHello, my name is Tristan (Tsuki_yima) and I would like to get in to game design and Java Script in general, and i have no idea where to start, I am (for the most part) fluent in doing CSS and HTML I can design websites pretty well. But i want to start making games (not really for profit just for fun and what not) but i have no idea where to start using Unity and Java Script. Wondering if somebody can help.
Reply With Quote 01-15-2015, 02:53 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts Unity costs a lot of money. You should know all about it and have some games under your belt before buying. IMHO, you should learn C++ or C# or javascript and play with it first. Javascript would be the simplest. Then google javascript for game design or something similar. Many places to learn JS W3Schools Online Web Tutorials has both JS and Jquery. I found this Intro To Programming For Games With JavaScript - @jessefreeman | Jesse Freeman when I googled. Maybe try your hand at a few things first, like Tick-Tack-Toe or Hangman. OK, done babbling. Just go for it. Hey folks, I'm working on a complete recode of my website and I would love to use a lightbox for my image gallery. I've been trying to research different lightboxes and have so far found it quite the runaround. Could anyone recommend one? I'm just looking for one with simple implementation that allows for a single image to be displayed with closing and forward/backward functions for clicking through the different images in the gallery. If anyone wants/needs more info, please let me know. Thanks in advance. I've tested the menu in my environment without any issue. However, in hosting environment i am getting the following error: Unable to get value of the property 'className': object is null or undefined I have included the function when error occurs: css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") <--- ISSUE else if (action=="add" && !needle.test(el.className)) el.className+=" "+targetclass }, Any Idea as what may cause this? Thanks Hi all, I'm currently building a new search engine that will search around 15,000 products and would like some general advice as to the best way to approach it. I want to offer instant results, so the user will click an icon and the results change, no submit buttons or postbacks. My database is MS SQL and my frontend is ASP.Net, but for this I'm looking to develop the majority of the search functionality in JavaScript. What I'm asking really is what people recommend for the best way to approach providing instant results. My current thinking is an initial database query loads the data into XML, then use JavaScript and XSLT to filter the XML and display the results, then as filters change these can be handled by the JavaScript and XSLT rather than going back to the database. Does anyone have any general advice on the best performing way to provide this sort of functionality that ultimately will give the quickest results? Thanks in advance! I'm working on this project: http://bit.ly/tkrFsP It already works more or less fine in: IE7, IE8, IE9, FF, Chrome, Safari and Opera. Problems start when we try that in iPhone or iPad. iPhone works almost fine (except lags and AJAX/jQuery problems) but in iPad it has broken left navigation, wrongly re-sized thumbnails and it displays in half of the viewport. Also, there are problems with smoothness of jQuery animations and with AJAX unlike in other browsers on other devices (like PC). Any ideas on how to fix that? I've flicked through this: 1. http://www.smashingmagazine.com/2010...tting-started/ 2. http://developer.apple.com/library/s...62/_index.html It seems like a good place to start but there's many information on iPad/iPhone development on apple.com and their solutions don't fix my problems. -------- Mo 1. Anyone could outline here some basic code principles for iPad/iPhone? 2. Why project sub-page displays 5 times as large as it should on iPhone? Adding this: <meta name="viewport" content="width=device-width" /> doesn't help much and it even makes website work worse. Adding this: <meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=960" > seems like a better solution but it's not perfect either. 3. How iPad's fixed containers work? 4. Why there's horizontal scroll appearing even with overflow-x: hidden? What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file. It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page. Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference. Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there. Code: $(document).ready(function($){
var dataret = 0;
$.ajax({
type: 'POST',
url: 'mobile.php',
beforeSend: function(){
$('#status').show();
},
success: function(data){
//initialize localstorage here
alert('success');
// if it takes as long as it does, a few minutes, at least show a loading bar...
$('#progress').progressbar({
});
},
dataType: 'json'
});
});
Thanks in advance! Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function. This is the code I want to activate: Code: <script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['warning']) {
$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.warning').fadeIn('slow');
}
for (i in json['error']) {
$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart_total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//--></script>
And this is how I want the format of the function to be: function testsession() { if there is a session called 'hiredate' { activate the script above } else { var el = document.getElementById("product_data"); } } I just dont know how to write this in javascript Could you help me if possible please I want to insert this js snippet Code: function addText(smiley) {
document.getElementById('message').value += " " + smiley + " ";
document.getElementById('message').focus();
return false;
}
to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');
.... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'
but how do I insert js in the head of loaded iframe? Hey, I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it, Here is my form with the two textboxes and submit button: <form> x: <input type="text" name="x" /><br /> y: <input type="text" name:"y" /><br /> <input type="submit" value="Submit"/><br /> </form> And i need it so that they change the values of these: //this shows where my sprite will start on the canvas var block_x; var block_y; searched the internet for hours and cant really find anything i understand or works. any help is much appreciated I got an index.php Code:
<html>
<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>
As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">
With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I wrote a log function that took note of various function calls. Thinking that functions are first class objects, and objects have properties, I made the name of each logged function a property of that function, e.g., brightenInnerPara.name = "brightenInnerPara"; Every browser I tried (Firefox, MSIE, Opera, Chrome, Safari) accepted the assignment, no problem. In Firefox and MSIE, the result was what I wanted: brightenInnerPara.name == "brightenInnerPara" But in the others, the result was: brightenInnerPara.name == null Question 1. Which Javascript is correct here? I favor Firefox and MSIE, not merely because they were willing to give me what I wanted, but also because it makes no sense to accept an assignment statement without throwing an error and then give it a null semantics, like Chrome, Opera, and Safari did. I found a workaround, using assignments like this: brightenInnerPara.prototype.name = "brightenInnerPara"; To my surprise, that worked in every browser. But I don't know why. It seems that such assignments are enough to cause each function to have its own distinct prototype. Question 2. Just how inefficient is my workaround, and why does it work? I'm very very new to coding. I need to make a very basic javascript game for school. I'm trying to modify this ball bouncing game, but the ball doesn't collide with the paddle. Where have I gone wrong? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>HoffHop!</title> <style> #playingArea{ position: absolute; top: 100; left: 100; border: 2px solid black; width: 500; height: 500; background-color: rgb(192,192,192); } #paddle{ position: absolute; top: 470; left: 228; width: 64; height: 16; } #ball{ position: absolute; top: 18; left: 200; width: 34; height: 34; } #score{ position: absolute; top: 486; left: 0; width: 500; height: 14; font-size: 10pt; color: white; background-color: rgb(32,128,64); } </style> <script language="JavaScript"> //get info, process data, update screen objects //instance vars var ball; var paddle; var score; //initial speeds var dx = 5; var dy = 5; var currentScore = 0; var timer; //set initial conditions for ball and paddle var paddleLeft = 228; var ballLeft = 300; var ballTop = 4; function init(){ //instantiate HTML object instance vars ball = document.getElementById('ball'); paddle = document.getElementById('paddle'); score = document.getElementById('score'); //register key listener with document object document.onkeydown = keyListener; //start the game loop start(); } function keyListener(e){ if(!e){ //for IE e = window.event; } if(e.keyCode==37 && paddleLeft > 0){ //keyCode 37 is left arrow paddleLeft -= 4; paddle.style.left = paddleLeft + 'px'; } if(e.keyCode==39 && paddleLeft < 436){ //keyCode 39 is right arrow paddleLeft += 4; paddle.style.left = paddleLeft + 'px'; } } function start(){ //game loop detectCollisions(); render(); difficulty(); //end conditions if(ballTop < 470){ //still in play - keep the loop going timer = setTimeout('start()',50); } else{ gameOver(); } } function detectCollisions(){ //just reflect the ball on a collision //a more robust engine could change trajectory of ball based //on where the ball hits the paddle if(collisionX()) dx = dx * -1; if(collisionY()) dy = dy * -1; } function collisionX(){ //check left and right boundaries if(ballLeft < 4 || ballLeft > 462) return true; return false; } function collisionY(){ //check if at top of playing area if(ballTop < 4) return true; //check to see if ball collided with paddle if(ballTop > 470){ if(ballLeft > paddleLeft && ballLeft < paddleLeft + 64) return true; } return false; } function render(){ moveBall(); updateScore(); } function moveBall(){ ballLeft += dx; ballTop += dy; ball.style.left = ballLeft; ball.style.top = ballTop; } function updateScore(){ currentScore += 5; score.innerHTML = 'Sco ' + currentScore; } function difficulty(){ //as the game progresses, increase magnitude of the vertical speed if(currentScore % 1000 == 0){ if(dy > 0) dy += 1; else dy -= 1; } } function gameOver(){ //end the game by clearing the timer, modifying the score label clearTimeout(timer); score.innerHTML += " Game Over"; score.style.backgroundColor = 'rgb(128,0,0)'; } </script> </head> <body onLoad="init()"> <h1>Bask-A-Bounce</h1> <div id="playingArea"> <div id="paddle"> <img src="paddle1.gif"> </div> <div id="ball"> <img src="ball.gif"> </div> <div id="score"> Sco 0 </div> </div> <embed name="Baywatch" src="Baywatch.mp3" loop="false" hidden="true" autostart="true"> </embed> </body> </html> Are the faq's written here in java script or something else?
hello wj friends please help in javascript. i figured out all problem and got solution but one i can't figure out please help me the problem is see this link http://www.sajeebgroup.com in this page see right side update news box. a slider is sliding but before one slider another slide is coming why this. here is slide javascript code PHP Code: (function($) { $.fn.easySlider = function(options){ // default configuration properties var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false, numeric: false, numericId: 'controls' }; var options = $.extend(defaults, options); this.each(function() { var obj = $(this); var s = $("li", obj).length; var w = $("li", obj).width(); var h = $("li", obj).height(); var clickable = true; obj.width(w); obj.height(h); obj.css("overflow","hidden"); var ts = s-1; var t = 0; $("ul", obj).css('width',s*w); if(options.continuous){ $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); $("ul", obj).css('width',(s+1)*w); }; if(!options.vertical) $("li", obj).css('float','left'); if(options.controlsShow){ var html = options.controlsBefore; if(options.numeric){ html += '<ol id="'+ options.numericId +'"></ol>'; } else { if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; }; html += options.controlsAfter; $(obj).after(html); }; if(options.numeric){ for(var i=0;i<s;i++){ $(document.createElement("li")) .attr('id',options.numericId + (i+1)) .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') .appendTo($("#"+ options.numericId)) .click(function(){ animate($("a",$(this)).attr('rel'),true); }); }; } else { $("a","#"+options.nextId).click(function(){ animate("next",true); }); $("a","#"+options.prevId).click(function(){ animate("prev",true); }); $("a","#"+options.firstId).click(function(){ animate("first",true); }); $("a","#"+options.lastId).click(function(){ animate("last",true); }); }; function setCurrent(i){ i = parseInt(i)+1; $("li", "#" + options.numericId).removeClass("current"); $("li#" + options.numericId + i).addClass("current"); }; function adjust(){ if(t>ts) t=0; if(t<0) t=ts; if(!options.vertical) { $("ul",obj).css("margin-left",(t*w*-1)); } else { $("ul",obj).css("margin-left",(t*h*-1)); } clickable = true; if(options.numeric) setCurrent(t); }; function animate(dir,clicked){ if (clickable){ clickable = false; var ot = t; switch(dir){ case "next": t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1; break; case "prev": t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1; break; case "first": t = 0; break; case "last": t = ts; break; default: t = dir; break; }; var diff = Math.abs(ot-t); var speed = diff*options.speed; if(!options.vertical) { p = (t*w*-1); $("ul",obj).animate( { marginLeft: p }, { queue:false, duration:speed, complete:adjust } ); } else { p = (t*h*-1); $("ul",obj).animate( { marginTop: p }, { queue:false, duration:speed, complete:adjust } ); }; if(!options.continuous && options.controlsFade){ if(t==ts){ $("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide(); } else { $("a","#"+options.nextId).show(); $("a","#"+options.lastId).show(); }; if(t==0){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); } else { $("a","#"+options.prevId).show(); $("a","#"+options.firstId).show(); }; }; if(clicked) clearTimeout(timeout); if(options.auto && dir=="next" && !clicked){; timeout = setTimeout(function(){ animate("next",false); },diff*options.speed+options.pause); }; }; }; // init var timeout; if(options.auto){; timeout = setTimeout(function(){ animate("next",false); },options.pause); }; if(options.numeric) setCurrent(0); if(!options.continuous && options.controlsFade){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); }; }); }; })(jQuery); here is php to show slide PHP Code: <html. <head> <style type="text/css"> #ticker-container { position:relative; /*overflow:hidden;*/ width: 190px; height: 200px; padding-top:0px; color:#000000; margin-top:0px; margin-bottom:1px; } #ticker { position:relative; overflow:hidden; margin-left:50px; margin-right:20px; margin-top:25px; width:155px; padding:0px; } </style> <!-- SLIDER START --> <script type="text/javascript" src="robin/easyslider/js/jquery.js"></script> <script type="text/javascript" src="robin/easyslider/js/easySlider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ticker").easySlider({ auto: true, continuous: true }); }); </script> <link href="robin/easyslider/css/screen.css" rel="stylesheet" type="text/css" media="screen" /> </script> </head> <body> <div id="ticker-container"> <div id="ticker"> <ul> <?php include("robin/notice/config.php"); $query = "SELECT id, title,body,name FROM notice"; $result = mysql_query($query); $num = mysql_num_rows($result); while ($row = mysql_fetch_assoc($result)) { $name = $row['name']; echo '<li><a href="robin/notice/fullarticle.php?id='.$row["id"].'" rel="popup standard 700 600 noicon"><img src="kcfinder/upload/.thumbs/images/'.$name.'" width="150px" height="150px" /></a></li>'; } ?> </ul> </div> </div> </body> </html> please help |
|||||||