0

Good day. I'm doing some design like this in my banner(saksoff5th.com) I use slideToggle instead. When I hover images on the left the banner images on the right will change. But I'm having difficulties in hovering the images on the right. Like when I hover images on the left, the images on the right is wrong. I don't have any idea also how can I make my images appears properly on the right part. They are all in one vertical. I want it to work like if I hover the first image on the left, the first image on the right will appear. When I hover the second image on the right, the second image will appear and the first image will hide etc.

Here is my jsfiddle(http://jsfiddle.net/deanilvincent/7Lgks56u/2/) Note: It's now working! Thanks for the help :D

Help me to fix this. Thanks in advance.

My HTML Tags:

<div class="container">
    <div id="left-panel">
        <ul>
            <li class="first-left"><a href="#"><img src="images/1st.png" /></a></li>
            <li class="second-left"><a href="#"><img src="images/2nd.png" /></a></li>
            <li class="third-left"><a href="#"><img src="images/3rd.png" /></a></li>
            <li class="fourth-left"><a href="#"><img src="images/4th.png" /></a></li>
        </ul>
    </div>

    <div id="right-panel">
        <ul>
        <li class="first-right"><a href="#"><img src="images/banner1.jpg" /></a></li>
        <li class="second-right"><a href="#"><img src="images/banner2.jpg" /></a></li>
        <li class="third-right"><a href="#"><img src="images/banner3.jpg" /></a></li>
        <li class="fourth-right"><a href="#"><img src="images/banner4.jpg" /></a></li>
        </ul>
    </div>
</div>

My Javascript/Jquery:

$(document).ready(function(){
        $("#left-panel ul li.first-left").mouseover(function(){
            $("#right-panel ul li.first-right").slideToggle("Fast");
        });

        $("#left-panel ul li.second-left").mouseover(function(){
            $("#right-panel ul li.second-right").slideToggle("Fast");
        });

        $("#left-panel ul li.third-left").mouseover(function(){
            $("#right-panel ul li.third-right").slideToggle("Fast");
        });

        $("#left-panel ul li.fourth-left").mouseover(function(){
            $("#right-panel ul li.fourth-right").slideToggle("Fast");
        });
    });

My CSS:

.container{
        width:1200px;
        margin:0px auto;
    }
    #left-panel{
        width:20%;
        float:left;
    }
    #left-panel ul li a:hover{
        background-color:#eeeeee;
    }
    #left-panel ul li{
        list-style-type:none;
    }
    #right-panel ul li{
        list-style-type:none;
    }
    #right-panel{
        width:80%;
        float:left;
    }
Mark
  • 3
  • 3

2 Answers2

1

You didn't include jQuery in the fiddle (from the menu on the left)

Here's a working demo: http://jsfiddle.net/mirohristov/7Lgks56u/5/

     //Hide all except the first
    $("#right-panel ul li").not("#right-panel ul li.first-right").stop().slideUp("Fast");


    $("#left-panel ul li.first-left").mouseover(function(){
        //Hide all
        $("#right-panel ul li").stop().slideUp("Fast");
        //Show the first 
        $("#right-panel ul li.first-right").stop().slideDown("Fast");
    }); 

//etc...
Miro
  • 8,402
  • 3
  • 34
  • 72
  • Ahhh Thanks sir for the correction! :D So sir! I think "hover" is better than mouse over. Take a look of it. – Mark Feb 11 '15 at 03:44
  • Thank you so much sir! Sir I have a question, what is the differences of hover and mouseover in jquery? – Mark Feb 11 '15 at 03:45
  • in your case, it doesn't matter if you use hover or mouseover. Read more here: http://stackoverflow.com/questions/17589420/when-to-choose-mouseover-and-hover-function – Miro Feb 11 '15 at 14:14
  • Thank you so much sir Miro! God bless and take care! :D – Mark Feb 12 '15 at 05:11
1

i think your code in JSFiddle is not working because you didn't import jquery, it is just a detail. Wherever, if you want to show the correct right image when you enter the mouse over the left image and only that image, you have to write exactly that, for example, if you enter the mouse over the second left image, so the second right image will slidetoggle and the others will be hide, that is the idea, here is ugly snippet but it works:

$(document).ready(function(){
  $("#left-panel ul li.first-left").mouseover(function(){
    if (!$("#right-panel ul li.first-right").is(":visible")) 
      $("#right-panel ul li.first-right").slideToggle("Fast");
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.third-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.second-left").mouseover(function(){
    if (!$("#right-panel ul li.second-right").is(":visible")) 
      $("#right-panel ul li.second-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.third-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.third-left").mouseover(function(){
    if (!$("#right-panel ul li.third-right").is(":visible")) 
      $("#right-panel ul li.third-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.fourth-left").mouseover(function(){
    if (!$("#right-panel ul li.fourth-right").is(":visible"))
      $("#right-panel ul li.fourth-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.third-right").hide();
  });
});

and you have to add this on the stylesheet:

#right-panel li {
  display: none;
}

#right-panel li:nth-child(1) {
  display: block;
}

this is because, initially the first image will be displayed by default.