Alexandru Dinulescu's Thoughts» Javascript

Javascript Max Random Numbers

Dinulescu Alexandru Adrian — Sun, 14 Feb 2010 21:37:31 +0000

Greetings

This is another short and sweet posts, basically it involves using the Math. function to do some nifty tricks

Lets say that you want to get a random number between 1 and 10 and you dont know how. Well the answer is quite easy and it involves combining 2 Math. functions. Math.floor() and Math.random().

Math.random()

This function takes a random number between 0 and 1

Math.floor()

This function rounds a number down to it’s smaller number, for example. 4.4 would become 4, 4.6 would become 4 as well, -4.1 would become -5 as well as -4.6 would become -5 as well.

// random number between 0 and 1 //
$(document).ready(function(){
var x = Math.random();
$("body").append("

");
$(".alpha").text(x);
});

// random number between 0 and 10 //
// the * 11 part is the max number you can roll, you put 11 because 0.9 x 11 is less than 11 so it will be
// rounded down to 10,
$(document).ready(function(){
var x = Math.floor(Math.random() * 11);
$("body").append("

");
$(".alpha").text(x);
});
// however you can get also a 0 number because 0.0(something) will be rounded to 0
// in order to prevent that we add a +1 like this. this means that you will have numbers between 1 and 11
// so we have to make it * 10 instead of * 11
$(document).ready(function(){
var x = Math.floor(Math.random() * 10) + 1;
$("body").append("

");
$(".alpha").text(x);
});

MenuMatic BUG

Dinulescu Alexandru Adrian — Thu, 04 Feb 2010 20:35:03 +0000

Hello

This issue only happens with menuMatic and with vertical set menus. Basically in all IE browsers the sub-nav-menu didnt show up correctly.

And another thing, when you have link tags inside li tags, you need to float the li tags in IE else you get a hidden spacer there (vertical lists only). and the menu looks very odd. This is old IE6 issue, seems like both IE7 and only IE8 fixed it. Fuck that shit.

When in doubt, float it then clear it. This triggers hasLayout behavior and stuff gets fixed by itself. With that issue done i had another issue when the menu looked out of place. In order to fix that you need to open the menuMatic source file and look for fixHasLayoutBug: false, and change it to true.

On the developers site it works with it set to false, i really have absolutely no ideea why it gets triggered in my projects (2 out of 2 projects) and not there and to be honest i really cant be arsed to look into it. The CSS on both sites regarding to the menu matic is quite identical. I would have switched to something based on jQuery but unfortunately there isnt anything like that currently on the market., or from what i could find. Going with the noConlict() thing really annoys the hell out of me

In sum if it looks borked in IE then a) float the links b) float the li tags and c) set fixhaslayoutbug: true, in the menuMatic.js file. And if you still have issues in IE8 because thats where I had the main issues, then you need to do the following. Look where your vertical navigation menu is placed and make a new CSS and load it only for IE8. in that css go to #subMenusContainer and at the top: property modify it so it looks just right. If needed you can also play with the .smOW class at the margin property in the same CSS below are a few images with the before and after

In my example I set the #subMenusContainer top: property to 222px and the .smOW margin-left to about 20ish px

IE8 Before

IE7 Before Has Layout

jQuery 1.4 Annoying Bug

Dinulescu Alexandru Adrian — Mon, 25 Jan 2010 16:19:39 +0000

Hello

This post is going to be short and sweet. Basically jQuery 1.4 launched a couple of days ago and i thought i’d move my blog from 1.3.2 to 1.4 and lo and behold JS Error.

I was going like WTF, and after trying to debug it for like 15mins i come to the following conclusion. From my own personal experience, in jQuery 1.3.2 when you wanted something to happen to an element you went like this. Since i use WordPress for as my blogging platform not everytime the .elementClass element was present.

$(document).ready(function(){
var el = $(".elementClass");
$(el).doSomethingHere();
alert("i'm a jQuery nublet");
});

The JQuery parsed the XHTML code and if it encountered the stuff.elementClass item, then the script would run, else it will just return Null and be on it’s way to the next thing which in our case is an alert().

Now in JQuery 1.4 something very odd happens, or well, at least it happened to me. Basically when i ran the same script but now with jQuery 1.4 it returned in the firebug js console $(el).doSomethingHere() is null and the entire chain blocked. Of course this is extremely bad because that condition was on line 5 of my blog. WHICH WAS NOT AWESOME.

Anyways in order to fix this sort of weird behavior pattern you first have to CHECK if the element exists on the current page, and then APPLY stuff to it. So our code transforms itself into something like this.

$(document).ready(function(){
var el = $(".elementClass");
if ($(el).length > 0 /* this can also be written as $(el).length >= 1 */){
$(el).doSomethingHere();
alert("script ran");
}
alert("i'm a jQuery nublet");
});

And in case you have more than 1 of the same element you can chain it using the .each() function and the code transform itself into this

$(document).ready(function(){
var el = $(".elementClass");
if ($(el).length > 0){
var thisEl = $(this);
$(thisEl).each(function(){
var thisEl = $(this);
$(thisEl).doSomethingHere();
});
}
alert("i'm a Jquery nublet");
});

Gotta love updating to a new version… jeez

Javascript Comparing Numbers

Dinulescu Alexandru Adrian — Thu, 14 Jan 2010 22:23:53 +0000

Hello

This post is a very straightforward one, basically it involves using javascript to calculate the lowest or highest number from either an array or from some definite variables.

One of the very useful possibilities of this is calculating the height and width of more than 3 columns and equalizing everything to the highest.

To achieve this we can use the Math.max() property and the Math.min() property.

The Math.max() Property

This property compares all the numbers presented and extracts the highest one. It can either be used as a simple stand-alone property like this:

var var1 = 20;
var var2 = 30;
var var3 = 40;
var maximum = Math.max(var1, var2, var3);
// or like this
var maximum = Math.max(20,30,50);

Or we can set up an array and use it a number array to feed numbers to it. Such an example would look like this, however i mention that i couldnt get this example to work. I learned Javascript by learning jQuery, not the other way around.

Array.prototype.max = function () {
return Math.max.apply(Math, this);
};

var max = [1,2,3,4,5,6].max(); // 6

The Math.min() Property

This property does exactly the opposite of what Math.max() does, as in extracting the lowest number from a set array. The code is almost identical but for keeps sake here it is

var var1 = 20;
var var2 = 30;
var var3 = 40;
var minimum = Math.min(var1, var2, var3);
// or like this
var minimum = Math.min(20,30,50);

Array.prototype.min = function () {
return Math.min.apply(Math, this);
};

var min = [1,2,3,4,5,6].min(); // 1