Userscripts.org

The following is an archive of comments made before threaded discussions was implemented (November 16th, 2008)

this is a hard problem to describe but whenever im IN THE ZONE and REALLY reading the manga (fast) i scroll down the page but the page flips back to the top and then i have to scroll down again to finish reading the page and click to go to the next page.
this happens every single page.
not a TERRIBLE problem but certainly messes up my rhythm... :(

Thanks a bunch for this.

If anyone's wondering how to remove the navigation bar (as I was), simply change this line:
//topMenuDiv.style.display = 'none';
to this:
topMenuDiv.style.display = 'none';

If you want to remove the buttons at the bottom, add this line directly beneath it:
bottomButtons.style.display = 'none';

finally! thanks endain! i hope this works for a long time...

The following should completely fix the script (and it's over 200 lines shorter, and works on FF3)

After installing the script:
- Open Greasemonkey "Manage user scripts"
- Select "One Simple Manga Ajax Viewer" on the left menu
- On the right side of the window there is excluded pages, select each one in turn and click REMOVE
- On the right side of the window there is an included page line, select it and click EDIT
- Change it to: http://www.onemanga.com/*/*/*/
- On the botom ot the window, there should be an Edit button. Click it and you should see the source of the script.
- Replace it with the text below. Save and close the editor.
- Closed the user scripts window

// ==UserScript==
// @name           One Simple Manga Ajax Viewer
// @namespace      InstantKarma
// @description    This script hides everything in the page except for the picture and the bottom navigation buttons on a black background and preloads both the next and previous pictures. The picture change is done without reloading of the page, using a transition effect.
// @include        http://www.onemanga.com/*/*/*/
// ==/UserScript==

//css styles
css = ":focus { -moz-outline-style: none; } body { color: white !important;} #content2 { background-color:black !important;padding:0px } #content2 h1 {padding-bottom:0px !important;}h1 {margin-bottom:0px !important;} img.manga-page {border:0px none !important;}";
//add them to the page
GM_addStyle(css);

/*
Function which embeds a javascript function into the html so that 
you can use it after the page has loaded
(modified from original code borrowed from http://wiki.greasespot.net/Code_snippets)
*/
var scriptElement;
function embedFunction(s) {
	if (scriptElement == undefined) {
	scriptElement = document.createElement('script');
	}
	scriptElement.innerHTML = scriptElement.innerHTML + '\n' + s.toString().replace(/([\s\S]*?return;){2}([\s\S]*)}/,'$2');
}

/*
Function which sets all the variables holding the next and 
previous pages' information (this page's too) as well and preloads
the next and previous images. Called from the page's body's onLoad
attribute.
*/
var curImage;
var nextImage;
var previousImage;

function init() {
	// Initialise defaults
	hidePreviousButton = false;
	hideNextButton = false;
	wentUpOneChapter = false;
	wentDownOneChapter = false;
	fromBookMark = false;
	selectedManga = window.location.href.split("/")[3];
	selectedMangaNumber = Number(document.images[0].src.split("/")[4]);
	selectedChapter = document.getElementById('id_chapter_1').value.replace(/^([^\/]+)\/[^\/]+$/,"$1");
	selectedPage = (document.getElementsByName('page'))[0].value;

	// Modify visuals
	hideStuff();
	insertTable();
	createMangaSelect();
	var option = document.createElement('OPTION');
	topMenuDiv.childNodes[5].insertBefore(option , topMenuDiv.childNodes[5].firstChild);
	// Assign the functions to browse the pages to the image and buttons
	document.onkeydown = onKeyDown;
	bottomButtons.childNodes[1].onclick = goToPreviousPage;
	bottomButtons.childNodes[3].onclick = goToNextPage;
	topMenuDiv.childNodes[7].onclick = goToPreviousPage;
	topMenuDiv.childNodes[9].onclick = goToNextPage;
	//set this page's url and html
	goToPage(window.location.href);
}

function goToPage(targetURL){
	thisPage = targetURL;
	thisPageHTML = getPageHTML(thisPage);
	document.title = getPageTitle(thisPageHTML);
	curImage = getPageImage(thisPageHTML);
	setCurrentImage();

	//set next page's url, title, html and image
	nextPageURL = getNextPageURL(thisPageHTML);
	nextPageHTML = getPageHTML(nextPageURL);
	if (nextPageHTML == null){
		hideNextButton = true;
		bottomButtons.childNodes[3].setAttribute('disabled', '');
		topMenuDiv.childNodes[9].setAttribute('disabled', '');
		nextPageTitle = "";
		nextImage = new Image();
	} else {
		hideNextButton = false;
		bottomButtons.childNodes[3].removeAttribute('disabled');
		topMenuDiv.childNodes[9].removeAttribute('disabled');
		nextPageTitle = getPageTitle(nextPageHTML);
		nextImage = getPageImage(nextPageHTML);
	}
	//set previous page's url, title, html and image
	previousPageURL = getPreviousPageURL(thisPageHTML);
	previousPageHTML = getPageHTML(previousPageURL);
	if (previousPageHTML == null){
		hidePreviousButton = true;
		bottomButtons.childNodes[1].setAttribute('disabled', '');
		topMenuDiv.childNodes[7].setAttribute('disabled', '');
		previousPageTitle = "";
		previousImage = new Image();
	} else {
		hidePreviousButton = false;
		bottomButtons.childNodes[1].removeAttribute('disabled');
		topMenuDiv.childNodes[7].removeAttribute('disabled');
		previousPageTitle = getPageTitle(previousPageHTML);
		previousImage = getPageImage(previousPageHTML);
	}
	topMenuDiv.childNodes[5].disabled = false;
}

function getBookMarks(){
	return eval(GM_getValue('bookmarks'));
}

function saveBookMarks(bookMarksArray){
	window.setTimeout(GM_setValue, 0, 'bookmarks', bookMarksArray.toSource());
}

function addBookMark(){
	var bookMarkName = unsafeWindow.selectedManga + ' chapter ' + unsafeWindow.selectedChapter + ' page ' + unsafeWindow.selectedPage;
	unsafeWindow.bookMarksArray.push([unsafeWindow.thisPage, bookMarkName]);
	var bookMarkLink = document.createElement('A');
	bookMarkLink.href = "javascript:goToBookMark('"+unsafeWindow.thisPage+"');";
	bookMarkLink.innerHTML = bookMarkName;
	var bookMarkLinkDelete = document.createElement('A');
	bookMarkLinkDelete.href = "javascript:deleteBookMark('"+(unsafeWindow.bookMarksArray.length - 1) +"');";
	bookMarkLinkDelete.innerHTML = 'delete';
	var bookMarksDiv = document.getElementById('bookmarklinks');
	bookMarksDiv.appendChild(document.createElement('BR'));
	bookMarksDiv.appendChild(bookMarkLink);
	bookMarksDiv.appendChild(document.createTextNode('   '));
	bookMarksDiv.appendChild(bookMarkLinkDelete);
	saveBookMarks(unsafeWindow.bookMarksArray);
}

function createMangaSelect() {
	mangaSelect = document.createElement('SELECT');
	mangaSelect.onchange = onMangaTitleChange;
	mangaSelect.style.width = "150px";
	for (var i=0; i<manga_array.length; i++) {
		mangaSelect.options[i] = new Option(manga_array[i][0],manga_array[i][1]);
		if (selectedManga == manga_array[i][1])
			mangaSelect.options[i].selected = true;
	}
	topMenuDiv.insertBefore(mangaSelect, topMenuDiv.firstChild);
	bookMarksButton = document.createElement('INPUT');
	bookMarksButton.setAttribute('type', 'button');
	bookMarksButton.setAttribute('value', 'Bookmarks');
	bookMarksButton.onclick = function() {
		var bookMarksDiv = document.getElementById('bookmarks');
		bookMarksDiv.style.display = "";
		for (i=0;i<bookMarksDiv.childNodes.length;i++) {
			bookMarksDiv.childNodes[i].style.display = "";
		}
	};
	topMenuDiv.insertBefore(bookMarksButton, topMenuDiv.firstChild);
	topMenuDiv.childNodes[3].onchange = onMangaChapterChange;
	topMenuDiv.childNodes[5].onchange = onMangaPageChange;
}

function onMangaTitleChange() {
	selectedManga = this.value;
	window.location = "/"+selectedManga+"/";
}

function onMangaChapterChange() {
	topMenuDiv.childNodes[5].disabled = true;
	selectedChapter = this.value;
	var chapterPagesRequest = new XMLHttpRequest();
	var url = '/'+selectedManga+'/'+ selectedChapter + '/';
	selectedChapter = selectedChapter.replace(/([^\/]+)\/[^\/]+/,"$1");
	chapterPagesRequest.onreadystatechange = function(response) {
		if (chapterPagesRequest.readyState == 4){
			response = chapterPagesRequest.responseText;
			var startTag = response.indexOf('<option', response.indexOf( "page-select" ));
			endTag = response.indexOf('</select>',startTag);
			chapterOptionsHTML = response.substring(startTag, endTag);
			topMenuDiv.childNodes[5].innerHTML = chapterOptionsHTML;
			topMenuDiv.childNodes[5].options.selectedIndex = 0;
			for (i=0; i<topMenuDiv.childNodes[5].options.length;i++){
				if (topMenuDiv.childNodes[5].options[i].value == selectedPage){
					topMenuDiv.childNodes[5].options.selectedIndex = i;
					break;
				}
			}
			topMenuDiv.childNodes[5].onchange();
			topMenuDiv.childNodes[5].disabled = false;
		}
	};
	chapterPagesRequest.open("GET", url, true);
	chapterPagesRequest.send(null);
}

function onMangaPageChange() {
	if (this.value != -1){
		selectedPage = this.value;
		bottomButtons.childNodes[3].removeAttribute('disabled');
		topMenuDiv.childNodes[9].removeAttribute('disabled');
		hideNextButton = false;
		bottomButtons.childNodes[1].removeAttribute('disabled');
		topMenuDiv.childNodes[7].removeAttribute('disabled');
		hidePreviousButton = false;
		goToPage('/'+selectedManga+'/'+selectedChapter+'/'+selectedPage+'/');
	}
}

function insertTable(){
	onePageDiv.innerHTML = '<table width="100%"><tr><td width="50%" align="left"></td><td align="center"><div id="md"> </div></td><td align="right" width="50%"></td></tr></table>';
}

/*
Function which hides all the unnecessary divs from the page, and loads the 
*/
function hideStuff(){
	var divs = document.getElementsByTagName("div");
	var h1s = document.getElementsByTagName("h1");
	h1s[0].innerHTML="";//hide the manga title
	i=0;
	usedDivs = new Array();
	var j = 0;
	while(i<divs.length){//for every div		
		class=divs[i].getAttribute("class");//get the class
		if(class!="one-page" && class != "chapter-navigation"){//hide everything except for the important divs
			divs[i].style.display="none";
		} else {//for the important divs
			usedDivs[j] = divs[i];//save them so we can get the buttons div later
			j++;
		}
		i++;	
	}
	topMenuDiv = usedDivs[0];
	onePageDiv = usedDivs[1];
	onePageDiv.setAttribute('id', "one-page");
	bottomButtons = usedDivs[2];
	//topMenuDiv.style.display = 'none';
	//show necessary divs
	document.getElementById("wrap2").style.display="";
	document.getElementById("content").style.display="";
	document.getElementById("content2").style.display="";
}

function onKeyDown(e){
	if (e.which) {
		keycode = e.which;
	} else {
		keycode = e.keyCode;
	}
	if (keycode == 39 || keycode == 68 || keycode == 32 ) {
		goToNextPage();
		return false;
	} else if (keycode == 37 || keycode == 65) {
		goToPreviousPage();
		return false;
	}
}

/*
Function to get the picture from the next page and load it in the page's img.
*/

function goToNextPage() {
	if (hideNextButton || nextPageURL == null){
		return;
	}
	if (hidePreviousButton) {
		bottomButtons.childNodes[1].removeAttribute('disabled');
		topMenuDiv.childNodes[7].removeAttribute('disabled');
		hidePreviousButton = false;
	}

	//this page is now the previous page
	previousPageTitle = document.title;
	previousImage = curImage;
	previousPageURL = thisPage;
	previousPageHTML = thisPageHTML;

	// next page is now this page
	document.title = nextPageTitle;
	curImage = nextImage;
	thisPage = nextPageURL;
	thisPageHTML = nextPageHTML;
	setCurrentImage();
	if (topMenuDiv.childNodes[5].options.selectedIndex < topMenuDiv.childNodes[5].options.length-1) {
		topMenuDiv.childNodes[5].options.selectedIndex++;
		selectedPage = topMenuDiv.childNodes[5].value;
	} else {
		selectedPage = (thisPage.match(/\/([^\/]+)\/$/))[1];
		topMenuDiv.childNodes[3].options.selectedIndex--;
		topMenuDiv.childNodes[3].onchange();
	}

	//create a new image
	nextImage = new Image();
	//get next page and start preloading the next image
	nextPageURL = getNextPageURL(nextPageHTML);
	nextPageHTML = getPageHTML(nextPageURL);
	if (nextPageHTML != null){
		nextPageTitle = getPageTitle(nextPageHTML);
		nextImage = getPageImage(nextPageHTML);
	} else {
		hideNextButton = true;
		bottomButtons.childNodes[3].setAttribute('disabled', '');
		topMenuDiv.childNodes[9].setAttribute('disabled', '');
	}
}

/*
Function to get the picture from the previous page and load it in the page's img.
*/

function goToPreviousPage() {
	if (hidePreviousButton || previousPageURL == null){
		return;
	}
	//this page is now the next page
	if (hideNextButton){
		bottomButtons.childNodes[3].removeAttribute('disabled');
		topMenuDiv.childNodes[9].removeAttribute('disabled');
		hideNextButton = false;
	}

	//this page is now the previous page
	nextPageTitle = document.title;
	nextImage = curImage;
	nextPageURL = thisPage;
	nextPageHTML = thisPageHTML;

	// previous page is now this page
	document.title = previousPageTitle;
	curImage = previousImage;
	thisPage = previousPageURL;
	thisPageHTML = previousPageHTML;
	setCurrentImage();
	if (topMenuDiv.childNodes[5].options.selectedIndex > 1) {
		topMenuDiv.childNodes[5].options.selectedIndex--;
		selectedPage = topMenuDiv.childNodes[5].value;
	} else {
		selectedPage = (thisPage.match(/\/([^\/]+)\/$/))[1];
		topMenuDiv.childNodes[3].options.selectedIndex++;
		topMenuDiv.childNodes[3].onchange();
	}

	//get the previous page and start preloading the previous image.
	previousPageURL = getPreviousPageURL(previousPageHTML);
	previousPageHTML = getPageHTML(previousPageURL);
	if (previousPageHTML != null){
		previousPageTitle = getPageTitle(previousPageHTML);
		previousImage = getPageImage(previousPageHTML);
	} else {
		hidePreviousButton = true;
		bottomButtons.childNodes[1].setAttribute('disabled', '');
		topMenuDiv.childNodes[7].setAttribute('disabled', '');
	}
}

function setCurrentImage() {
	var div = document.getElementById("md");
	curImage.onclick = hideNextButton ? null : goToNextPage;
	div.replaceChild(curImage,div.firstChild);
	window.scrollTo(0,0);
}

/*
Function that gets the image from a page's html and returns an image object
*/
function getPageImage(pageHTML){
	var image = new Image();
	image.src = getImageURL(pageHTML);
	image.onload = function (evt) {
		//Do somehting 
		window.scrollTo(0,0);
	    }
	return image;
}

/*
Function which makes the ajax request to get the HTML from a given URL and returns it.
*/

function getPageHTML(url) {
	if (url == null)
		return null;

	var request =  new XMLHttpRequest();
	//synchronous request. It's getting HTML, shouldn't take too long.
	request.open("GET", url , false);
	request.send(null);
	return request.status != 404 ? request.responseText : null;
}

/*
Function which extracts the image URL from a given HTML
*/

function getImageURL(html){
	var startIndex = html.indexOf('http',html.indexOf('"manga-page"'));
	var endIndex = html.indexOf('"',startIndex);
	return html.substring(startIndex, endIndex);
}

/*
Function which extracts the page title of a given HTML
*/

function getPageTitle(html){
	return getTagContents(html, '<title>', '</title>');
}

function getTagContents(html, startTag, endTag){
	return html.substring(html.indexOf(startTag)+startTag.length, html.indexOf(endTag));
}

/*
Function which extracts the previous page's URL from a given HTML
*/

function getPreviousPageURL(html) {
	var startIndex = html.indexOf("'", html.indexOf('keycode == 37) {'))+1;
	var endIndex = html.indexOf("';", startIndex);
	return endIndex<html.indexOf("}",startIndex)? html.substring(startIndex, endIndex) : null;
}

/*
Function which extracts the next page's URL from a given HTML
*/

function getNextPageURL(html) {
	var startIndex = html.indexOf("'", html.indexOf('keycode == 39) {'))+1;
	var endIndex = html.indexOf("';", startIndex);
	var value = html.substring(startIndex, endIndex);
	return value.split(/\//).length == 5 ? value : null;
}

//embed functions into the html
embedFunction(init);
embedFunction(getPageHTML);
embedFunction(getImageURL);
embedFunction(getPageImage);
embedFunction(getNextPageURL);
embedFunction(goToNextPage);
embedFunction(getPreviousPageURL);
embedFunction(goToPreviousPage);
embedFunction(hideStuff);
embedFunction(getPageTitle);
embedFunction(onKeyDown);
embedFunction(insertTable);
embedFunction(getTagContents);
embedFunction(createMangaSelect);
embedFunction(goToPage);
embedFunction(onMangaTitleChange);
embedFunction(onMangaChapterChange);
embedFunction(onMangaPageChange);
embedFunction(saveBookMarks);
embedFunction(getBookMarks);
embedFunction(deleteBookMark);
embedFunction(goToBookMark);
embedFunction(setCurrentImage);

function deleteBookMark(index){
	bookMarksArray.splice(index, 1);
	var bookMarkLinksDiv = document.getElementById('bookmarklinks');
	bookMarkLinksDiv.innerHTML = "";
	for (i=0; i< bookMarksArray.length; i++) {
		var bookMarkLink = document.createElement('A');
		bookMarkLink.href = "javascript:goToBookMark('"+ bookMarksArray[i][0] +"');";
		bookMarkLink.innerHTML = bookMarksArray[i][1];
		var bookMarkLinkDelete = document.createElement('A');
		bookMarkLinkDelete.href = 'javascript:deleteBookMark('+i+');';
		bookMarkLinkDelete.innerHTML = 'delete';
		bookMarkLinksDiv.appendChild(document.createElement('BR'));
		bookMarkLinksDiv.appendChild(bookMarkLink);
		bookMarkLinksDiv.appendChild(document.createTextNode('   '));
		bookMarkLinksDiv.appendChild(bookMarkLinkDelete);
	}
	document.getElementById('saveBookMarks').click();
}

function deleteBookMarkSave(){
	saveBookMarks(unsafeWindow.bookMarksArray);
}

function goToBookMark(url) {
	window.location = url;
}

//set init() as onload for the body, and paint it black
bookmarksDiv = document.createElement('DIV');
bookmarksDiv.setAttribute('id', 'bookmarks');
bookmarksDiv.style.display = "none";
bookMarkLinksDiv = document.createElement('DIV');
bookMarkLinksDiv.setAttribute('id', 'bookmarklinks');
unsafeWindow.bookMarksArray = getBookMarks();
if (unsafeWindow.bookMarksArray){
	for (i=0; i< unsafeWindow.bookMarksArray.length; i++) {
		var bookMarkLink = document.createElement('A');
		bookMarkLink.href = "javascript:goToBookMark('"+ unsafeWindow.bookMarksArray[i][0] +"');";
		bookMarkLink.innerHTML = unsafeWindow.bookMarksArray[i][1];
		var bookMarkLinkDelete = document.createElement('A');
		bookMarkLinkDelete.href = 'javascript:deleteBookMark('+i+');';
		bookMarkLinkDelete.innerHTML = 'delete';
		bookMarkLinksDiv.appendChild(document.createElement('BR'));
		bookMarkLinksDiv.appendChild(bookMarkLink);
		bookMarkLinksDiv.appendChild(document.createTextNode('   '));
		bookMarkLinksDiv.appendChild(bookMarkLinkDelete);
	}
} else {
	unsafeWindow.bookMarksArray = new Array();
}
addBookMarkButton = document.createElement('INPUT');
addBookMarkButton.setAttribute('type', 'button');
addBookMarkButton.setAttribute('value', 'Bookmark this page');
addBookMarkButton.addEventListener('click', addBookMark, true);
saveBookMarksButton = document.createElement('INPUT');
saveBookMarksButton.setAttribute('type', 'button');
saveBookMarksButton.setAttribute('value', 'Save bookmarks');
saveBookMarksButton.setAttribute('id', 'saveBookMarks');
saveBookMarksButton.style.display = "none";
saveBookMarksButton.addEventListener('click', deleteBookMarkSave, true);
bookMarkButtonsDiv = document.createElement('DIV');
bookMarkButtonsDiv.appendChild(addBookMarkButton);
bookMarkButtonsDiv.appendChild(saveBookMarksButton);
bookmarksDiv.appendChild(bookMarkLinksDiv);
bookmarksDiv.appendChild(bookMarkButtonsDiv);
document.getElementById('content2').appendChild(bookmarksDiv);
document.body.appendChild(scriptElement);
document.body.setAttribute("onLoad", "init()");
document.body.bgcolor='FFFFFF';

No it doesn't. Adding that simply makes the script exclude everything on www.onemanga.com.

To restore basic functionality, change the first two lines of getNextPageURL to the following:

var startIndex = html.indexOf("'",html.indexOf('window.location = '))+1;
var endIndex = html.indexOf("'",startIndex);

That makes the Next button work. Jumping pages doesn't. The drop down will even fail after a chapter change.

In order to make "One Simple Manga Ajax Viewer" work u just need to do a very small thing.
- Open Greasemonkey "Manage user scripts"
- Select "One Simple Manga Ajax Viewer" on the left menu
- On the right side of the window there is excluded pages, click ADD
- Add this: http://www.onemanga.com/*
- Closed the window

It will work now, you just have to confirm that you really want to read the chapter you selected, just as OneManga staff wishs you to.

Hi, are you there?? XD XD

Just letting you know that OM has just updated and your script didn't work any more...
If I went to read a chapter all it display is a black screen

Update please...
As your script is one of the most useful in my Greasemonkey :D :D

Very good job with the script and I like it a lot as I surf onemanga almost every day. Just a request from me.... Can you add a progressbar or something to the webpage which shows when the prefetching of the next page is done???

I hope I am not bothering you too much.... Anyway great work and thanks for this great script!!!

Cheers!!!

I should have been more optimistic. :)

I rollbacked greasemonkey to 7, still have FF2, and it *WORKS* again. The only "mod" I can remember is the "make FF2 not leak as much memory" tweak in some FAQ that I forgot the details to. Might have made me play with the cache. That, and some left over veoh add-on and obligatory(?) talkback. No other GM script either.

I don't mod or add-on much to FF, fell in love with Opera first and learned to live with its flaws. Except the flaw of sites not working at all with it. In that case I use FF.

Don't mind me anymore, just go and "update" the script for FF3 AND GM8 and make it work for yourself, first.

Okay, I uninstalled FF3, installed FF2, got the latest greasemonkey, and got your script too... It does the same thing. It's as if the script works until i want to "turn the page." The browser says loading, but the image stays the same. I will maybe try a previous version of greasemonkey to test as well, but I'm not too optimistic. I'm so jealous that this still works, except for me. :p

I am really a big fan of this script as well, and your response here is very much appreciated.

About preloading whole chapters: I am also against this, this could be very big strain on the servers. I would even get a script from you that even has the ads back! :) All I want (need) is preloading pages really, something that crunchyroll had that I missed.

The way the script "works" for my Firefox 3 now is, the drop-down chapter titles and pages are back and if you did this, thanks, it adds more navigational options. But as I said, i click next or press right, but the first image is just still there. No error msgs, no "code" appears, it just feels like it is stuck.

I thought onemanga "combatted" your script which would be a shame, but if it still works for you, then I guess... I should rollback to FF 2? Pls update here when it works for you with FF 3. Thanks again!

I don't think the script works for onemanga anymore, when I click next/press right, the first image remains.

This is an extremely advanced well written script. I really like your style and usage of javascript and AJAX.

However, I have a few questions, how do I go about installing this into a vBulletin Forum? Or should I make it stand-alone. And if so what aspects of the script should I edit?

If it's not too much trouble, could you possibly create an installation guide for those who aren't really code savvy.

And thanks for making such a cool script!

Works great, it'll be even better if it preloads the the next chapter if I'm on the last page.