Jsfiddle has a feature that allows the user to resize windows for HTML, Javascript, CSS and results. I am trying to implement a similar feature on my website, with an article and comments. The comment panel moves horizontally to enlarge the comment section or enlarge the article.
In fact, I have a somewhat working drag and drop bar in jsfiddle itself (this is greatly simplified):
http://jsfiddle.net/Gp5as/2/
The problem is that the blue comment section is closed 25px, so when the panel is dragged to the right, the comment section is asymmetric.
There are two main parts:
<div class="main"> ... </div>
and
<div id="sidebar"> <span id="position"></span> <div id="dragbar"><div id="dragtext">Comments</div></div> <div id="comment-container"> <div id="comment"> Comments </div> </div> </div>
The main thing for the article, and the sidebar for comments. The drag bar is located inside the sidebar float: on the left.
I am wondering how to implement my drag and drop function for my own purposes. You can modify my jsfiddle example or create a jsfiddle example that can be easily cut and pasted.
jquery css jsfiddle
Eric
source share