Databases
StackOverflow2013
Postsdbo
POjQuery multi-list solution for comparing and saving items
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery multi-list solution for comparing and saving items
    primarykey
    data
    text
    <p>I'm making a tool, which can compare and list items. I'd like to animate them so that they look cool. Please help me fix some issues in the implementation. There are multiple problems so i made a separate issue of each one.</p> <h1>issue 1 mouseout event binding</h1> <p>Sometimes the overlay panel closes if I pick an item and pull it to list1 - list2 - list1.</p> <h1>issue 2 click event binding</h1> <p>If I push an element to list1, drop it to the list and click on the another list, the list will comes closer. On clicking back to list1 it animate 3 times instead of one.</p> <h1>issue 3 placeholders</h1> <p>How can i drop a placeholder to a list, what makes better re-arrange and easier to understanding the cross-dropping (for list to list drag and drop and items to lists too) </p> <h1>issue 4 animation smoothness</h1> <p>How can I make the animation go smoother? What do you think about this?</p> <h1>issue 5 optimalization</h1> <p>What do you think, if I optimize the code a bit will it be faster in the browsers? Could you give me some advices for this please?</p> <h1>issue 6 other ideas</h1> <p>If you have some general ideas for it, I'll welcome them as well. Download it, use it as you want, I'm making it for my girlfriend's website.</p> <p><a href="http://jsfiddle.net/qejFh/" rel="nofollow">You can check the code here</a> - jsFiddle, or:</p> <p>HTML</p> <pre><code>&lt;div id="overlay" class="clearfix"&gt; &lt;div id="overlaycontainer"&gt; &lt;div id="comparecontainer" class="overlaycontainer"&gt; &lt;div class="icon"&gt;&lt;/div&gt; &lt;ul id="compare"&gt; &lt;li class="fixed"&gt;LIST1&lt;/li&gt; &lt;/ul&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="dreamlistcontainer" class="overlaycontainer"&gt; &lt;div class="icon"&gt;&lt;/div&gt; &lt;ul id="dreamlist"&gt; &lt;li class="fixed"&gt;LIST2&lt;/li&gt; &lt;/ul&gt; &lt;div class="shadow"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr /&gt; &lt;ul class="offers clearfix"&gt; &lt;li name="deal1"&gt;ITEM #1&lt;/li&gt; &lt;li name="deal2"&gt;ITEM #2&lt;/li&gt; &lt;li name="deal3"&gt;ITEM #3&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>CSS</p> <pre><code>body {background-color: white; padding: 50px 0 0; margin: 0;} ul {list-style-type: none;} #overlay {background: black url(img/dreamlist_bg.gif) center center no-repeat; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;} #overlaycontainer {width: 800px; height: 600px; position: relative; margin: auto; top: 50%; margin-top: -300px;} .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} .overlaycontainer { height:500px; float: left; box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; position: absolute; background-color: rgba(255, 255, 255, 0.9); } .overlaycontainer.active { box-shadow: 0 0 10px #1cb9ee, 0 0 30px #1a86ce, 0 0 3px white; -moz-box-shadow: 0 0 10px #1cb9ee, 0 0 30px #1a86ce, 0 0 3px white; } #compare {padding: 20px; background-color: yellow;} #dreamlist {padding: 20px; background-color: white;} #comparecontainer {position: absolute; top: 0; left: 0; width: 290px; opacity: 0.9;} #dreamlistcontainer {position: absolute; top: 0; right: 0; width: 500px; opacity: 0.9;} li {padding: 10px;} .drop {width: 10px; height:10px; background-color: red; display: inline-block;} .offers {padding: 10px;} .offers li {width: 194px; height: 300px; overflow: hidden;float: left; margin-right: 5px;} .fixed {text-transform: uppercase; font-family: "Gill Sans"; color: #1a86ce; font-size: 28px; text-align: center; text-shadow: 0px 1px 0px white;} .shadow { position: absolute; bottom: -11px; display: block; background: transparent url(img/imagesforem.png) no-repeat; height: 50px; width: 50px; margin: 0 auto; } .icon { position: absolute; bottom: 10px; display: block; background: transparent url(img/imagesforic.png) no-repeat; height: 50px; width: 50px; margin: 0 auto; } #comparecontainer .icon {background-position: bottom left; left: 41%;} #dreamlistcontainer .icon {background-position: bottom right; right: 50%} </code></pre> <p>JS</p> <pre><code>function overlayFadeIn() { $("#overlay").fadeIn(); } function overlayFadeOut() { // alert("faded."); pushBack(); $("#overlay").fadeOut(); $("#overlaycontainer").unbind("mouseleave"); } function dropOut() { $(this).parent().remove(); } function pushBack() { $("#overlaycontainer").unbind("mouseleave"); $("#dreamlist").parent().animate({ width: "500px", opacity: "0.9", right: "0", top: "0", height: "500px" }, 100); $("#compare").parent().animate({ width: "290px", opacity: "0.9", left: "0", top: "0", height: "500px" }, 100); $("#overlaycontainer").bind("mouseleave", overlayFadeOut); } function pushBitCloser(which) { var which = which; var other; if (which.attr("id") == "dreamlist") { other = $("#compare"); //bal - left whleft = "+=15px"; otleft = "+=0px"; whright = "+=0px"; otright = "+=50px"; } else { other = $("#dreamlist"); // right whleft = "+=0px"; otleft = "-=10px"; whright = "+=0px"; otright = "+=0px"; } if (which.attr("id") == "dreamlist") { $("#dreamlist").parent().animate({ width: "530px", opacity: "1", height: "550px", top: "-25px", right: "-15px" }, { duration: 200, specialEasing: { width: 'linear', opacity: 'linear' } }); $("#compare").parent().animate({ width: "270px", opacity: "0.7", left: "+10px", top: "+10px", height: "480px" }, { duration: 200, specialEasing: { width: 'linear', height: 'linear', top: 'linear', opacity: 'linear' } }); } else { $("#compare").parent().animate({ width: "320px", opacity: "1", left: "+10px", top: "-15px", height: "530px" }, { duration: 200, specialEasing: { width: 'linear', height: 'linear', top: 'linear', opacity: 'linear' } }); $("#dreamlist").parent().animate({ width: "470px", opacity: "0.7", height: "480px", top: "+10px", right: "-15px" }, { duration: 200, specialEasing: { width: 'linear', opacity: 'linear' } }); } } function pushCloser(which, pb) { if (pb == true) { pushBack(); } var which = which; var other; if (which.attr("id") == "dreamlist") { other = $("#compare"); } else { other = $("#dreamlist"); } which.parent().css({ "z-index": "20" }); other.parent().css({ "z-index": "10" }); if (which.attr("id") == "dreamlist") { $("#dreamlist").parent().animate({ width: "550px", opacity: "1", height: "550px", top: "-25px", right: "-15px" }, { duration: 200, specialEasing: { width: 'linear', opacity: 'linear' } }); $("#compare").parent().animate({ width: "270px", opacity: "0.7", left: "+10px", top: "+10px", height: "480px" }, { duration: 200, specialEasing: { width: 'linear', height: 'linear', top: 'linear', opacity: 'linear' } }); } else { $("#compare").parent().animate({ width: "320px", opacity: "1", left: "+15px", top: "-15px", height: "530px" }, { duration: 200, specialEasing: { width: 'linear', height: 'linear', top: 'linear', opacity: 'linear' } }); $("#dreamlist").parent().animate({ width: "490px", opacity: "0.7", height: "480px", top: "+10px", right: "-10px" }, { duration: 200, specialEasing: { width: 'linear', opacity: 'linear' } }); } } $(".offers li").draggable({ helper: "clone", revert: "invalid", cursor: "move", zIndex: 30, start: function(event, ui) { overlayFadeIn(); }, stop: function(event, ui) { $("#overlaycontainer").bind("mouseleave", overlayFadeOut); } }); $("#compare").droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.incompare)", greedy: true, tolerance: 'pointer', over: function(event, ui) { $(this).parent().addClass("active"); pushBitCloser($(this)); }, out: function(event, ui) { $(this).parent().removeClass("active"); pushBack($(this)); }, drop: function(event, ui) { $(this).parent().removeClass("active"); $("#overlaycontainer").bind("mouseleave", overlayFadeOut); pushCloser($(this), false); var element_id = ui.draggable.attr("name"); var gotit = $("#compare li[name='" + element_id + "']").size(); if (gotit != 1) { var drop = $('&lt;span&gt;&lt;/span&gt;').addClass("drop").bind("click", dropOut); $('&lt;li class="incompare"&gt;&lt;/li&gt;').attr("name", element_id).text(ui.draggable.text()).append(drop).appendTo(this); } $(this).find(".placeholder").remove(); $("#dreamlist").parent().click(function() { pushCloser($("#dreamlist"), true) }); } }).sortable({ helper: "clone", items: "li:not(.placeholder):not(.fixed)", start: function() { $("#overlaycontainer").unbind("mouseleave"); }, stop: function() { $("#overlaycontainer").bind("mouseleave", overlayFadeOut); }, sort: function() { $(this).removeClass("ui-state-default"); } }); $("#dreamlist").droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.indreamlist)", greedy: true, tolerance: 'pointer', over: function(event, ui) { $(this).parent().addClass("active"); pushBitCloser($(this)); }, out: function(event, ui) { $(this).parent().removeClass("active"); pushBack($(this)); }, drop: function(event, ui) { $(this).parent().removeClass("active"); $("#overlaycontainer").bind("mouseleave", overlayFadeOut); pushCloser($(this), false); var element_id = ui.draggable.attr("name"); var gotit = $("#dreamlist li[name='" + element_id + "']").size(); if (gotit != 1) { var drop = $('&lt;span&gt;&lt;/span&gt;').addClass("drop").bind("click", dropOut); $('&lt;li class="indreamlist"&gt;&lt;/li&gt;').attr("name", element_id).text(ui.draggable.text()).append(drop).appendTo(this); } $(this).find(".placeholder").remove(); $("#compare").parent().click(function() { pushCloser($("#compare"), true) }); } }).sortable({ helper: "clone", items: "li:not(.placeholder):not(.fixed)", start: function() { $("#overlaycontainer").unbind("mouseleave"); }, stop: function() { $("#overlaycontainer").bind("mouseleave", overlayFadeOut); }, sort: function() { $(this).removeClass("ui-state-default"); } }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJawa
    1. USRépás
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery multi-list solution for comparing and saving items
      1. USRépás
      1. VTBountyStart
    2. VO
      singulars
      1. POjQuery multi-list solution for comparing and saving items
      1. USGowri
      1. VTFavorite
    3. VO
      singulars
      1. POjQuery multi-list solution for comparing and saving items
      1. USPaolo
      1. VTFavorite
    1. CONothing? :( awww...
      singulars
      1. POjQuery multi-list solution for comparing and saving items
      1. USRépás
    2. COtl;dr (Try shorter focussed questions. Those gigantic code dumps and the spray of questions, they're putting folks off. And it's the weekend.)
      singulars
      1. POjQuery multi-list solution for comparing and saving items
      1. USDonal Fellows
    3. CO@Repas your application is trippy. Either its buggy or its bad UI design.
      singulars
      1. POjQuery multi-list solution for comparing and saving items
      1. USRaynos
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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