Am attempting to create a static navigation panel which becomes absolute at the bottom before the footer when reaching the end of the page content.
As I am developing for wordpress the page could be of varying height so I have attempted to trigger the absolute positioning when the nav panel “collides” with the footer.
So far I have used this code I found here
function collision($archive, $footer){
var archivexPos = $archive.offset().left;
var archiveyPos = $archive.offset().top;
var archiveHeight = $archive.outerHeight(true);
var archiveWidth = $archive.outerWidth(true);
var archiveb = archiveyPos + archiveHeight;
var archiver = archivexPos + archiveWidth;
var footerxPos = $footer.offset().left;
var footeryPos = $footer.offset().top;
var footerHeight = $footer.outerHeight(true);
var footerWidth = $footer.outerWidth(true);
var footerb = footeryPos + footerHeight;
var footerr = footerxPos + footerWidth;
if (archiveb < footeryPos || archiveyPos > footerb || archiver < footerxPos || archivexPos > footer) return Boolean = false;
return Boolean = true;
And used a global variable of Boolean to pass to this function
$(window).on('scroll', function() {
var scrollmath = Math.round($(window).scrollTop());
var archiveValue = scrollmath + 48;
var archiveBottom = archiveValue + 'px';
console.log('collision boolean', Boolean)
if (Boolean = false) {
$('#archive').css('position', 'fixed');
$('#archive').css('top', '48px');
} else {
$('#archive').css('position', 'absolute');
$('#archive').css('top', archiveBottom);
}
My problem is the if statement seems to be creating another Boolean variable? As when I comment it out I can see that the console reports the Boolean variable as expected. However when I leave it in and they collide this happens
Whats happened here?
The primary thing that's happening is that you're using = for comparison. JavaScript uses == (or ===), not =. = is always assignment.
But when testing the value of a boolean, you don't want == or != anyway, just use the boolean directly:
if (flag) {
// It was true
} else {
// It was false
}
Or if you're just testing for false:
if (!flag) {
// flag was false
}
(Note that because JavaScript does type coercion, that will also work with variables containing values other than booleans: Any truthy value coerces to true, any falsy value coerces to false. The falsy values are 0, "", NaN, null, undefined, and of course, false; all other values are truthy.)
Separately: Boolean is not a good choice for a variable name, as it's part of the JavaScript standard library (a function).
Also, your current collision function does two things:
It sets Boolean to true or false
It returns the value it set
In general, all other things being equal, it's best if a function doesn't have side-effects like that. If the caller wants to set Boolean to the return value of the function, he/she can, there's no need for the function to do it — it's already returning the value.
And finally: Global variables are, in general something to avoid. The global namespace on browsers is incredibly crowded and it's easy to get conflicts (for instance, a global called name may well not work as expected, because there's already a name global [it's the name of the window]).
no, your real Problem is, that you overwrite the constructor for the Boolean Type.
1st. stick to coding conventions: Only classes start with an uppercase-letter.
2nd. local vars have to be declared with the var-Keyword (or let for block-scoped vars, or const).
otherwise you reference a var from a surrounding scope; and in the end, the global scope.
3rd. the equal-sign:
=== means typesafe comprison
3 === 3 //=> true
3 === '3' //=>false
== means simple comparison
3 == '3' //=> also true now
= means assignment, not comparison
var foo = 3;
if it inside of some other code like
var bar = 42 + (foo = 3);
//it works basically like
var bar = 42 + (function(){
foo = 3;
return 3; //NOT FOO!!! not even foo after the assignment
})();
//the same way, that this:
var bar = 42 + foo++;
//works basically like this:
var bar = 42 + (function(){
var result = foo;
foo = foo+1;
return result;
})();
Related
I recently ran into some issues with a plugin and outlined the issue in this post: With operator & dashes in object keys and wanted to know if the modifications I've made below cover the scenarios that the with scope blocks would have covered.
I've modified some code to remove the with operator and I'm wondering if I've replicated everything properly in doing so.
Here is the original code:
var test = new Function('$f','$c','with($f){with($c){return{'+ declarations +'}}}'));
Where $f and $c are passed objects (From what I could tell, $f shouldn't ever have a property of $c). The declarations variable is a string that has a colon in it (EX: "value:color") and available within the scope.
Here is my modified code:
var test = function($f, $c, declarations) {
var result = {};
var value = "";
var split = declarations.split(":");
if (split.length < 2) {
throw new Error("Declaration is in an invalid format");
}
if ($f[$c] !== undefined && $f[$c][split[1]]) {
value = $f[$c][split[1]];
}
else if ($c[split[1]]) {
value = $c[split[1]];
}
else if ($f[split[1]]) {
value = $f[split[1]];
}
else {
value = "" + split[1];
}
var key = split[0];
result[key] = value;
return result;
};
Everything appears to work as it did previously, but this modification now handles the use case where the declarations variable could have a dash in it (EX: "value:background-color"). Additionally the declarations variable is passed into the function, to ensure it's defined.
I was wondering if it would be possible to compare an int "1" and a string "!0", and make the outcome true.
For example:
//Comparing 0 and "0" works...
var myVariable = 0;
var checkVariable = "0";
if(myVariable == checkVariable)
{
console.log('Works');
}
//Comparing 1 and "!0" doesn't work:
var myVariable = 1;
var checkVariable = "!0";
if(myVariable == checkVariable)
{
//I would LIKE this to be true!
console.log('This part doesn't work');
}
Any ideas on how to accomplish this?
I am open to suggestions, and "!=0" would also be fine as well.
//////////////////////////////////////////////////
Update:
So I'm trying eval now, and here are the results:
var myVariable = 20;
var checkVariable = "20";
eval(myVariable,checkVariable);
//Returns "20", which is ok I guess, but it would be nice if it returned "true"
var myVariable = 21;
var checkVariable = "!20";
eval(myVariable,checkVariable);
//Returns "21", which is ok, but it would be nice if it returned "true"
var myVariable = 21;
var checkVariable = "20";
eval(myVariable,checkVariable);
//Returns "20", which is *wrong*
Also tried this in chrome's javascript console (#Ishita):
var myVariable = 21;
var checkVariable = "!20";
myVariable == eval(checkVariable);
//Returns "false", which should be "true" :/
Don't use eval it's widely considered to be one of the worst parts of Javascript and isn't needed at all in this case. (see bottom of this answer for more info on that)
Something like this would be an appropriate solution:
JSFiddle: http://jsfiddle.net/CoryDanielson/zQjyz/
First, setup a map of checkVariables and functions that implement the expected comparison. All these functions do is accept a number and return true/false based on the result of a comparison.
var checkFunctions = {
"0": function(num) { return parseFloat(num) === 0 },
"!0": function(num) { return parseFloat(num) !== 0; }
};
Next, modify your if statements to fetch the proper checkFunction based on the checkVariable and pass the myVariable into that function.
//Comparing 0 and "0" works...
var myVariable = 0;
var checkVariable = "0";
if ( checkFunctions[checkVariable](myVariable) )
{
console.log(myVariable + " equals zero");
}
//Comparing 1 and "!0" doesn't work:
var myVariable = 1;
var checkVariable = "!0";
if ( checkFunctions[checkVariable](myVariable) )
{
console.log(myVariable + " does not equal zero.");
}
Don't use eval needlessly!
eval() is a dangerous function, which executes the code it's passed
with the privileges of the caller. If you run eval() with a string
that could be affected by a malicious party, you may end up running
malicious code on the user's machine with the permissions of your
webpage / extension. More importantly, third party code can see the
scope in which eval() was invoked, which can lead to possible attacks
in ways of which the similar Function is not susceptible.
eval() is also generally slower than the alternatives, since it has to
invoke the JS interpreter, while many other constructs are optimized
by modern JS engines.
There are safe (and fast!) alternatives to eval() for common
use-cases.
You can use "eval" function to accomplish what you want.
This works:
var a = 1;
var b = "!0";
if(a == eval(b))
{
console.log(true);
} else {
console.log(false);
}
Parse the string into an integer using parseInt
if(parseInt("1")!=parseInt("0"))
{
console.log('Try this');
}
This is a simplification of something that I've come up against in a larger project so I hope it makes sense.
I have two Objects:
FirstObj = {
data : [],
init : function()
{
for(var a = 0; a < 20; a++)
{
this.data[a] = 1;
}
}
};
SecondObj = {
init : function()
{
var cell = FirstObj.data[0];
cell = 0;
}
};
I then call the two init methods and log the results:
(function(){
FirstObj.init();
SecondObj.init();
console.log(FirstObj.data);
})()
Now, I was assuming - based on my basis in Actionscript - that the log would show an Array in which the first item is a 0 and the rest all 1 but the 0 does not seem to stick.
Why does the assignment of the 0 value not succeed here and yet works fine if, instead of cell = 0 I target directly at FirstObj.data[0] = 0.
I'm guessing this is a scope thing and I can work round it but I'm trying to get a proper understanding of how JS actually handles this stuff, especially when lumping code into Objects like this (as an aside, is this a good approach in peoples general opinion?).
Thank for any help.
Numbers in JavaScript are something called primitive value types (alongside strings, booleans null and undefined).
This means, that when you do
var cell = FirstObj.data[0];
You're passing the value in FirstObj.data[0] and not a refernece to it.
What you're doing is like:
var x = 5;
var y = x; // y is now 5
y = 4; // y is 4, x is still 5.
Of course, something like FirstObj.data[0] = 0 should work.
Array indexing returns values in Javascript, not references. It means that once data[0] is assigned to cell, further modification of cell will not affect data[0].
Assigning the array itself would result in the behavior you're looking for:
SecondObj = {
init : function()
{
var cells = FirstObj.data;
cells[0] = 0; // Will also affect data[0].
}
};
I have a script setup like this (http://jsfiddle.net/YD66s/):
var countFull = new Array(0,1,2,3,4,5,6);
var countActive = new Array(0,1,2,3,4,5,6);
function pickRandom(a) {
if(arguments[1].length == 0) {
arguments[1] = arguments[0];
}
var m = Math.floor(Math.random()*arguments[1].length);
chosen = arguments[1].splice(m,1);
return chosen;
}
setInterval(function() {
pickRandom(countFull,countActive);
}, 1000);
When I run this I want the variable to be set for that function only. Instead it is affecting countFull towards the end because I make arguments[1] = arguments[0]. How in javascript can I just reference a variable but not consume it and ultimately arguments[1] becomes arguments[0].
Hope this makes sense. This is driving me nuts how different javascript variables are compared to other languages like PHP.
Javascript arrays are just pointers so when you do arguments[1] = arguments[0] you actually just set the pointer but the underlying arrays are the same. As a result, every time you modify arguments[1] you also modify arguments[0]. To do what you want, you need to copy the array. You could do it this way:
if (arguments[1].length == 0) {
for(var i = 0; i < arguments[0].length; i++) {
arguments[1][i] = arguments[0][i];
}
}
To copy an array, instead of referencing it, use copy = original.slice(0).
I need to add i3c to my and statements. I don't know the correct syntax. This code is broken. Would an anonymous function be better? So if c0() passes, c4() runs, if c4() passes I need i3c() to run or what is in i3c to run.
function o1(a,b)
{
document.getElementById(a).value=b;
}
function i3()
{
var a=document.forms['f3'].elements,b='f3e';
c0(a,'Please enter both a tile and a url',b)&&c4(a[2],'Please enter a valid url',b)&&d0()&&s0('pi3a.php',is('f3'),s2);
o1(f3aa,'');o1(f3bb,'');
}
function d0()
{
var a=document.getElementById('Bb1c'),
b=document.createElement('a'),
c=document.forms['f3'].elements;
b.href=c[2].value;
b.name="a1";
b.className ="b";
b.innerHTML = c[1].value;
a.appendChild(b);
return 1;
}
The && (logical AND operator) is processed left to right. If any expression returns false, that value is returned. If all but the last one return true, then the value of the last expression is returned (whether it is true or false).
So if i3c is not being called, it is because the return value of one of the preceding calls is falsey, i.e. it type converts to false, so it might be 0, '' (empty string), undefined, NaN, null, ... I've probably left one out.
Edit
As patrick w commented, the line:
c.setAttribute("class","b");
will fail in IE. Don't use setAttribute for standard attributes, use DOM properties instead:
c.href = d[2].value;
c.name = "a1";
c.className = "b";
Faster and less bugy.
function i3() {
var e = 'f3e';
if ( !(c0(a,'Please enter both a tile and a url',e)) ) { return flase; }
if ( !(c4(a[2],'Please enter a valid url',b)) ) { return flase; }
(function() {
var doc = document,
a = doc.forms.f3.elements,
b = doc.getElementById('Bb1c'),
c = doc.createElement('a'),
d = doc.forms.f3.elements;
c.href = d[2].value;
c.name = "a1";
c.className = "b";
c.innerHTML = d[1].value;
b.appendChild(c);
// which a you need here ???
//var a = is('f3');
var someOtherA = is('f3');
//------------------------
s0('pi3a.php', a, s2);
// if these are part of the form you use in this function
// use
// document.forms[<name>].elements[<name>].value
doc.getElementById('f3aa').value = '';
doc.getElementById('f3bb').value = '';
})();
}
This may work, I suppose c0 and c4 return true/false. This way they are easier to read. If they return true, continue with the next one and don`t return.
In the i3c function you declare a twice!
Look at the comments for more details.