Develop Reference

Text not fully redrawing when I toggle between templates

On my AngularJS app I have a view that allows me to toggle between type of insurance cover and it works fine. However on iPhone in particular (Chrome & Safari), the text kind of scrambles when I toggle between the prices. To be very clear about it, it's only the top few pixels and those pixels generally belong to the price toggled away from, so it's like the page isn't properly redrawing it. This issue then goes away if I do anything in the Dev tools. Any help is appreciated here.
EDIT: This appears to only happen when I select an option that updates the value displayed, not when it switched to a different piece of template.
Here's a screenshot
And a slightly stripped down version of the template in question:
<div class="row quote-tab-container">
<div class="col">
<div class="quote__tab">
<button ng-click="selectedCoverType = 'Comp'; setCoverDetails()" class="quote__tab__button">
Comprehensive
<div class="active-selection" ng-show="selectedCoverType === 'Comp'"></div>
</button>
<button ng-click="selectedCoverType = 'Tpft'; setCoverDetails()" class="quote__tab__button">
Third Party,<br />Fire & Theft
<div class="active-selection-tpft" ng-show="selectedCoverType === 'Tpft'"></div>
</button>
</div>
</div>
</div>
<div class="quote-details row">
<div class="col">
<div class="answer--radio">
<input ng-click="paymentType = 'CC'" type="radio" ng-checked="paymentType == 'CC'" id="singlePayment" name="payment-type">
<label for="singlePayment">Single Payment</label>
</div>
<div class="answer--radio answer--radio--right">
<input ng-click="paymentType = 'DD'" type="radio" ng-checked="paymentType == 'DD'" id="monthlyPayments" name="payment-type">
<label for="monthlyPayments">Monthly Payments</label>
</div>
<section class="selected-product answer--checkbox" ng-show="paymentType == 'CC'">
<div class="your-online-price">
Your online price is
</div>
<div class="selected-product__price">
{{totalPremium | signedCurrencyFilter}}
</div>
<div class="selected-product__includes">
Price includes online discount of {{onlineDiscount | signedCurrencyFilter}}
</div>
</section>
<section class="selected-product answer--checkbox" ng-show="paymentType == 'DD'">
<div class="your-online-price">
Your online price is
</div>
<div class="selected-product__price">
{{instalmentAmount | signedCurrencyFilter}}
</div>
<div class="selected-product__includes">
Price includes online discount of {{onlineDiscount | signedCurrencyFilter}}
</div>
</section>
</div>
</div>

So because the browser would correct this glitch whenever the screen resized or had to redraw I had to force a redraw any time these options were selected. The best way to do this seemed to be to clone the element and replace the original with the clone in order to force a redraw, this was enclosed in a timeout in order to send this to the end of the execution queue.
This answer helped with this: https://stackoverflow.com/a/8840703/1999035
var n = document.createTextNode(' ');
var opacity = element.style.opacity;
element.appendChild(n);
element.style.opacity = '0.5';
setTimeout(function(){
element.style.display = opacity;
n.parentNode.removeChild(n);
}, 20);
My edit of the proposed solution is to use the opacity property rather than display, because the display change causes a jitter/glitch/flash that looks really bad.Opacity just causes a slight fade.

Toggle div text on click

Here's my jQuery
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
Here's my HTML
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title <span id="accordionIcon">▼</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
Whenever a new accordion-toggle is clicked I need the old accordionIcon to change to the opposite arrow, and the new one to change also. I've tried doing it using $(".accordion-content").not($(this).next()).parent().find('#accordionIcon') but it can't find the correct element

Here's a fiddle. Is this what you are looking for?
This is the code I added.
if($(this).find("span#accordionIcon").text()=="▼"){
$(this).find("span#accordionIcon").text("▲");
}
else{
$(this).find("span#accordionIcon").text("▼");
}

Accepted answer will only work with one toggle.
Here is the version (Codepen), that work with multiple:
HTML
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title 1<span>▲</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
<header class="accordion-toggle">
<h2>Accordion Title 2<span>▲</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
JS
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
if ($(this).find('span').text() == '▼') {
$(this).siblings(".accordion-content").slideUp("fast");
$(this).siblings(".accordion-toggle").find('span').text('▼');
$(this).next().slideDown("fast");
$(this).find('span').text('▲');
} else {
$(this).next().slideUp("fast");
$(this).find('span').text('▼');
}
});
});

Or without change your code, you can do like that :
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
var span = $(this).find('span');
if (span.hasClass('isOpened')) {
span.removeClass('isOpened').html('▲');
} else {
span.addClass('isOpened').html('▼');
}
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
JSFIDDLE

If you want to use font-awesome
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
$(this).next().slideToggle("fast");
if($(".fa").hasClass("fa-arrow-down")){$(".fa").removeClass("fa-arrow-down").addClass("fa-arrow-up");}
else $(".fa").removeClass("fa-arrow-up").addClass("fa-arrow-down");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title <i class="fa fa-arrow-down"></i></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>

I dropped to use Accordion because a few my customers requested to compare 2 answers, but mostly because of efficiency to use simple HTML5 Details control that I tested for 1000 questions! in a single FAQ page for my new customer's estimate. The issues with the Accordion starts from 140 items, see
https://github.com/twbs/bootstrap/issues/26419
Here is simplest and efficient solution with full control and automatic "Collapse All" button appearance and disappearance. If you would like to see the more advanced implementation on the real website: https://airtempheating.com/faq
<details>
<summary>
Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home.
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age.
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>
<style>
#hdn{display:none; visibility:visible}
</style>
<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>

jQuery minify duplication

I have a working jsFiddle that shows content based on drop-down value. How can I minify the jQuery so that I don't have to repeat myself for each 'port'. At the moment I have done 2 'ports' but it will take a while to populate the remainder.
http://jsfiddle.net/d4pvz51v/1/
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "all") {
$(".auckland").hide();
$(".tauranga").hide();
$(".all").show();
}
if ($(this).attr("value") == "auckland") {
$(".all").hide();
$(".auckland").show();
$(".tauranga").hide();
}
if ($(this).attr("value") == "tauranga") {
$(".all").hide();
$(".auckland").hide();
$(".tauranga").show();
}
});
}).change();
$('.auckland-link').click(function () {
$('select option:contains("Auckland")').prop('selected', true);
$('.auckland').show();
$('.tauranga').hide();
$(".all").hide();
});
$('.tauranga-link').click(function () {
$('select option:contains("Tauranga")').prop('selected', true);
$('.auckland').hide();
$('.tauranga').show();
$(".all").hide();
});
});

Instead of adding different handlers for each option or link you can
On change of the select, hide all elements with class data, then show the element with the class as the selected value
In the same way you can have a single click handler for the links, assign a common class to all of the link elements then add an data-*(data-el in this case) to specify the target elements class name. In its click handler read the data value and set it as the select element's value and then manually trigger the select's change handler which will set the proper data element visibility.
$(document).ready(function() {
$("select").change(function() {
var $target = $('.' + $(this).val()).show();
$('.data').not($target).hide();
}).change();
$('.data-link').click(function() {
var val = $(this).data('el')
$('select').val(val).change();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="ports section-padding text-center" id="ports">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>PORTS OF OPERATION</h1>
<h3>Select a port to view information and contact details</h3>
<select class="choose">
<option value="all">Select Port</option>
<option value="auckland">Port of Auckland</option>
<option value="tauranga">Port of Tauranga</option>
</select>
</div>
</div>
</div>
</section>
<section class="all data section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h2>Port of Whangarei</h2>
<hr />
<h2 class="data-link" data-el="auckland">Port of Auckland</h2>
<hr />
<h2 class="data-link" data-el="tauranga">Port of Tauranga</h2>
<hr />
<h2>Eastland Port</h2>
<hr />
<h2>Port Taranaki</h2>
<hr />
</div>
<div class="col-md-4">
<h2>Port of Napier</h2>
<hr />
<h2>Port Nelson</h2>
<hr />
<h2>Centre Port Wellington</h2>
<hr />
<h2>Port Malborough</h2>
<hr />
<h2>Greymouth Port</h2>
<hr />
</div>
<div class="col-md-4">
<h2>Lyttleton Port</h2>
<hr />
<h2>Primeport Tmaru</h2>
<hr />
<h2>Port Otago</h2>
<hr />
<h2>Southport</h2>
<hr />
</div>
</div>
</div>
</div>
</section>
<section class="auckland data section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h2>Port Information</h2>
<p>Port of Auckland is centrally located on the west coast of the North Island and is one of New Zealand 's key import and export ports.</p>
<p>Port of Auckland offers nine fully serviced berths for a wide variety of cargoes and vessels. The maximum port draft is 12.5m, and for vessels in excess of 10m Dynamic Under Keel Clearance (DUKC) must be used.</p>
<p>Port of Auckland has the ability to handle a wide diversity of cargoes including all forms of bulk products (liquid and dry), containerised, and break-bulk products (general, refrigerated or palletised), and has specialist experience in the
handling of heavy lift and project cargoes. All wharves are supported by covered and open storage areas.</p>
</div>
<div class="col-md-4">
<h2>Features</h2>
<p>An unusual feature of the port is that it has a beach within its breakwaters adjacent to its operational area. The popularity of Ngamotu Beach is testament to Port Taranaki's commitment to safe working practices and regard for the environment.</p>
<p>Another special feature of Port of Auckland is its "heavy lift" expertise. Auckland has a sophisticated engineering infrastructure, which evolved primarily as a result of development of the region's oil and gas industries. As the petrochemical
industries grew many oversized and heavy cargoes were imported and exported through Port Taranaki. Specialist know-how and facilities are available through Port of Auckland for the handling of extra heavy lifts.</p>
</div>
<div class="col-md-4">
<hr />
<img style="padding-top:40px;float:right;" src="img/map-taranaki.png" alt="" />
</div>
</div>
</div>
</div>
</section>
<section class="tauranga data section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h2>Port Tauranga</h2>
<p>Port of Auckland is centrally located on the west coast of the North Island and is one of New Zealand 's key import and export ports.</p>
<p>Port of Auckland offers nine fully serviced berths for a wide variety of cargoes and vessels. The maximum port draft is 12.5m, and for vessels in excess of 10m Dynamic Under Keel Clearance (DUKC) must be used.</p>
<p>Port of Auckland has the ability to handle a wide diversity of cargoes including all forms of bulk products (liquid and dry), containerised, and break-bulk products (general, refrigerated or palletised), and has specialist experience in the
handling of heavy lift and project cargoes. All wharves are supported by covered and open storage areas.</p>
</div>
<div class="col-md-4">
<h2>Features</h2>
<p>An unusual feature of the port is that it has a beach within its breakwaters adjacent to its operational area. The popularity of Ngamotu Beach is testament to Port Taranaki's commitment to safe working practices and regard for the environment.</p>
<p>Another special feature of Port of Auckland is its "heavy lift" expertise. Auckland has a sophisticated engineering infrastructure, which evolved primarily as a result of development of the region's oil and gas industries. As the petrochemical
industries grew many oversized and heavy cargoes were imported and exported through Port Taranaki. Specialist know-how and facilities are available through Port of Auckland for the handling of extra heavy lifts.</p>
</div>
<div class="col-md-4">
<hr />
<img style="padding-top:40px;float:right;" src="img/map-taranaki.png" alt="" />
</div>
</div>
</div>
</div>
</section>

function manageState(hide1,hide2,show){
$(hide1).hide();
$(show).show();
$(hide2).hide();
}
Make a method that takes in two fields to hide and one to show. Pass in the specific classes for each condition. This works since you seem to be hiding in paris and showing a single item.
Example:
manageState('.all','.auckland','.tauranga')

iterate over json object duplicates in handlebars

I have the following JSON Object in my javascript:
var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [
{
"IG":"Problem Solving",
"AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Problem of the Week(PoW)",
"What": "PoWs are complex problems.",
"When": "PoWs should be administered once per month.",
"How": "1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up"
},
{
"IG":"Problem Solving",
"AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Problem of the Month (POM)",
"What": "The POMs are divided into five levels. Students are asked to explain their solutions and reasoning in a write up.",
"When": "Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days. ",
"How": "Write them on a pieces of paper."
},
{
"IG":"Problem Solving",
"AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Formative Assessment Lesson (FAL)",
"What": "FALs consist of 3 parts including a pre-assessment (approximately 15 min.",
"When": "The 3 part cycle is intended to be given approximately two-thirds the way into a unit of study.",
"How": "1.Pre assessment. 2.Introduce activity. 3.Students work collaboratively. 4.Whole class discussion/ presentation. 5.Post assessment."
},
{
"IG":"Problem Solving", "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
"SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
"Purpose": "Students must be able to reason, problem solve, communicate and make real life decisions that require mathematical thinking. Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
"IP":"Mathematics Assessment Resources (MARS)",
"What": "Story Problems.",
"When": "Done at the begining of the unit.",
"How": "After each asssessment." }
]
$('body').append(template(igListOrig));
And I want to iterate over this object so only when it iterates over the 2nd, 3rd, and 4th object I get a different "IP", "What", "When", and "How" each time AND ignore all the duplicities. After each of the iterations only the "IP", "What", "When", and "How" are different. I need to keep these differences and ignore other other duplicates.
I referenced something like this but I think this person's situation was a little different.
Iterating over a JSON-Object
Eventually this will go in a handlebars template like this
<script id="template" type="text/x-handlebars-template">
<div class="container">
{{#each this }}
<div class='titles'>
<div class="left">Aspire Logo</div>
<div class="middle">{{IG}}</div>
<div class="right">Common Core</div>
<div class="purple"></div>
</div>
<div class="split">
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">AIR</span> Indicators:
</p>
<ul>
<li>{{AIR_Indicators}}</li>
</ul>
</div>
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
</p>
<ul>
<li>{{SMP}}</li>
</ul>
</div>
</div>
<div class="purpose heading">
<h3>Purpose</h3>
</div>
<div class="purpose text">
<p>
{{Purpose}}
</p>
</div>
<div class="process heading">
<h3> Process </h3>
</div>
<div class="bottom-container text">
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> {{IP}} </h3> </center> </br>
<p><span class="description">What</span> {{What}} </p></br>
<p><span class="description">When</span> {{When}} </p></br>
<p><span class="description">How</span> {{How}} </p></br>
</div>
</div>
{{/each}}
</div>
</script>
Eventually, the "IP", "What", "When", and "How" will look something like this near the bottom half of the document under the heading "Process"
http://imgur.com/rV4PIFC
Here is the JS Fiddle I'm working with:
http://jsfiddle.net/rr9Vz/
UPDATE
I just tried something like this
var ips = [];
for(var i in igListOrig) {
var ip = igListOrig[i].IP + igListOrig[i].What + igListOrig[i].When +
igListOrig[i].How ;
if($.inArray(ip,ips)== -1 ){
ips.push(ip);
}
}
And I get the array that I need, but now how do I pass my templating AND this iteration through in handlebars?
UPDATE 2
For all intents and purposes the <div class='bottom-container text> needs to look like this when Handlebars compiles.
<script id="template" type="text/x-handlebars-template">
<div class="container">
<div class='titles'>
<div class="left">Aspire Logo</div>
<div class="middle">{{IG}}</div>
<div class="right">Common Core</div>
<div class="purple"></div>
</div>
<div class="split">
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">AIR</span> Indicators:
</p>
<ul>
<li>{{AIR_Indicators}}</li>
</ul>
</div>
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
</p>
<ul>
<li>{{SMP}}</li>
</ul>
</div>
</div>
<div class="purpose heading">
<h3>Purpose</h3>
</div>
<div class="purpose text">
<p>
{{Purpose}}
</p>
</div>
<div class="process heading">
<h3> Process </h3>
</div>
<div class="bottom-container text">
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Problem Solving</h3> </center> </br>
<p><span class="description">What</span> PoWs are complex problems. </p></br>
<p><span class="description">When</span> PoWs should be administered once per month. </p></br>
<p><span class="description">How</span> 1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up</p></br>
</div>
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Problem of the Month (POM) </h3> </center> </br>
<p><span class="description">What</span> The POMs are divided into five levels. Students are asked to explain their solutions and reasoning in a write up. </p></br>
<p><span class="description">When</span> Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days. </p></br>
<p><span class="description">How</span> Write them on a pieces of paper. </p></br>
</div>
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Formative Assessment Lesson (FAL) </h3> </center> </br>
<p><span class="description">What</span> FALs consist of 3 parts including a pre-assessment (approximately 15 min. </p></br>
<p><span class="description">When</span> The 3 part cycle is intended to be given approximately two-thirds the way into a unit of study. </p></br>
<p><span class="description">How</span> 1.Pre assessment. 2.Introduce activity. 3.Students work collaboratively. 4.Whole class discussion/ presentation. 5.Post assessment. </p></br>
</div>
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3> Mathematics Assessment Resources (MARS)</h3> </center> </br>
<p><span class="description">What</span> Story Problems. </p></br>
<p><span class="description">When</span> Done at the begining of the unit. </p></br>
<p><span class="description">How</span> After each asssessment. </p></br>
</div>
</div>
</div>
I want this: http://jsfiddle.net/8Xnpk/1/
but I'm getting this: http://jsfiddle.net/rr9Vz/3/
#MarcoCl's solution works in terms of code execution, but for whatever eason I can't seem to get this http://jsfiddle.net/8Xnpk/1/

In order to avoid duplicates, use a dictionary instead of an array: this speed up the duplicate lookup and it won't hurt your current code.
function filterDuplicates(array){
// this will hold the new filtered dictionary
var uniqArray = [],
// this is used for the lookup
dupCheck = {};
for( var i=0; i< array.length; i++){
var entry = array[i];
var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
if(!dupCheck[uniqueKey]){
// here there are only unique values
dupCheck[uniqueKey] = true;
uniqArray.push(entry);
}
}
return uniqArray;
}
var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [...];
$('body').append(template(filterDuplicates(igListOrig)));
As alternative you can integrate the filterDuplicates logic in a custom Handlebar helper.
Replace the {{#each this}} tag with the custom {{€#eachUnique this}} one:
<script id="template" type="text/x-handlebars-template">
<div class="container">
{{#eachUnique this}}
...
{{/eachUnique}}
</div>
</script>
Then register the new helper:
Handlebars.registerHelper('eachUnique', function(array, options) {
// this is used for the lookup
var dupCheck = {};
// template buffer
var buffer = '';
for( var i=0; i< array.length; i++){
var entry = array[i];
var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
// check if the entry has been added already
if(!dupCheck[uniqueKey]){
// here there are only unique values
dupCheck[uniqueKey] = true;
// add this in the template
buffer += options.fn(entry);
}
}
// return the template compiled
return buffer;
});
Update 2
The problem changed a bit from the original one - it was only about removing duplicates from a list and it became a more template-related question...
I'll leave the duplicate answer and add this other one for the second update:
Preprocess your data to remove the common data:
var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [...];
var newModel = {
'IG': igListOrig[0].IG,
'AIR_Indicators': igListOrig[0].AIR_Indicators,
'SMP': igListOrig[0].SMP,
'Purpose':igListOrig[0].Purpose ,
entries: igListOrig
};
$('body').append(template(newModel));
The new template will look like this one:
<script id="template" type="text/x-handlebars-template">
<div class="container">
<div class='titles'>
<div class="left">Aspire Logo</div>
<div class="middle">{{IG}}</div>
<div class="right">Common Core</div>
<div class="purple"></div>
</div>
<div class="split">
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">AIR</span> Indicators:
</p>
<ul>
<li>{{AIR_Indicators}}</li>
</ul>
</div>
<div class="text">
<p class="split-heading">
Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
</p>
<ul>
<li>{{SMP}}</li>
</ul>
</div>
</div>
<div class="purpose heading">
<h3>Purpose</h3>
</div>
<div class="purpose text">
<p>
{{Purpose}}
</p>
</div>
<div class="process heading">
<h3> Process </h3>
</div>
<div class="bottom-container text">
// use eachUnique here instead of each to avoid duplicates
{{eachUnique items}}
<div class="cube">
<h4>Instructional Practice</h4>
<center><h3>{{IP}}</h3> </center> </br>
<p><span class="description">What</span> {{What}} </p></br>
<p><span class="description">When</span> {{When}}</p></br>
<p><span class="description">How</span> {{How}}</p></br>
</div>
{{/eachUnique}}
</div>
</div>
</script>

Javascript only working for certain LI within UL

I have implemented some javascript within my site but it only seems to work when you click on certain li's and not on others [Specialities, Contact Us & Referral Schemes not working as they should]
http://global-markets-recruitment.com/test/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/scripts.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.accordian.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#contentGallery').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<div id="header">
<div id="logo">
<h1>
Global Markets Recruitment</h1>
</div>
<div id="nav">
<ul>
<li class="end"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear">
</div>
</div>
<div id="navPointer">
<div id="controlContainer">
<div id="pointer">
</div>
</div>
</div>
</div>
<div id="contentHolder">
<div id="contentGallery">
<img src="Images/Gallery/london.jpg" width="1200" height="550" alt="London" />
<img src="Images/Gallery/singapore.jpg" style="display: none;" width="1200" height="550"
alt="Singapore" />
<img src="Images/Gallery/geneva.jpg" style="display: none;" width="1200" height="550"
alt="Geneva" />
</div>
<div id="contentShadow">
</div>
<div id="content">
<div id="contentScroller">
<div id="home" class="page">
<div class="homeContent">
<span class="homeHeaderText">GMR</span>
<div class="clear">
</div>
<div class="homePageText">
<p>
Global Markets Recruitment is an expert in financial recruitment.
</p>
<p>Through leveraging our extensive networks and combining this with the latest recruitment practices, credibility and professionalism we find our strategic clients the most capable and intelligent candidates throughout Europe, the United States, Asia and the Middle East.
</p>
</div>
</div>
</div>
<div id="artScience" class="page">
<div class="pageContent">
<span class="headerText">About Us</span>
<div class="pageText">
<a class="acc_trigger_3" href="#">About Global Markets Recruitment</a>
<div class="acc_container">
<p>
Our philosophy is simple, we stick to our strengths. We understand where and how we can make a difference. We ensure that before engaging with your organisation and the assignment we appreciate how this relates to both the long and short term value of your business and our role in achieving this.
The approach is not just professional, but personal. We employ both empathy and understanding into the recruitment process. This can only be done by gaining a thorough understanding through face-face meetings with both clients and candidates, allowing us to appreciate their unique aspirations and exacting criteria.</p>
</div>
<div class="seperator">
</div>
<a class="acc_trigger_3" href="#">Clients</a>
<div class="acc_container">
<p>
When working with a company, we employ a very rigorous approach. Our selection process consists of screening a pool of qualified candidates. We identify applicants from various sources based on systematic research and the Global Markets Recruitment database, through which we would entirely map the market of potential candidates in various institutions across the globe. We would also utilise our extensive professional networks and relationships, complemented with our vast experience in the recruitment space. This approach saves you a great deal of time by restricting the number of candidates you consider.
When approaching a potential candidate they are approached in the most discrete, confidential and at the same time compelling way, also taking into account their plausible concerns in relation to the career opportunity at hand.</p>
</div>
<div class="seperator">
</div>
<a class="acc_trigger_3" href="#">Candidates</a>
<div class="acc_container">
<p>In turn we offer candidates that work with us intellectually challenging and financially rewarding positions with the most dynamic, and ambitious organisations throughout Europe, the United States, Asia and the Middle East.</p>
</div>
</div>
</div>
</div>
<div id="context" class="page">
<div class="pageContent">
<span class="headerText">Approach</span>
<div class="pageText">
During the identification phase we would have first introductory telephone interviews.</p>
<p>During the selection phase we shall conduct personal and detailed interviews with motivated and rigorously qualified candidates.</p>
<p>This would ultimately result in the shortlist of applicants who on the basis of the defined job specification qualify for the position. They should meet the profile requirements to a large extent and should, in meetings with you, make the impression of being outstanding candidates, willing to accept the role on offer. Candidates will be presented by means of standardised curriculum vitae, detailed confidential report including all base salary, bonus and benefits.</p>
<p>Finally, we would assist at the offer stage and with the integration of the successful candidate into the client.</p>
</div>
</div>
</div>
<div id="contact" class="page">
<div class="pageContent">
<span class="headerText">Expertise</span>
<div class="pageText">
Content coming soon
</div>
</div>
</div>
<div id="specialities" class="page">
<div class="pageContent">
<span class="headerText">Specialities</span>
<div class="pageText">
Content coming soon...
</div>
</div>
</div>
<div id="contactus" class="page">
<div class="pageContent">
<span class="headerText">Contact Us</span>
<div class="pageText">
Content coming soon...
</div>
</div>
</div>
<div id="referral" class="page">
<div class="pageContent">
<span class="headerText">Referral</span>
<div class="pageText">
Content coming soon...
</div>
</div>
</div>
</div>
</div>
<div id="main">
<div id="footerNav">
<ul>
<li class="start">Home</li>
<li>About Us</li>
<li>Approach</li>
<li>Expertise</li>
<li>Specialities</li>
<li>Contact Us</li>
<li>Referral Scheme</li>
</ul>
</div>
I have edited scripts.js but that still doesn't seem to fix the problem

Tim is right, but in addition to that, the three functions are never actually called.
In scripts.js, you set up the links to call gotoSpecialities, gotoContactUs and gotoReferral on click. But there are two functions with each of those names in the same scope - meaning the one defined last will replace the earlier one. I.e., for gotoReferral, this will be called:
function gotoReferral() {
$('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
return false;
}
... rather than this:
function gotoReferral() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-4900px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}

Your scripts.js file has these functions that get called when a user clicks on a link in the nav, but they all contain scrollTo($('#context') instead of the id of the content you would like to show. Looks like they were copied and pasted from the gotoContext() function and not changed. Keep in mind the H1 tag text is not updated here as well.
function gotoSpecialities() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-2940px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(643px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}
function gotoContactUs() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-3920px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(867px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}
function gotoReferral() {
$scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
$('h1').stop().animate({ backgroundPosition: '(-4900px 0px)' }, $speed);
$('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
$('h1').text('About Charlie');
//_gaq.push(['_trackEvent', 'Nav', 'About']);
return false;
}