Monjava Coffee - Website

Hey guys,

As some of you know I have been working with C2 to create (possibly) the first HTML5 website for commercial use.

It is nearly complete, and can be viewed on the temporary server here:

MONJAVA COFFEE TEST SERVER

I am aware that Chrome has some resize issues with the iFrame, which seems to be a Chrome problem not a C2 problem. Unfortunately I can't do much about this.

Check it out and see what you think. My deadline for presentation is tomorrow morning, so I better get stuck in to it. I have a bit more to complete!

~Sol

Nice website, make me feel hungry. XD

Very nice presentation. I would be impressed if you were to present it to me :)

I use IE9 primarily so this might not be an issue for your browser but some of the text is very jittery (like when you click on coffee and all its glorious forms and select a cup).

Im not sure if thats what you mean by frame issues - still i thought i should say something.

EDIT: Runs perfectly for me in chrome however.

01lifeleft Haha thanks ;)

GenkiGenga IT would be the linear resizing. I guess I tried to find a happy medium for the graphical scale, as not to have a blurry mess on high resolution displays, but also still have the text at least somewhat readable on lower res displays. Until we have a vector based text object that remains at a set scale independent of the viewport, this will always be a problem to some degree I'm afraid... unless someone else has a suggestion?

~Sol

That looks real pro SoldjahBoy. I was just wondering if a C2 website in full screen mode could be Search Engine Optimized? Or would it be more like a flash site when it comes to SEO issues?

I was also wondering if you built a store backend for were it says Your Order, or do they have one your just going to link it to? Either way I was just interested in how you were going to do that?

Anyways it looks very impressive.    <img src="smileys/smiley1.gif" border="0" align="middle" />

Wink

I am currently trying to figure out how to add extra, standard HTML at the bottom of the canvas. I can seem to add to the top, but I want it below. This will be used for SEO tags, as well as other info... if I can figure out how to do it.

Also, the YOUR ORDER page will open a whole new page, so that's why there is no menu for that ;).

Thanks for the feedback! :D

~Sol

Ya, in full screen mode that might be a problem kind of like flash. Here is a idea if all else fails you could try just making it the same size that it is in its cropped mode but don't make it full screen just use css to style the rest something like:

<style type="text/css">

    canvas { margin-top: 0px; }

    body { background-color: #F78F1E; }

</style>

Then for your SEO you could just throw in some div tags any place you want, and even write a wall of text 20,000px tall if you wanted to, and then in your styling just do something like this:

#your div name {

text-indent: -9999px;

{

Then all your text will be off the screen, and all the google, yahoo, and bing crawler bots would be able to rank your site. This should keep your site looking the same as it does now. It's just a suggestion though.

Now you got me wanting to make a site with C2 just to see how this would work.

Anyway, I like your site, and good luck with it. <img src="smileys/smiley1.gif" border="0" align="middle" />

I would definitively not recommend you to do so, that's called black hat SEO and it's severely repressed by search engines.

For the SEO, in soldjah's site, there are iFrames, linking to a static page of text. SEO bots CAN travel/analyze the linked page there, allowing for a "gadget site" (with all the awesome animations, etc...) and yet, rankable content.

Wink

Thanks for the suggestions, however the site needs to scale with the browser window so it has to be set to stretch, unfortunately.

I tried embedding the entire site in another HTML page using an iframe, but for some reason iframe height cannot be set using a %, only px for some reason. Width is ok, but height appears to be not so much ok. :/

This is really annoying.

I did figure out though, that I can hide text behind the canvas, so there is the SEO problem handled already. Now to just figure out how the hell I'm supposed to fix this problem with adding text below the canvas.

~Sol

Morhaus Sorry I didn't know that search engines had a bad name for that. lol now I feel stupid I should really know this since I do it for a living. Oop's They wont like this at work when I tell them. You do realize though that a lot of professionals do do this all the time. I have on request from my boss every once in a while but not no more.

Kyatric I see

SoldjahBoy Ya, I'm sorry about that I would never intentionally try to mislead anyone. Just forget my bad idea.

Soldjah: you can use javascript to retrieve current window size and stuff and then calculate the % or pixels yourself.

Have you tried putting your iframe in div's something like this:

<div id="your iframe div name"><iframe src=""></iframe></div>

<div id="footer">

   <p>The text you want to add</p>

</div>

And then in css:

#footer {

    margin-top: 40px;

}

This worked for me before with galleries.

Otherwise without seeing your code, and never trying this with C2 I'm out of ideas. I know facebook has a lot of tutorials on iframe they might have a solution.

Thanks for all the help guys. I ended up finding a script that worked for what I wanted, only to realise it was a failed attempt anyway since I need the links that will appear at the bottom to be able to interface with the canvas.

I wasn't thinking ahead properly.

All the same, this will still come in handy for the future.

<iframe id="frame" src="http://google.com/" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>

<script type="text/javascript">

function resizeIframe() {

    var height = document.documentElement.clientHeight;

    height -= document.getElementById('frame').offsetTop;

    // not sure how to get this dynamically

    height -= 20; /* whatever you set your body bottom margin/padding to be */

    document.getElementById('frame').style.height = height +"px";

};

document.getElementById('frame').onload = resizeIframe;

window.onresize = resizeIframe;

</script>

~Sol

Site is basically 99% complete now.

I have a few little things to still do, like some sitemap links for facebook and twitter... and the online store is still being built, but yeah, all HTML5 stuff is finished :D

It's been a long road. I sure as hell don't feel like a coffee either.

~Sol