We Keep Coding

How to use the first image like Thumbnail in Related Post widget for blogger?

r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize + "-c") : d.noImage;
This line requires an image to be uploaded to Blogger.
What I want is to replace it so that it brings the first picture from the post and the link is external and not from Blogger.
The complete code is -
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex, showRelatedPost;
(function(n, m, k) {
var d = {
widgetTitle: "<h4>Artikel Terkait:</h4>",
widgetStyle: 1,
homePage: "http://www.dte.web.id",
numPosts: 7,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 72,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Baca Selengkapnya",
callBack: function() {}
};
for (var f in relatedPostConfig) {
d[f] = (relatedPostConfig[f] == "undefined") ? d[f] : relatedPostConfig[f]
}
var j = function(a) {
var b = m.createElement("script");
b.type = "text/javascript";
b.src = a;
k.appendChild(b)
},
o = function(b, a) {
return Math.floor(Math.random() * (a - b + 1)) + b
},
l = function(a) {
var p = a.length,
c, b;
if (p === 0) {
return false
}
while (--p) {
c = Math.floor(Math.random() * (p + 1));
b = a[p];
a[p] = a[c];
a[c] = b
}
return a
},
e = (typeof labelArray == "object" && labelArray.length > 0) ? "/-/" + l(labelArray)[0] : "",
h = function(b) {
var c = b.feed.openSearch$totalResults.$t - d.numPosts,
a = o(1, (c > 0 ? c : 1));
j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&start-index=" + a + "&max-results=" + d.numPosts + "&callback=showRelatedPost")
},
g = function(z) {
var s = document.getElementById(d.containerId),
x = l(z.feed.entry),
A = d.widgetStyle,
c = d.widgetTitle + '<ul class="related-post-style-' + A + '">',
b = d.newTabLink ? ' target="_blank"' : "",
y = '<span style="display:block;clear:both;"></span>',
v, t, w, r, u;
if (!s) {
return
}
for (var q = 0; q < d.numPosts; q++) {
if (q == x.length) {
break
}
t = x[q].title.$t;
w = (d.titleLength !== "auto" && d.titleLength < t.length) ? t.substring(0, d.titleLength) + "…" : t;
r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize + "-c") : d.noImage;
u = ("summary" in x[q] && d.summaryLength > 0) ? x[q].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, d.summaryLength) + "…" : "";
for (var p = 0, a = x[q].link.length; p < a; p++) {
v = (x[q].link[p].rel == "alternate") ? x[q].link[p].href : "#"
}
if (A == 2) {
c += '<li><img class="related-post-item-thumbnail" alt="" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + '</span> " + d.moreText + "</span>" + y + "</li>"
} else {
if (A == 3 || A == 4) {
c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="' + v + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></div>" + y + "</li>"
} else {
if (A == 5) {
c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + v + '" title="' + t + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-tooltip">' + w + "</span></a>" + y + "</li>"
} else {
if (A == 6) {
c += '<li><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + "</span></span>" + y + "</div></li>"
} else {
c += '<li><a title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></li>"
}
}
}
}
}
s.innerHTML = c += "</ul>" + y;
d.callBack()
};
randomRelatedIndex = h;
showRelatedPost = g;
j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
})(window, document, document.getElementsByTagName("head")[0]);
//]]>

I find a solution
change this
"/feeds/posts/default"
to
"/feeds/posts/summary"
and this
r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize + "-c") : d.noImage;
to
if ("media$thumbnail" in x[q] && d.thumbnailSize !== false) {
r = x[q].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s" + d.thumbnailSize + "/s72-c");
} else if (x[q].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)) {
r = x[q].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)[1];
} else {
r = d.noImage;
}
and this line
u = ("summary" in x[q] && d.summaryLength > 0) ? x[q].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, d.summaryLength) + "…" : "";
to
u = ("content" in x[q]) ? (x[q].content.$t.replace(/<.*?>/g, "")).substring(0, d.summaryLength) + '…' : "";

need to re-enable onmouseon disabled with onclick event

I'm trying to modify a prestashop module which allows to display groups of attributes by block: if the product has more than one group of attributes, the first block is displayed. After selecting one attribute of this group, the second group is displayed.
If the group of attributes is color, I need to display it in a popup.
I added this code at the end of the js file of the module:
$(document).ready(function(e) {
$('.input-color').on('mouseover', function(e){
let color = $(this).parent().find('.color').css('background-color');
let image = $(this).parent().find('.color').css('background-image');
console.log(color, 'this');
if(color) {
$('#cover-background').show().css({'background-color': color,'width': '400px', 'height': '400px',
'margin': '0 auto', 'position': 'absolute', 'z-index': 99, 'left': '-60%', 'top': '40%'});
}
if(image) {
$('#cover-background').show().css({'background-image': image,'width': '400px', 'height': '400px',
'margin': '0 auto', 'position': 'fixed', 'z-index':999, 'left': '20%', 'top':'30%'});
}
});
$('.input-color').on('mouseout', function(e){
$('#cover-background').hide();
});
});
And a div with id=cover-background
The popup works fine for the first group of attributes.
But after clicking on one of attributes, the onmouseover is disabled.
You can see it here : http://decoelem2.kamilane.odns.fr/16-15976-table-basse-relevable-extensible-bessy.html (click on the button PERSONNALISER to display the first group)
The code to display the block (it's just a part of all the code of the module):
$output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\
<input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\
data-product-attribute="' + y + '" name="group[' + y + ']" \n\
value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\
<span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\
' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\
title="' + attributes[l] + '">\n\
<span class="sr-only">' + attributes[l] + '</span>\n\
' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\
</span>\n\
</li>';
}
}
I can send the file or all the module if you need it.
Thanks a lot for your help!
[edit] Here is all of the function (I think):
function generate_html_content_bloc(first, id_group, id_group_next)
{
$output = '';
class_sup = '';
for (j in fa_groups) { //on parcourt les groupes d'attributs
groupName_id = 'fa_group_' + j;
groups = fa_groups[j];
name_group = groups['name'];
y = j.replace('g_', '');
if (!first && id_group_next != j){
if(array_key_exists(j, tread_group)){
$(".product-variants").append(tread_group[j]);
}
continue;
}
$output += '<div id="field_' + j + '" class="clearfix product-variants-item">';
$output += '<span class="control-label"><strong>Choisissez : </strong>' + name_group + ' </span><br />';
attributes = groups['attributes']; //On a ici le tableau des attributs pour le groupe
if (groups['group_type'] == 'radio') {
$output += '<ul id="group_' + j + '" class="radio_btn_list radio_btn_list_' + j + '">';
$output += '<li id="li_list_0_' + j + '" class="input-container pull-xs-left float-xs-left hide-element ' + class_sup + ' attr_disabled">\n\
<input id="g_radio_0' + j + '" class="input-radio attribute_radio g_radio_' + j + '" type="radio" data-product-attribute="' + y + '" \n\
name="group[' + y + ']" value="0" checked="checked" title="' + not_avialable + '" disabled="true">\n\
<span class="radio-label radio-label-desabled"> </span>\n\
</li>';
for (var k in attributes) {
l = k;
k = k.replace('k_','');
if (!fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)
continue;
else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes
continue;
$output += '<li id="radio_' + k + '" class="input-container pull-xs-left float-xs-left' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' attr_disabled"' : '') + '">\n\
<input type="radio"' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : '') + ' id="g_radio_' + j + '_' + k + '" \n\
class="input-radio attribute_radio g_radio_' + j + '" data-product-attribute="' + y + '" name="group[' + y + ']" \n\
value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 0);" />\n\
<span class="radio-label">' + attributes[l] + '</span>\n\
</li>';
}
$output += '</ul>';
} else if (groups['group_type'] == 'color') {
$output += '<ul id="group_' + j + '" class="clearfix">';
$output += '<li id="li_list_0_' + j + '" class="float-xs-left pull-xs-left input-container color_' + j + ' selected hide-element ' + class_sup + '">\n\
<input id="color_0_' + j + '" class="input-color" type="radio" data-product-attribute="' + j + '" name="group[' + y + ']" \n\
value="0" checked="checked" disabled="true">\n\
<span class="color_select color texture" style="background-image: url(' + fa_col_img_dir + 'croix.png)" title=""></span>\n\
</li>';
for (var k in attributes) {
l = k;
k = k.replace('k_','');
if (!fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)
continue;
else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes
continue;
$output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\
<input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\
data-product-attribute="' + y + '" name="group[' + y + ']" \n\
value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\
<span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\
' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\
title="' + attributes[l] + '">\n\
<span class="sr-only">' + attributes[l] + '</span>\n\
' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\
</span>\n\
</li>';
}
} else if (groups['group_type'] == 'select') {
$output += '<select class="form-control form-control-select" name="group[' + y + ']" data-product-attribute="' + y + '" id="group_' + j + '" \n\
onchange="set_selected_n(\'' + j + '\', this.value,\'' + fa_key_val[j] + '\', 2);">';
$output += '<option value="0" selected="selected" id="li_list_0_' + j + '">' + name_select + '</option>';
for (var k in attributes) {
l = k;
k = k.replace('k_','');
if (!fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)
continue;
else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes
continue;
$output += '<option value="' + k + '"' + ((fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" class="fa_disabled"' : '') + '>' + attributes[l] + '</option>';
}
$output += '</select>';
}
$output += '<span class="attribute-arrow-right arrow-'+groups['group_type']+' group_' + j + ' displaynone icon icon-arrow-right'+(((fa_attr_all && (id_group_next == j/* || first_first*/)) ? ' arrow-right-show' : ''))+'"><i class="material-icons">arrow_forward</i></span>';
if(fa_attr_all && first_first)
first_first = false;
if(first || !fa_attr_all)
$output += '</div>';
if (first && !fa_attr_all) //si c'est lors du chargement et que c'est l'option bloc par bloc, on s'arrete à la premiere boucle
return $output;
if (!first && fa_attr_all){/*On affiche le résultat quand nous sommes en tout les blocs*/
$('#field_' + id_group+' .attribute-arrow-right.group_'+ id_group).removeClass('arrow-right-show');
$('#field_' + j).html($output);
$output = '';
}
}
if (first || !fa_attr_all)/*On retourne le résultat quand nous sommes en bloc par bloc*/
return $output;
}

When it is a number display text center else display text left

The numbers must center align and the text must left align
I'm getting a error in my code. Can anyone tell me what am I doing wrong
Image
Code
color = color !== "" && color !== undefined ? " <span class=\"color\" style=\"background: #" + color + "\"></span>" : " <span class=\"color\"></span>";
contentHtml += "<td rowspan1=\"" + 1 + "\" class=\"" + (rowspan !== "" && rowspan > 1 ? "groups" : "") + " " + (typeof value == Number) ? "text-center" : "text-left" + "\">" + value + (Number(value) ? preFix : "") + color + (Number(value) ? postFix : "") + "</td>";
if (rowspan > 1) {
var rowspanContent = "<td rowspan1=\"" + rowspan + "\" class=\"" + (rowspan !== "" && rowspan > 1 ? "groups" : "") + " " + (typeof value == Number) ? "text-center" : "text-left" + "\">" + value + (Number(value) ? preFix : "") + color + (Number(value) ? postFix : "") + "</td>"; }

Wrap your ternary statement (typeof value == Number) ? "text-center" : "text-left" in brackets so that you have ... + ((typeof value == Number) ? "text-center" : "text-left") + ... in both instances where you use it

How can I add a header to my JSON output table?

I'm trying to add a header to this JSON output table, but I have no clue how to do that. This code gives me a table populated with the data returned from the database and puts it in a table format as structured by the <td><tr> tags. The problem is that I need a header for the table and I don't know how to get that part coded. Any ideas?
function renderSearchResults( results, domNode ) {
var i;
var out = "<table>";
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
// loop to print the JSON in a table format
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
result.ContractId +
"</td><td>" +
result.ContractTitle +
"</td><td>" +
result.Terminal +
"</td><td>" +
result.Cabinet +
"</td><td>" +
result.Section +
"</td><td>" +
result.Folder +
"</td><td>" +
result.Sheet +
"</td><td>" +
result.Consult +
"</td><td>" +
result.Location +
"</td><td>" +
result.Active +
"</td><td>" +
result.Theme +
"</td><td>" +
result.Construction +
"</td><td>" +
result.Subtheme +
"</td><td>" +
result.AsBuilt +
"</td><td>" +
result.Year +
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );
out += "</table>";
domNode.innerHTML = out;
}

During your initial declaration of out you can put in <th> or tableheader tags, i.e:
function renderSearchResults( results, domNode ) {
var i;
var out = "<table><th>ContractId</th><th>ContractTitle</th><th>Terminal</th><th>Cabinet </th><th>Section </th><th>Folder </th><th>Sheet </th><th>Consult </th><th>Location </th><th>Active </th><th>Theme </th><th>Construction </th><th>Subtheme </th><th>AsBuilt </th><th>Year </th>";
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
(result.ContractId !== null ? result.ContractId : 'Not Applicable') +
"</td><td>" +
(result.ContractTitle !== null ? result.ContractTitle : 'Not Applicable') +
"</td><td>" +
(result.Terminal !== null ? result.Terminal : 'Not Applicable') +
"</td><td>" +
(result.Cabinet !== null ? result.Cabinet : 'Not Applicable') +
"</td><td>" +
(result.Section !== null ? result.Section : 'Not Applicable') +
"</td><td>" +
(result.Folder !== null ? result.Folder : 'Not Applicable') +
"</td><td>" +
(result.Sheet !== null ? result.Sheet : 'Not Applicable') +
"</td><td>" +
(result.Consult !== null ? result.Consult : 'Not Applicable') +
"</td><td>" +
(result.Location !== null ? result.Location : 'Not Applicable') +
"</td><td>" +
(result.Active !== null ? result.Active : 'Not Applicable') +
"</td><td>" +
(result.Theme !== null ? result.Theme : 'Not Applicable') +
"</td><td>" +
(result.Construction !== null ? result.Construction : 'Not Applicable') +
"</td><td>" +
(result.Subtheme !== null ? result.Subtheme : 'Not Applicable') +
"</td><td>" +
(result.AsBuilt !== null ? result.AsBuilt: 'Not Applicable') +
"</td><td>" +
(result.Year !== null ? result.Year : 'Not Applicable')+
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );
out += "</table>";
console.log(out);
domNode.innerHTML = out;
}

There is a different tag for the table header.
<tr> is for row <th> for your headers and <td> for the data.
You can check here for more info.
You can either add your header after your check for results:
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
} else {
out += "<tr><th>Header</th></tr>"
}

Ajax and Javascript - get filename

How can I get loaded filename? I have to put this instead of header, but I don't know how. I've tried to add additional parameter to xmlParser function, but actually it didn't work for me. Here is my code:
$(document).ready(function () {
doAJAX('LoadedFile1.xml');
doAJAX('LoadedFile2.xml');
});
function doAJAX(url) {
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: xmlParser
});
}
function xmlParser(xml) {
$('#load').fadeOut();
var myDate = new Date();
var currentdate = new Date();
var n =
currentdate.getFullYear()
+ ("0" + (currentdate.getMonth() + 1)).slice(-2)
+ ("0" + currentdate.getDate()).slice(-2)
+ ("0" + currentdate.getHours()).slice(-2)
+ ("0" + currentdate.getMinutes()).slice(-2)
+ ("0" + currentdate.getSeconds()).slice(-2);
var x = false;
var y = false;
$(xml).find("programme").each(function () {
if ((parseFloat(n) > (parseFloat($(this).attr("start").slice(0,-6)))) && (parseFloat(n) < (parseFloat($(this).attr("stop").slice(0,-6)))))
{
$(".main").append('<div class="header">HEADER</div><div class="programme"><div class="title">' + $(this).find("title").text() + '</div><div class="timec">' + n + '</div><div class="time">' + $(this).attr("start").slice(0,-6) + '</div><div class="time">' + $(this).attr("stop").slice(0,-6) + '</div><div class="description">' + $(this).find("desc").text() + '</div><div class="date">Published ' + $(this).find("category").text() + '</div>');
x = true;
}
else if ( x == true && y == true)
{
$(".main").append('<div class="programme"><div class="title">' + $(this).find("title").text() + '</div><div class="timec">' + n + '</div><div class="time">' + $(this).attr("start").slice(0,-6) + '</div><div class="time">' + $(this).attr("stop").slice(0,-6) + '</div><div class="description">' + $(this).find("desc").text() + '</div><div class="date">Published ' + $(this).find("category").text() + '</div></div>');
x = false;
}
y = true;
$(".programme").fadeIn(1000);
});
}