Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Explanation</h2> <p>Alright, I've drawn up what I think you're asking for. If this isn't what you were asking for, hopefully you or someone else might learn something from it. :) <img src="https://i.stack.imgur.com/Dam39.png" alt="hovering stuff"> </p> <ol> <li>Beginning layout</li> <li>User hovers over element 1, whereupon element 2 pops up and starts slidin'</li> <li>At this point, the user hovers between the elements, and no reset should occur</li> <li>User hovers out from one of the elements, in my example, element 1</li> <li>Mouse has not been over one of the elements for n seconds and should slide like in 2. but in reverse.</li> </ol> <p>I find it easier to know what needs to be done if you first outline what's needed.</p> <p>Going through the steps, we can now define what we need:</p> <ol> <li>Timer that checks how long mouse has been outside the elements that executes a "reverse animation" when <code>n</code> seconds have past</li> <li>MouseIn, MouseOut events to clear the timer, so it doesn't do a reverse animation while the user is still hovering one of the elements</li> <li>We need unique timers for each instance of groups, what I call instantiating. Meaning: we want to be able to do this on more than 1 block of 2 elements</li> </ol> <h2>The solution</h2> <p>First, <a href="http://jsfiddle.net/2LCBM/8/" rel="nofollow noreferrer">here's a JSFiddle</a> for you to play around with (<a href="http://jsfiddle.net/2LCBM/9/" rel="nofollow noreferrer">here's one without comments</a>). Hopefully there's enough comments to get you through it.</p> <p>And of course, here's the code.</p> <p>Javascript</p> <pre class="lang-js prettyprint-override"><code>//default variables var Distance = 300; //px var BetweenOffset = 10; //px var MouseOut = 550; //ms var AnimationTime = 500; //ms var Timers = new Array(); $(document).ready(function(){ //this is just to add the default distance. I didn't specify it in the CSS, but you can do it just as well $("div.container div.element_2").css("left", Distance); //adds an attribute "unique-id" with a number, so that the timer can be associated with an element. This is necessary to be able to clear the timer, and is the basics in "instantiation 101" $("div.container").each(function(index, parent){ $(parent).attr("unique-id", index); }); //here's were all the magic happens $("div.container div.element_1, div.container div.element_2").mouseenter(function(e){ //define some local variables var parent = $(this).parent(); var id = parent.attr("unique-id"); var element1 = parent.children(".element_1"); var element2 = parent.children(".element_2"); var destination = element1.width()+BetweenOffset; //if element2 isn't visible or is being animated, we're going to stop whatever it's doing and do a beginning animation if(!element2.is(":visible") || element2.is(":animated") ){ element2.stop(true).show().animate( { left: destination, opacity: 1 }, AnimationTime, "swing" ); } //then we're gonna clear the timer associated with this parent Timers[id]= clearTimeout(Timers[id]); }).mouseleave(function(e){ var parent = $(this).parent(); var id = parent.attr("unique-id"); var element1 = parent.children(".element_1"); var element2 = parent.children(".element_2"); //here we set the timer using an anonymous function Timers[id] = setTimeout(function(){ //Only animate if it's already showing if(element2.is(":visible")){ //stop whatever it's doing and remove the animation queue element2.stop(true).animate( { "left": Distance, opacity: 0 }, AnimationTime, "swing", function(){ //here we make sure it's not being displayed element2.css("display", "none"); } ); } }, MouseOut); }); }); </code></pre> <p>HTML</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt; &lt;div class='element_1'&gt;Element 1&lt;/div&gt; &lt;div class='element_2'&gt;Element 2&lt;/div&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class='element_1'&gt;Element 1&lt;/div&gt; &lt;div class='element_2'&gt;Element 2&lt;/div&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class='element_1'&gt;Element 1&lt;/div&gt; &lt;div class='element_2'&gt;Element 2&lt;/div&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class='element_1'&gt;Element 1&lt;/div&gt; &lt;div class='element_2'&gt;Element 2&lt;/div&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class='element_1'&gt;Element 1&lt;/div&gt; &lt;div class='element_2'&gt;Element 2&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre class="lang-css prettyprint-override"><code>.container{ position: relative; height: 50px; margin-top: 20px; } .element_1, .element_2{ position: absolute; height: 50px; left: 0px; top: 0px; } .element_1{ border: 1px solid blue; } .element_2{ border: 1px solid red; display: none; } </code></pre> <h2>References</h2> <p>Some references to the functions I use</p> <ul> <li><a href="http://api.jquery.com/parent/" rel="nofollow noreferrer">.parent()</a></li> <li><a href="http://api.jquery.com/children/" rel="nofollow noreferrer">.children()</a></li> <li><a href="http://api.jquery.com/stop/" rel="nofollow noreferrer">.stop()</a></li> <li><a href="http://api.jquery.com/animate/" rel="nofollow noreferrer">.animate()</a></li> <li><a href="http://api.jquery.com/mouseenter/" rel="nofollow noreferrer">.mouseenter()</a></li> <li><a href="http://api.jquery.com/mouseleave/" rel="nofollow noreferrer">.mouseleave()</a></li> <li><a href="http://api.jquery.com/attr/" rel="nofollow noreferrer">.attr()</a></li> <li><a href="http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/" rel="nofollow noreferrer">setTimeout() &amp; clearTimeout()</a></li> <li><a href="http://searchcio-midmarket.techtarget.com/definition/instantiation" rel="nofollow noreferrer">What is instantiation?</a></li> </ul> <h2>Final thoughts</h2> <p>I added some cool opacity transitions, not necessary, but.. meh. Hopefully this will help you on your way, there might be alternatives to the one I've given you, but this is how I'd solve it.</p> <h2>Edit</h2> <p>After a brief discussion, OT notified me of his JSFiddle. I took a look at it, and <a href="http://jsfiddle.net/sgrxH/2/" rel="nofollow noreferrer">this is what I got</a>. The only problem that remain is that it doesn't animate while it is already animating, but that is a minor problem that not many users notice.</p>
    singulars
    1. This table or related slice is empty.
    1. POHovering a hiding element replays the hide animation shortly after
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USShadowScripter
    1. USShadowScripter
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHovering a hiding element replays the hide animation shortly after
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO+1 for effort even if the answer isnt right!
      singulars
      1. PO
      1. USUndefined
    2. COWow, I honestly didn't expect anybody to go this far in trying to help! In the comments to the OP I posted a jsfiddle link in which it is more clear, but your solution is pretty close even without it... The second element should be appearing from the first element. There is only 1 instance on 1 page, so there is no need for those variables in this case... I'll try to modify it to my needs and then tell you how it went. +1 anyway, thank you!!
      singulars
      1. PO
      1. USPakas
    3. CO@SqueezCZ My example should solve your problem. Check out the timers and how they're handled. I didn't notice your jsfiddle, I'll take a look at it. Also, a +1 is given at the top of each post, and a correct answer is given by clicking the green check sign at the same place. Appreciate the rep. :)
      singulars
      1. PO
      1. USShadowScripter
 

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