Using JS Raphael to create a navigation bar. Bad idea? Good idea? - javascript

I am trying to create a navigation bar that will sit at the top of my website for all of my pages.
I am much more familiar with the code that the Raphael library uses, and it will be much simpler for me than creating a bunch of tiles and the corresponding JavaScript.
Is there any problem with using a canvas for these sorts of purposes?
Does anyone have a better idea?
Thanks in advance for any advice.
UPDATE: Problems with render speed? Again, I'm totally open to alternate suggestions!

Short answer: Probably not the greatest idea.
Longer Answer: As logical Chimp hinted, using the canvas for a crucial element is certainly a bad idea, as browsers with no javascript support and/or no canvas support (including web spiders, and browsers that are for various perceptual differences (blindness, etc)) would see nothing. (for people, this means they won't find your sub pages. For web spiders (Google, etc.) this means no one would ever find your sub pages.)
If you want to use Raphael or another canvas based solution, for accessibility you should start with an html based navigation element (like ul li in a div as has been done for years), and then you'll replace that via javascript when the page loads (see HTML5 Canvas replace to <div> for an example of how to do this (includes a jsfiddle link)
The reason it's not the greatest idea is that you'll need to ensure that you keep your html nav element in sync with your canvas based one - although I guess if it's being generated by a server side process (e.g. wordpress) it's not too much more work to build the html nav element, and then you only need to test it regularly to ensure it's working.

Related

CreateJS/EaselJS web page (not game) consisting of several pages

I have coded an existing (pure) HTML5 Canvas web page consisting of several pages, 'buttons' and 'hotspots'. It is pure canvas javascript code.
Reason why I put 'buttons' and 'hotspots' in quotes is because I have actually implemented those in pure javascript from scratch without using any framework, just created 'classes' for buttons, hotspots, mouse event detection, etc.
These elements are approaching end of its functionality, so I need better elements and especially a scrollbar which will respond well to mouse scrolling.
As web site is redesigned and a lot more new and complex requests are needed to be implemented, it is no more feasible to continue coding in javascript as such, i.e. I need a serious graphical framework.
Between KineticJS and CreateJS/EaselJS I chose the latter.
Now, since this is not an one-page game, but several page long website with somewhat complex navigation relation between pages, can someone advise me what approach should I take?
Containers, just 'pages' with 'buttons' on it, what should be taken for a button, how to handle different pages and machine states in CreateJS/EaselJS?
Did I made the right choice? Is this easier in KineticJS?
Can you share an experience and/or advice, please?
Since EaselJS is "just" a graphical framework, there is no native support for states. However compared to KineticJS I wouldn't say that there is a huge difference for you purpose (someone correct me if I'm wrong here)
I'd use the same approach of using Containers as Pages. For buttons I'd use the ButtonHelper-class: http://www.createjs.com/Docs/EaselJS/classes/ButtonHelper.html
You probably knew most of that already, but I thought I'd still share it, maybe it does help you.

Dynamically injecting code in Twitter Bootstrap carousel

So, I've built a responsive site with Twitter Bootstrap. The problem is that I've done this using visible-phone, visible-tablet, and visible-desktop. This means that when someone views my source code, I have whole sections that are included twice or three times, in order to get around problems with differences in span amounts, or, for instance, because a carousel on the tablet should have 2 items, while on the desktop it should have 4.
I'm wondering if I'm doing this right. Should I be injecting (or adding? Not sure of the right name) code to the DOM dynamically using Javascript, based on screen size? Or should I be editing around with my custom, very simple .php files based on screen size? I don't know, and I can't find an answer about good practice anywhere. I've tried looking at sites I like for this, but I never find a javascript script that specifically adds stuff in this situation. Given, I'm not sure what I'd be looking for.
Any pointers?
I would avoid using script to dynamically add the content; as a fellow developer that just makes it less intuitive (in my opinion) and I always aim to produce intuitive code for the chap after me.
If your requirements state that a carousel should have four items on the desktop and two on mobile, then I think your solution is completely valid.

jbgallery vs supersized js vs flash

I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.

How to create a flip book/page?

I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code

How to do a JavaScript HTML 5 Canvas image "page flip" like you commonly see in Flash?

Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5's canvas tag?
Are there any frameworks or JQuery plug-ins that do this type of effect?
The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.
I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.
Example page flip in flash
You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/
It's really nice and it's implemented as a jQuery plugin.
You can try jFlip, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.
This one is a jquery plugin and pretty nifty
http://www.turnjs.com/#home
see this http://www.20thingsilearned.com/home
Here is an HTML5 Page flip App that I built using HTML5's Canvas Element & jQuery. It's called RectoVerso.
I also ran across this one: http://romancortes.com/ficheros/page-flip.html
Which is done with only CSS3.
There is a clear and informative case study about creating your own page flip effect based on the one in the 20 Things I Learned About Browsers and the Web book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.
http://js1k.com/2010-first/demo/441
As compact as possible :D
http://www.romancortes.com/blog/pure-css3-page-flip-effect/
This is better done with SVG's <foreignObject> element and SVG transforms. This blog post by Mark Finkle has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.

Categories