Develop Reference

Script affecting all images instead of only images in div that contains certain text (jQuery)

I've tried editing this code a number of ways (using if statments and each statements) with nothing working. The idea is so simple; if a div contains this specific text, I want to change the src attribute of the image in that div only.
I can't seem to figure out what I'm missing. The code below changes all the images in all divs with that class rather than just the ones that contain the specific text. I've tried to work in 'this' but apparently don't understand how it affects the function.
$(document).ready(function(){
$('.my-content').filter(':contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
Could someone kindly point me in the right direction of what I need to change to make the script target only images in the div that contain the text instead of all div with that class because one of the div did contain that text (I think that's what triggers it; I may be off about that too).

Try this:
$(document).ready(function(){
$('.my-content:contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
See jQuery :contains docs
Edit
Actually I think your answer should work as well. Seems to work fine in this jsfiddle, can you post your markup?
$('div').filter(':contains("Top")').css("color", "red")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Top</div>
<div>Right</div>
<div>Bottom</div>
<div>Left</div>

Removal of link using JQuery

I am trying to do a very simple task but I cannot seem to figure it out. I am trying to write a function that will remove a link without removing the text associated with it. Here are the specifics:
Categories[/CODE]
I am trying to remove everything EXCEPT the text "Categories", I just want to remove the href tag. I would even be willing to rename the title "Categories". I just want to link gone. This link is in a div called "mw-normal-catlinks" and it is the first link in the div. I do not want to remove the other content in that div.
I am very new to jQuery and so far I have an idea of what to do. This is what I got:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#mw-normal-catlinks a.first').replaceWith('Categories');
</script>
Now I am not sure if I am missing anything because when i put this in my HTML code, nothing happens. I'm not sure if I need to add a div to make it work.
I want to eventually implement this into a PHP coded tool I use to convert wiki pages to html so maybe I will need to add some sort of div?
Thanks everyone!

Use .unwrap()
$('#mw-normal-catlinks a.first').contents().unwrap();
Also you probably want this selector instead since your a tag doesn't have a class of .first:
$('#mw-normal-catlinks a:first-child').contents().unwrap();

.first means "A member of the class first", you might be confusing it with :first-child or :first-of-type

jQuery sliding gallery issue

I am using this photo gallery from Codrops to display the images. Instead of manually inserting the image links into the html, I'm using a PHP script to display the images from a directory. I am trying to call the php script using jQuery - something like this:
HTML:
<div id="thumbsWrapper">
<div id="content">
<?php /* include_once('display.php'); */ ?>
<div class="placeholder"></div>
</div>
</div>
jQuery:
$('#content').load('display.php');
However, that breaks the gallery and although it displays the images, nothing happens when I hover or click on the image. Firebug throws the error:
no element found.
Where am I going wrong?

I believe load will replace the contents of #content, which includes <div class="placeholder"></div>. If that div is needed for the gallery then it won't work.
Something like this should fix it:
$.get('display.php', function(data) {
$('.placeholder').before(data);
});
In addition, make sure this call to load happens before you initialize the gallery. If you initialize the gallery first and then add these images, depending on how the gallery is coded, it may not work.
Finally, what was wrong with the approach of loading it through the php (I see you commented it out). Seems like a good way to go to me.

use livequery plugin for newly added dom elements to work and function the same. livequery

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage

Displaying a progressbar or error message in a fancybox

Here is what I have in my member.php for my fancybox:
<script type="text/javascript">
$(document).ready(function()
{
$("a#uploadpage").fancybox({
'titleShow' : false
});
});
</script>
.
.
.
<a id="uploadpage" href='uploadpage.php'>Change Image</a> <br/>
This works perfectly, and by perfectly I mean it opens the fancybox containing the php code in uploadpage.php. Once the user pushes the submit button in uploadpage.php to upload there image I want it to either display an error message(invalid file type or file size too big), or a progressbar if the image is a valid file type and below 1MB. How do I do this within the SAME FANCYBOX? (I have the code for the error messages and progressbar already so I just need to know how to either refresh the fancybox or how to use javascript to accomplish this.)
Thanks a lot, I greatly appreciate it.
-Matt

I don't know if this will work, I've never used fancybox the way you are trying to use it, but, here's my suggestion: you could try using a class name instead of an ID. The anchor would be <a class="uploadpage" ...> instead of the id you use now. Also, change
$("a#uploadpage").fancybox({
to
$("a.uploadpage").fancybox({
fancybox makes a new instance of the box for each invokation when using id. It tries to reuse it if you use class names instead. Also, could try marking with a rel="myuploadbox", i.e.
<a rel="myuploadbox" class="uploadpage" ...>
Fancybox uses the rel attribute to group related things together, this might keep it from closing the box on your submit. Also, wrap everything you want inside that same fancybox in a div tag with the same rel attribute (I don't know if it would be supported that way by fancybox.. give it a try).