Develop Reference

How to properly append html into a div, so if the div becomes too large in height, I can scroll its content

I need to append the html content retrieved
from a url inside a div.
This is my html code:
<div id="top-container">
<div id="views-container">
<div id="html-container">
</div>
<div id="original-page-container">
</div>
<div id="result-page-container">
</div>
</div>
</div>
and the script to get and paste the page content is:
$.get("http://alf.wikia.com/wiki/ALF_Goes_Wild", function(data) {
$("#original-page-container").append($(data).find(".WikiaMainContentContainer").html());
});
this can get and paste the data succesfully inside the div, the problem is that the new html
exceeds the dimentions of the original-page-container div and I need that all the retrieved content fits
the dimensions of the div, if the height is greater, I should be able to scroll the div.
I hope I explained myself clearly.
This is the jfiddle (the script works in my browser with the internet security disabled):
http://fiddle.jshell.net/dc5pQ/
Thanks in advance!

just apply overflow:auto; to that div.
That way: The scroll will appear only when the data is bigger then the available space.
Notice that a div become scrollable only if he have some height or max-height, otherwise he will just grow long to fit his content.

CSS placing elements without affecting one another dynamically using javascript

I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot

Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps

Create overlay for DIV inside overflow:hidden DIV without clipping

Hi all. I'd like to be able to highlight a div inside a container DIV that has overflow:hidden set (changing this is not an option). I'm using the CSS 'outline' and 'box-shadow' properties to do this. The issue is that when the DIV is the full size of the outer div, you can't see that it's selected as the outline is (unsurprisingly) clipped to the outer div. Also, if the inner div is against one of the edges the issue occurs.
The attached images shows the layout of the divs, red is the outer div, purple the 'outline' and black the DIV I want to highlight - in that example the purple highlight to the left is clipped.
So the question is, is there a way (JavaScript & jQuery are fine) of overlaying the black div with another div such that (a) the overlay div isn't clipped to the outer div, and (b) when the black div moves or is resized, the overlay moves/resizes with it?
EDIT: It looks like this simply isn't possible in HTML/CSS in the way I described.

Set theblack div to "positon:relative". Then put the outline into that div, and set it with "position:absolute". With top,left,with and height you can put it "around" the black div.
Edit:
Sry, the black div has to be position absolute, too. Working example see here:
http://jsfiddle.net/t94FV/

Maybe you can use margins with percentages.

The trick is in only parent cover div with relative position. No position:relative children of overflow:hidden div. Only parent!
<div class="trick-container" style="position:relative">
<div class="overflow-hidden" style="overflow:hidden">
<div class="no-relative-position-1">
<div class="no-relative-position-2">
<div class="no-relative-position-N">
<div class="position-absolute" style="position:absolute"></div>
</div>
</div>
</div>
</div>
</div>

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.

Shifting elements in a div with overflow auto

I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?

You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..