Things I learned the hard way XIVII
$("#item_id > a")
$("#item_id > ul > li > a'")
Javascript Exceptions - testing for true - When is undefined actually undefined?
if (unreferencedVariableName) { alert('Impossible! an unreferenced variable cannot return true. In fact it cannot return at all!'); }
/* is as true as the unescapable pain and suffering of being an alive human being */ if (typeof(cowBoySuckMonkey) === 'undefined') { console.log('suck it!') } /* these are false - no if-fu for you! */ if (typeof(cowBoySuckMonkeee) != 'undefined') { console.log('suck it again!') } if (!typeof(cowBoySuckMonkeee)) { console.log('suck it for real!') } /* 'undefined is something I guess - just not what I wanted to test against */ if (typeof(cowBoySuckMonke)) { console.log('suck it nut gobbler!') } var cowboySuckMonkay = ''; if (typeof(cowboySuckMonkay) != 'undefined') { console.log('suck it empty string!') } /* no joy */ if (typeof(cowboySuckMonkay)) { console.log('suck it empty string, part duex!') } /* well, I guess an empty string is false - CaulkGobblin! */ if (cowboySuckMonkay) { console.log('suck it empty string, you still not true!') } if (cowboySuckMonkay == '') { console.log('suck it empty string, now you true!') }
comparison of Fixnum with String failed
Where the error occured
Rails 2.1.2 / bundle_fu / Javascript fileWhy the fu…?
A javascript files that ends with a line commented out. -1 is being compared to an empty string.Fix
Add a blank line at the end of the Javscript file(s) that end with commented lines.snipdbits
// both are the same if ( 0 == 0 && 0 === 0) alert('0 is equal to 0, and 0 is the same value and object type as 0'); if ( 0 == 0 && 0 === 0) alert('0 is equal to 0, and 0 is the same value and object type as 0');
jrails link_to_function hackaway
<%= link_to_function( "insert it", :id => 'foo') do |page|
partial = escape_javascript(render :partial => "my_partial", :object => Object.new)
page << "$('#my_div').append('#{partial}')"
end %>Sweetness.
imagemap rollovers with area shape="poly\
The document object model is sweet, sweet nectar dripping from the bosoms of the gods. The supa-genius cats who whipped that shit up are rock solid, grade A badassmotherfuckers.
It’s like this, all you gotta do to interact with the areas of your image map is a little javascript:
var map = document.getElementsByTagName('area');
Now there’s an objectHTMLCollection , or if you prefer, an array named map containing all of the area tags in the document.
My page has 6 area tags. I can read the id attribute from any of the objects in the map array by using the index like this:
map[0].idThe above would return:
northamericawhich is AWESOME! You’ll see why in a second.
Next up is to access and alter the background of the invisible gif I’m using as a mask to show small sections of the HUGE background image that contains all of the over states for my image map links.
I’ve conveniently given my transparent gif the id of mapimg so all I have to do to play with it is:mapbg = document.getElementById('mapimg');Now I have my transparent gif and it’s attributes all tucked inside my mapbg variable ready to be fondled and violated. Violate it I will.
I’m going to take the id from the area my mouse is over in the map array and use it to alter the className in my mapbg object.
Now the AWESOME part: the id ’s in my area ’s have corresponding classes in my css file! So by looping through my map array I can get the relevant area and feed it to the hungry ‘onmouseover’ and ‘onmouseout’ event handlers:function readMap ()
{
var map, i;
// get array of map area tags
map = document.getElementsByTagName('area');
for(i=0;i<map.length;i++)
{
map[i].onmouseover=function(){shift(this);};
map[i].onmouseout=function(){shift(this);};
}
}And then hand things over to the shift function for some background repositioning madness:
function shift (o)
{
var mapbg, id;
id = o.id;
mapbg = document.getElementById('mapimg');
if(id == mapbg.className){
mapbg.className = 'mapbase';
}else{
mapbg.className = id;
}
}
First up after I initialize my var’s is to grab the id attribute from where the mouse is and give it to a variable named id. The o* in that line is where ever the mouse is hovering on the image map. It was passed from *this inside our readMap function.
Then I get the current state of the image map’s background and test to see if I need to un-hover by seeing if my id and my className match. If they don’t I rewrite the className (class) of the transparent gif with the id attribute of the area the mouse is over.
So when you roll over North America:<img src="spacer.gif" usemap="#Map" class="mapbase" id="mapimg" />Would become:
<img src="spacer.gif" usemap="#Map" class="northamerica" id="mapimg" />and so on… It won’t work if I don’t call the function when the page is loaded:
window.onload=function(){
readMap();
}
The next iteration of this script would be to capture the initial class attribute of the transparent gif and store that for testing instead of hardcoding the default class value into the if statement of the shift function. Then the only thing needing to be changed to use this code with any image map is the getElementById() id value. As long as you have a corresponding class for each area’s id value it should travel from page to page rather painlessly.
Any comments from people smarter than me would rock as I’m new to this DOM/Javascript gig.
