Develop Reference

JavaScript: backgroundImage isn't changing with onMouseOver

I'm pretty new to JavaScript, and I'm trying to figure something out. I have a series of images within a table, and I'd like each image to display within a div element when you hover over one. The problem is, the code doesn't appear to be doing anything. I hover over the div element, and no changes are being made to the #bigdisplay element. If I replace the backgroundImage with a property such as color, it works completely fine. What am I doing wrong? This is the code for my div element.
<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>
If I must provide any other code from my site I will (although I don't believe any of it is relevant). Any help would be greatly appreciated! Thank you!

Your code is fine. I separated the js just to make it easier to read. Your problem is either you have no height to the div or your path is wrong
function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}
html,body,div{
height:100%;
}
<div id="bigdisplay" onmouseover="test()">
test
</div>

You're not properly escaping the string in the attribute. Attach the listener in Javascript instead, rather than in HTML attributes (which is as bad as eval) and it'll be easier to read and write:
const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});

I think one problem is that you used single quote to quote 'images/Slideshow1.png'. But you used single quote also for 'url('images/Slideshow1.png')'. So there is a conflict. Try 'url("images/Slideshow1.png")'. A part for this I find better to define the event handler function in the js document linked to the html document.

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>

Add div to table column

Is it possible to add a div-element to a table cell/td by using jquery?
In my HTML code I have have div called s (just for testing):
<div id="s">12</div>
In my $(document).ready(function(){ function I I have added the following $("#sale_graph1").html('<div id="s"></div>'); where sale_graph1 is the id of the <td>/cell i want to add the <div>-element to. The cell gets populated with text if I write $("#sale_graph1").text
so I know it is the right cell I'm operating on. But when trying to add the div content nothing shows up in the cell.
Thanks for any help!

This working just fine. See here: http://jsfiddle.net/va5gr/
$('#sale_graph1').html("<div id='s'>12</div>");
(I've added the css to make it more visible)
If however you want to use the contents of your existing div#s then you can do this:
$('#sale_graph1').html($('div#s').html());

Try this code:
$("#sale_graph1").append($('#s'));
and ensure that you have only one element called sale_graph1

After this line:
$("#sale_graph1").html('');
You can add stuff inside your div doing this:
$("#sale_graph1 #s").text('12'); //to add text
or
$("#sale_graph1 #s").html('12'); //to add text with html content

Is this what you want:
$("#sale_graph1").html($('#s').html());

It seems the code is right? But I think maybe some errors at some place.
You can check it like as follow:
1. check if you got the right dom
console.log($('#sale_graph1').length);
insure that you can get '1' in the debugger tool's console
if you pass first step, then you can do
$("#sale_graph1").html('<div id="s">some text</div>');
to make sure you add some text in div#s
then if it dosen't work, you can say the four words;

what is the code to enable HTML input box that has been disabled, using javascript only, not jQuery

document.getElementById(boxname ).disabled=false;
doesn't work.
document.getElementById(boxname ).removeAtribute('disabled');
doesn't work.
What will work? javascript only no jQuery etc. please.
<input id="boxname" />

Setting the disabled property to false is the way to go, you just have to first select the element. To do that, pass an ID string to getElementById:
document.getElementById('boxname').disabled = false;

document.getElementById(boxname)
supposed to be
document.getElementById('boxname')
You are missing the Quotes in there. Id should be passed as a string.
OR
var boxname = 'boxname';
// Now you can pass in without any Quotes
document.getElementById(boxname)

Actually Sometimes works when code placed in a particular place in the script
See my rotation code: http://jsfiddle.net/crownabhisek/kPybv/42/
Here, in the script section, in the rotate() function, when the document.getElementById("rotation").removeAttribute("disabled"); is written in the 1st place where I've inserted a comment, it works. But in the 2nd place where I've inserted a comment it doesn't work.
No clue why.
But the code to disable is indeed document.getElementById("rotation").removeAttribute("disabled"); and it should actually work.

Removing appended html using jQuery?

Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.

empty() is always an option
jQuery('#main').empty();

Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/

I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.

Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.

It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();