Mannu Nayyar Mannu Nayyar - 3 months ago 11
Javascript Question

Tab dislocation for custom image expanding preview

I am trying to make expanding image preview similar to this but as I move from left to right clicking on the circular div, the tab shifts down from the pointer. I don't understand why this is happening.

Please refer my fiddle link.

Please help me with this. I am unable to figure out where I am going wrong.

And is there any way to change the pointer color dynamically based on the color of the circular div?

Thankyou.



jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});

.wrap {
max-width: 100%;
margin: auto;
}

.full-width-div {
position: relative;
width: 100%;
left: 0;
}

.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: auto;
margin: 0 0 0 -12px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}

.img-circle {
border-radius: 50%;
}

.img-circle {
border-radius: 0;
}

.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}

.img-circle {
border-radius: 50%;
}

.img-responsive {
display: block;
height: auto;
max-width: 100%;
}

.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}

.tab {
display: none;
clear: both;
margin: 12px 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}

.col-custom-eight {
position: relative;
float: left;
width: 12.5%;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="full-width-div container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row">

<div class="col-custom-eight col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">1</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center caption">2</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
<div class="text-center caption">3</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
<div class="text-center caption">4</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">5</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">6</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">7</div>
</a>

</div>


<div class="col-custom-eight col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">8</div>
</a>

</div>

</div>
<div class="row">
<div class="col-md-12">
<div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab3" class="tab" style="background-color: #795548">Tab 3
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Answer

Your rows have 1px height which results in the pointer dropping down 1px for every circle. I fixed your fiddle, see here.

You can set the color of the pointer with just CSS, like for instance:

 a[href="#tab1"]:after {
  border-bottom-color: rgb(0, 188, 212) !important;
}

a[href="#tab8"]:after {
  border-bottom-color: #8BC34A !important;
}