Develop Reference

Append table with position is not exactly showing where it was

I am developing a website with Jquery-ui draggables. In the parent div block "container" there are many child draggables which allows user to freely move around the div block.
<div class="container">
<div class="draggable ui-widget-content" id="1">Table 1</div>
<div class="draggable ui-widget-content" id="1">Table 2</div>
...
</div>
I implemented a save function which saves the position of each div block as a json string. It stores the position of the draggables and their IDs. So it can be loaded with where they were at last time.
[{"id":"1","left":"256","top":"226"},{"id":"2","left":"256","top":"632"},{"id":"3","left":"1330","top":"226"},{"id":"4","left":"1330","top":"632"},{"id":"5","left":"818","top":"417"}]
Here's the problem:
I loaded the data from json. It turns out all the position is all wrong.
I recreated using JSFiddle to address the issue: https://jsfiddle.net/braveminds1823/wcmxL2bj/3/
Before saving
After saving, loading the position from json
Edit: I know setting the position to absolute works, but since my website is responsive. The draggables will break out from the container and cover up the web content

You can see from what you've provided in the question (not just the fiddle) that your stored values are not correct.
Looking at just "table" - when you load, it's 20x20, but when you move it further left and up, it's now 256x226 - so clearly not saving correctly.
Your issue is with your use of position
From MDN position:
relative
The element is positioned according to the normal flow of the document, and then offset relative to itself
so the inside squares do not want position:relative, they want position:absolute
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor
So two small changes, in the css:
.draggable {
position:absolute;
}
#containment-wrapper {
position:relative;
}
so that the draggable items are positioned absolutely, relative to the parent wrapper.
Otherwise, your code works fine.
Updated fiddle: https://jsfiddle.net/hrfx9sky/1/

CSS only smooth scrool with offset?

Im using the classic anchor tag approach to click and scroll to a specific div
<div id="scrollTo"></div>
The problem that im facing is that this approach scrolls till the div top margin in on the top of the screen. Is there a way of scrolling it only galf the way with css only, or I will have to use javscript?

You can use another element inside the div.
If you place a positioned element inside the scrollto div with a negative margin. The negative margin will be the offset you want. Make the inner element have a height of 0px, that way it won't be visible to your users.
You will need to put the id on that element of course.
<div id="olddiv">
<div id="scrollTo" style="margin-top: -100px"></div>
</div>

You can look at using an offset on the div you are using for the anchor:
offsetting an html anchor to adjust for fixed header

Understanding Skrollr data values

I am trying to understand the Skrollr javascript script library, and am having difficulty understanding data values, and how they differ between absolute and relative.
I have a background image on a div (about 2x taller than the div) that I would like to scroll down as I scroll down the page. Here is what I have so far.
<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >
What are data-top and data-bottom? As near as I can figure from the documentation, data-top is the top of the div #jumbotron. What I want is that when #jumbotron is at the top of the viewport, the background position is right bottom. Then, as I scroll and the the bottom of #jumbotron reaches the top of the viewport, I want the background image to be right top. This isn't happening. What am i doing wrong?

The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:
<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>
At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.
Regarding data-top, the readme on the skrollr repo says the following:
data-top: When the element's top is aligned with the top of the
viewport
I don't however see anything about data-bottom in the docs. I only see:
data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
So you might try:
<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >
Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.

Skrollr.js needs a data-attribute with two values.
The first describes the alignment to the viewport.
The second the edge (or center) of the element.
It can be a bit confusing, that both are named in the same manner (top, center or bottom).
You can further position the background with percentage values.
This way skrollr can transition between the values.
See this example.
https://jsfiddle.net/4frjantk/
<div class='section'
data-bottom-top="background-position: 50% 100%"
data-top-bottom="background-position: 50% 0%" >
</div>
PS:
The example contains a workaround for containers with 100% height as described here https://github.com/Prinzhorn/skrollr/issues/347

Overlay Div On Top of Img at Precise Location

I have checked other posts but none mentioned about a precise location to overlay.
Consider that I have an image, for eg. a traffic light. I need to overlay (not sure if this is the correct term or not) a div on top of the precise location of, the green lamp, for example. This is so that I can animate the div via jQuery to change the colour of the div in order to have an effect that the image is being animated.
The problem now is how to be precise in this, so that the location of the div completely matches that part of the image? Does it mean having to measure the pixels before setting the top and left of the divs? Or is there a smarter way?
I have considered other options such as using canvas (or svg, or silverlight) to redraw the whole thing instead of embedding the image (i.e. redraw a whole new traffic light picture). However, for this I believe it will be way more complicated than what I asked. Correct me if I am wrong here.
Please advise.

One way is to put the image inside a div which is either positioned relative if you want it to be inline with other elements or positioned absolute if you want to set its position on the page. Then position absolutely the overlapping div inside the same div as the image.
for example
Styles
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
Body
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
You will need to adjust the width, height, left and top of the div with id='over' as necessary.
You could replace the div with id='over' with an image use position absolute on this image and set left and top as needed.

GUI items and elements in Javascript

How do i make boxes similar to theses? I would like a X on the top right. Text on the left of it and the text below the image where the black area is. When i click on X it will remove these and the box on the right moves over and takes it place. How might i create this using jquery? is there some kind of GUI and container i could use to automate boxes moving when i close/delete them and etc

If you don't want any fancy animation effects with sliding and such, it's actually just a little CSS:
<style>
.itembox {float:left;}
</style>
If all the boxes' widths fit evenly into the container (say, they are each 100px and the container is 300px wide) then they will stack up next to each other until they reach the bounds of their container, and then wrap left and stack again.
<div class="itembox"> x ... </div>
<div class="itembox"> x ... </div>
<div class="itembox"> x ... </div>
Setting display:none will remove that one from the document flow and hide it, so the ones after it will collapse back. In JavaScript, on the click event for the close button, set the appropriate itembox's display to none:
$('.itembox .close').click(function() {
$(this).parent('.itembox').hide();
});
In jQuery, hide() sets display:none.