We Keep Coding

jquery animate not working while creating gallery slider

I am creating a slider image gallery using jquery.
Here is the code when I click on right arrow.
var v=1;
$(".r").click(function(){
aa=1150;
var aa=aa*v;
if(x1>1){
$(".d1").animate({right: aa.toString()+"px"});
l=l+1;
v=v+1;
x1=x1-1;
v1=v1-1;
}
and here is the code when I click left arrow
var v1=1;
$(".l").click(function(){
var aa=1150;
aa=aa*v1;
if(l>1)
{
$(".d1").animate({left: aa.toString()+"px"});
x1=x1+1;
l=l-1;
v1=v1+1;
v=v-1;
}
And I am initiation some used in the above code variables like this
var l=1;
var x1=18/6;
the problem is when I click right arrow, it scrolls to the right. then when I click on left arrow, it scrolls to the left. But when I click on right arrow, the following line is not working
$(".d1").animate({right: aa.toString()+"px"});
following is my html for slider,
<div class="d1">
<ul>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:small;">This is a new toyota1<span><br>
<span style="width:100px;height:100px;font-size:small;">&nbsp$9,000</span>
</a>
</li>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:x-small;">This is a new toyota2<span>
</a>
</li>
...
Update Here is the demo
http://profileone.net/slider.html

I think all is ok you need to redefine your animate method properties that how your html look after clicking both those button
$(document).ready(function(){
var l=1; var x1=18/6;
var v=1;
var v1=1;
$(".r").click(function(){
aa=500;
var aa=aa*v;
if(x1>1){
$( ".d1" ).animate({
right: aa.toString()+"px",
fontSize: "3em",
borderWidth: "5px"
}, 1500 );
l=l+1;
v=v+1;
x1=x1-1;
v1=v1-1;
}
});
$(".l").click(function(){
var aa=300;
aa=aa*v1;
if(l>1)
{
$( ".d1" ).animate({
left: aa.toString()+"px",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
x1=x1+1;
l=l-1;
v1=v1+1;
v=v-1;
}
});
});
.d1{
border:1px solid #DEDEDE;
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="d1">
<ul>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:small;">This is a new toyota1<span><br>
<span style="width:100px;height:100px;font-size:small;">&nbsp$9,000</span>
</a>
</li>
<li >
<a href="#">
<img style="width=100px;height:70px" src="Toyota/1.jpg"/>
<span style="width:100px;height:100px;font-size:x-small;">This is a new toyota2<span>
</a>
</li>
</ul>
</div>
<div class="l">Left</div>
<div class="r">Right</div>

jHeatmap Javascript library tab behaves strangely

I have been struggling with this problem for days and it really baffled me. Hopefully someone skillful in JQuery could help out.
This is related to a very powerful and nice javascript library for creating interactive heatmaps. http://jheatmap.github.io/jheatmap/. I am modifying one of the examples -- Quickstart -- in order to display more than one heatmap on a page. The idea is to put heatmap on separate tabs and activate a heatmap by clicking on a particular tab. The tool couldn't do this naturally, instead it only displays one heatmap on each html page. The developer suggested a solution but here is the problem.
In this sample code, I intend to display three heatmaps (call them heatmap1, heatmap2 and heatmap3) on three tabs. The current situation is that I must click on heatmap1's tab first before clicking on tabs for heatmap2 or heatmap3. Since heatmap1 is displayed by default, so when the page is initially up, I can just go ahead to click on tab's for heatmap2 and that is fine. But now if I want to display heatmap3, I must go back to click on heatmap1's tab, then click on heatmap3's tab. After I manage to see heatmap3 using this trick, I will need to click on heatmap1's tab again in order to display heatmap2. It seems heatmap1 must be displayed before any other heatmaps to be shown.
Since my account won't allow me to attach a file, I put the code below. This is a direct modification of the Jheatmap's QuickStart step4 code. You will not be able to run it because the script loads/reads in text files. But I would greatly appreciate if you can take a look at the javascript around the three heatmaps and the html codes rendering the objects. I think someone skillful in JQuery could give me some advice on how to fix the bug.
Thanks much for your help.
<!DOCTYPE html>
<html>
<head>
<title>jHeatmap</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="prettify.css" rel="stylesheet" type="text/css">
<link href="../../styles/jheatmap-1.0.0.css" rel="stylesheet" type="text/css"/>
<style>
/* To center the heatmap */
table.heatmap {
margin: 0px auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="../../scripts/jheatmap-1.0.0.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
/* heatmap1 */
$('#heatmap1').heatmap(
{
data: {
rows: new jheatmap.readers.AnnotationReader({ url: "quickstart-rows.tsv" }),
cols: new jheatmap.readers.AnnotationReader({ url: "quickstart-cols.tsv" }),
values: new jheatmap.readers.TableHeatmapReader({ url: "quickstart-data.tsv" })
},
init: function (heatmap) {
// Column annotations
heatmap.cols.decorators["subtype2"] = new jheatmap.decorators.CategoricalRandom();
heatmap.cols.annotations = ["subtype"];
// Rows annotations
heatmap.rows.decorators["fm-bias"] = new jheatmap.decorators.PValue({ cutoff: 0.05 });
heatmap.rows.annotations = ["fm-bias"];
// Aggregators
heatmap.cells.aggregators["Mutation"] = new jheatmap.aggregators.AbsoluteAddition();
heatmap.cells.aggregators["CNA Status"] = new jheatmap.aggregators.AbsoluteAddition();
heatmap.cells.aggregators["Expression"] = new jheatmap.aggregators.Median();
// Decorators
heatmap.cells.decorators["Mutation"] = new jheatmap.decorators.Categorical({
values: ["0","1"],
colors : ["white","green"]
});
heatmap.cells.decorators["CNA Status"] = new jheatmap.decorators.Categorical({
values: ["-2","2"],
colors : ["blue","red"]
});
heatmap.cells.decorators["Expression"] = new jheatmap.decorators.Heat({
minValue: -2,
midValue: 0,
maxValue: 2,
minColor: [85, 0, 136],
nullColor: [255,255,255],
maxColor: [255, 204, 0],
midColor: [240,240,240]
});
}
});
/* heatmap2 */
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// Load Heatmap2
if ($(this).tab()[0].hash == '#heatmap2Tab') {
$('#heatmap-loader').show();
$('#heatmap2').width($('#heatmap').width());
$('#heatmap2').heatmap(
{
data: {
rows: new jheatmap.readers.AnnotationReader({ url: "quickstart-rows.tsv" }),
cols: new jheatmap.readers.AnnotationReader({ url: "quickstart-cols.tsv" }),
values: new jheatmap.readers.TableHeatmapReader({ url: "quickstart-data.tsv" })
},
init: function (heatmap) {
// Column annotations
heatmap.cols.decorators["subtype"] = new jheatmap.decorators.CategoricalRandom();
heatmap.cols.annotations = ["subtype"];
// Rows annotations
heatmap.rows.decorators["fm-bias"] = new jheatmap.decorators.PValue({ cutoff: 0.05 });
heatmap.rows.annotations = ["fm-bias"];
// Aggregators
heatmap.cells.aggregators["Mutation"] = new jheatmap.aggregators.AbsoluteAddition();
heatmap.cells.aggregators["CNA Status"] = new jheatmap.aggregators.AbsoluteAddition();
heatmap.cells.aggregators["Expression"] = new jheatmap.aggregators.Median();
// Decorators
heatmap.cells.decorators["Mutation"] = new jheatmap.decorators.Categorical({
values: ["0","1"],
colors : ["white","green"]
});
heatmap.cells.decorators["CNA Status"] = new jheatmap.decorators.Categorical({
values: ["-2","2"],
colors : ["blue","red"]
});
heatmap.cells.decorators["Expression"] = new jheatmap.decorators.Heat({
minValue: -2,
midValue: 0,
maxValue: 2,
minColor: [85, 0, 136],
nullColor: [255,255,255],
maxColor: [255, 204, 0],
midColor: [240,240,240]
});
}
});
}
})
/* heatmap3 */
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// Load Heatmap2
if ($(this).tab()[0].hash == '#heatmap3Tab') {
$('#heatmap-loader').show();
$('#heatmap3').width($('#heatmap').width());
$('#heatmap3').heatmap(
{
data: {
rows: new jheatmap.readers.AnnotationReader({ url: "quickstart-rows.tsv" }),
cols: new jheatmap.readers.AnnotationReader({ url: "quickstart-cols.tsv" }),
values: new jheatmap.readers.TableHeatmapReader({ url: "quickstart-data.tsv" })
},
init: function (heatmap) {
// Column annotations
heatmap.cols.decorators["subtype"] = new jheatmap.decorators.CategoricalRandom();
heatmap.cols.annotations = ["subtype"];
// Rows annotations
heatmap.rows.decorators["fm-bias"] = new jheatmap.decorators.PValue({ cutoff: 0.05 });
heatmap.rows.annotations = ["fm-bias"];
// Aggregators
heatmap.cells.aggregators["Mutation"] = new jheatmap.aggregators.AbsoluteAddition();
heatmap.cells.aggregators["CNA Status"] = new jheatmap.aggregators.AbsoluteAddition();
heatmap.cells.aggregators["Expression"] = new jheatmap.aggregators.Median();
// Decorators
heatmap.cells.decorators["Mutation"] = new jheatmap.decorators.Categorical({
values: ["0", "1"],
colors: ["white", "green"]
});
heatmap.cells.decorators["CNA Status"] = new jheatmap.decorators.Categorical({
values: ["-2", "2"],
colors: ["blue", "red"]
});
heatmap.cells.decorators["Expression"] = new jheatmap.decorators.Heat({
minValue: -2,
midValue: 0,
maxValue: 2,
minColor: [85, 0, 136],
nullColor: [255, 255, 255],
maxColor: [255, 204, 0],
midColor: [240, 240, 240]
});
}
});
}
})
});</script>
</head>
<body>
<div class="container">
<div class="row">
<ul class="nav nav-pills">
<li>Step 0</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li class="active">Step 4</li>
<li>Step 5</li>
</ul>
<p>
Add column and row annotation headers.
</p>
</div>
<div class="row">
<div id="heatmap-loader">
<div class="background"></div>
<div class="loader">
<img src="../../images/loading.gif">
</div>
</div>
<ul id="myTab" class="nav nav-tabs">
<li class="active">Heatmap1</li>
<li>Heatmap2</li>
<li>Heatmap3</li>
<li>Javascript</li>
<li>quickstart-data.tsv</li>
<li>quickstart-cols.tsv</li>
<li>quickstart-rows.tsv</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="heatmap1Tab" style="">
<div id="heatmap1"></div>
</div>
<div class="tab-pane fade" id="heatmap2Tab" style="">
<div id="heatmap2" style="width:100%;"></div>
</div>
<div class="tab-pane fade" id="heatmap3Tab" style="">
<div id="heatmap3" style="width:100%;"></div>
</div>
<div class="tab-pane fade" id="javascriptTab">
<pre id="source" class="prettyprint linenums"></pre>
</div>
<div class="tab-pane fade" id="dataTab">
<pre id="data" class="prettyprint"></pre>
</div>
<div class="tab-pane fade" id="cdataTab">
<pre id="cdata" class="prettyprint"></pre>
</div>
<div class="tab-pane fade" id="rdataTab">
<pre id="rdata" class="prettyprint"></pre>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="prettify.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script>
var source = document.getElementsByTagName('script')[2].innerHTML;
source = source.replace(/</g, "<").replace(/>/g, ">");
$('#source').html(source);
window.prettyPrint && prettyPrint();
$('#source ol.linenums li').each(function(idx, li) {
if ((idx > 3 && idx < 6) || (idx > 10 && idx < 18)) {
$(li).css("background-color", "#FFFFB3");
}
});
jQuery.ajax({
url: "quickstart-data.tsv",
dataType: "text",
success: function (file) {
$('#data').html(file);
}
});
jQuery.ajax({
url: "quickstart-cols.tsv",
dataType: "text",
success: function (file) {
$('#cdata').html(file);
}
});
jQuery.ajax({
url: "quickstart-rows.tsv",
dataType: "text",
success: function (file) {
$('#rdata').html(file);
}
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-7336589-2', 'jheatmap.github.io');
ga('send', 'pageview');
</script>
</body>
</html>

I think that the main problem in your code is that you are binding two functions to all the click tab events. You only need to bind one function and this function will draw only one heatmap depending on the link that was clicked.
Here you have a simplified version that draws three heatmaps on different tabs:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://jheatmap.github.io/jheatmap/css/jheatmap-1.0.0-min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://jheatmap.github.io/jheatmap/js/jheatmap-1.0.0-min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script>
var draw_heatmap = function (tag_id) {
$('#'+tag_id).heatmap({
data: {
values: new jheatmap.readers.TableHeatmapReader({ url: "http://jheatmap.github.io/jheatmap/examples/quickstart/quickstart-data.tsv" })
}});
};
$(document).ready(function () {
/* Draw the default visible heatmap */
draw_heatmap('heatmap1');
/* Calculate the visible heatmap width */
var heatmap_width = $('#heatmap1').width();
/* Fix the width to all the heatmaps */
$('#heatmap1').width(heatmap_width);
$('#heatmap2').width(heatmap_width);
$('#heatmap3').width(heatmap_width);
/* Attach draw heatmap to tab click event */
$('#myTab a').click(function (e) {
e.preventDefault();
/* Show the clicked tab */
$(this).tab('show');
/* Show the loader indicator */
$('#heatmap-loader').show();
/* Draw the correct heatmap */
if ($(this).tab()[0].hash == '#heatmap1Tab') {
draw_heatmap('heatmap1');
}
if ($(this).tab()[0].hash == '#heatmap2Tab') {
draw_heatmap('heatmap2');
}
if ($(this).tab()[0].hash == '#heatmap3Tab') {
draw_heatmap('heatmap3');
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div id="heatmap-loader">
<div class="background"></div>
<div class="loader">
<img src="http://jheatmap.github.io/jheatmap/images/loading.gif">
</div>
</div>
<ul id="myTab" class="nav nav-tabs">
<li class="active">Heatmap1</li>
<li>Heatmap2</li>
<li>Heatmap3</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="heatmap1Tab">
<div id="heatmap1"></div>
</div>
<div class="tab-pane fade" id="heatmap2Tab">
<div id="heatmap2"></div>
</div>
<div class="tab-pane fade" id="heatmap3Tab">
<div id="heatmap3"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Chartjs not showing up in Foundation5 Tabs

I'm using Chartjs with Foundation I have three charts that I want to be displayed on three tabs.
The chart only shows in the first tab. How can I get it to show in the second and third tabs? Can someone demonstrate a solution with a JSFiddle?
HTML:
<ul id="view-tabs" class="row tabs" data-tab>
<li class="tab-title active small-12 medium-4 day">View Day</li>
<li class="tab-title small-12 medium-4 week">View Week</li>
<li class="tab-title small-12 medium-4 month">View Month</li>
</ul>
<div class="tabs-content">
<div class="content day-data active" id="day">
<canvas id="day-graph" width="300" height="300"></canvas>
</div>
<div class="content week-data" id="week">
<canvas id="week-graph" width="300" height="300"></canvas>
</div>
<div class="content month-data id="month">
<canvas id="month-graph" width="300" height="300"></canvas>
</div>
</div>
Chartjs js
- this script just shows the #day-graph but it won't show if I place it in the 2nd or 3rd tab.
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "Visitors",
fillColor : "rgba(148,194,116, 0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("day-graph").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}

As u can see, u're executing new instance of Chart within window.onload function. This is the first reason.
Take a closer look - at the execution:
var ctx = document.getElementById("day-graph").getContext("2d");
You took the context over one canvas object, but in tabs you have three views. Sciprt cannot figure out that it should exec other charts.
U need to repeat the approach 3 times - the number of charts inside the tabs, for example:
//some previous code
var ctx = document.getElementById("week-graph").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
But for the optimalization purposes u should execucute the instance IF the tab in currently avaiable. And this thing u should do by yourself.
http://foundation.zurb.com/docs/components/tabs.html#callbacks

Sly Scroller Jquery

i would like to use following plugin http://darsa.in/sly/ but i cant get it to work, here are some details to my code.
i have following HTML:
<div class="scroller">
<div class="scrollbar">
<div class="handle" style="-webkit-transform: translateZ(0px) translateX(0px);"></div>
</div>
<div class="sly" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0);">
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li>
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li></ul>
</div>
</div>
and following JS:
$(document).find(".scroller").each(function (i, element) {
var $cont = $(element),
$frame = $cont.find(".sly"),
$scrollbar = $cont.find(".scrollbar");
$frame.sly({
// Sly type
horizontal: 1, // Change to horizontal direction.
itemNav: null, // Item navigation type. Can be: basic, smart, centered, forceCentered.
// Scrollbar
scrollBar: $scrollbar, // Selector or DOM element for scrollbar container.
dragHandle: 0, // Whether the scrollbar handle should be dragable.
dynamicHandle: 0, // Scrollbar handle represents the relation between hidden and visible content.
minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels.
clickBar: 0, // Enable navigation by clicking on scrollbar.
syncFactor: 0.50, // Handle => SLIDEE sync factor. 0-1 floating point, where 1 = immediate, 0 = infinity.
});
$frame.sly('reload');
});
But somehow Sly-Scroller doesn't work? Thanks for help!

First of all Load all the Scripts for SLY in the end of your body :
<script src="js/jquery.easing.js"></script>
<script src="sly/horizontal.js"></script>
<script src="http://darsa.in/sly/js/vendor/modernizr.js"></script>
<script src="http://darsa.in/sly/js/sly.min.js" ></script>
Then Call the HTML like this :
<div id="navigation">
<div class="wrap">
<h2>Video Playlist</h2>
<div class="scrollbar" style = "width:100%">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div class="frame " id="basic">
<ul class="clearfix">
<li> </li>
</ul>
</div>
<ul class="pages"></ul>
</div>
</div>

here you go! Credit goes to this blog writer...
don't forget to click on "download", see more details there!
http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/

try this, its work for me
$(document).find('.row').each(function () {
var $slider = $(this).find('#contentSlider');
var $wrap = $slider.parent();
$slider.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 1,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
});

originalEvent.touches for iPad is not working

Been searching everywhere to find how to make this touches on the "sliderBar" work on iPad. I pretty much use this http://www.the-xavi.com/articles/trouble-with-touch-events-jquery & blend in with my mouseDown function :
function handleSliderSlide(event, ui) {
if(event.originalEvent.touches && event.originalEvent.touches.length) {
event = event.originalEvent.touches[0];
} else if (event.originalEvent.changedTouches && event.originalEvent.changedTouches.length) {
event = event.originalEvent.changedTouches[0];
}
if(event.originalEvent.type === 'keydown') {
var maxScroll = $('#yearsWrapper').attr('scrollWidth') - $('#yearsWrapper').width();
var years = $('#dates li').length - 1;
$('#sliderBar').slider('option', 'step', years);
$('#yearsWrapper').attr({
scrollLeft: ui.value * (maxScroll / 100)
});
} else {
var maxScroll = $('#yearsWrapper').attr('scrollWidth') - $('#yearsWrapper').width();
$('#sliderBar').slider('option', 'step', 1);
$('#yearsWrapper').attr({
scrollLeft: ui.value * (maxScroll / 100)
});
}
}
The HTML code pretty much like this:
<div id="timeline">
<div id="dates">
<ul>
<li>
1900
</li>
<li>
2000
</li>
</ul>
<div id="sliderBarWrapper">
<div id="sliderBar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
</div>
</div>
</div>
<div id="yearsWrapper">
<div id="years">
<div class="shadow">
<div id="year1">
slider 1900
<p>Year 1900 info</p>
</div>
<div id="year2">
slider 2000
<p>Year 2000 info</p>
</div>
</div>
</div>
<!-- End years -->
</div>
<!-- End yearsWrapper -->
</div>

I think the problem here is the following:
You first overwrite event with the first touch object:
event = event.originalEvent.touches[0];
Then (I think) you treat your event object as if it is still was the original object:
if(event.originalEvent.type === 'keydown') ...
So essentially you are trying to access event.originalEvent.touches[0].originalEvent.type, which as far as I know should not point at anything (have a look at the Touch Events specification which describes the touch object and its attributes in detail).
Does this solve your problem?