Display Comic Book files on a webpage? - javascript

I'm thinking about creating a webpage and I'm trying to brainstorm some ways to display them in the page.
If i wanted to get dirty and create everything myself, i think i could do it with html5, CSS3, and javascript/jquery. Just do some kind of page buttons with an image tag and maybe get into some more detailed stuff as it comes up (i dont know how i would do zooming and multiple pages).
But wahat i really want to know is if there is already some way to do this? I've looked around for a bit and cant seem to find any sort of plugin that would read a cbz file or display an set of images with the 'e-reader' type of tools in mind. Just wondering if anyone knows of anything?
Thanks

I used to use an online reader for a long time so I started an experiment to build one myself a while back: netcomix
It's open source so you can see if you find anything appealing in what I did. I figured I'd do all the real UI work client side with HTML, CSS, and JavaScript and the server was strictly responsible for acting as a service (for example, to supply a list of comics or a list of all the pages in a particular issue) and serving up the individual JPG/PNG/GIF files. That compartmentalized things nicely and I was very pleased with how jQuery BBQ gave me a history that I could back through even though I stayed on one page the whole time.
Now if I were to do the same experiment again, I'd use Backbone.js to give some structure to the client side and obviously it needs a lot of love because the server side really does nothing at the moment. Early versions were strictly hard coded although I started putting in some simple SQL stuff in there in the latest version. It's nothing more than an experiment though and should be treated as such. It's there for ideas and little else. If you find it interesting and want some more ideas contact me and I'll be happy to let you know all my wacky ideas for such a program.

I know this is an old question. But web technologies have gotten better in the last few years. There are several comic book readers that can work in the browser using pure HTML and JavaScript. I wrote one called: http://comic-book-reader.com .
If you want to see a very simple example of how to read CBR and CBZ files in the browser. You should check out http://workhorsy.github.io/uncompress.js/examples/simple/index.html which uses the JavaScript library https://github.com/workhorsy/uncompress.js

Related

How to bypass JavaScript detection when using requests in Python?

So there is a problem with JavaScript and requests (in Python) and that is, it does not use JavaScript when requesting a webpage.
The website I'm working with (https://access.paylocity.com/) requires JavaScript and without it, it changes the content of the page to just a text at the top saying, "Please enable JavaScript to view the page content."
(I could be wrong here but) I think one solution is the use of Selenium, but that would replace requests which I'm fine with as long as there are no other ways of fixing/bypassing this JavaScript detection.
(For those wondering, this python project of mine is supposed to automatically fetch the events on the Paylocity calendar, then port those events to another calendar that I frequently use everyday. It's also just intended for myself.)
Edit: Here is the code I have if that will help https://pastecode.io/s/GXTUO1BgtR (I didn't know where to paste my code, so I decided on that website. If I should change it, please comment or say something about it.)
Since the website you're working with is dynamically loading the JS as far I can tell, I think you have no other choice as to making use of Selenium. I had a project on my own a couple weeks ago and run into a similar problem which I could also solve using Selenium. But, I'm no expert, I'm just giving away my thoughts on this.

Smooth transition between loaded pages on a website

I'm trying to recreate the following "effect" for my portfolio but I've been out of web development for a while and I can't find my way around it. Hopefully someone here can give me a hint.
I'm trying to achieve a kind of smooth transition between pages as you can see for example on those websites.
www. say.studio/
cedricklachot. com
www.durimel. io
(sorry I know is not the right way to put links but I don't know how to put them, it's constantly giving me error messages when I paste the URLs and it's driving me mad!)
When you switch from one page to another it feels like everything is on the same page, because it's so smooth and navigation elements remain on place, like it's just one single html file for the whole website and the rest of stuff is loaded by javascript, but as I see from the URLs there are different pages, so it must be switching between different html files. But this "smooth switching" so to say is what I can't find the way to replicate.
I have tried with onload animations like fading in effects, but still it's very clear that the browser is switching between different html pages so it definitely doesn't have the smoothness that I see on the examples I provided.
I hope I explained myself well as I'm not native English speaker :) thanks
Welsome to Stack Overflow. React framework is good for this, the page re-renders with updated components when a user changes it. You can also use php for this, which is a more primitive version in my opinion.
here's a cool app. i use Wappalyzer for firefox, it lets you see what technologies. the page is using, when i examine your link
well this one doesnt work https://www.say.studio/cedricklachot.com
this one https://www.durimel.io/nel
uses PHP on an apache server.
So view the source code, then you're going to have to learn PHP (Or copy and edit it)
the server is going to be tricky if you don't have experience. I'd recommend using AWS EC2, and doing an ubuntu build with Apache (or Nginx)
let us know when its finished : )

What's the best way to create a pdf document with charts and in a decent quality?

First of all, I want to apologize for my English, I know my grammar is not the best, I'm not a native speaker so sometimes I have a hard time finding the right words or trying to explain the things I have in mind. So if you have a problem understanding what I want, please let me know and I'll try to be clearer.
I'm making a web app, the backend is made in PHP.
I need to create some kind of pdf-report for the users with charts, tables, pictures, and I need it to be decent (Quality and Style)
I don't know if the best option is a javascript library, 'cause I've found some libraries, but these make not really good looking pdfs.
So I was looking for a javascript library, but nothing seems to fit my requeriments.
I'll give you some pictures in order for you to have a better idea about what I want:
Sales report: This was the closest I could find to what I want.
Another sales report Something like this
Invoice I need something that allows me to make a really good looking design for the document, similar to this invoice
I'm really getting tired of looking and found nothing... It's been almost 2 months now, maybe more.
So my first idea was to use a javascript library that could convert html to pdf, but I was so naive and I didn't know how hard it was to convert html to pdf and without messing with the structure of the elements (The visual organization)
I first tried jsPDF by MrRio, but it doesn't support css (Something that I really need) or the charts (If the charts are pictures, it works fine, but if they are generated with a library like chartJS or highcharts it won't work).
I tried with some similar plugins but all of them had similar problems
Here is the link for jsPDF and their git
Then I found jsreport, I did a really nice thing in their playground and it worked perfectly. The problem is it needs NodeJS and my Site is made in nodeJS, and I don't know if there is a way to use jsreport with php and if there is I'm not sure if it will work as nice as it did in their playground.
Something that I just tought about if there will be a way that use nodeJS only for this feature, I don't know it is not recommended or something, need to find more about this, idk what you guys think.
Jsreport can use multiple recipes like PhantomJS to generate the PDF
I've found other plugins but they are also for nodeJS only.
Here is jsreport site
Then I tried again jsPDF but this time using it along with html2canvas and it worked almost fine, but the quality decreases a lot and the text cannot be selected or copied. I managed to increase the quality a bit, but nothing further that.
I have other ideas, something related to the print option from the browsers, but haven't found anything good.
The other idea that I don't know if it possible, it's making some kind of document like a template and then somehow add the user data inside that template, to finally have a pdf but with the users data.
Read this, here is some related info.
So, the reason I want this feature it's because most of the clients that use my Web App, require this function. So I can't migrate my app to Node or Rails, because it will take a really long time, and I don't have that time right now, so I don't know what are my options. The solution doesn't need to be free, but if it is, it will be great, because I don't have a big budget for a really expensive plugin.
Thank you for reading my question, I really need help with this, so let me know everything you have in mind, every answer is appreciated even if I've already tried it, because maybe you can came up with a different solution using something that I have used already.
Prepare your Html page with Highcharts or whatever charts you want to get and then use this tool WkHtmltoPDF

Using python to click items on a page with text changing javascript and be able to parse the new information

I am looking to find a way to code a script in python that can click all the items in my Steam inventory. For those who do not know what that is here is an example:
http://steamcommunity.com/id/timetoidle5/inventory/#753_0
Ideally it should be able to click each of the links and parse the new information that it gets. Ie. it should be able to find the difference between the different Left 4 Dead 2 cards.
I have done some research and I have been told that downloading the selenium module may be the best way to deal with javascript on a webpage. Although I am still not entirely sure what the best way is. I have heard that mechanize may work as well, but is made for static webpages (webpages with little to no javascript?).
I was hoping also for some tips/steps on how to get started on something like this. I already have some experience with HTML and CSS so I know my way around the syntax and currently I am quickly reading through a Javascript book. I also have done some Python scripting in the past and taken a few introductory courses on it.

Creating a note taking app using JQuery mobile and phone gap

I have an app i'm developing with JQ Mobile and PhoneGap. Within this app, i want to include a 'Notes Taking' page and it has to do the following.
Make new notes and save them locally.
Recall them whenever i need to,
Edit them and delete them
i could not find a good example to follow, i tried this:
http://tutorialzine.com/2012/09/simple-note-taking-app-ajax/
but he lost me at the index php and how to implement that, i also tried this example:
http://miamicoder.com/2011/building-a-jquery-mobile-application-part-1/
but its so complex i got lost in all the code.
I'm a beginner at programming and my JavaScript is very very poor and i have no idea where to start and what kind of code is involved in making this part of the app.
Please help. Thank you.
Your first site (http://tutorialzine.com/2012/09/simple-note-taking-app-ajax/) will not work for you as the examples are embedding PHP into the html and that is not acceptable with phonegap apps.
Your second site is making it way more complicated than it needs to be for your limited scope.
Not going to do this for you but I will give you some advice and places to look.
Draw out what you want the user interface to look like and create that html
Create a load and save function in javascript to... well... load and save your notes. Take a look at the below references:
This will show you how to interact with the local database and store and retrieve info. Always a good thing to read the documentation.
This is a great resource for help all sorts of stuff. In this case, with SQL queries.
Test, test, test. With the above, you will be able to figure it out if you put your mind to it. Come back here and post specific questions with code samples of what you have tried if you get stuck.

Categories

Resources