I'm currently making a list that creates categories based on user input through a text field. Each time the create button is clicked my JavaScript is called and adds a div that should be collapsible to show a list.
Right now I only have a button collapsing underneath but there will be additional content after I can get the collapse operational.
HTML: The JQuery UI is for potential drag-drop functionality later:
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.3.0.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--
Bootstrap is a lightweight and relativley flexible framework that is great for responsive sites.
Although there are some downsides, as with almost anything, it is great for getting a good looking site up and running quickly.
This would allow this To Do List to be used just as easily on a mobile device while still maintaining an attractive look.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="h1 row text-center" id="main-header">To Do List</div>
<div class="row" id="category-anchor">
<div role="form" class="form-inline">
<label id="category-label">New Category: </label>
<input type="text" id="new-category" class="form-control">
<button id="create-category" class="btn btn-primary form-control" onClick="createCategory()">Create</button>
</div>
</div>
<li id="anchor">
</li>
</div>
</body>
<script src="todo.js"></script>
</html>
Here is my tiny bit of CSS:
* {
font-family: Serif;
}
#main-header {
font-weight: bold;
background-color: #00ffff;
margin-top: 0px;
}
#category-label {
font-size: 150%;
}
#create-category {
font-weight: bold;
font-family: Sans-serif;
font-size: 100%;
}
li {
list-style-type: none;
}
JavaScript:
var categoryID = 0;
var todoListID = 1000;
function createCategory() {
var newCategory = document.getElementById("new-category").value;
if(newCategory.trim().length != 0) {
var categoryRow = '<div id="' + categoryID + '" class="category">';
categoryRow += '<div class="h2 row text-center" data-toggle="collapse" data-target="#' + todoListID + '">' + newCategory + '</div>';
categoryRow += '</div>';
document.getElementById("new-category").value = "";
}
$(categoryRow).appendTo("#anchor");
addToDoList();
categoryID++;
todoListID++;
}
function addToDoList() {
var list = '<div id="' + todoListID + '" class="list collapse">';
list += '<div class="row">';
list += '<button class="btn btn-success create-list">New ToDo</button>';
list += '</div>';
list += '</div>';
$(list).appendTo("#" + categoryID);
}
If I use "collapse in" the button shows but the above div is still not collapsible.
Related
i am trying to split each textarea line that starts with "-" or "- " or " -" into individual span element with specific ID 1,2,3,4 etc..
The closest regex code i found is ^-.+ but it wont work for me like it works on:
https://regex101.com/r/yCOvyR/4
My current code is available also here: http://jsfiddle.net/ribosed/468emjct/59/
Thanks for any help.
$(document).ready(function() {
$("#txt").keyup(function() {
entered = $('#txt').val()
lines = entered.split(/\n/);
spans = "";
for (var i in lines) {
spans += "<span style='color:red;'>- " + lines[i] + "</span><br/>";
}
$(".res").html(spans);
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
padding: 10px;
}
.col {
border: solid 1px #6c757d;
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-12">
<form>
<textarea id="txt" rows="5" cols="60" placeholder="Type something here..."></textarea>
</form>
</div>
<div class="col-12 res"></div>
</div>
</div>
</body>
plit and match proces should be achieved while user type in textarea. I tried to use .keyup()
You're not checking the Regex in your code, so it's out of question to ask "why" it's not working.
I think this should work:
$(document).ready(function() {
const regex = /^\s*-\s*/;
$("#txt").keyup(function() {
const entered = $('#txt').val()
const lines = entered.split(/\n/);
let spans = "";
for (const line of lines) {
if (regex.test(line)) {
spans += "<span style='color:red;'>- " + line.replace(regex, '') + "</span><br/>";
}
}
$(".res").html(spans);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<form>
<textarea id="txt" rows="5" cols="60" placeholder="Type something here..."></textarea>
</form>
</div>
<div class="col-12 res"></div>
</div>
</div>
I am trying to have it when I click on "Add Exercise", the a new collapsible bootstrap div will be added inside my card div. each time the button is clicked. I have been trying for a while now and reading up other questions on here but I cannot seem to get it to work.
I added my code to jsfiddle. Cany anyone help me get this working finally?
https://jsfiddle.net/dmngpo8e/4/
$('input[name="queue"]').click(function() {
$("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").html('item').appendTo('card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">
<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>
.appendTo('card'); should be .appendTo('.card'); .. and by use html('item') before it it'll just change the whole div html with word item so you need to remove html('item')
Try by adding dot(class selector) before card
$('input[name="queue"]').click(function() {
$("<div class='panel-group'>" +
"<div class='panel panel-default'>" +
"<div class='panel-heading'>" +
"<h4 class='panel-title'>" +
"<a data-toggle='collapse' href='#collapse1'>Collapsible panel</a>" +
"</h4>" +
"</div>" +
"<div id='collapse1' class='panel-collapse collapse'>" +
"<div class='panel-body'>Panel Body</div>" +
"<div class='panel-footer'>Panel Footer</div>" +
"</div>" +
"</div>" +
"</div>").html('item').appendTo('.card');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">
<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>
As #bkr and #Mohamed-Yousef already mentioned, you had a few issues with your code:
Remove .html('item') as it's overwriting the collapsible bootstrap div.
You were missing a dot in .appendTo('card'), should be .appendTo('.card').
Also, for the collapsible button to work after you add it, you also need Bootstrap's JS file, otherwise the collapsible bootstrap divs won't work (see code below).
$('input[name="queue"]').click(function() {
$("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").appendTo('.card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">
<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>
I am in a bit trouble as I don't know how to implement the image popup in jquery for firebase. I have searched it on the internet but did not find the way how to implement it for the dynamic websites. I am having the following jquery code, can anyone help? I haven't found anything on stackoverflow also regarding this.
this is my html code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>images</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="overrides.css">
</head>
<style>
.contentImage{
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: 40%;
transition: .5s ease;
backface-visibility: hidden;
}
.image:hover {
opacity: 0.3;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">here is the title</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Your images</li>
<li class="active">Public images</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" id="contentHolder">
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB181Itkz9i9YjeJYLq9GbF94p8409wEfE",
authDomain: "farmyantra.firebaseapp.com",
databaseURL: "https://farmyantra.firebaseio.com",
storageBucket: "farmyantra.appspot.com",
messagingSenderId: "146534813177"
};
firebase.initializeApp(config);
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="timeline.js"></script>
</body>
</html>
and this is my js file
$(document).ready(function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var token = firebase.auth().currentUser.uid;
queryDatabase(token);
} else {
// No user is signed in.
window.location = "index.html";
}
});
});
function queryDatabase(token) {
firebase.database().ref('/Posts/').once('value').then(function(snapshot) {
var PostObject = snapshot.val();
var keys = Object.keys(PostObject);
var currentRow;
for (var i = 0; i< keys.length; i++) {
var currentObject = PostObject[keys[i]];
if (i % 4 == 0) {
currentRow = document.createElement("div");
$(currentRow).addClass("row");
$("#contentHolder").append(currentRow);
}
var col = document.createElement("div");
$(col).addClass("col-lg-3");
var image = document.createElement("img");
image.src = currentObject.url;
$(image).addClass("contentImage image hover ");
var p = document.createElement("p");
$(p).html(currentObject.caption);
$(p).addClass("contentCaption");
$(col).append(image);
$(col).append(p);
$(currentRow).append(col);
//create new row on every third entry
//col-lg-4
}
// ...
});
}
Well, your question is not clear. However let me try to answer as per my understanding. If you want to display images in a popup, add a bootstrap modal to html, and on click of each image that you are displaying from firebase database,show the bootstrap modal as explained below:
Add this modal div to your HTML:
<div id="imageModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Caption goes here..</h3>
</div>
<div class="modal-body">
<div id="image"> </div>
</div>
</div>
</div>
Now in your timeline.js file, add below code:
$('img').on('click', function () {
$('#imageModal #image').empty();
var imgUrl = $(this).attr('src');
var caption = $(this).siblings('.contentCaption').html();
$('#imageModal #image').append('<img width="100%" height="100%" src="' + imgUrl + '"></img>');
$('#imageModal .modal-title').text(caption);
$('#imageModal').modal('show');
});
Note: There is a small error in your queryDatabase function:
var image = document.createElement("img");
image = document.createElement("div")
image.src = currentObject.url;
You are creating an image element and assigning the same variable to a div element. So, the image element is overwritten by div element. Delete the second statement image = document.createElement("div") for you to display the image element.
I try to load a json file and and put the content in a
listview with flipswitches at the right side.
My HTML file with one example listview line, which is working fine
(here without the first page and navbar to keep it clearly)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="liststyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="pagetwo">
<div data-role="main" class="ui-content" id="main">
<ul data-role="listview" data-inset="true" id="alarmlist">
<li data-role="fieldcontain">
Control
<select id="test-slider" data-role="slider" name="testslider">
<option value="off">off</option>
<option value="on">on</option>
</select>
</li>
</ul>
</div>
</div>
</body>
and the linked liststyle.css
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
display: block !important;
padding: 0,9em 75px 0,9em 15px !important;
}
div.ui-slider-switch {
position: absolute;
right: 0;
width: 40%;
top: 12.5%;
}
and the code in the script.js file
$("#pagetwo").on("pageshow" , function() {
var output = '';
for (var x in data.alarm) {
output += '<li data-role="fieldcontain">' +
'<a href="#">' + data["alarm"][x]["time"] +
'<select data-role="slider">' +
'<option value="off">off</option>' +
'<option value="on">on</option></select>' +
'</a> </li>';
}
$('#alarmlist').append(output).listview("refresh");
});
Now i get this result:
http://imageshack.com/a/img540/3844/dxuopI.png
When i delete the .on("pageshow" , function() { and run both pages from start,
i get a bit better result but also an error.
http://imageshack.com/a/img538/9508/89jtvd.png
You just need to tell jQM to enhance the flipswitch as well as refreshing the list ($('#alarmlist').append(output).listview("refresh").enhanceWithin();):
$(document).on("pageshow", "#pagetwo", function () {
var output = '';
for (var x in data.alarm) {
output += '<li data-role="fieldcontain">' +
'<a href="#">' + data["alarm"][x]["time"] +
'</a> <select data-role="slider">' +
'<option value="off">off</option>' +
'<option value="on">on</option></select>' +
'</li>';
}
$('#alarmlist').append(output).listview("refresh").enhanceWithin();
});
DEMO
should do this:
a progress bar appears, followed by thunbnails.. if it' working.
Can someone please simply explain to me what i have written wrong in my markup?
I don't understand what might be the issue here so I am asking here,
My site: http://env-3884279.jelastic.servint.net/bot2/
if the 0% does not appear, it's working incorrectly,
refuses to run in any other browser except firefox. why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>capri</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="container" style="background-color: white; color: #333; font-family: 'Segoe UI';">
<br /><br />
<div>
<div id="status" class="pull-left"></div>
<div id="total" class="pull-right bg-success table-bordered" style="padding: 6px;">0 Movies Processed.</div>
<div class="clearfix"></div>
<br />
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<br />
<div class="clearfix"></div>
<div class="row-fluid" id="pagelist" style="border-top: solid whitesmoke 4px;">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
var processed = 0;
function ScanPage(pagenum, callback) {
$("#status").html("Please Wait... ");
$('.progress-bar').hide();
$('.progress-bar').css('width', 0 + '%').attr('aria-valuenow', 0).html(0 + '%');
$.ajax({
url: "movies/merdb/scanpage.php?token=" + Math.random() + "&p=" + pagenum,
cache: false,
async: true,
type: "GET"
}).done(function (html) {
var done = 0;
var json = JSON.parse(html);
var count = Object.keys(json).length;
$('.progress-bar').show();
$.each(json, function (iter) {
$.ajax({
url: "movies/merdb/parsepageresults.php?token=" + Math.random() + "&match=" + json[iter],
cache: false,
async: false,
type: "GET"
}).done(function (response) {
if (response != undefined && response != "") {
$("#status").html("<i class=\"fa fa-spinner fa-spin\"></i> Page <span class=\"badge\" style=\"background-color: whitesmoke; font-size: 16px;color: black;\">" + pagenum + "</span> Processing " + (done + 1) + " of " + count);
$("#pagelist").append("<div style=\"padding: 5px;\" class=\"col-xs-2\"><img src=" + response + " width=\"150\" height=\"225\"></div>");
var vpercent = parseInt(done * 100 / count);
$('.progress-bar').css('width', vpercent + '%').attr('aria-valuenow', vpercent).html(vpercent + '%');
}
done++;
processed++;
$("#total").html(processed + " Movies Processed.");
});
});
$("#status").html("Scanning Page " + pagenum + " has completed. <span class=\"glyphicon glyphicon-ok\" style=\"color: green\"> </span>");
callback(pagenum + 1);
});
}
function Begin(index) {
ScanPage(index, OnCompleted);
}
function OnCompleted(index)
{
$("#pagelist").html("");
Begin(index);
}
Begin(1);
</script>
</body>
</html>
Try to put all yours script's <script src="https://aja.... that you have on top.
Remove the
$('.progress-bar').hide();
if you want to see the 0%
Also the base64 returned is not correct and chrome is trying to download from a url
you are getting
"data:jpg;base64,......"
when you should be getting
"data:image/jpg;base64,...."
Your Ajax minified java script is not responding properly. Try to put both minified java script in head section of HTML. Try to download and save the minified code and run it through your machine so process will be little faster.