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.

«‹›277 »

Boz0r: Sep 7, 2006; The Rocketship in action.

What's the difference between writing

code:

$.each(whatever)

and

code:

.each(whatever)

what does the dollar sign do when not used as a selector?

# ? Jan 22, 2013 00:05

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 04:29

486: Jun 15, 2003; Delicious soda

Boz0r posted:

What's the difference between writing
code:
$.each(whatever)
and
code:
.each(whatever)
what does the dollar sign do when not used as a selector?

I assume you're talking about jQuery...

$ is basically an alias that represents the jQuery object, so $.each is the same as jQuery.each.
The difference between the two methods is that one is meant to iterate over a given collection ($.each(collection, callback)) and the other iterates over the selection you attach it to ($(".collection").each(callback))

So you can use $.each to iterate over an array and do something with each entry in it, or you can use .each on a selector and do something with each DOM node in that selection!
jQuery.each()
.each()

also, there is a jQuery thread here! http://forums.somethingawful.com/showthread.php?threadid=2971614

# ? Jan 22, 2013 01:47

Gazpacho: Jun 18, 2004; by Fluffdaddy; Slippery Tilde

Boz0r posted:

what does the dollar sign do when not used as a selector?

The dollar sign doesn't do anything. (That's the beauty of it. :v:

)

Which is to say, jQuery operates through JavaScript's normal expression syntax. "$" is the name of an object (specifically a Function object) with some fields, one of which is a function named "each". "$.each" refers to this function.

"$('#something').each" refers to an "each" method on an object that is returned from a function call. (Remember, $ is a Function object.) The two "each"es refer two distinct functions, even if one does happen to call the other.

# ? Jan 22, 2013 05:42

Boz0r: Sep 7, 2006; The Rocketship in action.

Thanks. Another question(This time it's actually JavaScript and not JQuery :p):

code:

var f = function() {
	g = function() {return 1;}
	var g;
	if (true) {
		function g() {return 2;}
	}
	else {
		function g() {return 3;}
	}
	return g();
	function g() {return 4;}
}
var result = f();

Why should this return 1? It seems as though g gets overwritten, but according to my lecturer, the result is 1.

# ? Jan 22, 2013 17:58

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Boz0r posted:

Thanks. Another question(This time it's actually JavaScript and not JQuery :p):
code:
var f = function() {
	g = function() {return 1;}
	var g;
	if (true) {
		function g() {return 2;}
	}
	else {
		function g() {return 3;}
	}
	return g();
	function g() {return 4;}
}
var result = f();
Why should this return 1? It seems as though g gets overwritten, but according to my lecturer, the result is 1.

First of all: that code is a horrible manufactured mess.

Okay: Variables in javascript have function scope and exist everywhere within the function regardless of where they are declared. So that var g on the second line declares a local variable named g that exists for the duration of the f function call.

So, the assignment g = function() {return 1;} assigns that function to the local variable g, even if if it looks like the variable has not been declared yet. It's silly, but so is the example.

Inside the if (true) { block, a function is defined, given the name "g" and then assigned nowhere. It's an empty statement. (That g would be visible inside the function itself(*)

The else branch is unreachable code, but it's the same as the if-block.

Then the function f returns the result of function g (still as defined on line 1).

The line after the return is once again unreachable code, and identical in practice to the if and else blocks.

(* If you name a function, you can recursively call the function using that name:

JavaScript code:

//variable name  function name
var fibonacci  = function fib(value) { 
	if (value < 2) {
		return value; 
	}
	return fib(value - 1) + fibonacci(value - 2);
	// you can use both if you absolutely want to, but it's silly.

};

// this works:
console.log(fibonacci(10));

// outside of the function this does not work:
console.log(fib(10)); // Unhandled Error: Undefined variable: fib

Edit:

Haha, actually, those are all function statements, which have an almost exactly the same syntax as function declarations, except function declarations make the name visible outside the function itself, while function statements are usually anonymous, but if they have a name, it is only visible within the function itself.

Wheany fucked around with this message at 18:43 on Jan 22, 2013

# ? Jan 22, 2013 18:32

Boz0r: Sep 7, 2006; The Rocketship in action.

Thanks, I get it now. I think the code is supposed to be a horrible mess to demonstrate the variable scope. We had to guess whether the result would be 1, 2, 3 or 4.

EDIT: If I print the value of g at the first line of f() when debugging it writes this:

code:

function g() {return 4;}

That's confusing.

Boz0r fucked around with this message at 19:12 on Jan 22, 2013

# ? Jan 22, 2013 18:39

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Boz0r posted:

Thanks, I get it now. I think the code is supposed to be a horrible mess to demonstrate the variable scope. We had to guess whether the result would be 1, 2, 3 or 4.

EDIT: If I print the value of g at the first line of f() when debugging it writes this:
code:
function g() {return 4;}
That's confusing.

http://bonsaiden.github.com/JavaScript-Garden/#function.scopes

Specifically under Hoisting:

quote:

JavaScript hoists declarations. This means that both var statements and function declarations will be moved to the top of their enclosing scope.

Your original example becomes something like

JavaScript code:

var f = function() {
	var g;
	//these next two might end up anywhere but should produce an error, apparently
	function g() {return 2;}
	function g() {return 3;}
	function g() {return 4;}
	//this here is the first line of code that will execute rather than declare things
	g = function() {return 1;}
	if (true) { }
	else { }
	return g();
}
var result = f();

when it's actually evaluated before it's run.

edit:ed to better reflect reality. Also, holy poo poo I can finally hit tab in the editor without it selecting a different page element!

Munkeymon fucked around with this message at 21:08 on Jan 22, 2013

# ? Jan 22, 2013 19:48

Gazpacho: Jun 18, 2004; by Fluffdaddy; Slippery Tilde

g2 and g3 are named function expressions and not function declarations, so they will not be raised in a correct implementation. (There are incorrect implementations in this regard, although I don't know whether they affect the behavior of the example.)

# ? Jan 22, 2013 20:24

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Function declarations inside of non-function block statements (for, while, do...while, if, etc.) are illegal by the standard.

That means:

JavaScript code:

function foo() {
    if (true) {
        function g() { return 1; }
    }
    return g();
}

is invalid JavaScript. Some browsers (Firefox, Chrome, Opera) accept the syntax anyway, but they may not have equivalent results. I know that Firefox does not hoist function declarations inside such blocks.

You should not depend on such behavior.

# ? Jan 22, 2013 20:37

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Huh, I'm surprised I didn't notice that during my stupid JavaScript tricks exploratory phase.

# ? Jan 22, 2013 21:04

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

Strict mode treats function declarations inside of non-function block statements as an error.

# ? Jan 24, 2013 01:41

DreadCthulhu: Sep 17, 2008; What the fuck is up, Denny's?!

Total noob question: I'm trying to teach myself proper JavaScript this time, after having hosed around with it for a couple of days at a time over the years. I powered through Crockford's "The Good Parts" and I'm now going to go ahead and start putting something together, or I will forget most of that in a week.

I have a minimal feel for what the language should look like, but now I have to put it in the context of a web page and the browser, which Crockford spends pretty much 0 time on. Are there any good resources on that one? I'd love to know the best practices of shoving your scripts into web pages. I remember doing unobtrusive JS back in my Rails days and that felt a bit cleaner than stuffing everything in the <script> tag, but I don't know if that's still considered a good practice etc.

My first pet project is a static web page served from my S3 bucket which will be fetching a bunch of information from my "app" on parse.com and displaying it on the screen. Hoping I don't cause too many atrocities.

DreadCthulhu fucked around with this message at 06:59 on Jan 26, 2013

# ? Jan 26, 2013 06:56

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

DreadCthulhu posted:

Total noob question: I'm trying to teach myself proper JavaScript this time, after having hosed around with it for a couple of days at a time over the years. I powered through Crockford's "The Good Parts" and I'm now going to go ahead and start putting something together, or I will forget most of that in a week.

I have a minimal feel for what the language should look like, but now I have to put it in the context of a web page and the browser, which Crockford spends pretty much 0 time on. Are there any good resources on that one? I'd love to know the best practices of shoving your scripts into web pages. I remember doing unobtrusive JS back in my Rails days and that felt a bit cleaner than stuffing everything in the <script> tag, but I don't know if that's still considered a good practice etc.

My first pet project is a static web page served from my S3 bucket which will be fetching a bunch of information from my "app" on parse.com and displaying it on the screen. Hoping I don't cause too many atrocities.

HTML code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first web page</title>
		<link rel="stylesheet" href="style.css">
		<script src="script.js"></script>
	</head>
	<body></body>
</html>

If you have any significant amount of Javascript, put it into an external script file. If you have several scripts, concatenate them into one file on deployment. The bad thing is that the external script loading blocks page load, so it will take longer to show the page. You can download javascript files asynchronously with some libraries to show the page faster.

BTW, you might have some trouble fetching any data across domains in Javascript. It can be done, but not as easily as data hosted on the same domain.

# ? Jan 26, 2013 13:58

sim: Sep 24, 2003

Wheany posted:

The bad thing is that the external script loading blocks page load, so it will take longer to show the page. You can download javascript files asynchronously with some libraries to show the page faster.

Or you can put your scripts at the end of your HTML, right before </body>. Most of your JS will depend on the DOM being loaded anyway, so there's no benefit to loading it before that.

# ? Jan 26, 2013 16:34

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Wheany posted:

BTW, you might have some trouble fetching any data across domains in Javascript. It can be done, but not as easily as data hosted on the same domain.

Parse is pretty cool about this, I've never had XSS problems with it. Great tool if you want to learn a backbone-ish SPA framework without worrying about server-side programming or databases.

# ? Jan 26, 2013 17:46

Modern Pragmatist: Aug 20, 2008

Is it not valid to have two elements (<span> for example) with the same ID? jQuery doesn't seem to like this at all. If I try to select by both ID and class, then it can't find the second object. Can someone explain to me why jquery won't find it. I have a simple example here:

http://jsfiddle.net/2K2cC/

# ? Jan 27, 2013 01:44

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

IDs are supposed to be unique, yes.

# ? Jan 27, 2013 01:45

OddObserver: Apr 3, 2009

Yes, IDs are supposed to be unique.

# ? Jan 27, 2013 01:46

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

To add, that's meant to be a performance optimization as well. By giving something an ID, it means Javascript and (I think) CSS in general can just find the first instance of that ID and then stop looking immediately, unlike with classes where it must continue looking through the DOM for matches.

# ? Jan 27, 2013 02:17

Stoph: Mar 19, 2006; Give a hug - save a life.

For what it's worth, searching for elements by class name has been optimized for a while now. I usually find IDs to be more trouble than they're worth.

# ? Jan 27, 2013 02:24

Modern Pragmatist: Aug 20, 2008

Great. Thanks for the feedback. Ill just use classes then.

# ? Jan 27, 2013 03:11

DreadCthulhu: Sep 17, 2008; What the fuck is up, Denny's?!

Wheany posted:

HTML code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first web page</title>
		<link rel="stylesheet" href="style.css">
		<script src="script.js"></script>
	</head>
	<body></body>
</html>
If you have any significant amount of Javascript, put it into an external script file. If you have several scripts, concatenate them into one file on deployment. The bad thing is that the external script loading blocks page load, so it will take longer to show the page. You can download javascript files asynchronously with some libraries to show the page faster.

BTW, you might have some trouble fetching any data across domains in Javascript. It can be done, but not as easily as data hosted on the same domain.

Thanks, that's pretty helpful. I actually managed to stumble upon the html5 boilerplate which seems to give you a basic template to work with, even though it comes with a few tricks that I'm still not fully understanding. It looks pretty similar to what you have up there.

Regarding the Parse + backbone comment, what exactly about it is related to Backbone? Parse keeps mentioning relying on Backbone for its SDK, except I don't really use much more than just the API calls to get some CRUD done. Where exactly does Backbone fit into the picture here?

Edit: nevermind. I'm just going to go ahead and finally figure out Backbone properly. Back when I gave it a try about 6 months ago there weren't that many quality resources to learn it, and I didn't spend time understanding Javascript first. It's pretty heavily reliant on the module pattern and extensions, so without understanding those you don't go very far. It's good to see that the guides have gotten considerably better, especially the one by Addy Osmani, which is a real book now.

DreadCthulhu fucked around with this message at 02:24 on Jan 28, 2013

# ? Jan 27, 2013 04:52

Daynab: Aug 5, 2008

I feel like tearing my hair out, I hope someone can shed some light on this. I'm making a userscript that converts Youtube links to show their titles, but for some reason the regex stops working on pages/in my script while working in every example and even on jsbin.

Here's the Regex: /(https?:\/\/w*\.?youtu\.?be\.?[com]*\/[a-z0-9\?\-\=\_]+)/i
You can try it here http://scriptular.com/, just put in some youtube links as strings.

and here's the jsbin with working example.

The issue is that when I put it on a userscript, it actually works on jsbin, but then any other page it just doesn't return anything. Now, I've tried going back through the regex character by character, but it just stops working once I put in the first letter (y, or really anything else) and I don't understand what the gently caress.

Daynab fucked around with this message at 11:02 on Jan 29, 2013

# ? Jan 29, 2013 07:21

Gazpacho: Jun 18, 2004; by Fluffdaddy; Slippery Tilde

quote:

[a-z0-9\?\-\=\_]

The characters you're escaping are not special in a character class, except for the hyphen, and therefore shouldn't be escaped. As for the hyphen, if you want it to be interpreted literally it should be at the beginning of the class. So [-a-z0-9?=_]. Does this help?

# ? Jan 29, 2013 09:02

Daynab: Aug 5, 2008

Gazpacho posted:

The characters you're escaping are not special in a character class, except for the hyphen, and therefore shouldn't be escaped. As for the hyphen, if you want it to be interpreted literally it should be at the beginning of the class. So [-a-z0-9?=_]. Does this help?

Thanks for this, I actually didn't know. Unfortunately though it changes nothing.

Basically, it's really weird but what happens is: I'm filtering all the <a>s on the page with jquery and their href with the regex and returning into an array (obviously).
But if I look at console.log(), it works up to this point: /(https?:\/\/w*\.?)/i; detecting every link on the page, but as soon as I add a letter nothing returns.

But the weirdest thing is why the gently caress does it work on jsbin? Even as a userscript, I can remove the javascript on jsbin, just have the links and my script will convert them fine.

# ? Jan 29, 2013 09:35

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Daynab posted:

I feel like tearing my hair out, I hope someone can shed some light on this. I'm making a userscript that converts Youtube links to show their titles, but for some reason the regex stops working on pages/in my script while working in every example and even on jsbin.

Here's the Regex: /(https?:\/\/w*\.?youtu\.?be\.?[com]*\/[a-z0-9\?\-\=\_]+)/i
You can try it here http://scriptular.com/, just put in some youtube links as strings.

and here's the [url="https://"http://jsbin.com/udofuw/1/edit"]jsbin with working example.[/url]

The issue is that when I put it on a userscript, it actually works on jsbin, but then any other page it just doesn't return anything. Now, I've tried going back through the regex character by character, but it just stops working once I put in the first letter (y, or really anything else) and I don't understand what the gently caress.

Okay, If I understood the gist of your script correctly ("first", "second" etc are not very good variable names, btw), you want the video id out of the link https://www.youtube.com/watch?feature=player_embedded&v=8xttr_ILd6A#t=6s, so "8xttr_ILd6A" from that url.

If you're on Windows, and doing anything with regular expressions, try The regex coach

As for the regex, try /(youtu\.be\/|v=)([a-zA-Z0-9_\-]*)/, it seems to work on all of your examples.

JavaScript code:

var getVideoId = function (url) {
	var idPattern = /(youtu\.be\/|v=)([a-zA-Z0-9_\-]*)/;
	var idMatch = idPattern.exec(url);

	return idMatch ? idMatch[2] : '';
}

# ? Jan 29, 2013 10:34

Daynab: Aug 5, 2008

Sorry for the var names, they were temporary and I forgot to change them as I didn't think I'd be having problems with it and need to show anyone.

Your regex is some kind of awesome wizardry and takes care of step 2 (which worked already but will be more efficient with your thing so thanks) - but doesn't solve my entire problem which is capturing the link elements as I described above in the first place.

Also just realized I left another debug thing in the jsbin example, I'm terrible tonight at not being confusing :smithicide:

Okay: to clarify, what I'm trying to do is grab all the links on the page that match a youtube link. This works in all examples or on jsbin but not when I put it in a userscript. Then I split through each link to get the video ID and then use Youtube's API to fetch the titles and convert the text inside the links to show their titles.
This step all works (but will work better with your regex probably). It's just the original "grab the links" that stops working and I don't understand why.

Daynab fucked around with this message at 11:06 on Jan 29, 2013

# ? Jan 29, 2013 10:44

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Daynab posted:

Sorry for the var names, they were temporary and I forgot to change them as I didn't think I'd be having problems with it and need to show anyone.

Your regex is some kind of awesome wizardry and takes care of step 2 (which worked already but will be more efficient with your thing so thanks) - but doesn't solve my entire problem which is capturing the link elements as I described above in the first place.

Also just realized I left another debug thing in the jsbin example, I'm terrible tonight at not being confusing

Okay: to clarify, what I'm trying to do is grab all the links on the page that match a youtube link. This works in all examples or on jsbin but not when I put it in a userscript. Then I split through each link to get the video ID and then use Youtube's API to fetch the titles and convert the text inside the links to show their titles.
This step all works (but will work better with your regex probably). It's just the original "grab the links" that stops working and I don't understand why.

Ah, okay, yeah, your filter function is busted.

This code:

JavaScript code:

var $links = $('a').filter(function(){
    return $('a').attr('href').match(regEx); // specifically this line
  });

Returns true when the href attribute first link in the page ( $('a').attr('href') ) matches your regex.

What you probably want is this:

JavaScript code:

var $links = $('a').filter(function(){
	return yourRegex.test(this.href);
  });

Edit: Like the jQuery documentation says:

http://api.jquery.com/filter/ posted:

.filter( function(index) )
function(index)
Type: Function()
A function used as a test for each element in the set. this is the current DOM element.

Wheany fucked around with this message at 11:20 on Jan 29, 2013

# ? Jan 29, 2013 11:18

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Daynab posted:

Your regex is some kind of awesome wizardry

This part bothered me enough to make a second post.

Broken down:
(youtu\.be\/|v=)([a-zA-Z0-9_\-]*)

means

code:

(               # start a capturing group
youtu\.be\/     # match literal youtu.be/
|               # or
v=              # match literal v=
)(              # end first capturing group, start a second one
[a-zA-Z0-9_\-]* # match 0 or more lower or upper case letters a-z, numbers 0-9, underscore or hyphen
)               # end second capturing group

When you exec this pattern, match[0] contains the whole match, e.g. youtu.be/eU1DniTu8NU or v=eU1DniTu8NU, match[1] contains the first capturing group, so youtu.be/ or v=, and match[2] contains the second capturing group, eU1DniTu8NU .

The first capturing group is not used, but it is needed for matching youtu.be/ or v=

# ? Jan 29, 2013 12:31

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

I'll just add that instead of using a capturing group (youtu\.be|v=) you can use a non-capturing group (?:youtu\.be|v=) (the ?: after the open-paren makes the group non-capturing). This helps to make your regex look a little bit more like meaningless line noise, but also to only capture the matches that you actually need, which can be helpful if you're wanting to pull out several bits of data with one regex.

# ? Jan 29, 2013 12:47

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Jabor posted:

I'll just add that instead of using a capturing group (youtu\.be|v=) you can use a non-capturing group (?:youtu\.be|v=) (the ?: after the open-paren makes the group non-capturing). This helps to make your regex look a little bit more like meaningless line noise, but also to only capture the matches that you actually need, which can be helpful if you're wanting to pull out several bits of data with one regex.

What?

Now I'm angry that I didn't know about making non-capturing groups before. Because everything you said is correct.

# ? Jan 29, 2013 13:27

Daynab: Aug 5, 2008

Wheany posted:

Ah, okay, yeah, your filter function is busted.

This code:
JavaScript code:
var $links = $('a').filter(function(){
    return $('a').attr('href').match(regEx); // specifically this line
  });
Returns true when the href attribute first link in the page ( $('a').attr('href') ) matches your regex.

What you probably want is this:
JavaScript code:
var $links = $('a').filter(function(){
	return yourRegex.test(this.href);
  });

Thank you so much! I would've never found it as it never occured to me that was the issue, and I didn't know about test().

Thank you both for the regex explanations, I'm still a beginner but definitely enjoying learning them.

# ? Jan 30, 2013 05:43

Elston Gunn: Apr 15, 2005

I'm messing around with leaflet, specifically this example http://leafletjs.com/examples/choropleth.html
I'm trying to do something similar where a polygon is highlighted when clicked and then when a different one is clicked the style is reset for the first and the new polygon is highlighted. This code works when using the mouseover and mouseout events but I can't get the style to reset using the click event. It just keeps highlighting every polygon that is clicked.

code:

function highlightFeature(e) {
	var layer = e.target;
	layer.setStyle({
	weight: 3,
	color: '#666',
	// dashArray: '',
	fillOpacity: 0.7,
	fillColor: "#247A76"
	);
	info.update(layer.feature.properties);
	}

function resetHighlight(e) {
	geojson.resetStyle(e.target);
	info.update();
	}

function onEachFeature(feature, layer) {
	layer.on({
	click: highlightFeature				
	});
	}

geojson = L.geoJson(statesData, {
    style: style,
    onEachFeature: onEachFeature
    }).addTo(map);

# ? Jan 31, 2013 15:47

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Elston Gunn posted:

I'm messing around with leaflet, specifically this example http://leafletjs.com/examples/choropleth.html
I'm trying to do something similar where a polygon is highlighted when clicked and then when a different one is clicked the style is reset for the first and the new polygon is highlighted. This code works when using the mouseover and mouseout events but I can't get the style to reset using the click event. It just keeps highlighting every polygon that is clicked.
code:
function highlightFeature(e) {
	var layer = e.target;
	layer.setStyle({
	weight: 3,
	color: '#666',
	// dashArray: '',
	fillOpacity: 0.7,
	fillColor: "#247A76"
	);
	info.update(layer.feature.properties);
	}

function resetHighlight(e) {
	geojson.resetStyle(e.target);
	info.update();
	}

function onEachFeature(feature, layer) {
	layer.on({
	click: highlightFeature				
	});
	}

geojson = L.geoJson(statesData, {
    style: style,
    onEachFeature: onEachFeature
    }).addTo(map);

You don't call resetHighlight anywhere.

# ? Jan 31, 2013 19:21

Elston Gunn: Apr 15, 2005

Wheany posted:

You don't call resetHighlight anywhere.

I've tried calling it several different ways using the click event. It works fine using the mouseover and mouseout events like this:

code:

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

# ? Jan 31, 2013 21:01

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

Elston Gunn posted:

I've tried calling it several different ways using the click event. It works fine using the mouseover and mouseout events like this:
code:
function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

That code is saying "When you mouse over me, highlight me, and when you mouse out, un-hilghight me"

Your click code is saying "Highlight me!"

So imagine this: You click thing "A", and A is highlighted. When you click a different thing, "B" it gets highlighted. Nothing ever told A to un-highlight. You'll need to store a reference to the last clicked thing, and un-highlight it when you click on something else.

# ? Jan 31, 2013 21:51

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

It works (I'm assuming) because on mouseout resetHighlight gets called with an event containing the target element (e.target).

You have to save the previous element somewhere, like this, for example:

JavaScript code:

(function() {

var previousElement;

var highlightFeature = function (e) {
	if (previousElement) {
		geojson.resetStyle(previousElement);
	}
	var layer = e.target;
	previousElement = e.target;
	// etc

	};

var onEachFeature = function (feature, layer) {
	// as before
	};

geojson = L.geoJson(statesData, {
	// as before
    }).addTo(map);

}());

I didn't test this code at all.

# ? Jan 31, 2013 21:59

honky dong: Sep 2, 2011

I'm designing a survey within Qualtrics and am wondering how to add grayed-out text to a text entry box so that it says "Click here to begin typing. . . " When the text box is clicked, I want the grayed-out text to disappear. So pretty much how Facebook has their comment text box that says "Write a comment. . . "

In Chrome, I tried to "Inspect Element" to snag Facebook's code, but that didn't work in Qualtrics (I'm pretty clueless about this stuff and just try to find script that works. . . sometimes I get lucky. Sometimes).

Thanks for the help!

# ? Feb 2, 2013 10:16

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Borderview posted:

I'm designing a survey within Qualtrics and am wondering how to add grayed-out text to a text entry box so that it says "Click here to begin typing. . . " When the text box is clicked, I want the grayed-out text to disappear. So pretty much how Facebook has their comment text box that says "Write a comment. . . "

In Chrome, I tried to "Inspect Element" to snag Facebook's code, but that didn't work in Qualtrics (I'm pretty clueless about this stuff and just try to find script that works. . . sometimes I get lucky. Sometimes).

Thanks for the help!

Can you access the HTML for the survey? Using HTML5 attributes will cover most of the modern browsers. That I guess depends on what you expect your users' browsers to be. You have analytics on this from previous surveys?

code:

<input type="text" placeholder="Click here to begin typing...">

Otherwise you'll have to have a search around. There are libraries for it that work well cross browser, but you might not be able to use them yeah?

# ? Feb 2, 2013 10:34

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 04:29

honky dong: Sep 2, 2011

Maluco Marinero posted:

Can you access the HTML for the survey? Using HTML5 attributes will cover most of the modern browsers. That I guess depends on what you expect your users' browsers to be. You have analytics on this from previous surveys?
code:
<input type="text" placeholder="Click here to begin typing...">
Otherwise you'll have to have a search around. There are libraries for it that work well cross browser, but you might not be able to use them yeah?

Thanks, I'll have to try it tomorrow. My university's servers are apparently all down for maintenance at the moment. When creating a survey item, Qualtrics gives you the option of adding JavaScript for custom buttons and to advance to the next question after so many seconds, etc. I'm not sure that HTML works in the pop-up window that you can add JavaScript to. Hopefully it works. I'd like to believe that my survey participants are capable of locating the one box on the screen to type into, but I've learned to never make assumptions about how horrible at the internet some people can be.

# ? Feb 2, 2013 10:49

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

«‹›277 »