Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›12 »

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Zoopy posted:

I am taking a javascript class online with a really awful teacher and really awful course materials.. I swear to loving god she is asking us to do things she hasn't taught us.

I have this really simple problem and I am having a hard time finding the information on how to solve it.

It's basically a form, you enter a number and push a button and it prints the number +5*2-7.

This is the page she gave us:
code:
<html>
  <head>
    <script type="text/javascript">
      // add your function definitions here
    </script>
  </head>
  
  <body>
    <form id="mathForm" name="mathForm">
      <p>Enter the number here:&nbsp;&nbsp;<input type="text" id="num" /></p>
<p>
        <input type="button" value="Do the Math" 
        onclick="//get data; call function"
        />
      </p>
      <p>Answer:&nbsp;<input type="text" id="answer" /></p>
    </form>
  </body>
</html>
I'm not asking for someone to do my homework for me but maybe point me in the right direction of the information required to do this...I've googled and searched and read. I guess I am mostly confused on how javascript receives and prints out data into forms.

Google the following phrases:

1. "javascript get form input value getElementById -ajax"
2. "javascript change form value getElementById -ajax"

(Hint, you'll be using 'getElementById()'

That should give you plenty of places to learn what you need to do.

# ¿ Feb 8, 2009 22:02

Adbot: ADBOT LOVES YOU

# ¿ Apr 23, 2024 22:19

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

fletcher posted:

Is there any performance difference between using arrays vs. using JSON?

Not sure, but since *everything* is an object in javascript, I wouldn't think so.

# ¿ Feb 26, 2009 21:04

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

supster posted:

Not with just Javascript in a browser.

Actually, there is using a Mozilla extension, but the very, very limited way it can be used makes it effectively a non-solution.

# ¿ Mar 9, 2009 23:23

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

G-Dub posted:

Does anyone have a guide to creating forward and back buttons in an HTA that definetely works and an example of the implimentation?? I have been struggling to get any of the tutorials I found through Google to work. As a small aside - I haven't set a doctype - will this make a blind bit of difference? Do you even set a doctype for an HTA?

Pretty sure every browser comes with those... don't reinvent the wheel, especially since users will *always* use the ones on the browser instead of yours.

Also, WTF is an HTA. Why does the internet force people to use buzzwords and abbreviations =(
Is that like MS's Adobe AIR or something?

# ¿ Mar 11, 2009 06:22

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

rotor posted:

HTml Application. It's basically a balled up wad of html & scripts (vbscript usually) that looks like an application to the user - sort of like a CHM. I don't think it has fwd & back buttons, hence the question.

http://www.microsoft.com/technet/scriptcenter/hubs/htas.mspx

I've always been surprised that they're not more popular.

Ah, OK, so it's like Adobe AIR, but windows-only. I wondered why AIR was never more popular, but the more I thought about it, when you start developing these things(AIR apps and HTMs,) you generally get more complex than "just a web page" and are tracking view states, need to swap objects on screen out, need to write out data to files, have to have more complex error-handling, etc. So many who would find the ease of entry ("hey, you already know HTML and javascript!") are a bit un-prepared / overwhelmed by all the additional stuff they need to code, and those who are prepared for all the extra bits probably just say "gently caress it, I'll write it in C, C#, Java, Objective-C , [INSERT LANGUAGE HERE]"

Thanks for the info on HTAs. I actually have a "web" app deployed that is IE-6 only (used internally in a call center) that I frequently wish I could bust out of the browser sandbox a bit. It requires OCX controls, so I couldn't do it in AIR, but this might be the bee's knees.

# ¿ Mar 11, 2009 15:34

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Mercator posted:

You have absolutely no clue what AIR is.

Really? Wow, then I better trash all the AIR apps I've written. It's likely I don't understand what HTAs are, but don't let that stop you from being a douche.

# ¿ Mar 11, 2009 16:14

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

joojoo2915 posted:

code:
(function() {
  var oldonload = window.onload;
  window.onload = function() {
    if (oldonload)
      oldonload();
	
[REMOVED TABLE BREAKING STUFF]

    buildMovieFromXML(GOGRAIN_XML_URL);
  };
})();
So I have my page set up with a default value if nothing from the drop down select list is selected, however when something is selected I need a new URL passed to the XML parser with that drop down menu selection as part of the querystring. I realize my code here is a horrible abortion mix of javascript and asp, but I know for a fact the asp parts work, it is just the javascript I'm having trouble with. If I hard code the URL with a possible drop down option like so:
code:
var GOGRAIN_XML_URL = 'XML/futures_seasonal_chart_new.asp?ticker=<%=crop_letter%>&cropy=<%=Cropy%>&fs='C2009N';
it works fine so I assume it is a problem with how I am trying to retrieve the form value, but from what little I know about javascript it looks right to me. Any help would be super awesome.

Without seeing the HTML it's impossible to tell if what you are doing is "correct" but if you are getting the value of a SELECT you need to do something along the lines of:

code:

document.forms.futuresSeasonal.contractSelect.options[document.forms.futuresSeasonal.contractSelect.selectedIndex].value);

Since the SELECT doesn't have a value by itself, it's the sweet sweet OPTIONs inside that do.

Or, use jQuery and do $('#selectID').val();

# ¿ Mar 12, 2009 16:36

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Melraidin posted:

First guess: define GOGRAIN_XML_URL outside of the if statement, then inside it do not use "var". Right now it looks like you're probably passing "undefined" to buildMovieFromXML as GOGRAIN_XML_URL doesn't exist outside that if statement in your code.

Try this:

Huh? He passes it as an argument before the function ends, and javascript passes by value, not reference, so it's not undefined. Using 'var' twice like that is ugly, but it works in javascript.

code:

function whee(val)
{
  if(val)
  {
    var box = "square";
  }else{
    var box = "rectangle";
  }
  blah(box);
}
function blah(str)
{
  alert("Your box is a "+str);
}
whee(false);

Works just fine, and so will his code. His problem is not knowing how to get a SELECT input value.

Lumpy fucked around with this message at 15:19 on Mar 13, 2009

# ¿ Mar 13, 2009 15:07

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Sylink posted:

Is it possible to dynamically change the size of a canvas in javascript instead of specifying like below?
code:
 <body onload="draw()">
   <canvas id="canvas" width="600" height="400"></canvas>
 </body>
</html>

This resized for me, so I'm guessing yes:

code:

<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script>
function lol()
{
	jQuery('#myCanvas').css("height","600px");
}
</script>
<style>
	#myCanvas { border: 1px #006 solid; }
</style>
</head>
<body>
<input type="button" onclick="lol()" value="pres butan" />
<br />
<canvas id="myCanvas" width="600" height="400"></canvas>
</body>
</html>

I used jQuery because I'm lazy

[EDIT]
This made a new one and sized it appropriately:

code:

<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script>
function lol()
{
	var newCanvas = jQuery("<canvas class='borderMe'></canvas>");
	newCanvas.css("height","200px").css("width","500px");
	jQuery('#whee').append(newCanvas);
}
</script>
<style>
	.borderMe { border: 1px #006 solid; }
</style>
</head>
<body>
<input type="button" onclick="lol()" value="pres butan" />
<br />
<div id="whee"></div>
</body>
</html>

\/\/ if it was Jessica Alba's rear end, that could be a good thing.

Lumpy fucked around with this message at 04:46 on Apr 2, 2009

# ¿ Apr 2, 2009 00:50

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Hi I am a Snake posted:

This is a simple question but I cannot figure it out. Please help.

What Avenging Dentist said, and here's some good reading on this stuff: http://javascript.crockford.com/private.html

# ¿ Apr 7, 2009 06:43

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Kekekela posted:

JSLint gives me a "Bad escapement" message on the following line, I'm guessing its something with that which follows the backslash but I suck at regex and can't get it cleaned up, halp:
code:
var regex = new RegExp("(?=\.(xls|xlsx))");

Have you tried the alternate syntax to see if that makes it shut up?

code:

var regex = /(?=\.(xls|xlsx))/;

edit: drat, beaten because I forgot to hit POST =(

# ¿ Apr 9, 2009 20:45

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Blackout posted:

Hey, I'm back again with another question!

I managed to solve the problem I was having earlier using ASP (dynamically creating a bunch of links based on files/folders).

Now, I'm trying to create a summary section for each of the groups of files.

I've got an asp file which creates all of my links, and inside that same file, I've got a function that will create html and return it in a string. This asp file is located in one frame, and I have a target frame next to it. I'm trying to figure out a way to create a link that will, rather than displaying another page in the target frame, call this function and display the html that comes back in the target frame.

So basically, when I click link A, I want it to call function B and show what the function returns in frame C.

Hopefully thats not confusing...

Thanks!

code:

<a href="blah.asp" target="framename">my link</a>

# ¿ May 7, 2009 23:38

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Crysinth posted:

Well, I got a bit more info, so I hope it helps towards actually figuring out a solution.

Hrm, apparently the problem is that he's wanting things down to the millisecond. The thing is that whenever the user clicks, he mentions there being a chance that the browser attempts to ping something and causes a 200 ms delay in the timing mechanism, and that it variably does this, making the data off at random. He's tried different ways of storing the data to avoid the ping possibly affecting it, and tried keeping the browsers he tested (IE and Firefox) in offline mode, but with no luck with that, either. Nothing else running.

He did mention though that even his usage of Javascript might be causing the problem, but I'm not sure.

I suspect its your friend's code. Browsers don't randomly ping stuff, and JS can easily deal with ms response times.

Make sure your test doesn't start until after the document and DOM fully load, don't do any synchronus stuff while the test is running, and you'll be fine.

# ¿ May 8, 2009 01:55

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Blackout posted:

That would be really easy, but my situation is a bit different. I've got my function in blah.asp, but I want to call it in multiple spots, passing different parameters. The HTML that the function returns is what I want to create a link to, not the asp page itself.

Lets say I have the following page where each xml is a link:

Header A
- 1.xml
- 2.xml
Header B
- 3.xml
- 4.xml

For each of the headers, I want to call this function in blah.asp, which will return html for a page containing a summary of stats for the xmls under the given header. I then want to create a link under the header that, when clicked, will display that HTML in my target frame.

So its a bit more complicated than putting an asp file in a link...

So you want a link under each header, then when clicked, runs blah.asp but produces different HTML based on which header link you clicked:

code:

<a href="blah.asp?header=a" target="framename">header A link</a>
...
<a href="blah.asp?header=b" target="framename">header B link</a>

Unless I'm completely missing what you are asking. Sorry for the non-javascript stuff rest of thread

# ¿ May 8, 2009 05:11

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

FateFree posted:

Can anyone write me a relatively easy function? Im looking for a method to be called from a textarea that counts the character length, but updates a div with the total count and changes the class if its over a limit.

So for each example youd see a textarea, when you typed something there would be a div with like 0/100, 50/100, 200/100 as you are typing, but it doesnt restrict if you go over the limit, it just changes the css class so it looks red or something, where its green if its under the limit.

Style and Script

code:

<style>
.aOK { border:5px solid green; }
.ohNoes { border:5px solid red; }
</style>
<script>
var maxChars = 100;
function getCharCount(el)
{
 var charCount = el.value.length;
 el.className = (charCount > maxChars) ? "ohNoes" : "aOK";
 document.getElementById("messageDiv").innerText = charCount + " of " + maxChars;
}
</script>

Your HTML

code:

<textarea id="myTextArea" onKeyUp="getCharCount(this)" class="aOK"></textarea>
<div id="messageDiv"></div>

Lumpy fucked around with this message at 05:56 on May 13, 2009

# ¿ May 13, 2009 05:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

FateFree posted:

Thanks alot lumpy I appreciate it. It works fine in IE but not in FF so im looking into that, but otherwise does just what I wanted.

edit: firefox wanted .textContent instead of innerText

Huh, th's odd, I tested in Safari and Chrome and it worked, assumed it would in FF. Normally I'm not lazy enough to use innerText and do the whole childNode thing.

# ¿ May 13, 2009 14:31

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Munkeymon posted:

I can't figure out why the result would be i = 0:
code:
Array.prototype.blah = function(){i = 0;}
function wtf()
{
	ary = new Array();
	i = 10;
	ary.blah();
	alert('i = ' + i);
}
How does the blah function have access to things in the wtf function's scope? I could understand if blah was inside wtf, but not this.

Because you have i set up as a global. Because you didn't use this or var in front of it.

code:

Array.prototype.blah = function(){
 this.i = 0;  // belongs to the Array instance
}
function wtf()
{
	ary = new Array();
	i = 10; // this is global because var is not in front of it.
	ary.blah();
	alert('i = ' + i);
}

Lumpy fucked around with this message at 23:08 on Jun 2, 2009

# ¿ Jun 2, 2009 23:04

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Jreedy88 posted:

I have this in my CSS:
code:
#headers
{
	display:none;
}
And I'm trying to use this JavaScript in a function later on to dynamically display something:
code:
document.getElementById("headers").style.display = "";
It's a no go. I don't understand why it's not making it visible. I've done this tons of times before without defining the style in the stylesheet. Now that I've defined the style of none in the sheet, it won't reappear. Also, is there a better way to do this?

I just want the element to be invisible on page load and visible after a function is called.

Set the display to block.

Think "none" = invisible, "block" = visible

# ¿ Jun 19, 2009 17:30

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Ether Frenzy posted:

I'm having trouble amending this javascript form submission to also allow the "Enter" key to submit the form. I'm not that experienced with javascript, so my googling has not been resulting in any successes at inserting the additional elements.

my form currently checks a text area entry against a list of promotional codes before passing the user along to the next page, what I need it to do is to accept both pressing the 'go' button as well as hitting enter to submit the promotional code, so if anyone could explain to me how to do that I'd really appreciate it.

First link from a Google for "javascript bind keys" has a pretty good tutorial:

http://www.javascriptkit.com/javatutors/javascriptkey.shtml

# ¿ Jul 7, 2009 18:52

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Hammerite posted:

Full disclosure - I posted this in the Web Design & Development small questions thread, but came to the conclusion that it's really more Javascript and I will be more likely to get help with it here. Hence I'm reposting it.

My website implements a board game via PHP. A user can view a game in progress by visiting a URL that looks like mywebsite.com/board.php?GameID=1234. Although the site is essentially set up to enable a play-by-email kind of experience, it might happen that some users would like to play in real time, or close to real time. Because the page generated when visiting the URL is static, they can only see what the real current state of the game is by refreshing the page. This is inconvenient, and it means more work for my website too if people are constantly refreshing pages, so I rigged up a hack to slightly reduce the problem. To each game there corresponds a number saying how many moves have been made in the game. So it starts off at zero and is incremented whenever someone makes a move. If a user loads a page corresponding to a game in progress, then a Javascript runs such that every five seconds the page checks with the website to see if the number of moves made is bigger. If it is then it turns the page background a different colour, so as to alert the user without interrupting any activity the user is performing on the page.

My <body> tag looks like this:

<body onLoad="IntervalID = setInterval ('ajaxFunction()', 5000);" onUnload="clearInterval(IntervalID);">

For completeness, here is ajaxFunction: (This was taken from the page from a game that at the time had had 95 moves made, hence the "95")
code:
function ajaxFunction() {
    /* Attribution: This JavaScript code is based on code
       taken from w3schools.com */
    var xmlHttp;
    try { xmlHttp=new XMLHttpRequest(); }
    catch (e) {
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            return false;
        }
    }
    xmlHttp.onreadystatechange=function() {
        if ( xmlHttp.readyState == 4 ) {
            if ( xmlHttp.responseText != "95" ) {
                document.bgColor = "#BFDFFF";
                clearInterval(IntervalID);
            }
        }
    };
    xmlHttp.open("GET","newmoves.php?GameID=1234",true)
    xmlHttp.send(null);
}
My question: I noticed that occasionally when one leaves the page, the page background will change colour (despite the fact that when one comes back, no new moves have been made). I deduce that this is because the every-five-second function happens to be running at just that time. I attempted to tackle this by adding to the <body> tag (as given above) the following:

onUnload="clearInterval(IntervalID);"

This does not solve the problem. The page still changes colour sometimes when one leaves. What should I do to stop this?

Perhaps make your code > 94? It's possible the ajax return happens when it's false on unload, and since false is not the string 95, you get a background change. This is my pre-coffee first guess, so it's probably wrong. I'll look again in an hour when I wake up.

Also thank's for the reminder as to how ugly "plain" ajax code is. I don't miss writing stuff like that at all. /me gives jQuery a hug.

# ¿ Jul 9, 2009 15:50

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

FedEx posted:

I'm running an old javascript menu I had lying around my computer for years. I wanted the script centered, so modified it to include a margin-left and changed its absolute position which works fine in chrome, opera, IE but breaks in firefox which puts the menu on the far left of the screen

thoughts?

unfortunately, using a div container won't work either

Guys, something is wrong with my car engine, it's sort of making this noise... I put a clamp on that thing, but now the other hose is lose: what should I do to fix it?

# ¿ Jul 12, 2009 21:00

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Hammerite posted:

I am puzzled by one thing; in my test (of the old code) I only saw the colour change on clicking a hyperlink. I had thought what might happen would be that it would change colour anywhere between 0 and 5 seconds after disconnecting my computer, but this is not the case.

If you are disconnected form the internet, you cannot get a "good" ready state change event from your function, so the checking code will never run.

# ¿ Jul 12, 2009 21:02

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

diadem posted:

How do you detect if the current window has focus?

Listen for the onFocus event / onBlur and set a flag.

Here's a poor example that uses a global variable and the not preferred way of doing event handlers to give you the gist:

code:


var iHaveFocus = true;
window.onFocus = 'iHaveFocus = true';
window.onBlur = 'iHaveFocus = false';

function onlyRunIfWindowIsFocused()
{
 if(iHaveFocus)
 {
   // do stuff because the window is focused.
 }
}

# ¿ Jul 21, 2009 16:54

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Bhaal posted:

Had a fun time today trying to find the bug in my code until I finally distilled the problem down to the following abstraction:

...

I couldn't find this documented anywhere as intended or a bug or anything like that. Am I crazy in thinking this should be a bug/misfeature?

This is a very, very very common problem. What's happening in your first example script is when you do an onchange, the current value of key is looked up. After your loop runs, the value of key will always be 'oranges'

The second example uses a closure to stop that from happening. If you use a library like jQuery, it will do all the dirty work for you.

code:

jQuery('.mySelects').change( function(){
  alert(jQuery(this).val());
});

# ¿ Sep 23, 2009 02:08

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

CT2049 posted:

I'm currently working on a page in which that has a drop down menu similar to an option element. However, I need more than just text for each option so I'm using a div that I make appear and disappear. I've got the appearing working correctly, but I'm not sure how to make it disappear when I click anywhere on the page. Does anyone how I can accomplish this?

when you show your DIV, add a click hander to the document, check to see if the click was in your DIV, and if not, hide. When you hide, remove the click handler as well, so it's not checking when it doesn't need to.

# ¿ Oct 13, 2009 17:32

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Is navigating to someone's profile done via AJAX by the site, so there's no page load?

# ¿ Oct 22, 2009 15:17

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Soks posted:

[ choppy in Safari ]

It was quite smooth in Safari for me. 4.0.4 on OS X 10.6.2

# ¿ Nov 24, 2009 20:21

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

awdio posted:

For some reason, I cannot get a span to display when I'm passing the name of it using selectedIndex. If I simply use onChange="Show_Stuff(this.display4)" it works.

Off the top of my head, but this should work:

code:

function Show_Stuff(myID)
{
 if(window.console.log) window.console.log( "I was passed: " + myID);
 var el = document.getElementById( myID );
 if(window.console.log) window.console.log( "el? " + el);
 if (el.style.display == "none")
 {
  el.style.display = "";
 }
 else
 {
  el.style.display = "none";
 }
}

body:

code:

<select onChange="Show_Stuff(this.selectedIndex.value)">
  <option value = "0" selected>nothing</option>
  <option value = "display4">display4</option>
</select>

<ul id="display4" class="aListStyle" style="display: none">
<li>Sound Mixing</li>
<li>Audio Editing</li>
<li>Audio Restoration</li>
<li>Sound Design</li>
</ul>

I fixed your HTML too.

# ¿ Dec 1, 2009 22:00

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

awdio posted:

Tried that... still nothing. I'm just trying to pass an options value. From what you mentioned above, shouldn't it be option.value?

this.options[this.selectedIndex].value

Really, just google "get selected value with javascript"

# ¿ Dec 4, 2009 20:22

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

peepsalot posted:

Your Show_Stuff function expects a DOM element parameter to be passed to it, and you're passing it the value attribute of an element(a string).

Yup, that's why in the code I posted for him before I used getElementById to make a DOM object. I even put in console logging for him. :sigh:

# ¿ Dec 4, 2009 23:22

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

NANERPUSS posted:

So I'm going to assume you guys have heard of the Google AJAX Feed API right? Pretty killer tool, but I'm having a small issue that really isnt that important, but I'd love to fix it soon.

As I am sure most of you know, text overflow is handled pretty well in all browsers BUT Firefox... which seems a bit odd really, but for some reason, they are the only ones that don't offer a 'ellipsis' as an overflow option.

So what I have is a plugin I discovered written in JQuery that apparently fixes these problems, but I can't get it to work because said plugin requires an ID be assigned to the link(s) that the Javascript file creates... and it's not fun to gently caress with.

I won't bother with the plugin code because I prefer to not gently caress with it, but here is the code Google gave us:
http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js

Now notice the class .gfg-listentry... that is the class that needs an 'id="one"' added in every time it is displayed... otherwise i get a nasty looking text-cutoff in Firefox.

Any advice on how to do this or any easier way to accomplish what I need? Thanks.

Modify the plugin to select .gfg-listentry instead of #one ?

# ¿ Dec 18, 2009 15:36

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Haystack posted:

Could someone explain this code pattern to me?
code:
var returnedValue = (function() {...})(parameter);
An example:
code:
var parameter = "Whiz! "
var firework = (function() {
  var sound = parameter + "Bang!";
  return sound;
})(parameter);

alert(firework); // Should alert "Whiz! Bang!"
I understand that this defines and then executes an anonymous function, assigning the return value to fireworks. What I don't understand is why this syntax works. Namely, why does wrapping a function in parenthesis and then immediately calling it work?

This says it much better than I can.

Basically the set of parenthesis around the function don't actually do anything... the second set just tell the function to execute (much like String.indexOf will return the method, and String.indexOf() will actually run it.)

# ¿ Dec 29, 2009 16:21

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

usingpond posted:

I was considering a new thread for this, but it doesn't really deserve one on second thought. Anyway, I do a bit of Javascript, and I currently use Prototype, with scriptaculous for UI effects.

However, when I look for jobs, and discuss Javascript libraries with other developers, most people seem to prefer jQuery. Looking at the UI effects built-in (I don't think you even need a special external file like with scriptaculous), they seem to be just as good.

So the question here is, is it worth transitioning over to jQuery? Will I get confused since the syntax is similar but not quite the same? Will I be missing anything?

You will wonder why you used prototype for so long.

# ¿ Dec 31, 2009 03:42

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

JasonV posted:

I'm just starting out learning some Javascript, and run into this problem that's just driving me nuts:

Wherever you are learning your js from, stop. As said before, use jQuery, or if you want to do it the "hard" way to learn the under the hood stuff, learn HTML first.

# ¿ Feb 12, 2010 23:33

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Boring posted:

trying to make a slidedown menu type thing, using this:

http://andylangton.co.uk/articles/javascript/jquery-accessible-show-hide/ but with images not text.

I've managed to do it, but the problem is that the menu is fine on initial load, the showtext menu button displays fine, then when it it is clicked down drops the menu fine, but once clicked, the button reverts to <img src='images/news.png'> rather than the actual png file. It continues to function fine, but the image won't display, just the code.

You are setting the text() of the element, which will treat whatever you stick in there as... text! You want to set the html() of the element, which will treat what you stick in there as HTML, and show the image.

Also, you are using multiple elements with the same ID. This makes baby web-developer jesus cry. Don't do that.

Lumpy fucked around with this message at 17:03 on Mar 9, 2010

# ¿ Mar 9, 2010 16:54

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Boring posted:

awesome thanks! got it working. you completely rule.

one last question,

since adding the javascript for the showhide, my menu is all spaced out (see attached image) and no amount of css tinkering seems to be able to get the menu options closer together. It all stems from the 'design' menu button (the button that has the drop down showhide menu) not actually showing up as anything on my dreamweaver (sorry) design page, how can i change its padding etc?

also, any idea why it has a retarded blue box around the showhide menu button if i preview it in firefox?

Your reset.css should be fixing any padding issues. If you aren't using a reseet.css, shame on you. http://meyerweb.com/eric/tools/css/reset/

Since you are adding elements w/ javascript, that could be why it doesn't show up right in any WYSIWYG "preview" pane or whatever.. I could be wrong though, since I have not used Dreamweaver.

# ¿ Mar 9, 2010 19:30

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

How are people doing localization with external .js files?

A couple ideas that occur to me are:

1) include different message file(s) based on session (or whatever) settings

php:

<?
switch( $_SESSION['lang'] )
{
  case 'en':
  echo '<script src="English.Messages.js"></script>';
  break;

  case 'es':
  echo '<script src="Spanish.Messages.js"></script>';
  break;
//(etc.)
}
?>

2) use my frameworks localization inside a single messages file, and force it to be PHP parsed

code:

<Files Messages.js>
ForceType application/x-httpd-php
<Files>
// then the file Messages.js looks like:
MyApp.Messages = {
  badLogin: "<?php echo PHPApp::lang('badLogin');?>",
  youSuck: "<?php echo PHPApp::lang('youSuck');?>",
  // etc
}

Anyone have any suggestions / horror stories / good ideas?

# ¿ Mar 10, 2010 16:57

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

smug forum rear end in a top hat posted:

Can anyone recommend a good Javascript book?

That would greatly depend on your pre-existing knowledge of JS, and experience with other languages and object oriented programing in general. Are you just starting out? Have 12 years of Java development experience?

# ¿ Mar 11, 2010 19:50

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

ChrizpG posted:

I am trying to get a small box to appear on mouseover of a rectangular area in an image. Actually, multiple areas with an individualized box for each. The boxes are going to have some links and maybe an image or something. The box should "hold" after your mouseover to give you time to move your cursor into the box, which should stay up until you move out of the box.

Is this possible? I feel like those stupid text-link ads that show a box do this kind of thing all the time, although with text instead of a mapped out area on an image. Google hasn't really helped me out much because I have quite a bit of confusion on how to actually use Javascript to make this happen.

Make an imagemap and tie js events to it.

# ¿ Mar 25, 2010 05:27

Adbot: ADBOT LOVES YOU

# ¿ Apr 23, 2024 22:19

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

rt4 posted:

I have some variables that are being treated as undefined, but I don't understand why.
I have a JS file included that looks like this
code:
$(document).ready(function() {
	$("#tabs").tabs();

	var image = 1;
});
and then come html with events
code:
<a href="#" onclick="
	image = image + 1;
	$('#demos').attr('src', 'image-' + image + '.png');
">next slide</a>
but when I use it, it says that 'image' is undefined. Am I missing some scoping issue? Should I just bind all those buttons in my document.ready? The tabs from the first code sample get initialized just fine.

Your image var is scoped to the anonymous function. You probably want to do something like this:

code:

jQuery(document).ready( function()
{
  var image = 1;
  jQuery('a.someNewClass').click( function()
  {
     image++;
     jQuery('#demos').attr('src', 'image-' + image + '.png' );
    // test with
    // alert( image );
  }
}

// then your HTML looks like:
<a href="#" class="someNewClass">baldfa</a>

the anon. click hander function will have access to image because it's in it's context ( because it's inside it. )

Lumpy fucked around with this message at 15:16 on Apr 4, 2010

# ¿ Apr 4, 2010 15:09

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›12 »