We Keep Coding

I am moving series of div's which is inside the container using jQuery using a button

Series of div's which is inside the container. If button click train should move.
<script>
$('document').ready(function(){
$("button").click(function(){
$("#train").animate({left: "300px"}, 2000);
});
});
</script>

Your #train may need absolute positioning. Consider the following example.
$(function() {
$("button").click(function() {
$("#train").animate({
left: "300px"
}, 2000);
});
});
#train {
width: 100px;
height: 30px;
border: 1px solid #222;
border-radius: 6px;
background: #ccc;
position: absolute;
padding-top: 8px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<div id="train">Train</div>

How do I make an image fade in sideways (left to right side & vice versa) in JQuery?

So far I know you can make it statically fade in like this:
$("#element").fadeIn()
I want to make an image fade in in a sliding sideways sort of way like when a curtain at a show get pulled to the side and the background for the performance is revealed (not stretching, but fade-sliding).

Here is a sample example that I can provide. If you have doubt, leave a comment.
$(document).ready(function() {
$("#hide").click(function() {
$("#panel").hide("slide", {
direction: "left"
}, 1000);
});
$("#show").click(function() {
$("#panel").show("slide", {
direction: "left"
}, 1000);
});
});
#panel {
height: 100px;
padding: 50px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#hide {
padding: 20px;
width: 200px;
background: red;
color: white;
}
#show {
padding: 20px;
width: 200px;
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="hide">Click here to Hide the Pannel</div>
<div id="show">Click here to Show Pannel</div>
<div id="panel">This is your pannel</div>

text wont activate js and css animation

I'm not the best with javascript and I've been asked to include it in a page I'm creating. I'm nearly there, getting a box containing a video, to slide over the screen from above and create a dark overlay. I can only get it to work using an image. I want to activate it from a href text link. I've looked everywhere, but everything I see uses the same method, using an image. Can someone help please?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->

Either you need to add the text inside the original "activator", or create another one.
Try this:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
And in your JS change
$('#activator').click(...
To:
$('#activator, #activator2').click(...
Now, both activators will trigger your script that makes the overlay show.
Also, in your CSS, you have a.activator while in your HTML is id="activator", but that might be just a typo.

Getting inline HTML/JavaScript popup to appear in the middle of screen regardless of resolution

I am using the following Javascript and CSS to create popups:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target",
});
});
</script>
#popup
{
width: 400px;
height: 250px;
overflow: scroll;
background-color: #EAFDB3;
border: solid 2px black;
}
#popup2
{
width: 400px;
height: 250px;
background-color: #EAFDB3;
border: solid 2px black;
}
The location these popups appear is done with:
<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>
The content of the popup goes between:
<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>
How can I get this popup to popup in the middle of the screen regardless of resolution?

Set top to 50%, left to 50%. Then have a negative left margin that is half of the width of the popup, and a negative top margin that is half of the height of the popup. What you have seems to be close...
But margin-top should be -125px and margin-left should be -200px, given a popup that is 400x250 in size.

For dynamically-sized popups, consider wrapping your content in div.vc-outer and div.vc-inner.
CSS
.vc-outer {
display: table;
position: fixed;
width: 100%;
height: 100%; }
.vc-inner {
display: table-cell;
text-align: center;
vertical-align: middle; }
.popup {
display: inline-block; }
HTML
<div class="vc-outer"><div class="vc-inner">
<div class="popup">Hey!</div>
</div></div>

You are giving inline style(even same property) as well as using ID. I will suggest to do this only once and that to using ID.

Alert when div height changes

I've been searching all day for this but i can't figure it out myself..
I have a shopping cart that you can add items to. The shoppin cart is in a drop down so you have to click it in order to view it. Therefore, everytime you add an item to the cart i want to display "+1", "+2" and so on, somewhere and when u click on the drop down it would disappear so it can start over counting.
So, i thought that when the div's height changes it could display +1.
But, i don't know enough javascript to do this....
My html:
<div id="button">Button</div>
<div id="chartdropupcontainer">
<div id="chart">
<button>test</button>
<script type="text/javascript">
$("button").click(function () {
$("#testp").hide();
});
$("#chart").bind("resize", function(){
alert("test");
});
</script>
<p id="testp"></p>
</div>
</div>
</div>
My Css:
* {
padding: 0;
margin: 0;
font-family: Helvetica;
color: white;
}
#chartdropupcontainer {
width: 200px;
background-color: red;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
padding: 0 5px 0 5px;
margin-bottom: 47px;
z-index: 998;
}
#chartdropupcontainer h1 {
margin: 5px;
color: black;
cursor: pointer;
}
#chart {
width: 100%;
background-color: black;
height: 400px;
overflow: auto;
}
#button {
background-color: blue;
cursor: pointer;
padding: 10px;
width: 190px;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
z-index: 999;
}
My javascript:
$(document).ready(function() {
$("#button").click(function () {
$("#chartdropupcontainer").slideToggle("slow");
});
});
And here is a link to an online version: http://www.rutgerinc.nl/niels/
Edit: sorry, bit inpolite!
Could anyone please help me with this?

First off, the resize event is when you resize a window so that's why your event is never firing.
http://api.jquery.com/resize/
I think you need to alter the bit of code where the item gets added to the basket. Isn't there more javascript somewhere to add things to the basket in the first place?
An event-driven approach like BGerrissen suggests would be perfect because you can fire one or more independent functions when the user adds something to the cart.
As you are using jQuery, custom events are quite easy. You use trigger to fire the event and then bind to listen for it.
http://api.jquery.com/trigger/