I am trying to use numeral.js to format my listener variable so numbers could be easily readable. But after I tried to use numeral.js the way it is, my function stops working. Can anyone please advise on what's wrong?
Trackster.renderTracks = function(tracks) {
var $trackList = $("#track-list");
$trackList.empty();
for (var trackIndex = 0; trackIndex < tracks.length; trackIndex++) {
var track = tracks[trackIndex];
var mediumAlbumArt = track.image[1]["#text"];
var formatListeners = numeral(track.listeners).format('0,0');
var htmlTrackRow =
'<div class="row track">' +
' <div class="col-xs-1 col-xs-offset-1 play-button">' +
' <a href="'+ track.url + '" target="_blank">' +
' <i class="fa fa-play-circle-o fa-2x"></i>' +
' </a>' +
' </div>' +
' <div class="col-xs-4">' + track.name + '</div>' +
' <div class="col-xs-2">' + track.artist + '</div>' +
' <div class="col-xs-2"><img src="' + mediumAlbumArt + '"/></div>' +
' <div class="col-xs-2">' + formatListeners + '</div>' +
'</div>';
$trackList.append(htmlTrackRow);
}
};
Full Github Code is https://github.com/tfan1210/Trackster
Thanks!
Related
I have 2 lists with 5 columns; one has Title, Question, Attorneys, ID, and attorneyPic. This last one is looking into an image list. I created a webpart for this so the the actual webpart looks like this.
<script type="text/javascript">
apiUrl = "/Legal/Attorneys/_api/web/lists/GetByTitle('attorneysBio')/items$select=*,EncodedAbsUrl,attorneysPic/Title&$expand=attorneysPic/Id";
topicsTitle = '';
title = 'TITLE HERE';
</script>
The javascript code looks like this
var buildCards = function () {
if (filterTopic.length !== 0) {
for (i = 0; i < filterTopic.length; i++) {
var accID2 = accID.replace(/\s/g, '');
var faqItems = filterTopic[i]
var headerID = "heading" + faqItems.ID
var cardBodyID = "collapse" + faqItems.ID
var cardTitle = faqItems.Title
var cardBody = faqItems.Question
var attorneyPics = faqItems.attorneysPic.EncodedAbsUrl
console.log(attorneyPics)
var cardBuild = '<div class="card">' +
'<div class="card-header pb-1 pl-0" role="tab" id="' + headerID + '">' +
'<a class="collapsed" data-toggle="collapse" data-parent="#' + accID2 + '" href="#' + cardBodyID + '" aria-expanded="false" aria-controls="' + cardBodyID + '">' +
'<h5 class="mb-0 font-thin">' + cardTitle + '<span class="rotate"></span></h5>' +
'</a>' +
'</div>' +
'<div id="' + cardBodyID + '" class="collapse" role="tabpanel" aria-labelledby="' + headerID + '" data-parent="#' + accID + '">' +
'<div class="row"><div class="col-md-3"><img src="'+attorneyPics+'" class="img-responsive"></div>' +
'<div class="col-md-9"><div class="card-body py-1 pl-0"><p>' + cardBody + '</p></div></div></div>' +
'</div>' +
'</div>'
$(".accordion").append(cardBuild);
};
} else {
var cardBuild = '<h4>There are no results matching your search.</div>'
$(".accordion").append(cardBuild);
}
What is happening is that the url given is the one from the actual list and not from the list items "https://browardauthor/Legal/Attorneys/Lists/attorneysBio/1_.000"
I am trying to fix this problem 2 days and I am a rookie in Javascript
Currently I am Using visual studio + Cordova + Framework 7
var pet1 = select_all('pet');
$$('#pet1').empty();
$$.each(pet1, function (index, value) {
$$('#pet1').append('<li>'
+ '<div class="item-link item-content">'
+ ' <div class="item-media">'
+ ' <img style="width:80px;height:60px" src="http://file.nowdb.net/' + value.cover + '">'
+ ' </div>'
+ ' <div class="item-inner">'
+ ' <div class="item-title-row">'
+ ' <div class="item-title">' + value.title + '</div>'
+ ' <div class="item-after">Element label</div>'
+ ' </div>'
+ ' <div class="item-subtitle">' + value.description + '</div>'
+ ' <div class="item-text">Additional description text</div>'
+ ' </div>'
+ '</div>'
+ '</li>');
});
and this work well
after that i found a documentation in Framework 7 that call Modal With Slider
and the code is in here http://framework7.io/docs/modal.html
which call open-slider-modal
I don't know why cant copy the code
But the problem for me is I don't know how to add this code into it
Please help me , between sorry for my bad English.
thanks everyone
Okay I finished it myself already , will post the answer here for help the others who facing same problem like me
var pet1 = select_all('pet');
$$('#pet1').empty();
$$.each(pet1, function (index, value) {
$$('#pet1').append('<li>'
+ '<div class="item-link item-content">'
+ ' <div class="item-media">'
+ ' <img style="width:80px;height:60px" src="http://file.nowdb.net/' + value.cover + '">'
+ ' </div>'
+ ' <div class="item-inner">'
+ ' <div class="item-title-row">'
+ ' <div class="item-title">' + value.title + '</div>'
+ ' <div class="item-after">Element label</div>'
+ ' </div>'
+ ' <div class="item-subtitle">' + value.description + '</div>'
+ ' <div class="item-text">Additional description text</div>'
+ ' </div>'
+ '</div>'
+ '</li>');
});
just
continue the code below
$$('.open-slider-modal').on('click', function () {
var modal = myApp.modal({
title: 'Awesome Photos?',
text: 'What do you think about my photos?',
afterText: '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+
'<div class="swiper-pagination"></div>'+
'<div class="swiper-wrapper">'+
'<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' +
'<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+
'</div>'+
'</div>',
buttons: [
{
text: 'Bad :('
},
{
text: 'Awesome!',
bold: true,
onClick: function () {
myApp.alert('Thanks! I know you like it!')
}
},
]
})
myApp.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
});
and then
first change the
$$('.open-slider-modal').on('click', function () {
to
$$(document).on('click', '.open-slider-modal', function () {
change the class inside your list
<div class="item-media open-slider-modal">'
you will be done
I have a problem with my code. I am pushing items into a new array and displaying two of them in a DIV. For some reason its showing the same item twice rather than showing two separate items. Hoping someone can help me out with this. I just need a way to prevent the same recipe from being able to show twice in the DIV.
var categoryItems = [];
var recipeTitle = $('#recipeTitle').text();
$.each(recipe_data, function(i, item){
if (item.recipeCategory == "4" && recipeTitle !== item.recipeName) { categoryItems.push(item); }
});
var similarRecipe = '';
var randomRecipe = {};
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit: Please take a look at this fiddle for an example. It should not show the same recipe twice when refreshing, rather show two different recipes from the category. My problem is that is is sometimes it is showing the same one twice when you refresh. https://jsfiddle.net/wn4fmm5r/
you are generating one random Recipe and displaying same twice into your for loop
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
try including your statement for generating random recipe inside loop.
for(var i = 0; i < categoryItems.length; i += 2) {
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit for no repeating ----
var counter;
for (var i = 0; i < categoryItems.length; i += 2) {
var item = Math.floor(Math.random() * categoryItems.length);
if (!counter) {
counter = item;
} else {
if (counter == item) {
item = Math.floor(Math.random() * categoryItems.length);
counter = item;
}
}
randomRecipe = categoryItems[item];
similarRecipe = ['<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL + '" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>'];
$('#recipeSimilar').append(similarRecipe);
}
I have a dynamic html elements that renders in a for loop the dynamic parent element has a dynamic id, how can I hide the dynamic elements or the container and its content if the id which is dynamic has a value lets say "Product".
Thank you in advance.
This is the dynamic elements that i rendered using for loop
for (var i = 0; i < a_data.products.length; i++) {
produst_list += '<a href="#" class="plLinkToFull" data-sn="' + a_data.products[i].serial + '" id="' + a_data.products[i].productName + '">';
produst_list += '<div class="plProductContainer">';
produst_list += ' <div class="plProductBTN">';
//produst_list += ' <div class="plProductThumb pull-left ' + (a_data.products[i].pid === 'TE80'?'apMaximumPanelTi8':'apMaximumPanel') + '"></div>';
produst_list += ' <div class="plProductThumb pull-left ' + getPanelClsss(a_data.products[i].pid) + '"></div>';
produst_list += ' <div class="plProductLeft">';
produst_list += ' <h6 style="margin-bottom: -5px;">' + a_data.products[i].productName + '</h6>';
produst_list += ' <div class="plLowerStatusSN"><span>' + a_data.products[i].serial + '</span></div>';
produst_list += ' </div><div class="plLowerStatus">';
produst_list += ' <div class="' + ((a_data.products[i].remainingDays > 0) ? "plIconGreen" : "plIconRed") + '">';
produst_list += ' <span class="glyphicon glyphicon-time" style=""> </span></div>';
produst_list += ' <span class="' + ((a_data.products[i].remainingDays > 0) ? "plExpiryOK" : "plExpiredDate") + '">Expire: <strong>' + a_data.products[i].expirationDate + '</strong></span>';
produst_list += ' </div></div></div></a>';
}
With filter :
$('a.plLinkToFull').filter(function(){
return this.id.contains("product");
}).hide();
You can make like this:
$('.plLinkToFull').prev('id') = i;
or
$('.plLinkToFull').attr("id", i);
The i have to send to new Method, for saving the loop.
try this:
var id = 'Product';
$('a[id*="'+id+'"]').hide();
if you want to hide it by clicking use event delegation
var el = 'a[id*="'+id+'"]';
$('body').on('click',el,function(){
$(this).hide();
});
I am writing an HTML loop using javascript. It will loop through a series of images and display them with additional information. It appears that there is always a NaN showing on the HTML output as shown here.
Here is the javascript in question:
var caption = '<p></p>';
if($.isEmptyObject(data[i].caption) !== true)
{
caption = '<p class="caption" style="top:'+data[i].height+'px;">'+
data[i].caption +
'</p>';
}
var li = '<li data-uk-modal="{target:#modal-open-image}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ data[i].height +'"'
+ 'caption="'+ data[i].caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ caption +
+ '<div class="uk-overlay-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '<p> counter: ' + data[i].counter + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';
$photo.append(li);
I would think the problem would lie on the caption variable. the data[i] is an array of from a database query.
I need to check if there is something on the data[i].caption. I tried using length, but that doesn't work, so I check if the object exist. Though I am not sure if that works.
My question, is how to display properly check if the caption is empty, and if none it will not add anything on the var li.
Thanks.
You can code it in one line:
( (data && data[i] && data[i].caption) ? " your stuff " : "")
But pay attention that checking 'data[i].caption' in javascript means that: zero is false, empty string is false.
Furthermore if you referring a number you can add a condition using the method isNaN
Please use this one in place of the '+ caption +'
isNaN(data[i].caption) ? '' : data[i].caption
or if(isNaN(data[i].caption)==true){
//do somthing
}else{
//do somthing
}
Thanks for the feedback. I manage to gobble up the solutions you game me and I ended up with this.
var height = (data[i].height == null)?0:data[i].height;
var caption= (data[i].caption== null)?'':data[i].caption;
var li = '<li data-uk-modal="{target:\'#modal-open-image\'}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ height +'"'
+ 'caption="'+ caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ '<p class="caption" style="top:' + height +'px;">'
+ caption
+ '</p>'
+ '<div class="uk-thumbnail-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Reciever: '+ data[i].reciever + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';