Develop Reference

How do I style this code using html and css?

The code below is for listing blogger posts within a Label Name, if the post has the specific Label Name it will be shown in this list. I would like to be able to change the appearance of how everything is displayed by changing where the post image would look, and where the title would look, change background color, add borders, shadows change the font etc ...(I know how to change the appearance with css, but I do not know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.
var startIndex = 1;
var maxResults = 5;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "https://levon-ltr.blogspot.com//feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div>
<ul id="postList12"></ul>
</div>

This creates stuff you can style with CSS. For example:
#postList12 li {
border: 1px solid blue;
}
Use the inspector in your browser to see what it makes. If you want to change the order of elements or add new ones you’ll have to edit the script to do that.

Add images to a div programatically and align them horizontally and vertically

I have 6 images and I want to add those images to a div programatically via javascript or jquery. What is the way to do it? Like I want the alignment to be 2 images in every. So, if there are 6 images, I want 3 rows, each row having 2 mages. Is it possible to without css via js or jquery only .
Also, I would like to add a double click handler to each image added. What is best way to it.
I am looping thru various images like :
for(var i = 0; i < elements.length; ++i) {
if(elements[i].querySelector("img")) {
var path = elements[i].querySelector("img").src;
var newimage = document.createElement('img');
newimage.setAttribute('src', path);
var div = document.getElementById("enclosingdiv");
enclosingdiv.appendChild(newimage);
}
}

You can do it like this-
<div id="imagesDisplay">
</div>
<script>
$(document).ready(function(){
var elements = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var noImages = 2; // 2 images per row
var imgCount = 0; // will keep count of images per row
var divHTML = ""; // will hold html tags to be dispalyed once the loop is complete i.e. all the images are added
for(var i = 0; i < elements.length; ++i) {
console.log(elements[i]);
if( imgCount ===0 ) {
divHTML += "<div class='row'>\n";
}
divHTML += "<div class='col-md-6'><img src='images/"+elements[i]+"'></div>\n";
imgCount++;
if( imgCount === noImages) {
imgCount = 0;
divHTML += "</div>\n";
}
}
$("#imagesDisplay").html(divHTML);
});
</script>

need a push in the right direction with js/php gallery

I'm trying to create an image gallery. Most of it is working as intended, however, the thing I want to change on this gallery is so that when I click on the next picture or previous picture, I want the thumbnails to show the next 8 pictures. At the moment it's showing the next picture
PHP code:
<?php
$pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE);
if(count($pics)) {
rsort($pics);
foreach($pics as $pictures) {
echo "<a href='$pictures' target='_blank'><img class='Gallery' src='$pictures'></a>";
}
echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">❮</div></a>';
echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">❯</div></a>';
echo '</div>';
echo '<div class="thumbs_container">';
foreach(array_slice($pics, 1) as $thumbs)
if ($thumb++ < 8){
echo "<a href='$thumbs' target='_blank'><img class='thumbs' src='$thumbs'></a>";
}
} else {
echo "Sorry, no images to display!";
}
?>
The code is showing 1 thumbnail which updates correctly, but I want 8 thumbnails at least..
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("Gallery");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
var thumbIndex = slideIndex +1;
showThumbs(thumbIndex);
function plusThumbs(t){
showThumbs(thumbIndex += t);
}
function showThumbs(t){
var g;
var getThumb = document.getElementsByClassName("thumbs");
if (t > getThumb.length) {thumbIndex = 1}
if (t < 1) {thumbIndex = getThumb.length};
for (g = 0; g < getThumb.length; g++){
getThumb[g].style.display = "none";
}
getThumb[thumbIndex-1].style.display = "block";
}
}
Any ideas on how I achieve this?

I hope, I understood your idea and what you want to do. Anyway here is my advises. At first I would like to say, that building html tags using php is not even a good idea. It's always a better way to separate code, instead of making some kind of mix. So, I'll advice you to use your php script only to find all images and send an array of src to client side (in JSON format). When you get an array of src, you could make a gallery only using javascript or jQuery. With jQuery you could make a simple GET Ajax Request, in order to get an array of img's src. Then you could init your gallery.
The gallery you can make in this way:
So you have an id an change it by clicking prev or next buttons. After clicking you regenerate the current image and thumbs container.
Here is the working example (jQuery):
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="galery">
<div class="image_wrapper">
<button class="prev">Prev</button>
<img src="" alt="curr_image" class="curr_image" />
<button class="next">Next</button>
</div>
<div class="thumbs_wrapper"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var fakeSrc =
['src1', 'src2', 'src3', 'src4', 'src5', 'src6','src7', 'src8', 'src9', 'src10', 'src11'];
var cId = 0;
var thumbs_wrapper = $('.thumbs_wrapper');
var curr_image = $('.curr_image');
var prev = $('.prev');
var next = $('.next');
var updateThumbs = function() {
var max = ( (cId + 9) > fakeSrc.length) ? fakeSrc.length : cId + 9;
thumbs_wrapper.html('');
for (var i = cId+1; i < max; ++i) {
var img = document.createElement('img');
img.className = 'thumb_image';
var src = fakeSrc[i];
img.alt = src;
img.src = src;
thumbs_wrapper.append(img);
}
}
var setCurrImg = function() {
curr_image.src = fakeSrc[cId];
curr_image.prop('src', fakeSrc[cId]);
curr_image.prop('alt', fakeSrc[cId]);
}
var updateGalery = function() {
setCurrImg();
updateThumbs();
}
prev.click(function() {
--cId;
if (cId < 0) cId = 0;
updateGalery();
});
next.click(function() {
++cId;
if (cId > fakeSrc.length - 1) cId = fakeSrc.length - 1;
updateGalery();
});
updateGalery();
});
</script>
</body>
</html>
Hope, that I've helped you to find the solution.

how to display information underneath a specific button using javascript

I have the following piece of code I am working on. My purpose is to be able to grab information about different users from a specific website, display the name and other info and then have a button that when clicked, prints more information. I am able to get the information and display the name and picture, but when I click the button the information is displayed at the top of the page, not under the specific button that was clicked. I want for the information to be display under each user... I am new to Javascript and learning on my own, any help is appreciated!
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + '<br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'")>Repositories</button></br>'+'<div id="id"></div>';
}
document.getElementById("id01").innerHTML = out;
}
Printing Function
function printF(array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
document.getElementById("id").innerHTML = out;
}

This works fine. I just made div with dynamic ids and passed it to the function
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + ' <br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'","'+i+'")>Repositories</button></br>'+'<div id="'+ 'id' + i +'"></div>';
}
document.getElementById("id01").innerHTML = out;
}
function printRepos(array, id) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
console.log('id' + id);
document.getElementById('id' + id).innerHTML = out;
}

Add the "this" keyword as a parameter to your onclicks, to pass in the button that was clicked:
<button onclick=printRepos(this,"'+user[i].repos_url+'")>Repositories</button>
Then locate the next div after that button in your event handler:
function printF(btn, array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
// find the div
var d = btn; // start with the button
while (d.tagName != "DIV") d = d.nextSibling; // look for the next div
d.innerHTML = out;
}

Add alphabets dynamically as html row increments

How to ensure i have a dynamic increment of Alphabets in a new cell on left side, next to each cell in a row which is dynamically created based on the option chosen in Select. This newly generated alphabet will be considered as bullet points/serial number for that particular row's text box.
jsfiddle
js code
$(document).ready(function(){
var select = $("#Number_of_position"), table = $("#Positions_names");
for (var i = 1; i <= 100; i++){
select.append('<option value="'+i+'">'+i+'</option>');
}
select.change(function () {
var rows = '';
for (var i = 0; i < $(this).val(); i++) {
rows += "<tr><td><input type='text'></td></tr>";
}
table.html(rows);
});
});
html
<select id="Number_of_position">
</select> <table id="Positions_names">
</table>

This is essentially a base26 question, you can search for an implementation of this in javascript pretty easily - How to create a function that converts a Number to a Bijective Hexavigesimal?
alpha = "abcdefghijklmnopqrstuvwxyz";
function hex(a) {
// First figure out how many digits there are.
a += 1; // This line is funky
var c = 0;
var x = 1;
while (a >= x) {
c++;
a -= x;
x *= 26;
}
// Now you can do normal base conversion.
var s = "";
for (var i = 0; i < c; i++) {
s = alpha.charAt(a % 26) + s;
a = Math.floor(a/26);
}
return s;
}
So you can do
$(document).ready(function(){
var select = $("#Number_of_position"), table = $("#Positions_names");
for (var i = 1; i <= 100; i++){
select.append('<option value="'+i+'">'+i+'</option>');
}
select.change(function () {
var rows = '';
for (var i = 0; i < $(this).val(); i++) {
rows += "<tr><td>" + hex(i) + "</td><td><input type='text'></td></tr>";
}
table.html(rows);
});
});
Heres the example http://jsfiddle.net/v2ksyy7L/6/
And if you want it to be uppercase just do
hex(i).toUpperCase();
Also - this will work up to any number of rows that javascript can handle

if i have understood you correctly, that's maybe what you want:
http://jsfiddle.net/v2ksyy7L/3/
I have added an array for the alphabet:
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
and then added the output to your "render" loop:
rows += "<tr><td>" + alphabet[i] + " <input type='text'></td></tr>";