Develop Reference

how to use jsZip for the image url which reside on same server

Here is my problem, i cannot able to extract the image by using jsZip after through googling. I found the solution which only help me to zip the file in the beginning of the page load.
here is my code
<table class="table table-condensed" id="downloadTable">
<thead>
<tr>
<th>Select</th>
<th>File name</th>
<th>Image</th>
<th>Option</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="file1" name="file" value="https://bibekshakya35.github.io/img/image-me.jpg" />
</div>
</td>
<td>file1</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/image-me.jpg" class="btn btn-block" download="file1"/>file1</a></td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="file" id="file2" value="https://bibekshakya35.github.io/img/portfolio/bullock/2.JPG" />
</div>
</td>
<td>file2</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/2.JPG" class="btn btn-block" download="file2"/>file2</a></td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="file" id="file3" value="https://bibekshakya35.github.io/img/portfolio/bullock/3.JPG" />
</div>
</td>
<td>file3</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/3.JPG" class="btn btn-block" download="file3"/>file3</a></td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="file" id="file4" value="https://bibekshakya35.github.io/img/portfolio/bullock/4.JPG" />
</div>
</td>
<td>file4</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/4.JPG" class="btn btn-block" download="file4"/>file4</a></td>
</tr>
</tbody>
</table>
<input type="button" id="lnk" onclick="alert(getCheckedCheckboxesFor('file'));" value="Get Values" />
here is js code
<script type="text/javascript">
var images = [];
var counter = 0;
var values = [];
function getCheckedCheckboxesFor(checkboxName) {
var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
Array.prototype.forEach.call(checkboxes, function (el) {
values.push(el.value);
});
for (var i = 0; i < values.length; i++) {
convertImgToBase64URL(values[i], function (base64Img, url) {
images.push({
url: url,
data: base64Img
});
counter++;
if (counter === values.length) {
createArchive(images);
}
});
}
return values;
}
function convertImgToBase64URL(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL, url);
canvas = null;
};
img.src = url;
}
function createArchive(images) {
// Use jszip
var zip = new JSZip();
var img = zip.folder("images");
for (var i = 0; i < images.length; i++) {
img.file(images[i].url, images[i].data, {base64: true});
}
var content = zip.generate({type: "blob"});
// Use FileSaver.js
saveAs(content, "images.zip");
}
</script>
After several debuging I found that var content = zip.generate({type: "blob"}); saying content type undefine. anyone have an idea what is problem?

Your values variable is shadowed in getCheckedCheckboxesFor and load is called too early:
var values; // (1) global variable, equals to undefined
function getCheckedCheckboxesFor(checkboxName) {
var values = []; // (2) shadowing the first one
// ...
values.push(el.value); // updates (2)
return values; // returns the correct array... which is not used
}
// ...
(function load() {
// values here is (1), equals to undefined. values.length triggers an Error !
if (index < values.length) {
// ...
}
})(); // you call the function too early, you should wait for the user to click
To fix it, you can remove the global values variable and move load inside the click callback:
<input onclick="triggerDownload('file')" />
and
function triggerDownload(checkboxName) {
var values = getCheckedCheckboxesFor(checkboxName);
(function load() {
// ...
})();
}
You can also check this example (and the source code) from the documentation which is similar to your use case.

JavaScript Thumbnails From Array

I'm trying to work on a website currently that displays pictures with the help of java-script. The way that I have this website set up at the moment, an image is displayed above numbered photo links. Instead of having numbers listed below the pictures, I'd like to have the numbers be thumbnails of the pictures. Is it possible to replace them with images? Any help is appreciated.
This is what I have so far:
var photos = new Array();
var photoindex = 0;
photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";
function backward() {
if (photoindex > 0) {
document.images.p.src = photos[--photoindex];
}
}
function forward() {
if (photoindex < photos.length - 1) {
document.images.p.src = photos[++photoindex];
}
}
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
}
function goto(n) {
if (n < photos.length && n >= 0) {
photoindex = n;
document.images.p.src = photos[photoindex];
}
}
<br>
<div style="text-align:center;left:5px;">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<img src="images/weloveweb.png" name="p" width="250" height="188" id="p" />
</td>
</tr>
<tr>
<td valign="top"><<
</td>
<td valign="top" style="text-align: center">
</td>
<td valign="top" style="text-align: right">>>
</td>
</tr>
</table>
</div>

Since your thumbnail urls are stored in the photos array, what you need to do to display a thumbnail instead of its index is to create an img tag with a src attribute containing each thumbnail's url (i.e. photos[i]).
Change:
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
// ------------------------------------------------------------^ change this `i`
}
Into:
for (i = 0; i < photos.length; i++) {
document.write("" + "<img src=" + photos[i] + "/> ");
}

how to implement visibility on javascript with incremental + option (or visibility)

I want an incremental + option in my script eg. one by one expansion.
Suppose after click on Optiontional Configurations + than Network Config will be expand with another + option, now if I want another input than I will click on + and Neighbor Config will be expand.
Please help me no this, I am new on javascript, thanks in advance.
<html>
<h>OPSF Configuration</h>
</br>
<head>
<script type="text/javascript">
function defaultconf() {
var nodes = document.getElementById("d1").getElementsByTagName('*');
for(var k = 0; k < nodes.length; k++)
{
nodes[k].style.visibility ="hidden";
}
}
function options1() {
var str = arguments[0];
var nodes = document.getElementById(str).getElementsByTagName('input');
for(var i = 0; i < nodes.length; i++)
{
nodes[i].style.visibility ="hidden";
}
var nodes = document.getElementById(str).getElementsByTagName('button');
var name = document.getElementById(str).getElementsByTagName('label');
for(var i = 0; i < nodes.length; i++)
{
if (nodes[i].style.visibility == "hidden" || name[i].style.visibility == "hidden")
{
nodes[i].style.visibility ="visible";
name[i].style.visibility ="visible";
}
else
{
nodes[i].style.visibility ="hidden";
name[i].style.visibility ="hidden";
}
}
}
function options() {
var str = arguments[0];
var nodes = document.getElementById(str).getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++)
{
if (nodes[i].style.visibility == "hidden")
nodes[i].style.visibility = "visible";
else
nodes[i].style.visibility ="hidden";
}
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<body onload="defaultconf()">
<br/>
<input type="button" value="+" onclick="options('d1')">Optiontional Configurations </td></tr>
<div id="d1">
<table>
<br/>
<tr><td>
<input type="button" value="+" onclick="options('network')">Network Config
<div id="network">
<table>
<tr>
<td class="style11" valign=top style="height: 4px">Network</td>
<td class="style9" style="height: 4px">
<input type="text" value="<?php echo $network?>" name="network" size="2" style="width: 147px">
</td>
</tr>
</table>
</div>
</td></tr>
<tr><td>
<br/>
<input type="button" value="+" onclick="options('neighbor')">Neighbor Config
<div id="neighbor">
<table>
<tr>
<td class="style11" valign=top style="height: 4px">Neighbor IP</td>
<td class="style9" style="height: 4px">
<input type="text" value="<?php echo $neighbor?>" name="neighbor" size="2" style="width: 147px">
</td>
</tr>
</table>
</div>
</td></tr>
</table>
</div>
</body>
</html>

Simple solution in jquery would be to use .toggle() to toggle the sub-views.
Also I have updated the DOM structure.
jQuery Code:
$(function() {
var siblingCounter = 0;
$('.sub-view').hide();
$('.main-view').on('click', function() {
var localCounter = $(this).hasClass('default') ? siblingCounter++ : 0;
$(this).siblings('.sub-view').eq(localCounter).toggle();
});
});
Live Demo # JSFiddle
Note:
If you are using jQuery library then avoid writing code in vanilla javascript unless you need something which is not available in jQuery [I personally havent come across so far ].
Use a class selector for applying generic/common css styles rather than creating seperate id selector styles. basically this will prevent redundant css styles across multiple rule-set

Javascript not giving alert after for loop

i have a javascript function which has foor loop in it. once the loop exists it is not displaying alert can anyone suggest what might be wrong.
the code is below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<?PHP Include('Includes\common\header_items.php');
session_start();
?>
</head>
<body>
<form name="step2" method="POST">
<div id="qwe">
<table width="500px" id="myTable" name="myTable">
<thead>
<tr>
<td >Brawing / Document No.</th>
<td>Revision No.</th>
<td>Description (Optional)</th>
</tr>
</thead>
<tbody>
<tr>
<td width="40%"><input type="text" id="553" name="2" /></th>
<td width="10%"><input type="text" id="revID553" name="3" /></th>
<td width="45%"><input type="text" id="descpID553" name="4" /></th>
</tr>
<tr>
<td width="40%"><input type="text" id="4" name="21" /></th>
<td width="10%"><input type="text" id="15" name="31" /></th>
<td width="45%"><input type="text" id="6" name="41" /></th>
</tr>
<tr>
<td width="40%"><input type="text" id="556" name="2" /></th>
<td width="10%"><input type="text" id="revID556" name="3" /></th>
<td width="45%"><input type="text" id="descpID556" name="4" /></th>
</tr>
</tbody>
</table>
<input type="submit" onclick='Javascript: return testFunc();'>
</div>
</form>
<script language="javascript">
var table_row = [];
function testFunc(){
table_row.length = 0;
var count = 0;
var testing = document.getElementById("myTable").getElementsByTagName("input");
for (i=0; i<=testing.length; i++){
var data = document.getElementById("myTable").getElementsByTagName("input")[i].id;
if(data.substring(0,2) == "55")
{
var value_doc = document.getElementById("myTable").getElementsByTagName("input")[i].value;
var value_rev = 'revID'+data;
var rev = document.getElementById(value_rev).value;
var value_descp = 'descpID'+data;
var descp_data = document.getElementById(value_descp).value;
//code to add into array
table_row[count] = [data,rev,descp_data];
count ++;
}
}
alert("I am in the end");
</script>
</body>
</html>
i cant figure out why it is not displaying the last alert. Any suggestions? THe last alert is not working.

Hello Your code is working fine for me.
Write your function like this.
function testFunc(){
alert("I am in test function");
for (i=0; i<=5; i++){
//code to add values in array
// it displays the values added in array correctly
alert('call');
}
alert("Function is Ending"); //this is not displayed once loop runs 5 times.
return true;
}
Now Call your function in load.
$(document).ready(function () {
testFunc();
});
Fiddle Demo

You have not call your function :
JSFiddle
Check Below Code :
function testFunc(){
alert("I am in test function");
for (i=0; i<=5; i++){
//code to add values in array
// it displays the values added in array correctly
}
alert("Function is Ending"); //this is not displayed once loop runs 5 times.
return true;
}
testFunc(); // calling function

The main problem is in extra loop iteration.
I also rewrite code a little bit to avoid many document.getElementById("myTable").getElementsByTagName("input"), because it causes searching over DOM every time it appears.
<script language="javascript">
var table_row = [];
function testFunc() {
table_row.length = 0;
var count = 0;
var testing = document.getElementById("myTable").getElementsByTagName("input");
for (i = 0; i < testing.length; i++) {
var data = testing[i].id;
if (data.substring(0,2) == "55") {
var value_doc = testing[i].value;
var value_rev = 'revID' + data;
var rev = document.getElementById(value_rev).value;
var value_descp = 'descpID' + data;
var descp_data = document.getElementById(value_descp).value;
//code to add into array
table_row[count] = [data, rev, descp_data];
count ++;
}
}
alert("I am in the end");
}
</script>

Randomize the image on reload - javascript

I have a html page of 9 images which must change their order when page is reloaded
I have placed image as 3 rows and 3 columns which on reload should change the order of the image .
Here is my HTML Code
<html>
<head>
<script type="text/javascript">
var len = document.images.length;
var images = document.images;
var img = function (){
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
}
window.onload = function(){
for(var i = 0 ; i < len ; i++)
{
images[i].src = img[i].src;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="cell1"><button value="1"><img src="1.jpg" width="42" height="42"/></button></td>
<td id="cell2"><button value="2"><img src="2.jpg" width="42" height="42"/></button></td>
<td id="cell3"><button value="3"><img src="3.jpg" width="42" height="42"/></button></td>
</tr>
<tr>
<td id="cell4"><button value="4"><img src="4.jpg" width="42" height="42"/></button></td>
<td id="cell5"><button value="5"><img src="5.jpg" width="42" height="42"/></button></td>
<td id="cell6"><button value="6"><img src="6.jpg" width="42" height="42"/></button></td>
</tr>
<tr>
<td id="cell7"><button value="7"><img src="7.jpg" width="42" height="42"/></button></td>
<td id="cell8"><button value="8"><img src="8.jpg" width="42" height="42"/></button></td>
<td id="cell9"><button value="9"><img src="9.jpg" width="42" height="42"/></button></td>
</tr>
</table>
<!-- forms's action sends the data to a specified php page -->
<form action="pictures.php" method="post">
<input id="pswd" type="hidden" value="" name="pass">
</form>
</body>
</html>
I Cant randomize the image . Any Suggestion on what i am doing wrong :)

You should "randomize" your array:
<script type="text/javascript">
var len = document.images.length;
var images = document.images;
var img = function (){
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
}
img = shuffle(img);//this "randomizes" the 'img' array using the function bellow
window.onload = function(){
for(var i = 0 ; i < len ; i++)
{
images[i].src = img[i].src;
}
</script>
And paste this function in your code: https://stackoverflow.com/a/2450976/3132718