Develop Reference

fullpage.js - adding links within tooltips

PROBLEM
I've tried adding a link to the navigational tooltips and, based on html, it should be working. However, no matter which tooltip I click, I am taken to the second section - even though the address indicated is correct and should be taking me across all sections.
for (var i = 0; i < $(SECTION_SEL).length; i++) {
var link = '';
if (options.anchors.length) {
link = options.anchors[i];
}
var li = '<li><span></span>';
// Only add tooltip if needed (defined by user)
var tooltip = options.navigationTooltips[i];
if (typeof tooltip !== 'undefined' && tooltip !== '') {
li += '<div class="' + SECTION_NAV_TOOLTIP + ' ' + options.navigationPosition + '">' + '' + tooltip + '</div>';
}
li += '</li>';
nav.find('ul').append(li);
}
I've tried putting the links into the init file as well, but that has the exact same effect.

Fullpage.js will ignore your link.
See line 1694
function sectionBulletHandler(e){
e.preventDefault();
var index = $(this).parent().index();
scrollPage($(SECTION_SEL).eq(index));
}
And line 567:
.on('click touchstart', SECTION_NAV_SEL + ' a', sectionBulletHandler)

Fastest way to replace big drop down list in IE8

I have to manage big drop down list (thousands of items) and I encounter performance problem with IE8 with the jQuery .html method.
Indeed it takes 3-4seconds to clear the content.
Do you have any workarounds ?
Code :
var selectHtml = "";
$(data.items).each(function () {
var option = "<option value='";
option += this.Value + "'";
if (this.Selected) {
option += " selected";
}
option += ">" + this.Text + "</option>";
selectHtml += option;
});
$(target).html(selectHtml);
.html of jQuery call .empty and in the IE profiler I can see that it is .empty that takes most of the time.

Assuming you mean something like
<ul id='mylist'>
<li>Item 1</li>
....
<li>Item n</li>
</ul>
or the equivalent select/option statement, you need:
$('#mylist').empty()
Alternatively, if you're only actually changing a few items in your dropdown list, perhaps you should maintain a map between the data.value and the element in the select list, so you only need to add items which have not already been placed in the list, and have a simple reference to items to remove.
I suspect you are wrong about the time split and most of the time is building the list. Try pushing all your new option items onto an array and then performing a single join of the array at the end.
var list = [];
$(data.items).each(function () {
var selected = this.Selected ? ' selected' : '';
var option = "<option value='" + this.Value + "'" + selected + ">"
+ this.Text + "</option>";
list.push( option);
});
$(target).html(list.join( "\n"));

I found the solution here : https://stackoverflow.com/a/23552898/1431524
I ended up with this code :
function clearOptions(select) {
var selectParentNode = select.parentNode;
if (selectParentNode) {
var newSelect = select.cloneNode(false); // Make a shallow copy
selectParentNode.replaceChild(newSelect, select);
return newSelect;
}
return undefined;
}
function appendSelectHtml(data, target) {
var selectHtml = [];
$(data.items).each(function () {
var selected = this.Selected ? ' selected' : '';
var option = "<option value='" + this.Value + "'" + selected + ">" + this.Text + "</option>";
selectHtml.push(option);
});
target = $(clearOptions(target[0])); //The item that was contained in the selector isn't in the DOM anymore
target.append(selectHtml.join(""));
}

Remove "comma" separator after last element

I have the below code.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
elem = $(this);
part = $(this).attr("data-part-name");
//alert(part);
selected_options = "";
$('.' + part).each(function () {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + ' <b>,</b> '
}
});
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);
});
});
If you see I am adding a "comma" to selected options.
Now problem is it adds comma even after the last element.
How can I remove the last comma

.map() will a perfect fit for this. Also you can filter the checked items using :checked and filter
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var elem = $(this);
var part = $(this).attr("data-part-name");
//alert(part);
var selected_options = $('.' + part).filter(':checked').map(function () {
return '<b>' + $(this).attr("data-option-name") + '</b>'
}).get();
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.join(', '));
});
});

You can use the index of iteration to compare with length of parts element and do the decision whether a comma needs to be added or not.Modify the code to:
var totalparts=$('.' + part).length;
$('.' + part).each(function (i) {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + totalparts!=(i+1) ?' <b>,</b> ':'';
}});

Just remove last , substring from the string,
if(selected_options.length > 0){
selected_options = selected_options.slice(0,-1)
}
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);

replace this line
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.replace(/[\<\>\,b\/\s]+$/,''));

removing clicked item from array in javascript

I have a click function to make a list of chosen items. Also, I push the chosen items to an array. There is no problem in that part, here is the function.
$('#addToCartButton2').click(function(){
var toAdd=$("#chooseItem2 option:selected").text();
var itemNbr2=$("#itemNbr2").val();
if(toAdd !== defaultSelectFormText && itemNbr2 >=1){
$('#defaultText').remove();
$('.col-md-5').append('<p id="items">' + itemNbr2 + ' Adet ' + toAdd + '<span class="extra">Sipariş listesinden çıkarmak için tıklayın!</span>' + '</p>');
ordersArray.push(itemNbr2 + ' Adet ' + toAdd);
alert(ordersArray.toString());
};
});
But I also have a function to remove the clicked item from that list. So I want to remove that item also from array when it is clicked. I tried to use splice method but I can not get the index of the clicked item. Here is the remove function.
$(document).on('click', '#items', function() {
$(this).remove();
var index = ordersArray.indexOf($(this).val());
alert(index);
if (index > -1) {
ordersArray.splice(index, 1);
}
});
How can I get the index of the clicked item in the list?

Firstly, either you make id of items unique or use class instead of id as I done in this solution.
$('#addToCartButton2').click(function(){
var toAdd=$("#chooseItem2 option:selected").text();
var itemNbr2=$("#itemNbr2").val();
if(toAdd !== defaultSelectFormText && itemNbr2 >=1){
$('#defaultText').remove();
$('.col-md-5').append('<p class="items"><span>' + itemNbr2 + ' Adet ' + toAdd + '</span><span class="extra">Sipariş listesinden çıkarmak için tıklayın!</span>' + '</p>');
ordersArray.push(itemNbr2 + ' Adet ' + toAdd);
alert(ordersArray.toString());
};
});
$(document).on('click', '.items', function() {
var index = ordersArray.indexOf($('span:first', this).text());
alert(index);
if (index > -1) {
ordersArray.splice(index, 1);
}
$(this).remove();
});

In function to remove the clicked item from that list, make the following changes:
$(document).on('click', '#items', function() {
var index = ordersArray.indexOf($(this).text());
alert(index);
if (index > -1) {
ordersArray.splice(index, 1);
}
$(this).remove();
});

It seems like you're way of deleting the item is a little to complex.
Why not just use a uniqe ID for each item you're appending and just delete
the item by it's ID ?

Insert After Last Item by jQuery

This is my all script, I know this is long, but just one line is important and I add all it for insurance:
//Add new Addable div
$('.AddNewE').click(function () {
var RemoveAddableButton = $('<input type="button" class="RemoveE button red" value="remove" />');
$(RemoveAddableButton).click(function () {
$(this).closest('.Addable').remove();
});
var TargetId = $(this).attr('id');
TargetId = TargetId.substring(3);
var Target = $('.Addable#' + TargetId + ':first');
var Count = $('.Addable#' + TargetId).size();
var CloneTarget = $(Target).clone();
CloneTarget.find('input').val('');
CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); // ***importantOne
var TargetName = $(Target).find('input').attr('name');
if (Count == 1) {
var CloneName = TargetName + '[1]';
TargetName = TargetName + '[0]';
$(Target).find('input').attr('name', TargetName);
$(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
$(CloneTarget).find('input').attr('name', CloneName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneName + '"></span>')
);
}
} else {
var indx = TargetName.length - 3;
var CloneTargetName = TargetName.substring(0, indx);
CloneTargetName = CloneTargetName + '[' + Count + ']';
$(CloneTarget).find('input').attr('name', CloneTargetName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneTargetName + '"></span>')
);
}
}
(function ($) {
$.fn.updateValidation = function () {
var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
return this;
};
})(jQuery);
$(Target).updateValidation();
$(CloneTarget).updateValidation();
});
If I click the .AddNewE button then a new div added, but as my script I want to add this new div to the end of the divs so I use
CloneTarget.insertAfter('.Addable#' + TargetId + ':last');
but always the new div added as a second div it means always the :first and :last div is same and is first one also I checked by:
$('.Addable#' + TargetId).css('border', '');
$('.Addable#' + TargetId + ':last').css('border', '3px dotted green');
$('.Addable#' + TargetId + ':first').css('border', '3px dotted red');
So where is the problem? why the jQuery can't recognize last div ?

The problem is in the jQuery selector: $('.Addable#' + TargetId + ':last')
It is not valid HTML when you have multiple elements with the same id (#TargetId). ID is unique and you're not supposed to have more than 1 element with the same ID.
The jQuery selector assumes you use valid correct HTML markups, so it doesn't bother to collect all your elements with that ID. As soon as jQuery found the first element in the DOM with that ID, it stops and appends your new element right after that.
Try updating your jQuery selectors to simply: $('.Addable:first') and $('.Addable:last') and see if it works.