We Keep Coding

Dynamically add array contents as new elements - JQuery

edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.

try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs

The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not &quote;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems

for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}

Store html code to javascript variable

I have a problem when converting store html code to javascript variable, I know we can convert using converter tools, but I can't use this converter in my situation.
I am trying the following code
var t_cls="font-effect-anaglyph rotator";
var randompostsurl="www.allinworld99.blogspot.com";
var randompoststitle="Open Inspect Element And see the Code";
var default_script = "<script> document.write('<div><a class="+t_cls+" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>'); <\/script>\n";
$("#apnd").append(default_script);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="apnd"></div>
The above one will produce the following output
<a class="font-effect-anaglyph" rotator="" href="www.allinworld99.blogspot.com" rel="nofollow">Open Inspect Element And see the Code</a>
Why the rotator class will created as new attribute?

Because there are no quotes around the class attribute in the result. You need to add them, since you have a space in the attribute's value:
default_script = "<script> document.write('<div><a class=\""+t_cls+"\" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";
// Here --------------------------------------------------------^^---------^^

Replace your default_script code
default_script = "<script> document.write('<div><a class='"+t_cls+"' href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";

As there are no quotes in class, it produce rotator as a new attribute. But you can achieve rotator as a class by the following way. i.e replacing single quotes with escape sequence.
<script>$(document).ready(function(){
var t_cls="font-effect-anaglyph rotator", randompostsurl="www.allinworld99.blogspot.com",
randompoststitle="Open Inspect Element And see the Code",
default_script = "document.write(\"<div><a class=\""+t_cls+"\" href=\"" + randompostsurl + "\" rel=\"nofollow\">\" + randompoststitle + \"<\/a><\/div>\");<\/script>\n";
$("#apnd").append(default_script);
});
</script>

Javascript creating a li element and assigning text to data-attribute is being truncated

In javascript I am creating a li element as per below which contains only the problem I am seeing.
The data-videoUrl is showing the full url, so all good there.
The issue is the entry.link and entry.title, while debugging, I verified the strings are within quotes. i.e. "This is a pod cast." The data-videoTitle and data-videoDesciption are being truncated though. i.e. "This" will show from the previous example.
I'm not sure what is occuring in the latter two data assignments as I've verified the text is not double quoted etc. What is occuring with the html5 data elements? I can provide a more complete example if needed.
var podItem = document.createElement("li");
podItem.innerHTML = entry.title
+ "<a data-videoUrl=" + entry.link + " "
+ "data-videoTitle=" + entry.title + " "
+ "data-videoDescription=" + entry.contentSnippet + " "
+ "</a>";
document.getElementById("podCastList").innerHTML += podItem.innerHTML;
Here is a the html being generated.
<a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>
I'm sure there's something I'm not fully understanding. Why would the first data element get the text correctly, and the next two data elements break up the text as in: [data-videotitle="CNN" student="" news=""]. The text is a straight forward sentence quoted i.e. "CNN student news..."
Why would videoUrl work correctly and the other two not?

You need to add some quotes around the attributes...
podItem.innerHTML = entry.title
+ "<a data-videoUrl=\"" + entry.link + "\" "
+ "data-videoTitle=\"" + entry.title + "\" "
+ "data-videoDescription=\"" + entry.contentSnippet + "\" "
+ "</a>";
You'll also want to make sure you escape any quotes that are inside the attributes as well.

Avoid repetition by passing in a value

I'm inserting images into dom with javascript and I would like to pass in the second classname and some other properties of the images while calling the function.
So I have functions containing code this:
function movieCreator(movieName){
'<img class="clip terminator" src="images/terminator.png" onclick="imageControl(this);" alt="terminator" />','
};
function movieCreator(movieName){
'<img class="clip rambo" src="images/rambo.png" onclick="imageControl(this);" alt="rambo" />'
};
There is some other stuff inside those functions too but I'm trying to simplify the question a bit. I would like to pass in the words "terminator" and "rambo" while calling the functions like
movieCreator(terminator);
movieCreator(rambo);
but my head gets really stuck while I try to think where to place the quotes and things like that in order to replace those words correctly from the code.
So my question is this: what would be the correct syntax of replacing the word "terminator" with a dynamical value that is passed in when the function is called?

Call function like
movieCreator('terminator');
movieCreator('rambo');
Create function like
function movieCreator(movieName){
'<img class="clip '+movieName+'" src="images/'+movieName+'.png" onclick="imageControl(this);" alt="'+movieName+'" />','
};

Something like this?
'<img class="clip ' + movieName + '" src="images/' + movieName + '.png" onclick="imageControl(this);" alt="' + movieName + '" />'

function movieCreator(movieName) {
return '<img class="clip ' + movieName + '" src="images/' + movieName + '.png" onclick="imageControl(this);" alt="' + movieName + '" />';
};
movieCreator('terminator');
movieCreator('rambo');

Try this
function movieCreator(movieName){
var imgTag= '<img class="clip '+ movieName +'" src="images/'+ movieName + '.png" onclick="imageControl(this);" alt="'+ movieName+'" />'
};

Simple:
function movieCreator(movieName){
alert(movieName);
}
movieCreator('terminator');
movieCreator('rambo');

You're creating a dependency on the file name / location with this kind of code. What happens if the sever admin moves the images folder? Or if you misspell a movie title when calling the function?
This kind of situation us normally better suited for server code to generate based on a data source of actual movie information (including file name and location).

Shutter reloaded for Next-Gen gallery -- smaller images and the title from alt attribute

Sorry if this question is out of the place, but I didn't find any information about it at other places on the net... :-(
So, I have a Shutter-box javascript Lightbox, that I need to modify.
The Shutterbox script is here (already customised a bit): http://pastebin.com/g5qTF86H
The page where it is used: http://www.mrsherskin.com/collections/subconscious-levitation
1). By default this script doesn't take the alt of the images it takes for lightboxing, just the title attribute of it. I would like to set up a variable in this script to put the image's alt attribute as a title above the picture. I would use this jQuery script for it inserted in the showImg initialisation, but I don't know how could I set up a variable that inserts this alt tag read from the respective images:
var ImgTitle = jQuery('<div id="img-title"><h1 class="entry-title">Alt title</h1></div>');
jQuery(ImgTitle).appendTo('#shWrap');
2.) I would like to accommodate the size of the shown image so that 2-3 lines of description text could fit under it. Unfortunately I didn't find the part of the script that calculates the size of the lightboxed image, where to change it?
Any help please?
Thank you in advance.

Thanks so much for the answer about how to get the image alt attribute, it worked perfectly for me! I was a little confused about where to put the code that you provided, so in case any one else had the same issue I hope I can help clarify.
Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}
Change that line to the following:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Directly above that line you just changed, add the following:
ALT = jQuery(L).children('img').attr('alt');
I then found the following line:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
And changed it to this:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
Hope this helps!
-RG

OK, I found the solutions:
(1) I fetched the alt of the images under shutterbox rel-links by this jQuery method:
ALT = jQuery(L).children('img').attr('alt');
Added it to the shutterLinks object:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Then inserted this variable in a new jQuery object, under the make function:
var ImgTitle = jQuery('<div id="img-title"><h1>' + shutterLinks[ln].alt + '</h1></div>');
jQuery(ImgTitle).prependTo('#shWrap');
(2) I found the part which scales down the large images (if image size is bigger than viewport size), and added to the end a shrink by 30 px
TI.style.width = (TI.width - 30) + 'px'; // add side padding
TI.style.height = (TI.height - 30) + 'px'; // add bottom padding
Update suggested by Rachel:
To put this code, follow these steps:
Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}
Change that line to the following:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Directly above that line you just changed, add the following:
ALT = jQuery(L).children('img').attr('alt');
Then find the following line:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
And change it to this:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';