We Keep Coding

How to get line break in javascript inside variable

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.

jQuery Mobile - undefined

So I am working on this app, where you could see a list of animals, then click on one item from the list and app would bring you into another screen, where you would be able to see for example a photo and a brief description about the animal (all data is from JSON file.)
However I am getting this issue with the description section, I keep getting "undefined" whenever I want to display animalDescription under the animalPicUrl
Here are my javascript functions
function generateAnimalLink(animal){
return '<li><a href="javascript:void(0)'
+ '" onclick="goToAnimalDetailPage(\''
+ animal.name
+ '\',\''
+ animal.picUrl +'\')">'
+ animal.name + '<br> <p>'
+ animal.description + '</br> </p>'
+ '</a></li>';
}
function goToAnimalDetailPage(animalName, animalPicUrl, animalDescription){
var animalPage = $("<div data-role='page' data-url=fakeUrl><div data-role='header'><h1>"
+ animalName + "</h1></div><div data-role='content'><img border='0' src='"
+ animalPicUrl + "' width=20% height=20%></img></div><div data-role='content'><h4>"
+ animalDescription "</h4></div><div data-role='footer'><h4>"
+ "</h4></div><a data-role='button' data-rel='back'>Back</a></div>");

Javascript html gallery

Im editing/creating the following script for my website.
As you can see below I want him to add a <div class="row"> at the start of every row. (Hard to explain).
Then with the var "getal" I want him to END this DIV tag after 4 items in it (4x the foreach loop)
But the way I'm trying to do it with the If loops is not working. Any ideas? (The code is working fine without the <div class="row">, if loops and var getal.
function show_albums (response) {
var getal = 0;
//hide main loader
$('#loading_gallery').hide();
$.each(response.data, function(key, value) {
//create html structure
//rijen teller
if (getal = 0 ) {
var html = '<div class="row">';
$('#albums').append(html);
}
//albums
var html = '' +
'<div class="col-lg-3 col-md-3 col-xs-3 thumb" id="album_' + key + '"> ' +
'<img class="img-thumbnail" id="album_cover_' + key + '" />' +
'<img id="loading_' + key + '" src="images/ajax-loader.gif" />' +
'<h2>' + value.name + '</h2>' +
'<p>' + value.count + ' foto's</p>' +
'</div>';
getal++;
if (getal = 4) {
var html = '</div>';
$('#albums').append(html);
getal = 0;
}
$('#albums').append(html);
}
}

You are using the assignment operator = instead of the comparison operator == in your if statements. Try replacing those.

Making multiple elements with jquery each() and jquery function

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?

JS/Ajax Image upload- producing multiple image preview thumbnail of the same content

I am currently working with an Image uploader(Source Files). I am having difficulties creating duplicate preview fields. I am creating the preview image form but it is only displaying one thumbnail. How can i get the Js to give me two thumbnails? Here is a LIVE EXAMPLE and further explanation to my source code
This what I initially want to do:
Snippet of JS for creating the preview Image forms(thumbnails)
upLoaderPreviewer.js
<script>
function createImageForm(index) {
var form = '';
form += '<div><table cellspacing="0">';
form += '<tr><td class="label">'
+ '<label for="imageToUpload' + index + '">'
+ $.uploaderPreviewer.messages.imageLabel + ' ' + index + ':</label></td>';
form += '<td class="removeImageButton">'
+ '</td>';
form += '<td class="imageFormFileField">'
// BUG: If the "enctype" attribute is assigned with jQuery, IE crashes
+ '<form enctype="multipart/form-data">'
+ '<input id="imageToUpload' + index + '" type="file" />'
+ '<input type="hidden" name="currentUploadedFilename"'
+ ' class="currentUploadedFilename" /></form>'
+ '</td></tr>';
form += '<tr><td></td><td></td><td>'
+ '<div class="previewImage" style="float:left; margin:10px 10px 10px 0; "><img /></div>'
+ '<button type="button" class="small removeImage"></td></td></tr></table></div>';
return form;
};
</script>

try this:
replace the function 'displayImage' on the uploaderpreviewer.js with this:
function displayImage($previewDiv, imageUrl) {
//New
var yourCustomPreview = $('#custompreview');
var imageFilename = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);
$previewDiv
.removeClass('loading')
.addClass('imageLoaded')
.find('img')
.attr('src', imageUrl)
.show();
$previewDiv
.parents('table:first')
.find('input:hidden.currentUploadedFilename')
.val(imageFilename)
.addClass('imageLoaded');
$previewDiv
.parents('table:first')
.find('button.removeImage')
.show();
//New
yourCustomPreview.prepend('<img src="' + imageUrl + '"/>');
}
and add this where you whant to duplicate the thumb:
<div id="custompreview">
</div>