WarpConduit Computing

PHP’s in_array() vs. jQuery’s inArray()

by

This one stumped me for a bit when i was trying to use jQuery to populate checkboxes with a list of items pulled from a database using PHP.

The fact of the matter is that PHP’s in_array() returns a boolean whereas jQuery’s inArray() returns the index of the matching element, or if the element is not found it will return -1 or undefined, depending on the browser.

Problem

If you are used to using PHP like me jQuery’s inArray() can give you a headache when you are using the returned value of the function in an if-else condition. This is because -1 evaluates as true, when you really want it to evaluate as false.

Solution

Make it so that your if-else condition checks for a value >=0 (greater than or equal to zero). Since array’s don’t have negative indexes you’re safe doing it this way.

What did i learn from this? When working with a new function check the documentation for what type of data it will return.

jQuery.inArray Documentation

Example

<script>
	var myArray = ['a', 'b', 'c'];
	document.write(jQuery.inArray('a',myArray) + '<br/>'); //returns '0'
	document.write(jQuery.inArray('b',myArray) + '<br/>'); //returns '1'
	document.write(jQuery.inArray('c',myArray) + '<br/>'); //returns '2'
	document.write(jQuery.inArray('d',myArray) + '<br/>'); //returns '-1' or undefined
</script>

Create a Floating Menu with jQuery

by

Here is the code you can use to create a floating jQuery menu that stays where you absolutely position it on the screen. Make sure you have jQuery loaded on whatever page you use this. Try it out yourself, check it out on JSFiddle.

HTML

<div id="floatMenu">
<h3>Floating Menu</h3>
<ul>
	<li><a onclick="return false;" href="#">Menu Item 1</a></li>
	<li><a onclick="return false;" href="#">Menu Item 2</a></li>
	<li><a onclick="return false;" href="#">Menu Item 3</a></li>
	<li><a onclick="return false;" href="#">Menu Item 4</a></li>
	<li><a onclick="return false;" href="#">Menu Item 5</a></li>
	<li><a onclick="return false;" href="#">Menu Item 6</a></li>
	<li><a onclick="return false;" href="#">Menu Item 7</a></li>
	<li><a onclick="return false;" href="#">Menu Item 8</a></li>
</ul>
</div>

Javascript

<script language="javascript" type="text/javascript">
<!--//
$(function(){
	function moveFloatMenu() {
		var menuOffset = menuYloc.top + $(this).scrollTop() + "px";
		$('#floatMenu').animate({top:menuOffset},{duration:500,queue:false});
	}
 
	menuYloc = $('#floatMenu').offset();
 
	$(window).scroll(moveFloatMenu);
 
	moveFloatMenu();
});
//-->
</script>

CSS

#floatMenu {
	position:absolute;
	top:30%;
	left:10px;
	width:135px;
	background-color:#FFF;
	margin:0;
	padding:0;
	font-size:11px;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
}
 
#floatMenu h3 {
	color:white;
	font-weight:bold;
	padding:3px;
	margin:0;
	background-color:#006;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
	font-size:13px;
	text-align:center;
}
 
#floatMenu ul {
	margin:0;
	padding:0;
	list-style:none;
}
 
#floatMenu ul li {
	padding-left:10px;
	background-color:#f5f5f5;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
}
 
#floatMenu ul li a {
	text-decoration:none;
}