Develop Reference

A problem with the Blogger JavaScript code

I have a code that fetches the categorized posts, but the code when adding 150 posts or above is slow to fetch posts. This is the code
if(-1 < e.indexOf("://")) return (-1 < e.indexOf("://www.") ? e.split("://www.") : e.split("://"))[1].split(".")[0]
}
$(document).ready(function() {
$.each($(".emped-tv .views"), function(e, t) {
var a = $(this),
i = new Firebase("https://episode-viewer.firebaseIO.com/pages/id/" + a.attr("data-id"));
i.once("value", function(e) {
var t = e.val(),
e = !1;
null == t && ((t = {
value: 0
}).url = window.location.href, t.id = a.attr("data-id"), e = !0), a.html('<i class="fa fa-eye" aria-hidden="true"></i> ' + t.value), t.value++, "/" != window.location.pathname && (e ? i.set(t) : i.child("value").set(t.value))
})
}), $(".episodes-get").each(function() {
for(var e = $(this).find(".server-get i"), t = "", a = "", i = 0; i < e.length; i++) {
var s, n, o = e[i].textContent,
r = o.split("*");
r[1] ? (s = r[1], n = r[0], 0) : (s = i + 1, n = o);
o = smart_domain(n);
null == o && (o = "سيرفر مشاهدة"), 0 == i ? (t += '<a class="server-link active waves-effect waves-light" href="' + n + '" target="abdoutech">' + o + '<span class="server-num">' + s + '<i class="fa fa-play"></i></span></a>', a += '<iframe allowfullscreen="" class="embed-item" frameborder="0" height="1080" marginheight="0" marginwidth="0" name="abdoutech" scrolling="no" src="about:blank" width="1920"></iframe>') : t += '<a class="server-link waves-effect waves-light" href="' + n + '" target="abdoutech">' + o + '<span class="server-num">' + s + '<i class="fa fa-play"></i></span></a>'
}
$(".embed-responsive").append(a), $("#servers-content").html(t), $(".embed-responsive .play").click(function() {
$(".embed-item").attr("src", $(".server-link.active").attr("href")), $(this).remove()
}), $(".server-link").click(function() {
$(".server-link").removeClass("active"), $(this).addClass("active")
}), $(".tabs-content button").click(function(e) {
e.preventDefault();
var t = $(this),
e = $(this).data("content");
$(".tabs-content button,.content-div").removeClass("active"), t.toggleClass("active"), $("#" + e).toggleClass("active")
});
for(var l = $(this).find(".download-get i"), c = "", i = 0; i < l.length; i++) {
var d, f, v = l[i].textContent,
p = v.split("*"),
h = "";
p[1] ? (f = d = p[1], h = smart_domain(m = p[0])) : (d = "", h = smart_domain(m = v), f = "fa fa-download");
var m = encode_be64(m, $(".home-anime").text(), $(this).attr("number-episode"));
c += l ? '<a class="waves-effect waves-light" href="' + m + '" target="_blank"><span class="icon-M ' + f + '">' + d + "</span> " + h + "</a>" : "لايوجد روابط تحميل"
}
$("#download-content").html('<div class="outer-download">' + c + "</div>");
var u = $(".home-anime").text(),
g = document.location.origin + u;
$.get(g, function(e) {
var t = $(e).find(".info-post .rating").text();
$(".emped-tv .details .info h3.rat").html(t + "/10");
t = $(e).find(".info-post .date").text();
$(".emped-tv .details .info h3.release").html(t);
t = $(e).find(".main-posts .post-outer .thumb img").attr("src"), e = $(e).find(".titlepost").text();
$(".emped-tv .info-container a.cover").attr("href", g).html('<img alt="' + e + '" class="cover" src="' + t + '">'), $(".emped-tv .details .info h1").html('<a title="' + e + '" href="' + g + '">' + e + "</a>")
}, "html"), $(".info-container").removeClass("hide")
}), $("[name-anime]").each(function() {
var m = $("#episodes-content"),
e = $(this).attr("name-anime");
$.ajax({
type: "GET",
url: "https://www.blogger.com/feeds/" + idblogger + "/posts/default/-/" + e + "?alt=json-in-script&max-results=" + numposts,
dataType: "jsonp",
success: function(e) {
var t = "",
a = "";
if(e.feed.entry) {
for(var i = 0; i < e.feed.entry.length; i++) {
for(var s = 0; s < e.feed.entry[i].link.length; s++)
if("alternate" == e.feed.entry[i].link[s].rel) {
var n = e.feed.entry[i].link[s].href;
break
} var o, r, l = e.feed.entry[i].title.$t,
c = e.feed.entry[i].content.$t,
d = $(c).find(".episodes-get").attr("number-episode"),
f = "";
d && (o = d.split("."), c = d.split("-"), o[1] || (c[1] ? (d = c[0], f = " - " + c[1]) : d = (d = d.match(/\d/g)).join(""))), r = d ? " الحلقة : " + d + f : (r = l, ""), t += n == $($("html").html()).filter('meta[property="og:url"]').attr("content") ? '<a data-position="' + d + '" class="active waves-effect" href="' + n + '" ><i class="fa fa-pause"></i> ' + r + "</a>" : '<a data-position="' + d + '" class="waves-effect" href="' + n + '" ><i class="fa fa-play-circle"></i> ' + r + "</a>", a += '<option data-position="' + d + '" value="' + n + '">' + r + "</option>"
}
m.html('<div class="episodes-list">' + t + "</div>"), m.append('<select class="ep-select" onchange="if (this.value) window.location.href=this.value">' + a + "</select>"), $(".episodes-list a").sort(function(e, t) {
return $(t).data("position") > $(e).data("position") ? 1 : -1
}).appendTo(".episodes-list"), $(".ep-select option").sort(function(e, t) {
return $(t).data("position") > $(e).data("position") ? 1 : -1
}).appendTo(".ep-select");
var v = $(".episodes-get").attr("number-episode");
$('option[data-position="' + v + '"]').attr("selected", "selected");
var p = $("option[value*='" + location.pathname + "']"),
h = (p.text(), p.next().attr("value")),
v = p.prev().attr("value"),
p = $(".episodesfastReach"),
v = (h ? '<li ><a class="waves-effect" href="' + h + '">الحلقة السابقة</a></li>' : "") + (v ? '<li ><a class="waves-effect" href="' + v + '">الحلقة التالية</a></li>' : "");
$(p).html(v)
} else m.html('<div class="box-error"><i class="fa fa-exclamation" aria-hidden="true"></i><div class="info-error"></div></div>')
}
})
})
});
But I saw a blogger site that brings the classified posts in another way, as it brings 150 posts, and when you go down to the last post, it downloads 150 others.
This is the code for that site that you saw
$.ajax({
url: url,
type: get,
dataType: jsonp,
success: function(responce) {
fn(responce, type);
}
});
}
function lazy(fn, done, err, modules) {
var document;
var _0xE6BD = err[2][3];
if(done.scrollTop() + done.innerHeight() >= done[0].scrollHeight && !modules && $(".ep").length < _0xE6BD) {
document = true; <
div class = 'lds-ring' > < div > < /div><div></div > < div > < /div><div></div > < /div>;
load($(".ae-title .loader"), document, < div class = 'lds-ring' > < div > < /div><div></div > < div > < /div><div></div > < /div>);
fn(err); modules = true; document = false;
}
}
function load(ast, document, name) {
if(document) {
ast.append(name);
} else {
ast.html("");
}
}
function np(session, lib, end) {
var THREAD_STARTED = [];
var cb = 0;
for(; cb < parseInt(end / 150) + 1; cb++) {
var id = si(cb);
ajax(/feeds/posts /
default / -/ + lib + ?alt=json-in-script&max-results=150&start-index= + id, json_to_np, [THREAD_STARTED]);
}
links_ready(THREAD_STARTED, end, append_np, [THREAD_STARTED, window.location.href, session]);
}
function links_ready(type, done, error, callback) {
if(type.length < done) {
setTimeout(links_ready, 1e3, type, done, error, callback);
} else {
error(callback);
}
}
function append_np(right) {
var [typeR, cardR, nameR] = right;
var s3 = typeR.indexOf(cardR);
var managementcommandsdns = 0 == s3 ? : < div class = 'next' > < span > الحلقة التالية < /span><a href=' + typeR[s3 - 1] + '><i class='fa fa-chevron-right'></i > < /a></div > ;
var siteName = s3 + 1 == typeR.length ? : < div class = 'previous' > < span > الحلقة السابقة < /span><a href=' + typeR[s3 + 1] + '><i class='fa fa-chevron-left'></i > < /a></div > ;
nameR.append(managementcommandsdns + siteName);
}
function json_to_np(globalComponentsContext, componentStack) {
var data;
var PL$13 = globalComponentsContext.feed.entry;
var command_codes = componentStack[0];
if(void 0 !== PL$13) {
var PL$17 = 0;
for(; PL$17 < PL$13.length; PL$17++) {
var signedTransactionsCounter = PL$13[PL$17].link.length - 1;
for(; 0 <= signedTransactionsCounter; signedTransactionsCounter--) {
if(alternate == PL$13[PL$17].link[signedTransactionsCounter].rel) {
data = PL$13[PL$17].link[signedTransactionsCounter].href;
break;
}
}
command_codes.push(data);
}
}
}
function json_to_episodes(enumValueDeclaration, parameters) {
var i;
var sprite;
var _0xE6A1;
var PL$13 = enumValueDeclaration.feed.entry;
var GET_AUTH_URL_TIMEOUT = ;
var [type, timestamp, totalSecondsToStayOpen, inhibitorObjectPaths, pkg] = parameters;
var document = true;
if(void 0 !== PL$13) {
var PL$17 = 0;
for(; PL$17 < PL$13.length; PL$17++) {
var signedTransactionsCounter = 0;
for(; signedTransactionsCounter < PL$13[PL$17].link.length; signedTransactionsCounter++) {
if(alternate == PL$13[PL$17].link[signedTransactionsCounter].rel) {
_0xE6A1 = PL$13[PL$17].link[signedTransactionsCounter].href;
break;
}
}
i = PL$13[PL$17].content.$t;
PL$13[PL$17].title.$t.match(/\u0627\u0644\u062d\u0644\u0642\u0629\s\d+(\.\d+)?/g);
GET_AUTH_URL_TIMEOUT = GET_AUTH_URL_TIMEOUT + ( < div class = 'ep' > < a href = ' + _0xE6A1 + ' > +( != (sprite = get_element(i, type)) ? sprite : الحلقة + (inhibitorObjectPaths - (PL$17 + totalSecondsToStayOpen) + 1)) + < /a></div > );
}
$(timestamp).find(".eps").append(GET_AUTH_URL_TIMEOUT);
document = false;
load(timestamp.find(".ae-title .loader"), document, pkg);
}
}
function get_element(i, name) {
var flags;
var regex = ;
i = < div > +i + < /div>;
var template = 0;
for(; template < name.length; template++) {
regex = regex + (flags = null != (flags = $(i).find(name[template]).html()) ? flags : );
}
return regex;
}
function get_episodes(layoutItems) {
var [inputElement, floatLabelOffsetLeft, success] = layoutItems;
ajax(/feeds/posts /
default / -/ + floatLabelOffsetLeft + ?alt=json-in-script&max-results=150&start-index= + inputElement, json_to_episodes, success);
}
function si(name) {
return start_ind = 150 * name + 1, start_ind;
}
function forward(name, res) {
var DLF = name.feed.openSearch$totalResults.$t;
var args = si(0);
var pkg = < div class = 'lds-ring' > < div > < /div><div></div > < div > < /div><div></div > < /div>;
var [chain_from, label, chain_memo_sender, chain_propose_account] = res;
if(load(container.find(".ae-title .loader"), true, pkg), get_episodes([args, chain_from, [chain_propose_account, label, args, DLF, pkg]]), np($("#select-chapter .np"), chain_from, DLF), DLF > 150) {
var cb = 1;
for(; cb < parseInt(DLF / 150) + 1; cb++) {
args = si(cb);
$(label).find(".eps").on(scroll, function() {
lazy(get_episodes, $(label).find(".eps"), [args, chain_from, [chain_propose_account, label, args, DLF, pkg]], executed = false);
});
executed = true;
}
}
}
var anime = $(".anname").attr("data-anime");
var episode = $(".post-title").text();
var container = $("#select-chapter");
var url = /feeds/posts /
default / -/ + anime + ?alt=json-in-script&max-results=0;
var go = ajax(url, forward, [anime, container, episode, [.nofe, .noff]]);
I want to convert my code to make it like its code

I wanted to comment this solution, but unfortunately could not.
Add a read more (jump link) in every post, then it will load as its supposed to.

Changing src attribute to data-src in JavaScript

I'm trying to use lazy loading for thumbnails, but the problem is I don't know how to change src attribute to data-src in JavaScript.
Because when I added a lazy class like this:
class="ty-thumb-bonos lazy"
It doesn't work, so I need to change the src attribute as well.
else if (c.indexOf("<img") > -1) {
var q = $c.find('img:first').attr('src').replace('s72-c','s1600');
var k=q}else{var k=no_image}
h += '<ul><li><div class="ty-wow"><a class="ty-thumb-bonos" href="'+u+'"><img alt="'+g+'" src="'+k+'"/><span class="tyimg-lay"/></a>
$('.ty-slide-show .HTML .widget-content div.latestposts').each(function() {
var b = $(this).attr("data-no");
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=" + b,
type: 'get',
dataType: "jsonp",
success: function(e) {
var u = "";
var h = '<div class="ty-slide flexslider"><div class="slides owl-carousel">';
for (var i = 0; i < e.feed.entry.length; i++) {
for (var j = 0; j < e.feed.entry[i].link.length; j++) {
if (e.feed.entry[i].link[j].rel == "alternate") {
u = e.feed.entry[i].link[j].href;
break
}
}
var g = e.feed.entry[i].title.$t;
var s = e.feed.entry[i].category[0].term;
var y = e.feed.entry[i].author[0].name.$t;
var d = e.feed.entry[i].published.$t,
t = d.substring(0, 4),
w = d.substring(5, 7),
f = d.substring(8, 10),
r = month_format[parseInt(w, 10)] + ' ' + f + ', ' + t;
var c = e.feed.entry[i].content.$t;
var $c = $('<div>').html(c);
if (c.indexOf("https://www.youtube.com/embed/") > -1) {
var p = e.feed.entry[i].media$thumbnail.url.replace('/default.jpg', '/mqdefault.jpg');
var k = p
} else if (c.indexOf("<img") > -1) {
var q = document.querySelectorAll('img');
q.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));
var k = q
} else {
var k = no_image
}
h += '<ul><li><div class="ty-wow"><a class="ty-thumb-bonos" href="' + u + '"><img alt="' + g + '" data-src="' + k + '"/><span class="tyimg-lay"/></a><div class="ty-slide-con"><div class="ty-slide-con"><div class="ty-slide-con-tab"><h3 class="ty-bonos-entry">' + g + '</h3><a class="recent-shop" href="' + u + '"><i class="fa fa-shopping-basket"></i>SHOP NOW</a></div></div></div></div></li></ul>'
}
h += '</div></div>';
$('.ty-slide-show .HTML .widget-content div.latestposts').each(function() {
var text = $(this).attr("data-no");
if (text == b) {
$(this).parent().html(h)
}
})
}
})
});

You can use setAttribute method
var imageElements = document.querySelectorAll('img');
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));
var imageElements = document.querySelectorAll('img');
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));
<img id='test' data-src='https://cdn4.iconfinder.com/data/icons/nature-20/512/79-512.png' />

Stuck with migrating to youtube api v3

so im trying to make a script for youtube in my psp and when i try to play it crashes.
var YouTube = new Object();
YouTube.rev = 4;
YouTube.SearchDesc = "YouTube by NT and JCRV";
YouTube.Name = "YouTube";
YouTube.Search = function(keyword, page) {
var result = new Object();
result.bypage = 20;
result.start = (page - 1) * result.bypage + 1;
var sortBy = "relevance";
var catSpecified = false;
if (keyword.charAt(0) == '$')
{
var keywordBu = keyword;
var kpos = keyword.indexOf(" ");
var category = keyword.substring(1, kpos);
keyword = keyword.substring(kpos + 1);
catSpecified = true;
}
if (keyword.charAt(0) == '#')
{
sortBy = "published";
}
if (catSpecified == false)
{
c = GetContents('https://www.googleapis.com/youtube/v3/search?q=' + escape(keyword) + '&maxResults=' + result.bypage + '&order=' + sortBy + '&part=snippet&key=AIzaSyD6Bdt4uJP0ewhNtgagGbSszfrYqcx6ydU');
}
else
{
c = GetContents('https://www.googleapis.com/youtube/v3/search?q=' + escape(keyword) + '&maxResults=' + result.bypage + '&order=' + sortBy + '&part=snippet&key=AIzaSyD6Bdt4uJP0ewhNtgagGbSszfrYqcx6ydU');
}
result.total = ext("<openSearch:totalResults>");
result.VideoInfo = new Array();
v = {attr: 2};
v.id = 0;
v.Title = "YouTube Search Help";
v.Description = "#query = search by upload date\n$category query = search in a category";
v.URL = '';
p = 0;
result.VideoInfo.push(v);
while (p = c.indexOf("<entry", p) + 1) {
v = {attr: 2};//neither IDA|npp find this string ...0=RD 1= 2=SRD 3=S
v.id = ext("https://www.googleapis.com/youtube/v3/videos?id=", "&key=AIzaSyD6Bdt4uJP0ewhNtgagGbSszfrYqcx6ydU&part=snippet,contentDetails,statistics,status&forMine=true&type=video");
v.Title = ext("<title type='text'>");
v.Description = ext("content type='text'>") + '\nUploader:' + ext("<name>");
v.CommentCount = ext("statistics.commentCount='") * 1;
v.Tags = ext("keywords>").replace(/,/g, "");
v.LengthSeconds = ext("contentDetails.duration='") * 1;
v.RatingAvg = ext("contentDetails.contentRating='") * 1;
v.RatingCount = ext("statistics.likeCount='") * 1;
v.MylistCount = ext("statistics.favoriteCount='") * 1;
v.ViewCount = ext("statistics.viewCount='") * 1;
v.ThumbnailURL = 'http://i.ytimg.com/vi/' + v.id + '/default.jpg';
v.SaveFilename = v.id + ".flv";
v.URL = 'YouTube.play("' + v.id + '")';
result.VideoInfo.push(v);
}
result.end = result.start - 1 + result.VideoInfo.length;
return result;
}
YouTube.play = function(id) {
var pos;
c = GetContents("http://www.youtube.com/get_video_info?html5=1&video_id=" + id);
//PSPTube.log("\n" + c + "\n");
pos = c.indexOf("url_encoded_fmt_stream_map");
if (pos == -1) {
alert("Can not be played");
return "";
}
c = ext('url_encoded_fmt_stream_map', "&");
p = 0;
c = unescape(c);
var url = c.match(/url=(.+?itag%3D5.*?)[&,]/);
//PSPTube.log("\n" + url + "\n");
url = url[1];
//PSPTube.log("\n" + url + "\n");
pos = url.lastIndexOf("http");
url = url.substr(pos);
url = unescape(url);
//PSPTube.log("\n" + url + "\n");
return url;
}
SiteList.push(YouTube);

Change obj.innerHTML in Javascript? Game of Life

I have implemented the Game of Life in Javascript. I am thinking about making a combobox which a listof colors to choose from. From there I want to render the obj.innerHTML img source of my grid cells in the game. What would be the best way to go about this?
Here is my code so far for the game:
<br>
<canvas id="canvas" width="100%" height="80%"></canvas>
<button onClick="generateLevel()">Create New Board</button>
<button onClick="step()">Step</button>
<button onClick="multiStep()">Multistep</button>
<script type="text/javascript">
var level;
var lastLevelDrawn;
var lvlWidth = 0;
var lvlHeight = 0;
function step()
{
var tempLevel = new Array(lvlHeight);
for (var y = 0; y < lvlHeight; y++)
{
tempLevel[y] = new Array(lvlWidth);
for (var x = 0; x < lvlWidth; x++)
{
var liveNeighborCount = 0;
var status = level[y][x];
for (var k = y-1; k < y+2; k++)
{
for (var j = x-1; j < x+2; j++)
{
if (k == y && j == x)
{
}
else if (k >= 0 && k < lvlHeight && j >= 0 && j < lvlWidth)
{
if (level[k][j] == "1")
{
liveNeighborCount++;
}
}
}
}
if (level[y][x] == "1")
{
if (liveNeighborCount != 2 && liveNeighborCount != 3)
{
status = "0";
}
}
if (level[y][x] == "0")
{
if (liveNeighborCount == 3)
{
status = "1";
}
}
tempLevel[y][x] = status;
}
}
level = tempLevel;
render();
}
function multiStep()
{
var steps = prompt("How many steps do you want to step?", "10");
for (var x = 0; x < steps; x++)
step();
}
function generateLevel()
{
var width = prompt("How many cells wide?", "10");
var height = prompt("How many cells high?", "10");
lvlWidth = width;
lvlHeight = height;
var output = "";
if (width != null && height != null)
{
level = new Array(lvlHeight);
lastLevelDrawn = new Array(lvlHeight);
for (var y = 0; y < height; y++)
{
level[y] = new Array(lvlWidth);
lastLevelDrawn[y] = new Array(lvlWidth);
for (var x = 0; x < width; x++)
{
level[y][x] = Math.floor((Math.random()*2));
lastLevelDrawn[y][x] = -1;
output += " " + level[y][x];
}
output += "<br>";
}
}
//document.getElementById("demo").innerHTML=output;
setupRender();
}
function changeTile(tile)
{
var x = tile % lvlWidth;
var y = parseInt(tile/lvlWidth);
//document.getElementById("demo").innerHTML=x + ":" + y;
if (level[y][x] == "1")
level[y][x] = "0";
else
level[y][x] = "1";
render();
}
function render()
{
var widPer = ((1/lvlWidth)*90);
var heiPer = ((1/lvlHeight)*70);
for (var y = 0; y < lvlHeight; y++)
{
for (var z = 0; z < lvlWidth; z++)
{
var send = y*lvlWidth + z;
if (lastLevelDrawn[y][z] != level[y][z])
{
lastLevelDrawn[y][z] = level[y][z];
var obj = document.getElementById(send);
if (level[y][z] == "1")
obj.innerHTML = "<img src='white.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
else
obj.innerHTML = "<img src='black.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
}
}
}
}
function setupRender()
{
var x = "";
var widPer = ((1/lvlWidth)*90);
var heiPer = ((1/lvlHeight)*70);
//x += "<table border='1' col width='((1/lvlWidth)*100)%' col height='((1/lvlHeight)*80)%'>";
for (var y = 0; y < lvlHeight; y++)
{
//x += "<tr>";
for (var z = 0; z < lvlWidth; z++)
{
lastLevelDrawn[y][z] = level[y][z];
//x += level[y][z];
var send = y*lvlWidth + z;
x += "<n id='" + send + "'>";
if (level[y][z] == "1")
x += "<img src='white.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
else
x += "<img src='black.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
x += "</n>";
}
x += "<br>";
//x += "</tr>";
}
//x += "</table>";
document.getElementById("demo").innerHTML=x;
}
</script>

Javascript Hanging UI on IE6/7

Could anyone suggest performance improvements for the function I've written (below, javascript with bits of jquery)? Or point out any glaring, basic flaws? Essentially I have a javascript Google map and a set of list based results too, and the function is fired by a checkbox click, which looks at the selection of checkboxes (each identifying a 'filter') and whittles the array data down accordingly, altering the DOM and updating the Google map markers according to that. There's a 'fake' loader image in there too at the mo that's just on a delay so that it animates before the UI hangs!
function updateFilters(currentCheck) {
if (currentCheck == undefined || (currentCheck != undefined && currentCheck.disabled == false)) {
var delay = 0;
if(document.getElementById('loader').style.display == 'none') {
$('#loader').css('display', 'block');
delay = 750;
}
$('#loader').delay(delay).hide(0, function(){
if (markers.length > 0) {
clearMarkers();
}
var filters = document.aspnetForm.filters;
var markerDataArray = [];
var filterCount = 0;
var currentfilters = '';
var infoWindow = new google.maps.InfoWindow({});
for (i = 0; i < filters.length; i++) {
var currentFilter = filters[i];
if (currentFilter.checked == true) {
var filtername;
if (currentFilter.parentNode.getElementsByTagName('a')[0].textContent != undefined) {
filtername = currentFilter.parentNode.getElementsByTagName('a')[0].textContent;
} else {
filtername = currentFilter.parentNode.getElementsByTagName('a')[0].innerText;
}
currentfilters += '<li>' + $.trim(filtername) +
$.trim(document.getElementById('remhide').innerHTML).replace('#"','#" onclick="toggleCheck(\'' + currentFilter.id + '\');return false;"');
var nextFilterArray = [];
filterCount++;
for (k = 0; k < filterinfo.length; k++) {
var filtertype = filterinfo[k][0];
if (filterinfo[k][0] == currentFilter.id) {
var sitearray = filterinfo[k][1];
for (m = 0; m < sitearray.length; m++) {
var thissite = sitearray[m].split(',');
if (filterCount > 1) {
nextFilterArray.push(thissite[2] + '|' + thissite[1]
+ '|' + thissite[0]);
} else {
markerDataArray.push(thissite[2] + '|' + thissite[1]
+ '|' + thissite[0]);
}
}
}
}
if (filterCount > 1) {
var itemsToRemove = [];
for (j = 0; j < markerDataArray.length; j++) {
var exists = false;
for (k = 0; k < nextFilterArray.length; k++) {
if (markerDataArray[j] == nextFilterArray[k]) {
exists = true;
}
}
if (exists == false) {
itemsToRemove.push(j);
}
}
var itemsRemoved = 0;
for (j = 0; j < itemsToRemove.length; j++) {
markerDataArray.splice(itemsToRemove[j]-itemsRemoved,1);
itemsRemoved++;
}
}
}
}
if (currentfilters != '') {
document.getElementById('appliedfilters').innerHTML = currentfilters;
document.getElementById('currentfilters').style.display = 'block';
} else {
document.getElementById('currentfilters').style.display = 'none';
}
if (filterCount < 1) {
for (j = 0; j < filterinfo.length; j++) {
var filtertype = filterinfo[j][0];
if (filterinfo[j][0] == 'allvalidsites') {
var sitearray = filterinfo[j][1];
for (m = 0; m < sitearray.length; m++) {
var thissite = sitearray[m].split(',');
markerDataArray.push(thissite[2] + '|' + thissite[1]
+ '|' + thissite[0]);
}
}
}
}
var infoWindow = new google.maps.InfoWindow({});
var resultHTML = '<div id="page1" class="page"><ul>';
var count = 0;
var page = 1;
var paging = '<li class="selected">1</li>';
for (i = 0; i < markerDataArray.length; i++) {
var markerInfArray = markerDataArray[i].split('|');
var url = '';
var name = '';
var placename = '';
var region = '';
var summaryimage = 'images/controls/placeholder.gif';
var summary = '';
var flag = 'images/controls/placeholderf.gif';
for (j = 0; j < tsiteinfo.length; j++) {
var thissite = tsiteinfo[j].split('|');
if (thissite[0] == markerInfArray[2]) {
name = thissite[1];
placename = thissite[2];
region = thissite[3];
if (thissite[4] != '') {
summaryimage = thissite[4];
}
summary = thissite[5];
if (thissite[6] != '') {
flag = thissite[6];
}
}
}
for (k = 0; k < sitemapperinfo.length; k++) {
var thissite = sitemapperinfo[k].split('|');
if (thissite[0] == markerInfArray[2]) {
url = thissite[1];
}
}
var markerLatLng = new google.maps.LatLng(markerInfArray[1].toString(), markerInfArray[0].toString());
var infoWindowContent = '<div class="infowindow">' + markerInfArray[2] + ': ';
var siteurl = approot + '/sites/' + url;
infoWindowContent += '<strong>' + name + '</strong>';
infoWindowContent += '<br /><br/><em>' + placename + ', ' + region + '</em></div>';
marker = new google.maps.Marker({
position: markerLatLng,
title: $("<div/>").html(name).text(),
shadow: shadow,
icon: image
});
addInfo(infoWindow, marker, infoWindowContent);
markers.push(marker);
count++;
if ((count > 20) && ((count % 20) == 1)) { // 20 per page
page++;
resultHTML += '</ul></div><div id="page' + page + '" class="page"><ul>';
paging += '<li>' + page + '</li>';
}
resultHTML += '<li><div class="namehead"><h2>' + name + ' <span>' + placename + ', ' + region + '</span></h2></div>' +
'<div class="codehead"><h2><img alt="' + region + '" src="' + approot +
'/' + flag + '" /> ' + markerInfArray[2] + '</h2></div>' +
'<div class="resultcontent"><img alt="' + name + '" src="' + approot +
'/' + summaryimage +'" />' + '<p>' + summary + '</p>' + document.getElementById('buttonhide').innerHTML.replace('#',siteurl) + '</div></li>';
}
$('#filteredmap .paging').each(function(){
$(this).html(paging);
});
document.getElementById('resultslist').innerHTML = resultHTML + '</ul></div>';
document.getElementById('count').innerHTML = count + ' ';
document.getElementById('page1').style.display = 'block';
for (t = 0; t < markers.length; t++) {
markers[t].setMap(filteredMap);
}
});
}
}
function clearMarkers() {
for (i = 0; i < markers.length; i++) {
markers[i].setMap(null);
markers[i] = null;
}
markers.length = 0;
}
However, I'm suffering from performance issues (UI hanging) specifically in IE6 and 7 when the number of results is high, but not in any other modern browsers, i.e. FF, Chrome, Safari etc. It is much worse when the Google map markers are being created and added (if I remove this portion it is still slugglish, but not to the same degree). Can you suggest where I'm going wrong with this?
Thanks in advance :) Please be gentle if you can, I don't do much javascript work and I'm pretty new to it and jquery!

This looks like a lot of work to do at the client no matter what.
Why don't you do this at the server instead, constructing all the HTML there, and just refresh the relevant sections with the results of an ajax query?