Develop Reference

how to loop through the contentful data within javascript and display in bootstrap grid columns?

I'm working on the Contentful CMS for posting some data and retrieving it in an html page. I use JavaScript to display those in bootstrap grid columns, but it not showing the data properly.
here is my code:
<div class="row justify-content-center">
<div id="content"></div>
</div>
var client = contentful.createClient({
space: '#######',
accessToken: '#######'
})
var container = document.querySelector('#content');
client.getEntries()
.then(function(entries) {
container.innerHTML = renderProducts(entries.items)
})
function renderProducts(products) {
products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
})
}
It showing the data in console properly, but the HTML is not rendering the way I want.

Heyo. I didn't test I could see two potential issues. renderProducts is not returning anything. You could try changing it to return your mapped products. And then innerHTML expects a string value, which means that you'd have to join your mapped array together.
function renderProducts(products) {
//👇add a return here
return products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
}).join('');
// 👆 join the array of strings together to one long string
}

Targeting a class in a custom base template in FancyBox3

I have created a custom base template like so:
baseTpl :
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
'<span data-fancybox-index></span> / <span data-fancybox-count></span>' +
'</div>' +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-social">' +
'<button class="sharefb" title="Share FaceBook" data-share="hello"></button>' +
'<button class="sharetwt" title="Share Twitter" data-share="hello"></button>' +
'</div>' +
'</div>' +
'</div>',
How do I target the custom class sharefb? As I want to dynamically change the data-share attribute.
Thank you!

You event needs to be delegated, you will bubble the click event using a parent element, in my case the body:
$('body').on('click','.sharefb',function(){
$(this).attr('data-share','new value');
});

I found out that I can just do like this inside a fancybox instance inside opts:
afterShow : function( instance, current ) {
$('.fancybox-social .sharefb').click(function(){
//add your js here
});

ng-if is not working inside ng-repeat in when bind-html-compile

I have the below code to bind html in my html page,
<div bind-html-compile="menuButtonView"></div>
I have the below code in my controller,
dashboardService.getTemplateMetaData(data.templateCategory)
.success(function(data) {
console.log(data);
$scope.buttonArray = data.btnArray;
$scope.firstMenuLabel = data.firstMenuLabel;
if (data.firstMenuLabel) {
$scope.menuButtonView = '<obl-menu-group label="{{firstMenuLabel}}" icon="fa-pencil-square-o">' +
'<div data-ng-repeat="btn in buttonArray" >' +
'<div ng-if="btn.menuTitle !=="Site Settings" ">' +
'<obl-menu-button label="{{btn.menuTitle}}" icon="fa fa-file-image-o" menu-function="{{btn.menuFunction}}">' +
'</obl-menu-button></div>' +
'<div ng-if="btn.menuTitle ==="Site Settings"">' +
'<obl-menu-group label="{{btn.menuTitle}}" icon="fa-pencil-square-o" class="md-sub-menu">' +
'<obl-menu-button label="Contact Us" icon="fa fa-file-image-o" click-title="contactUs"></obl-menu-button>' +
'</obl-menu-button></div>' +
'</div>' +
'<obl-menu-group>';
}
}).error(function(err) {
});
}).error(function(err) {
});
The ng-if inside the ng-repeat is not working. I can't see anything wrong in this code. Is there a problem with the quotation marks?

use single quote in ng-if
'<div data-ng-repeat="btn in buttonArray" >' +
'<div ng-if="btn.menuTitle !=='Site Settings'">'+
//Your code
</div>'
'<div ng-if="btn.menuTitle ==='Site Settings'">'+
//Your code
</div>'
'</div>'

How to access the text within yahoo weather's geo data nodes?

I'm using the z weatherfeed plugin.
It already pulls most of the data from yweather api but I need the latitude and longitude.
The plugin gets the data for each item element like this for example:
html += '<div class="weatherCountry">'+ feed.location.country +'</div>';
However, if I try this...
html += '<div class="latitude">' + feed.item.geo.lat + '</div>';
html += '<div class="longitude">' + feed.item.geo.long + '</div>';
...it doesn't get the data for these elements.
How should I go about accessing both the geo:lat and geo:long?
Here's a live example: http://jsbin.com/sibafeke/1/edit

The data for geo:lat and geo:long can be accessed this way:
html += '<div class="latitude">' + feed.item.lat + '</div>';
html += '<div class="longitude">' + feed.item.long + '</div>';

Using HTML inside jQuery code to pull part of a url and reuse it elsewhere?

The foundation: I have a simple lightbox on my home page (code below). It works exactly as I want it to: when the trigger image is clicked, it grays out the rest of the page and adds HTML to create an iframe for the text-based page that I want to display.
The problem: I need to create a lightbox where the content is dynamically chosen depending on the image that is clicked. The URLs will correspond to each other -- for example, if the user clicks "/media/X.png," he/she will be presented with a lightbox containing the iframe of the page "/X.html."
How can I accomplish this? My first stab at it is below (after the original, static lightbox code). It's cobbled together from various things I've read online and other answers to similar questions on StackOverflow, but I'm super new to jQuery / basically known no Javascript and I suspect I'm misusing variable assignment and the "split" function.
Many thanks.
EDIT: Someone has helped me insert the variable into the HTML (below). However, I think I'm assigning the variables incorrectly (see the beginning of the second block of code). Here's what I'm trying to do with each variable:
1. pre_lightbox_trigger: grab the string "X.png" from the image that the user has clicked.
2. lightbox_trigger: grab "X" only (remove ".png").
3. lightbox_trigger_href: make X into "X.html", and make it a link.
Code:
Original, static lightbox:
$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
if ($('#lightbox').length > 0) {
$('#lightbox').show();
}
else {
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src="why.html" id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
$('body').append(lightbox);
}
$(document).on('click', '#lightbox', function() {
$('#lightbox').hide();
});
});
});
My attempt to create a dynamic link:
$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var pre_lightbox_trigger = location.'.lightbox_trigger'.split('/').pop();
var lightbox_trigger = pre_lightbox_trigger.split('.').pop(1);
var lightbox_trigger_href = lightbox_trigger + ".html";
if ($('#lightbox').length > 0) {
$('#lightbox').show();
}
else {
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
$('body').append(lightbox);
}
$(document).on('click', '#lightbox', function() {
$('#lightbox').hide();
});
});
});
EDIT #2: Currently my "static" version of the lightbox is only for "trigger_small.png." However, I want a lightbox to appear when other images are clicked as well (for example, "vio_mass.png"). See below for sample HTML:
<div id="trigger">
<a class="lightbox_trigger" href="media/trigger_small.png">
<img src="media/trigger_small.png">
</a>
</div>
<div class="cat" id="violence_cat">
<div class="cat_grid" id="vio_1">
</div>
<div class="cat_grid" id="vio_2">
<img src="media/vio_mass.png">
</div>
...etc.

Instead of
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
You would do
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src=' + lightbox_trigger_href + ' id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';