2

Basically I am building hover-able tabs, you can hover a link and then a new div will be displayed and you are able to mouse into that.

My issue is that once the new div has been displayed I cannot bring back the .placehold div once the new one has been displayed.

jsfiddle: https://jsfiddle.net/513t1qk2/

My jquery code below:

$(document).ready(function () {
$(".hoverme1").mouseover(function () {
  $("div.showme1").show();
  $("div.placehold").hide();
});
$(".hoverme1, div.showme1").mouseleave(function () {
  $("div.showme1").hide();
});
$("div.showme1").mouseover(function () {
  $(this).stop(true, true).show();
});
$("div.placehold").show();

});

Hopefully the jsfiddle makes sense.

** EDIT **

I understand that i can add add

 $("div.placehold").show();

to the

$(".hoverme1, div.showme1").mouseleave(function () {

but when I do this the as I am mouseleaving the .hoverme1 class the .placehold div replaces the .showme1 and I can no longer mouse into this.

** NEW EDIT **

I can get this working with the following fiddle:

https://jsfiddle.net/513t1qk2/3/

The problem is the mouseleave function, as I am mouseleaving the ".hoverme1" the ".placehold" div comes back into view which knocks the newly appeared ".showme1" field down.

scctttt1991
  • 33
  • 4
  • http://stackoverflow.com/questions/5557641/how-can-i-reset-div-to-its-original-state-after-it-has-been-modified-by-java Try this – Tristan de Jager Oct 18 '16 at 10:44
  • It makes no sense what you are trying to achieve if you don't want to do a show again. On chrome, I can never hover into the `showme1` div as it dissapears before my mouse gets anywhere near it – Pete Oct 18 '16 at 10:53
  • Apologies, I do want to show the .placehold again, I want to bring it back once the user has hovered the link and can move onto a link. – scctttt1991 Oct 18 '16 at 10:55

3 Answers3

2

Here is an working example how you can solve your issue. I have a little bit optimize your code, you dont need so much line of code for this :)

$(document).ready(function () {
  var $placeholder = $("div.placehold");
  
  $('.submenu-list').find('a').on('click', function(e) {
   e.preventDefault();
  });
    
  $('.submenu-list').children('li').find('a').on('mouseenter', function() {
   var $current = $(this);
    var $link = $(this);
    
    if($link.attr('class').indexOf('hoverme')) {
     return;
    }
    
    var toShowItemSelector = '.showme' + $link.attr('class').match(/\d+/)[0];
    $placeholder.hide();
    $("*[class*='showme']").hide();
    $("*[class*='showme']").stop();
    $(toShowItemSelector).fadeIn(400);
  });
    
  $('.product-submenu-container').on('mouseleave', function(e) {
    $("*[class*='showme']").hide();
    $placeholder.show();
  });  
  
  $('.product-submenu-container').on('mouseover', function(e) {
    if( $(e.target).hasClass('medium-3 columns') ) {
      $("*[class*='showme']").hide();
      $placeholder.show();
    }      
  });    
});
.showme1, .showme2, .showme3, .showme4 {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-submenu-container">
  <div class="row collapse">
    <div class="medium-3 columns">
      <h3>products</h3>
      <ul class="submenu-list">
        <li><a href="#!" class="hoverme1">KB1</a></li>
        <li><a href="#!" class="hoverme2">KB2</a></li>
        <li><a href="#!" class="hoverme3">KB3</a></li>
        <li><a href="#!" class="hoverme4">REED</a></li>
      </ul>
    </div>
    <div class="medium-9 columns">
      <div class="product-banner placehold">
        <h3>This is some placeholder text</h3>
        <p>This is some placeholder text, it should sit next to the list and 
        should be visible when nothing else is hovered.</p>
      </div>
      <div class="product-banner showme1">
        <div class="row">
          <div class="large-8 columns">
            <h3>KB1</h3>
            <p><em>Some placeholder text</em></p>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibu
            s dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          </div>
          <div class="large-4 columns">
            <img src="http://placehold.it/200" />
          </div>
        </div>
      </div>
      <div class="product-banner showme2">
        <h3>KB2</h3>
      </div>
      <div class="product-banner showme3">
        <h3>KB3</h3>
      </div>
      <div class="product-banner showme4">
        <h3>REED</h3>
      </div>
    </div>
  </div>
</div>

Or checkout this jsfiddle it includes also the animation (fading).

pleinx
  • 616
  • 3
  • 8
  • Just one problem, I need the user to be able to mouse into the newly opened "showme" classes. – scctttt1991 Oct 18 '16 at 11:11
  • Sorry, i dont understand what you mean? :/ – pleinx Oct 18 '16 at 11:14
  • Sorry, i didnt explain every well. The user needs to be able to mouse into the "showme" class to be able to click the link in there. Please see fiddle and hopefully this makes a little more sense: https://jsfiddle.net/513t1qk2/8/ – scctttt1991 Oct 18 '16 at 11:16
  • okay i understand your issue. you want that the user can click/mark something in the content which we display if user is hovering, right? Then checkout the updated fiddle here.... use full page mode – pleinx Oct 18 '16 at 11:30
  • 1
    Yes that is correct! Can you resend the fiddle please? – scctttt1991 Oct 18 '16 at 11:31
  • i added a working jsfiddle, also with the animation/fading effect which you like, right ? – pleinx Oct 18 '16 at 11:37
  • Apologies, I was looking at the chat rather than the answer. This is perfect! Thank you very much for all you're help! – scctttt1991 Oct 18 '16 at 11:42
  • you're welcome. if you think my answer is the right one so please mark it as accepted. :) thank you too – pleinx Oct 18 '16 at 11:44
0

On mouseleave show your .placehold div Try this Jsfiddle

$(".hoverme1, div.showme1").mouseleave(function () {
  $("div.showme1").hide();
   $("div.placehold").show();
});
priya_singh
  • 2,478
  • 1
  • 14
  • 32
  • I can do this but as i am mouseleaving the ".hoverme1" class then the .placehold is being added before I am able to reach the .showme1 – scctttt1991 Oct 18 '16 at 10:49
  • Sorry, I didnt explain myself very well. – scctttt1991 Oct 18 '16 at 10:52
  • Please see the jsfiddle below: https://jsfiddle.net/513t1qk2/3/ This is the right idea, but when i mouse into the newly opened ".showme1" as I am mouseleaving the ".hoverme1" the .placehold appears a little too early – scctttt1991 Oct 18 '16 at 10:53
  • @scctttt1991 Don't use fadeIn and fadeOut. Try this https://jsfiddle.net/513t1qk2/4/ .I think it will be useful I used mouseLeave event for ul – priya_singh Oct 18 '16 at 10:58
  • This is working, the problem is the mouseleave event is being triggered when I am mouseleaving the ".hoverme1" class and this is bringing the ".placehold" back into view before i get a chance to mouse into the newly added ".showme1" div. Hopefully this makes sense? – scctttt1991 Oct 18 '16 at 11:02
  • You can of course using `fadeIn()` and `fadeOut()` use their callbacks or i prefer to use deferred/promise behaivhor to prevent the delay between display and non-display – pleinx Oct 18 '16 at 11:15
  • Hey, I got you @scctttt1991. But with the hover effect it is not possible. – priya_singh Oct 18 '16 at 11:22
0

I suggest to you use id instead class for selector on js. I think this will be useful for you with less codes.

$(document).ready(function () {
var currentTargetDivId;
  $("a[targetDiv*='showme']").hover(
  function(){
    currentTargetDivId = "#"+$(this).attr("targetDiv");
    $("#placehold").hide();
    $(currentTargetDivId).show();
  },
  function(){
    currentTargetDivId = "#"+$(this).attr("targetDiv");
    $("#placehold").show();
    $(currentTargetDivId).hide();
  }
  );
});

https://jsfiddle.net/513t1qk2/10/

Tolga Kısaoğulları
  • 638
  • 5
  • 17