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
Related
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!
I wonder how can I insert html template into a javascript function and use variables in it, like for example here, where I am creating html and inserting variables to it. I would like to know how can I make it cleaner and have a template in a separate file and then use it in the function.
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category">Videos</div>',
suggestion: function(suggestion) {
return '<span>'
+ '<a href="/player/' + suggestion.id + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/myUrl/' + suggestion.video_id + '_1.jpg">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + '<small><abbr class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</abbr></small>' + '</p>'
+ '<small> ' + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
I have a gallery setup with the lightbox plugin lightGallery
The gallery works perfect with static HTML. The problem arises when I dynamically grab API data and try to have the lightbox working on those items.
I can't seem to get another lightbox to both work with this function and load an HTML block from the page correctly (load the one that's been dynamically generated). This app does the correct HTML grabs, if I can get the conflict resolved.
Any initial thoughts? Anyone else run into anything similar?
JS:
//----------------------------------------------------------------//
//---------------// Calling Lightgallery //---------------//
//----------------------------------------------------------------//
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
// Filter Difference based on button click
$('button').click(function () {
$('button').removeClass("active");
$(this).addClass("active");
var unsplashAPI = "#URL";
var order = $(this).text();
var sortOptions = {
order_by: order,
format: "json"
};
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile" data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' aka: ' + photo.user.username + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes' + '</p>' + '</div>' + '</a>';
});
$('#photoBox').html(photoData);
}
$.getJSON(unsplashAPI, sortOptions, displayPhotos);
}); // End button
HTML:
<div class="content" id="photoBox"></div>
-- Thanks
Call the plugin after the data is appended to the page
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile" data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' aka: ' + photo.user.username + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes' + '</p>' + '</div>' + '</a>';
});
$('#photoBox').html(photoData);
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
}
Collapsible did not collapse after being expanded. It is dynamically created in popover.
Here is my jsFiddle:
$('.tooltiphelp').tooltip();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
$('[data-toggle="collapse"]').collapse();
jQuery('document').ready(function() {
jQuery('#accordionRank').on('show hide', function() {
jQuery(this).css('height', 'auto');
});
jQuery('#accordionRank').collapse({ parent: true, toggle: true });
});
var popover = $("#noteListDiv").find('.positive').popover({
trigger: 'click',
placement: 'bottom',
content: function () {
return func_getRank($(this).closest('tr').prop('id'));
}
});
var func_getRank = function (ID) {
var Rankdata = {"Rank":[{"ID": "114077", "NL": "1 of 25", "OF": "1 of 30", "MLB": "1 of 240"}]};
var cshtml;
cshtml = '<div>'
+ '<div class="accordion" id="accordionRank">'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseNL">'
+ 'NL Rank: ' + Rankdata.Rank[0].NL
+ '</a>'
+ '</div>'
+ '<div id="collapseNL" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ 'Anim pariatur cliche...'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseOF">'
+ 'OF Rank: ' + Rankdata.Rank[0].OF
+ '</a>'
+ '</div>'
+ '<div id="collapseOF" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ 'Anim pariatur cliche...'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseMLB">'
+ 'MLB Rank: ' + Rankdata.Rank[0].MLB
+ '</a>'
+ '</div>'
+ '<div id="collapseMLB" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ '<table id="MiniLeaderboard">'
+ '<thead><tr>'
+ '<th>Rank</th>'
+ '<th>Hitter</th>'
+ '<th>BAVG</th>'
+ '<th>Hits/AB</th>'
+ '</tr></thead>'
+ '<tbody><tr>'
+ '<td>1</td>'
+ '<td>Christian Yelich</td>'
+ '<td>.470</td>'
+ '<td>39-for-83</td>'
+ '</tr>'
+ '<tr>'
+ '<td>2</td>'
+ '<td>Ryan Braun</td>'
+ '<td>.397</td>'
+ '<td>27-for-68</td>'
+ '</tr>'
+ '<tr>'
+ '<td>3</td>'
+ '<td>Adam Eaton</td>'
+ '<td>.370</td>'
+ '<td>37-for-100</td>'
+ '</tr>'
+ '<tr>'
+ '<td>4</td>'
+ '<td>Joey Votto</td>'
+ '<td>.369</td>'
+ '<td>31-for-84</td>'
+ '</tr>'
+ '<tr>'
+ '<td>5</td>'
+ '<td>Edwin Encarnation</td>'
+ '<td>.364</td>'
+ '<td>28-for-77</td>'
+ '</tr></tbody>'
+ '</table>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
;
return $(cshtml).html();
};
Data text should come from JSON.
Here is the issue, please watch this screen cast.
Please help! Thanks in forward for your help.
I've updated my jsFiddle and it's now working. Maybe not a good idea but looks good for now.
$(document).on('click', '.accordion-toggle', function(e) {
$(e.target).css('text-decoration','none');
var $_this = $(e.target).parent().next("div");
var $_inner = $_this.find('div:first-child');
if($_inner.hasClass('in')){
$_inner.removeClass("in");
$_this.removeClass("in");
}
else {
$_inner.addClass("in");
$_this.addClass("in");
}
func_accordionToggle(e.target);
});
var func_accordionToggle = function (e) {
var $_this = $(e).parent().parent();
var id = $(e).parent().next("div").attr('id');
switch(id) {
case 'collapseNL':
$('#collapseOF').removeClass("in");
$('#collapseMLB').removeClass("in");
$('#collapseOF').find('div:first-child').removeClass("in");
$('#collapseMLB').find('div:first-child').removeClass("in");
break;
case 'collapseOF':
$('#collapseNL').removeClass("in");
$('#collapseMLB').removeClass("in");
$('#collapseNL').find('div:first-child').removeClass("in");
$('#collapseMLB').find('div:first-child').removeClass("in");
break;
case 'collapseMLB':
$('#collapseNL').removeClass("in");
$('#collapseOF').removeClass("in");
$('#collapseNL').find('div:first-child').removeClass("in");
$('#collapseOF').find('div:first-child').removeClass("in");
break;
};
}
Thanks for all the help Guys.
I am trying to fetch data from json file and then attach the data as listitem in a unordered list.
So its getting listed successfully, but I cannot scroll again through it.
Here is how my Javascript looks like:
function ListViewData(allpost) {
allposts = allpost;
$.each(allpost.posts, function (i, row) {
if (row.thumbnail_images) {
$(".list__container").append('<li class="list__item list__item--tappable list__item__line-height list-item-container">' +
'<div class="list-item-main">' +
'<div class="list-item-left">' +
'<img src="' + row.thumbnail_images['full'].url + '" class="thumbnail" width="80" height="80">' +
'</div>' +
'<div class="list-item-right">' +
'<div class="list-item-content">' +
'<span class="list-item-name">' + row.title + ' ' +
'<br/>' +
'<span class="lucent">' +
'<i class="fa fa-map-marker"></i> Paris, France' +
'</span>' +
'</span>' +
'<br/>' +
'<span class="list-item-text" style="margin-top:16px;">Eiffel Tower is the symbol of Paris and named by Gustave Eiffel.' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'<span class="list-item-action" >' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'</li>');
}
$(".list__container").listview();
});
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
}
and here is how my HTML code looks like:
<div class="list list-top">
<ul class="list__container">
//here append data comes in place
</ul>
</div>
Instead of
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
Try
$("html,body").animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);