Databases
StackOverflow2013
Postsdbo
POArranging div boxes inside another div box to be flexible for small and large screen widths
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POArranging div boxes inside another div box to be flexible for small and large screen widths
    text
    copied!<p>I'm trying to create a feature to allow users to drag div boxes around and then update the database with the style so when they come back to the page it remembers their positioning and places the boxes in the right spot (relative to the parent div).</p> <p>I currently have this working, however, if the user positions the boxes using a screen width of say 1600px and then opens the page on say their iPad or a smaller screen size of say 1000px then the boxes dissapear if they are positioned too close to the parent border.</p> <p>I need some help figuring out how to arrange div boxes inside the parent, but make it so its flexible when they go to a different screen size the boxes will still be there.</p> <p>I created a jsfiddle to simulate the situation.</p> <p><a href="http://jsfiddle.net/VN4hw/" rel="nofollow">Jsfiddle link</a></p> <p>HTML COde:</p> <pre><code>&lt;div id="dashboard_wrapper"&gt; &lt;div class="ui-corner-all border_all_grey dashboard_widget drag_drop"&gt; Box 1 &lt;/div&gt; &lt;div class="ui-corner-all border_all_grey dashboard_widget drag_drop"&gt; Box 2 &lt;/div&gt; &lt;/div&gt; &lt;div id="box_positions"&gt;&lt;/div&gt; </code></pre> <p>and JS Code:</p> <pre><code>$(".drag_drop, .drag_drop_chart").resizable(); $(".drag_drop, .drag_drop_chart").draggable({ start: function( event, ui ) {$(this).trigger("click")}, stop: function ( event, ui ) { var position = $(this).position(); var offset = $(this).offset(); var top = position.top; var left = position.left; var max_top = 0; if(top &lt; 0){ $(this).css({"top":1}); } if(left &lt; 0){ $(this).css({"left":1}); } if(top &gt; 800){ $(this).css({"top":800}); } $(".drag_drop, .drag_drop_chart").each(function() { //Find the box with the largest "top" value var x_top = $(this).position().top; if(max_top &lt; x_top){ max_top = x_top; } }); var height = max_top + 280; $("#dashboard_wrapper").css({"height":height}); var style = $(this).attr("style"); var box = $(this).text(); $("#box_positions").append(box + ": style=" + style + "&lt;br/&gt;"); } }); var boxes = $(".drag_drop, .drag_drop_chart"); // Set up click handlers for each box boxes.click(function() { var el = $(this), // The box that was clicked max = 0; // Find the highest z-index boxes.each(function() { // Find the current z-index value var z = parseInt( $( this ).css( "z-index" ), 10 ); if ( isNaN(z) ){ z = 1; } // Keep either the current max, or the current z-index, whichever is higher max = Math.max( max, z ); }); // Set the box that was clicked to the highest z-index plus one el.css("z-index", max + 1 ); }); </code></pre> <p>Any help and ideas will be appreciated. Thanks in advance</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload