Develop Reference

jQuery: mouseover makes image visible that has the same last 4 numbers in their id as the trigger

I am currently working on a website and got stuck with the following problem:
On the website I have small dots (images) with the ids "dot0001", "dot0002", "dot0003", etc. . I also have hidden images (visibility:hidden) with the ids "info0001", "info00002", "info0003", etc.
I am looking for a jQuery solution. What I need is a code that allows the following events:
When users move the mouse over "dot0001" the image "info0001" becomes visible and when they leave "dot0001", "info0001" becomes invisible again. Same applies to "dot0002"-"info0002" , "dot0003"-"info0003" etc. So only the info-images with the corresponding 4 digit number become visible.
I gave it endless tries but got nowhere and there is not even a point in pasting my code.
Any help appreciated!

Something like this should work (though untested):
$('[id^="dot"]').on({
mouseenter: function(e) {
var infoId = this.id.replace('dot', 'info');
$('#' + infoId).show();
},
mouseleave: function(e) {
var infoId = this.id.replace('dot', 'info');
$('#' + infoId).hide();
}
});
That uses an attribute-starts-with selector to select all elements with an id beginning with "dot", then binds the event handlers to them. The event handler functions themselves simply replace the "dot" part of the id with "info" to form the correct new one, then show or hide the element as appropriate.
Don't forget to wrap that code in a DOM ready event handler so that it executes once the elements actually exist, otherwise it won't work.

Get all elements which id starts with "dot" and show/hide related "info" on mouseover/out:
$("[id^=dot]").hover(
function(){
$("#info" + this.id.substring(3)).css({"visibility":"visible"});
},
function(){
$("#info" + this.id.substring(3)).css({"visibility":"hidden"});
}
);
http://jsfiddle.net/EGBnR/

Accessing a dynamically created link with Javascript

I have a wall posting system on a social network that I am currently building which uses jQuery and Ajax to post the message to the wall and php saves it to the DB. After the post appears on the wall there are "comment" and "like" links. I am trying to bring down a comment box when the "comment" link is clicked, however I can't seem to access the element with javascript.
Here is the code to display the wall post:
var wall_post = '<li><div class="user_activity_feed_item_user_pic"><img src="images/temp/prof_pic_temp.jpg" class="avatar"></div><div class="user_activity_feed_item_title">Tyler Bailey</div> <div class="user_activity_feed_item_content"><p class="activity_feed_text">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name">' + sitetitle + '</p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div><div class="user_activity_feed_item_comment_bar"><ul> <li class="activity_feed_timestamp">July 16, 2012 2:08pm</li> <li><a id="comment" href="#">Comment</a></li><li><a id="like" href="#like_view">Like</a></li></ul></div></div></li>';
and here is the code I was trying to use to access the <a id="comment" href="#"> with:
//initiate comment box for status feeds
$(document).ready(function(){
$('#comment_wrapper').hide();
$('a#comment').click(function(){
$('#comment_wrapper').show();
});
});
Any ideas or tips on how I can get this working would be greatly appreciated!

Simply use event delegation, via on() for example:
var listEl = $('ul'); // parent of the newly added li element
listEl.on('click', 'a', function(e){
e.preventDefault();
// do something in response to a click on a link from within
// the newly-added content.
});
JS Fiddle demo.
The important thing to remember is that the element to which you bind, or assign or delegate, the on() method must be present in the DOM at the time of the binding/assignation. So work with the closest parent element of the newly-added elements that exists in the document on DOMReady or onLoad.

You can use on (falling back on delegate if you are using an older version of jQuery) to listen to all click events on a like or comment button:
var comment_wrapper = $("#comment_wrapper");
comment_wrapper.hide();
$(document).on("click", ".comment", function() {
comment_wrapper.show();
});
Don't use live unless you are using a much older version of jQuery that doesn't supply you with on or delegate. It is, if I remember correctly, the least efficient of the event listeners (aside from the bind method) for listening for an event coming from multiple elements.
Also, don't use an ID if there is going to be more than one element on the page with the ID - the ID needs to be unique across the document.

Since the links is produced dynamically use live()
$('a#comment').live("click", function(event){
//your
//actions here
});

jQuery fadeOut() Only Works Once

I am using jQuery to fade out a "notification" bubble I built. The first time the function is called it fades out just fine, but the second time the "notification" is appended to the body, but just sits there and doesn't fade out. Any help would be greatly appreciated.
Here is the Javascript that is being called.
if (pointsCalculated = 1) {
$('body').append('<div id="progress">' + pointsCalculated + ' point added to current points...</div>');
}
else {
$('body').append('<div id="progress">' + pointsCalculated + ' points added to current points...</div>');
}
//Reset calculator after adding to tracker
calcReset();
$("#progress").fadeOut(2000);

Try removing the element after the fadeOut:
$("#progress").fadeOut(2000, function() { $(this).remove(); });
More info:
.remove()
.fadeOut()

Javascript can´t find more then one element with an ID, and its already faded out when you want to run it again.
you can change the id to an class and then find all .progress that is visible and not animated to start the fadout on that item, and when its done you can remove it so you dont have to many .progress
$('body').append('<div class="progress">' + pointsCalculated + ' ' + (pointsCalculated === 1 ? 'point' : 'points') + ' added to current points...</div>');
//Reset calculator after adding to tracker
calcReset();
$(".progress:visible:not(:animated)").fadeOut(2000, function() { $(this).remove(); });
remember in javascript if you want to look if a variable is a value you will need to use at least two "=" else you will set the value to that variable.

You need to rebind the fadeOut event to the #progress element each time it is appended.

You must recreating your appended elements fadeOut binding when you add the element back to the DOM. You can create this binding immediately after the append and this should now work.

You code doesn't show you REMOVING "progress", so you're likely adding a new one each time. Since IDs much be unique, your code finds two and fails.

jQuery $("a").live() not capturing all new links

Capturing all links.
$("a").live("click", function() {
alert($(this).attr("class"));
});
jquery.truncate.js adds in this.
obj.html(str1 + "<div class='truncate-ellipsis' style='display: inline;'>" + options.ellipsisText +
"</div><div class='truncate-more' style='display: none;'>" + str2 + "</div>" +
"<div class='clear'></div>" +
"<a href='#' class='truncate-more-link'>" + options.moreText + "</a>"
);
But when i click the "showmore" on a truncate object (which is a description that exceeds some designated amount of characters), the click does not get captured! Any thoughts?
The content is added in through an ajax call to the server to get a bunch of peoples comments, the comments that run off into way to much get truncated! thanks

Use .attr('className') - the class attribute is called className in JavaScript since class is a reserved (yet unused) keyword. (jQuery automatically converts class to className)
And since empty alerts won't show up that's most likely the reason why you think your handlers are not firing. Actually, that's one of the reasons why console.log() is much better for debugging than alert() even though I have to admin I often prefer alert() due to it simply showing up without me having to open Firebug.
Another reason for your code not working could be a click() handler somewhere up the DOM tree which calls e.stopPropagation() and thus prevents the event from bubbling to the top where the live event's handler is listening.

Making all links inside of a div call the same function?

I'm trying to make a notification area that will show alerts.
return this.each(function() {
jQuery('<div class="' + o['className'] + '">' + o.msg + ' +
'X' + '</div>')
.appendTo(this);
});
This just takes a message pulled from the database, and shows it to the user. If the user clicks the X then it will call dismiss() which will mark it as being read in the database.
The thing is, if the message itself contains a link to another page or external site, I also want to call dismiss() before the user leaves the page. Is there anyway to alter this javascript to take all a elements (the X and any links that would appear in the message) and change the onclick to call the function?

You can rearrange your code a bit and use .delegate(), like this:
return this.each(function() {
var id = o["id"];
jQuery('<div />', { 'class': o['className'], html: o.msg })
.append('X')
.delegate('a','click', function() { $(this).parent().remove(); dismiss(id); })
.appendTo(this);
});
This uses the new jQuery(html,props) added in jQuery 1.4 to make the creation a bit cleaner (and faster! document fragment caching!). What it's doing is instead of attaching an onclick to the X, it's listening for a click from any <a> in the div and when it bubbles, it executes the same code as it used to only on the X anchor.

The code example is a bit vague, where does this o come from? Is it global or something div-specific?
At any way, you may find jQuery.live() useful for this. Once initialized, it will be applied on all future new elements matching the selector. You only need to have some parent element which is going to contain all of those divs with the messages and the links.
$('#someDivId a').live('click', function() {
// Do your thing here as you did in `onclick` attribute.
};
Just execute it once during onload.