The page having problems is...
http://schnell.dreamhosters.com/index.php?page=gallery#
I use Firebug to debug my jQuery and other code tidbits and it's been proving very useful for Javascript/jQuery debugging. However, at the same time, it's been one of the most frustrating debugging experiences I've ever gone through. I'm not sure why but sometimes it seems like I can copy someone else's methodology from a tutorial, character for character, and yet still come up with errors.
In any case, the problem here is that Firebug claims there is a bug on line 20 of the source.
missing : after property id
[Break on this error] $('#table').animate({"left: " + attr + "px"}, 2000);\n
This bug seems like a huge load to me because the colon is right there! And this is why debugging jQuery/Javascript is such a pain sometimes. The error messages are rather convoluted and sometimes don't even make a lick of sense to me. Or maybe that's just Firebug.
Either way, the goal I'm going for here is that I'm trying to dynamically change the animate function such that the more you click the left arrow, the further left the grid of images is shifted (due to the nature of the CSS 'left' property). I have Javascript variables and a hidden input tag to help hold essential values, but the major hurdle is getting the animate function to recognize these variables. Near as I can tell it will only accept string literals for arguments on how to animate and the documentation doesn't help me because it doesn't discuss the use of variables with animate, as if it's impossible.
Well, let's just say I don't like impossible, he likes to get in my way a lot.
The object literal passed to the animate function is not well formed, it should be:
$('#table').animate({left: attr + "px"}, 2000);
Edit: Looking closely to your code, you are also trying to get a value from an input with id = "count", and you have a missing # character to have an ID selector:
var count = +$('#count').val(); // get #count value as Number
You are also incrementing this count variable, but you should first convert it to Number, because the value attribute of input elements are string. (I did it using the unary plus operator on the right-hand side of the assignment).
You have to convert it to a number, because if you add two variables and one of them is a string, concatenation will take place:
"1" + 1 == "11"
Try:
$('#table').animate({left: attr}, 2000);
The "px" units of measurement here aren't necessary. That aside, the above is the correct creation of an anonymous object. You were just putting a string inside curly braces.
Related
I'm learning how to integrate Javascript into HTML, and I had an idea for some odd code. I can't say for certain if there is something wrong with it.
My goal was to create a counter that is displayed on the page that starts at 1 and increases every time a function is called.
My original code was something like this:
<p id="counter"></p>
<script>
var turn = 1, turn_counter = document.getElementById('counter');
turn_counter.innerHTML = turn;
function increase() {
turn++
turn_counter.innerHTML = turn;
}
</script>
The variable turn would keep track of a number, and turn_counter would keep track of the <p> tag. The contents of this tag were then set to turn. When the function increase() was called it would increment turn and then adjust the tag to match.
However I realized there was a potential simpler solution:
<p id="counter">1</p>
<script>
var turn_counter = document.getElementById('counter');
function increase() {
turn_counter.innerHTML++
}
</script>
This writes "1" inside the <p> tag and then sets the variable turn_counter to that tag. Then whenever the increase() function is called it simply increases the number inside the tag.
While both solutions work, I feel like there must be some problem with using the second one. Something about storing a variable inside an HTML tag doesn't feel right. So are there any problems with the second solution?
(Also if there are any better ways of doing this I'd be open to them. I'm still very new to this.)
While with the first solution you are actually storing a variable in Javascript in the second example you are making use of Javascript "quirks" but it's probably not what you wanted.
When you read the innerHTML of the counter div, Javascript finds a string number, as "1" but since "1" is shallow equal to 1, Javascript tries to apply mathematics to it and does what you asked.
Is it working? Yes.
Is it bad? Also yes.
But why is it working? It's working because of Javascript's type coercion and type casting based on that.
Why is it bad? It's not bad because of type coercion, it's not good because of the fact that you are saving your application state on the UI layer which is doable but not a good op.
You are not storing a variable in this case, you are just making use of Javascript weird behaviors. You could potentially parse the innerHTML to turn it into a number but it's yet far from a solution as you wouldn't properly save "state" for your javascript application, which is where to logic resides!
You could see HTML as the UI layer (unstyled) but you want to keep the logic (like variable declaration and usage) inside Javascript.
As proposed by #GrafiCode in the comments, you could
const whatAmI_1 = div.innerHTML + 1
const whatAmI_2 = div.innerHTML++
typeof whatAmI_1 // string, 11
typeof whatAmI_2 // number, 2
This is because the increment operator (++) parses the string, casts it to a number and applies the necessary incrementation while the + 1 is seen as a concatenation of strings as the second value (+1) gets parsed and casted to string by Javascript.
#Wiktor Zychla noted that maybe the word "quirks" is not explicative enough about the choices made by Javascript. Type coercion is not something bad or wrong, it's part of Javascript and if you know what it is and how to use it, you can do a lot of things.
I'm using Algolia's rangeslider from instantsearch.js with tooltips set to false. When the slider's maximum value is displayed (the value to the right side of the slider) (e.g: 2,000), I want it to display as (e.g: 2,000+) (with a "+").
I've tried accessing/resetting the value with jquery like this:
var $sliderMax = $('#my_slider_identifier .ais-range-slider--value').last();
And I've succeeded in getting a handle on the variable, but when I try resetting the maximum value from a custom widget's render() function (so it updates with each new set of results coming in) with the equivalent of $sliderMax.text('2,000' + '+'), nothing happens - I assume because the DOM is being re-written after my call..
If the rangeSlider is showing the maximum value (e.g: 2000), Is there a recommended way to put a '+' on the end?
EDIT:
To give more background: Though I have a range of values from 0-10,000+, the vast majority of the data is in the 0-2000 range, and I thus, truncated my data so that if it's >2000, it shows as 2000.
Also, incidentally and oddly, As a hack, I found that I can write to the DOM if I use a setTimeout of 0 ms (yes, there are stackoverflows on this) and re-do a JQuery selection:
setTimeout(function(){
$('#index_price_eur_day_i .ais-range-slider--value').last()
.text(MAX_PRICE_SLIDER + '+');}, 0);
I'd love to find a more-efficient solution.
I heard from Tim Carry of Algolia and he suggested that I try the :after pseudo element of CSS to fix this.
Indeed, I added this CSS and it always adds a + -- unfortunately even when the slider is not at the max value :/
#my_slider_identifier .ais-range-slider--value:last-of-type::after {
content: "+";
}
So it's not a perfect solution, but it may be "good-enough" - and it's not as ugly/inefficient as using jquery. If anyone has a better solution, please post it!
I am sure there is something simple that I am missing but I am stumped here.
The issue is that I am looping through an array of strings and using the string value to search for a part of that string using indexOf. The first time around the loop the index of is finding what I am looking for but the second time it is not.
Here is a fiddle - http://jsfiddle.net/jeremywrags/uSwjG/1/
the line that seems to be not working is this
var aliasIndex = fromclause.indexOf(" " + tableAlias + " " );
I am trying to build a SQL parser for a cloud app and the use case here is that when a table is aliased I need to get the original table name so that I can look up the table columns. The first time around the loop index of returns the index and then the table name. The second time around the index of is -1 and the table name is not retrieved.
If I need to provide more context please let me know.
thanks
It's not matching because on the second pass, tableAlias is the string " b" (note the space). So then you search for " b " (note two leading spaces), which isn't there.
Rather than using alert, use the debugger built into your browser. You can set breakpoints in the code, step through line by line, inspect variables, etc., etc. Doing that with this would have shown you, when looking at the variable tableAlias, that it had a leading space, hopefully helping you find the solution.
Here's what that looks like in Chrome's debugger, for instance:
(If you look at the jsFiddle source above the actual debugger's version, you'll see a debugger; statement in the code — normally you don't need that statement, you can just open your page, use the "Sources" tab to find your JavaScript file, navigate to the line, and click the margin to the left of it to set a breakpoint. But sometimes [for instance, when using jsFiddle], the debugger; statement is handy. What it does is, if the debugger is open, halts execution of the code at that point like a breakpoint does.)
I'm a beginner in jquery and ajax. While i was going through some example online, i came across the following piece of code and wondered what exactly it does.
lines = newLine.split('#');
jQuery.each(lines, function(lineNo, line) {
eval("linedata = " + line);
data.push(linedata);
});
I'm not a programmer, but just trying to understand its functionality. Can anyone help me?
The each function iterates over an array which is supplied as the first parameter. During each iteration the index and element are passed into a function that is performed. The function is passed as the second parameter to the each function.
Read more on the jQuery Documentation
In the example you have provided a string newLine is split into an array using # as the delimiter.
The each function then iterates over the newly created array, assigning the value of each element to a variable linedata and pushes linedata onto another array.
This could be more easily achieved with the following, since the call to eval is unnecessary:
jQuery.each(lines, function(lineNo, line) {
data.push(line);
});
I pretended, for a moment, that I was a new programmer. This is how you should go about looking into things from here on out:
1.) Ok, I don't know what this first line is doing. It's splitting something (based on the split word). Hmmm let's Google for "split javascript". This is the first thing that comes up. From here, you may be wondering what a String is, so you would search for that as well).
2.) Ok so now I know that splitting a String gives me an array (again you probably looked this up by this step) of the newLine substrings that were separated by the # character. Cool. So let's look into what jQuery.each does. I google "jQuery.each" and this is the first thing that comes up.
Awesome! Now you understand what a String is, an Array, the split function from String as well as what jQuery.each is. :D
EDIT: As you move forward, you'll realize that W3C is generally an inferior source of information. I simply linked to it since it was literally the first thing that came up when I Googled "split javascript". Overall it does the job for giving you a good overview of certain things when you're learning them for the first time.
I'm making a library, and I often inspect the result of Closure Compiler's output to see how it's doing things (I do have unit tests, but I still like to see the compiled code for hints of how it could compress better).
So, I found this very weird piece of code, which I never seen before.
variable : {
some();
code()
}
Note: this is not an object literal! Also, there is no ? anywhere that would make it a ?: conditional.
That code is in a regular function block (an IIFE).
variable, in this case, is an undefined variable. There's no code making it true, false, or whatever, and just to make sure, I put a console.log in there and indeed, I get a ReferenceError.
Please do note that I test my code in IE8 too, so this isn't just in modern browsers. It seems to be standard, plain old javascript.
So let's experiment with it. Firing up Chrome's console, I get this:
undeclaredVariable:{console.log('does this get logged?')} // yes it does.
trueValue:{console.log('what about this?')} // same thing.
falseValue:{console.log('and this?')} // same thing.
but then...
(true):{console.log('does this work too?')} // SyntaxError: Unexpected token :
...and...
so?{console.log('is this a conditional?')}:{alert(123)} // Unexpected token .
So what does it do?
thisThing:{console.log('is used to declare a variable?')}
thisThing // ReferenceError: thisThing is not defined
Please, I'd love it if someone could explain to me what this code is meant to do, or at least what it does.
It is a label
Provides a statement with an identifier that you can refer to using a
break or continue statement.
For example, you can use a label to identify a loop, and then use the
break or continue statements to indicate whether a program should
interrupt the loop or continue its execution.
Another common place you see it is when people stick the wonderful and useless javascript: on event handlers.
This is a label (the bit ending with a colon) followed by a block (the code surrounded by the curly brackets).
Blocks usually follow control statements, like if(...) { /*block*/ }, but they can also simply stand on their own, as in your example.
Labels allow jumping up several loops at a time with a continue or break; see the linked MDN page for several examples, such as:
var itemsPassed = 0;
var i, j;
top:
for (i = 0; i < items.length; i++){
for (j = 0; j < tests.length; j++)
if (!tests[j].pass(items[i]))
continue top;
itemsPassed++;
}
Here, top: is a label that code inside the inner loop can jump to, in order to escape to the outer loop.
For the sake of anyone who doesn't know what JSON is, and sees a colon in what might actually be an object, and is trying to figure out what it is, and finds this discussion, a colon is also used in JSON. There is a practice of embedding functions in a JSON object. Which might be confusing (As it was to me) for anyone who happens to see this for the first time. (Everyone isn't born with the knowledge of JSON and JavaScript programmed into their brains.) So if you find yourself at this discussion, and you think that every time you see a colon in JavaScript, that it's a label, it might not be. It might be that it's a colon after a label, OR it might be part of JSON. In fact, a colon in JSON being shown as a string, is a lot more common than a label. JSON in the form of an object, will be displayed as [object Object], with all the content hidden. So, unless the JSON is in the form of a string, and you display an object to the console (console.log(object)) all you will see is [object Object]. It is common practice to write JavaScript code, wrapped in an object. In that case you will see the JSON in the form of code. That's when you'll ask yourself, "What is this? and what is that colon for?" Then you'll find yourself at this discussion, and be told that it's a label, when it's really part of JSON. The topic of this discussion is worded: "Please explain this usage of a colon in javascript", and then the "correct answer" is marked as having to do with a label. The correct answer is that a colon can be used in more than one way. So, if you don't know what JSON is, or think you know (like I did, but didn't really understand) read about it here:
JSON.org
That is just a label.
you can use continue [label name] (or break) in a loop to go to a label.
More explanations of what they are can be seen throughout the interwebs.
it is used for labeling an statement in jsvascript.check more detail here.
the labeled statement can be used with break and continue later.