I have an array:
var social = [
["facebook", "#link", "#62b500", "images/facebook.png"],
["instagram", "#link", "#62b500", "images/instagram.png"],
["twitter", "#link", "#62b500", "images/twitter.png"]
];
I want to a add line breaks or space/margin between the icons at certain positions.
The result should look like this:
Facebook
Instagram
----linebreak/free space---
twitter
----linebreak/free space---
something else
something else
something else
My transformation-code so far looks like this:
$("#socialside").append('<ul class="mainul"></ul>');
/// generating bars
for(var i=0;i<social.length;i++){
$(".mainul").append("<li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +
'<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');
}
What possibilities do I have to add a line-break/space?
How can I achieve this in my JavaScript?
I made it like this one. Will it be good enough?
I will have to create a new loop each time i want a different spacing, but atleast it works for me.
Created a loop that will end on 3 element. Then created the same loop starting from 3 to 4 element and added </br> at the beginning.
for(var i=0;i<3;i++){
$(".mainul").append("<li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +
'<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');
}
for(var i=3;i<4;i++){
$(".mainul").append("</br><li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +
'<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');
}
A <br> or an empty <li></li> would do the job.
Related
What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";
Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.
Can someone help me out in inserting an image in the below function. I've used a json object that returns values for campaignid and campaignname.
<script>function searchedCampaigns(data) {
if (data[0].length > 0) {
var searchcmp = "";
for (var j = 0; j < data[0].length; j++) {
var input = document.createElement("input");
console.log(input.name);
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '/>' +
**// image to be inserted here**
+ data[0][j].campaignName + '<br/>'; // value
}
$("#newcamp").html(searchcmp);
}}</script>
output should be this
I'm getting the checkbox as well as the campaign name. I want the image in between these two.
As simple as this..
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '/>' +
'<img src="'+yourimageurlfromdata+'"/>'+
'data[0][j].campaignName + '<br/>';
I suggest you a code like this one:
<input type="checkbox"><img src="Image.PNG">Test</img></input>
Also, based on your code, it can be updated like this:
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '><img src=' + YOUR_URL_LOCATION + ' />' + data[0][j].campaignName + '</input><br/>';
Where YOUR_URL_LOCATION, can be in the JSON or somewhere else.
It's going to display something like this:
Using Parse.com and JavaScript SDK.
The below code runs a query, which has multiple results. It then iterates through these and displays.
profileURL: Badgeresults[i].get('SentTo').get('pic'),
returns a profile picture, which I only want to show once, currently because I have it under the
`_.each(Badges, function (item) {`
section it repeats for each object returned.
Where and how can I add a line to display the profile picture only once, I know it needs to be outside of _.each(Badges, function (item) { but I want it to appear at the top of these results. I presume I need to use something like `$('#profile_pic').attr('src',imageURLs[0]);
to display it?`
-
query.find({
success: function(Badgeresults) {
// If the query is successful, store each image URL in an array of image URL's
var Badges = [];
for (var i = 0; i < Badgeresults.length; i++) {
Badges.push({
imageURL: Badgeresults[i].get('Global_Badges_img'),
categorySelected: Badgeresults[i].get('category'),
badgeNameSelected: Badgeresults[i].get('BadgeName'),
AwardedBy: Badgeresults[i].get('uploadedBy').get('username'),
AwardedTo: Badgeresults[i].get('SentTo').get('username'),
profileURL: Badgeresults[i].get('SentTo').get('pic'),
comment: Badgeresults[i].get('Comment'),
});
}
_.each(Badges, function (item) {
var wrapper = $('<div></div>');
//$('#profile_pic').append('<img class="images BadgeImgOutline responsive-image" src="' + item.profileURL + '" />');
//wrapper.append('<img class="images responsive-image BadgeImgOutline" src="' + item.profileURL + '" />'+ '<br>');
wrapper.append('<img class="images responsive-image BadgeImgOutline" src="' + item.imageURL + '" />'+ '<br>');
wrapper.append('<div class="tag categorySelectedlabel">' + item.categorySelected + '</div>' + '<br>');
wrapper.append('<div class="tag badgeNameSelected">' + item.badgeNameSelected + '</div>' + '<br>');
wrapper.append('<div class="tag awardedbylabel">' + item.AwardedBy + '</div>' + '<br>');
wrapper.append('<div class="tag senttolabel">' + item.AwardedTo + '</div>' + '<br>');
wrapper.append('<div class="item fui-chat">' + ' Reason: ' + item.comment + '</div>' + '<br>');
$('#containerFriendsBadges').append(wrapper);
"display the profile picture only once" - does that mean that Badgeresults (or your Badges) can contain same picture (url) many times?
If so - I would just write a check for duplicate strings before putting them into Badges and place it (the check) before Badges.push({..
Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?
What I thought should have been easy has now taken great amount of my time.
I'm simply trying to edit some text in the /plugins/advlink/js/advlink.js file.
Consider this function:
function getTargetListHTML(elm_id, target_form_element) {
var targets = tinyMCEPopup.getParam('theme_advanced_link_targets', '').split(';');
var html = '';
html += '<select id="' + elm_id + '" name="' + elm_id + '" onchange="this.form.' + target_form_element + '.value=';
html += 'this.options[this.selectedIndex].value;">';
html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';
for (var i=0; i<targets.length; i++) {
var key, value;
if (targets[i] == "")
continue;
key = targets[i].split('=')[0];
value = targets[i].split('=')[1];
html += '<option value="' + key + '">' + value + ' (' + key + ')</option>';
}
html += '</select>';
return html;
}
If I make changes to for example advlink_dlg.target_blank in the appropriate language file, the changes seems to show up ok.
But if I try to change the ' (_blank)' on the same line to whatever, eg. ' (__blank)', nothing happens.
Why is that?
What you did should work!
I changed the line (in /plugins/advlink/js/advlink.js) to
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (XXXXXXXXXXXX_blank)</option>';
and see what i got after selecting some text + pushing the link-button: