What do you think of the way this menu works?

I think you are trying some interesting things but please take a look at these examples to see how easy these things are to do with current web technologies.

Create Full Screen HTML5 Background Video http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video
Dynamically loaded content with jquery (no page reload) http://css-tricks.com/dynamic-page-replacing-content/
Using Ajax to update content http://www.peachpit.com/articles/article.aspx?p=1748185&seqNum=2
How to make a responsive layout for any resolution http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch
Responsive mega menu (premium, but not hard to make your own) http://webpulse.com.br/jet/index.html
You could either use cookies to store user settings or have a login and db as described here http://stackoverflow.com/questions/16863307/php-best-way-to-store-editable-user-settings-for-a-cms
As long as you have a database you can use javascript to update any elements on the page to change videos, backgrounds, colors, etc.
Not sure which DB you are using but CouchDB is pretty nice

I think what we are all trying to say is that you could greatly improve on what you are trying to do if you took some of our advice and implemented it.

If I were you I would try to get your site down to about a 3 sec load time, the faster the better of course, I like to use http://tools.pingdom.com/fpt/ to test but you can also use your browser of course.

 

Thanks for the tips, I'll look into them, but I'm not going to hop on any frameworks that'll force me to do another rewrite, at this time..

 

Well, you want to talk your menu, let's talk menus... What you have is plague-ridden in both smoothness, legibility and worst of all usability. I found it completely and utterly unusable.

Looking at the code the problems are, well... pretty obvious...

<div id="siteMenu" class="vividMenu vividTheme__menu_005 vividWidget_initialized vividInitialized" style="position: absolute; visibility: visible; left: 3px; top: 3px; width: auto; height: 35px; z-index: 2147483647; opacity: 1; display: block;">

Code (markup):

DIV for NOTHING around it, (there's nothing you can do to a DIV you can't do to that top UL!), static style in the markup on an element that shouldn't even need absolute positioning, that's 244 bytes for nothing. Get rid of it.

<ul style="display:none;">

If you have to start out hiding it in the markup, you're doing something wrong.

<li><a urltransformcodeexecpath="2" urlc="javascript:sa.site.code.pushState%20(null,%20'',%20'/');" urlo="http://seductiveapps.com/" target="" title="" href="javascript:sa.site.code.pushState (null, '', '/');">Apps &amp; Games</a>

Code (markup):

fictional made up fairy tale attributes, scripting for christmas only knows what, attributes that serve no purpose...

<li><a urltransformcodeexecpath="2" urlc="javascript:window.parent.window.sa.site.code.pushState%20(null,%20'',%20'/%7B$SA_APP_SUBDIR%7D#');" urlo="http://seductiveapps.com/%7B$SA_APP_SUBDIR%7D#" target="" title="" href="javascript:window.parent.window.sa.site.code.pushState (null, '', '/%7B$SA_APP_SUBDIR%7D#');">Background Collections</a>

Code (markup):

Lather, rinse, repeat... I don't know what you think you need all that garbage for, but it really serves NO legitimate purpose other than slowing the page down and making it near impossible to actually use!

Your menu is 223k of code... FOR A MENU!

Get rid of ALL the fictional made up attributes, get rid of ALL the scripting for nothing, and let markup and CSS do their JOB!

It gets even more of a laugh when we get to one of those backgrounds...

<a urltransformcodeexecpath="2" urlc="javascript:sa.site.code.pushState%20(null,%20'',%20'/album/fantasy');" urlo="http://seductiveapps.com/album/fantasy" target="" title="" href="javascript:sa.site.code.pushState (null, '', '/album/fantasy');">fantasy</a>

Code (markup):

You are already using 1997 code since you've got iframe's in there... so why the scripttardery to do the 1997 style target attribute's JOB? Target was deprecated from STRICT since there were no frames and people were abusing it for _blank to shove new windows down people's throats whether they wanted it or not (boo, hiss)... But if you're going to have frames on the page, USE IT!

I mean, just target the frame with a href, have a little PHP on the back-end to work it's magic on outputting a full screen copy of the image as a background, and boom!

<a href="background.php?i=fantasy.jpg" target="bgFrame">fantasy</a>

Code (markup):

... and you're done! Your quarter-k of JS for nothing and invalid made up fantasy-land attributes reduced to a clean 67 bytes -- you do that across that entire 224k train wreck of menu code, well... down to 57k... Though really if you need 57k of menu code on a website you are also doing something wrong by shoving "link overload" at the user -- time to start breaking that into categories and sub-pages instead of shoving it all in the face at once.

Still, czech this out:
http://www.cutcodedown.com/for_others/seductiveApps/menuDemo/template.html

Menu loosly, VERY loosly based on yours -- except of course that it's elastic, dynamic, legible, and doesn't take five seconds to open and refuse to close.

*** off topic side note, did you know that firefox is too stupid in the condensed version of "transition" to obey any line that says "0" instead of "0s"? Herpaderp

Rather than the static picture I use CSS to put the black border around it, create the drop-shadow, round the corners and do the colouration. The Leaf pattern is embossed over the CSS designed button using a alpha transparent .png. The png is a bit larger than I usually would go for, but it gets the job done in this case. As it's built mostly in EM's it's fully elastic, you can change the colouration which you can see since the only thing changed on hover is background-color; which is beneath the alpha texture and inset box-shadows. The fade-in/out effects are just standard CSS3 transitions. I didn't dig deep enough to figure out what you were using there -- if you were using CSS3, your scripting was choking it to death. If you were using scripting -- well there's your problem.

I also implemented the background-swapper under "view"... and not one line of JavaScript in sight! Even IF you were to enhance it with scripting, that scripting should be hooking the menu not crapping all over the markup!

 

In other words stuff we've been able to do without scripting since 1997? Pretty much anything you can slap into an iframe that's designed for full screen operation? Hell, I can make IE 5.5 do that (well, without the webgl and canvas support since, well... dug) without scripting.

Where is this "search" because I didn't find it. What I found was a convoluted painful to use menu that was nested WAY too many options deep, and got completely confusing once stuff started overlapping each-other.

That I was never sure if I should be clicking or waiting for the hover to appear didn't help, much less the delay when you did want to click on things taking so long you click again... and again... It's worse than a 1990's X11R6 implementation on that front!

So... copy content to new div, make existing div relpo with dimension reporting, slap an iframe in it, re-attach the new DIV with content set to z-index over the iframe?

An interesting notion, but I'm not sure how it would suck any less than doing it server side; in fact operating client side you'd be wasting so much time sending data to the client for processing it would kill you, your browser AND the server. I've seen people try to pull that stunt with XML, that was... about a decade ago? - it wasn't pretty. There's a reason that "XML applications" bit the big one as a web technology.

OOH, RGBA and/or Opacity... stuff that CSS has been able to do without any scripting nonsense for over a decade.

Your list goes on and on like that... Sorry, that's not all that big a deal and sure as shine-ola shouldn't be making someone wait for multiple megabytes in nearly a hundred handshakes.

 

Oh, and not to flood the thread with my posts (too late) -- if I WERE to enhance the iframe stuff with scripting, I'd make a second frame, APO / z-index it under the first, wait for it to finish loading, then opacity out the first one with a class swap, and have a timeout to then remove the old one. That might actually look pretty cool.

Actually, no.. I'd use a slide effect, since you can't opacity an iframe... But then the last time I used target and iframe was a decade ago... Almost feel dirty with the menu demo I just posted.

 

deathshadow, you're the type of "expert" who really doesnt know what he's talking about. My earlier post about what the menu does (it can display video fragments for all menu-item states) should've enlightened you, yet you persist in your holier than thou attitude. I'm just gonna laugh at you deathshadow.. hahahaha..

And btw, yes, the menu is unusable at the moment due to reconstruction. Check back when there isn't a sign about that posted on my site ok.

 

When you say your menu can display video fragments - are you talking within the menu itself, or are you talking videos playing elsewhere on the site? So that if I hover something, it changes the video background in a specific div while I hover, or something like that?

 

The menu is undergoing reconstruction that's nearing completion now, and once the large menu in the tarot game (see the "Apps & Games" menu, click on item "Tarot v2 mobile") shows properly on small screens (in mouse *and* tap-device mode), in about a week i think, then I'll make sure that on larger screens the auto-hide feature is disabled.

Popsicle, the menu has per menu-item video fragments enabled, with crossfading of running video between 4 different menu-item states : normal, hover, selected, disabled. I also have a PHP+ImageMagick script to make buttons (with PNG sprite to hold the frames), and a tutorial on how to use that (currently offline)

And there's also youtube integration to play videos, even as HD backgrounds (which *does* work with a *lot* of transparency-settings mixes - text stays readable even with fast videos), for the main background or any app/content/popup-dialog.

Your request (different background video (selected via javascript 'google search' from auto-generated JSON database) on hover of specific html element) could be coded in by the application code, in a simple fashion (window.top.sa.backgrounds.next()) and the app code btw, is as simple HTML as you want, possibly using SQL / google bigtable to get the job done (the server end code is tiny in comparison to the javascript code volume), because that app code is run in an iframe. I don't get the dissing of iframes and tables folks, never have. I use 'm all over my framework, and to much effect (easy seperation of appcode and sitecode for instance).

 

To address the last statement first:
If you don't understand the difference between semantic markup and using CSS, not markup for design, then I'd really recommend you read up on "accessibly web-design" on Google.
As for the first - why in the world would you want video playing within the menu? I can't find any feasible value in that at all? Or I'm misunderstanding something.
Besides - images for buttons are more or less deprecated - mostly because the backend usually don't cater for screen-readers and other items, especially if also the text is an image (As I understand it, the text itself is not an image here, but I might be wrong).
I understand that this is your "baby", and that harsh critizism might not be what you want to hear, but I can't for the life of me understand why you want the look the site has today. It does look ancient - like something on Geocities or AOL from the olden days. Why don't you just clean up the look, at least, to give it a modern feel? And, perhaps only show the loading-logging to you, not the world at large - as other's have stated, it doesn't look good to a random visitor.
Again, as others have stated, a lot of what you're doing could be accomplished by correct usage of CSS and HTML5, and then added to by javascript (instead of doing it all in javascript). Also, I would recommend node.js, if you're not already doing anything with that - as this is a mostly purely js-based solution (as I understand it), I'm guessing running it on node.js and coding it for node.js would give you huge speed-benefits.

 

Well my framework is all about eye-candy. That's why I made a video fragment menu first, and found out I dont have the bandwidth for it later (although i could see about hosting large PNGs at public large image-hosting sites)..

And the markup for design is necessary because you can either put such markup straight into the HTML as style=, or set it to element.style from javascript. I chose the first option. And trust me, those are the only 2 ways to get it to work.

As for simpler designs : those are possible with the 500+ textures of all colors that are included with the system, as tiled backgrounds.

I wanted to create a webdesign concept that got rid of the design principle "only 1 scrollbar per html page, at the right side of the screen". this led to picture backgrounds being resized properly at all times, and that in turn led to video and webgl and canvas backgrounds, and quite soon after that : semi-transparent dialogs over that background, each with their own scrollbar.
I plan to stick with this webdesign concept.

And, on your node.js suggestion : I use jQuery.com. and jQuery-ui.com, but I dont use all of jQuery-ui.

 

node.js is server side, you can still use jquery http://www.nodebeginner.org/

 

Okay...
Why are you making this? Are you gonna sell it, provide it free of charge, do you plan to host sites on this, what's the plan forward?

 

I could not get to the menu. On my desktop the web site would not load after 45 seconds. On my laptop is took 21 seconds. I was so put off I assumed the Menu must not be worth my time...

Anyway...you are talented. However, you need to be smacked. The expression "just because you can doesn't mean you should" applies directly to you. You have the ability to come up with slick/sick layouts and effects but it's over kill and noone can appreciate it. You need to pull back...just because you have the ability to create something like that doesn't mean you should.

As for your menu... what menu? Anyone else see a menu?

 

I just went to demo the Menu. I have to say that I found it hard to navigate with and harder to read. I wasn't a fan of it. Your site also lags my lap top that I use for work. I won't break down your code line by line or belittle the layout of your web site but I will say that most people will find your site unusable and won't spend any longer than a minute on it if they are patient enough to wait the 15 seconds to 1 minute that a realistic machine will take to load your page.

Judging by your coding you absolutely have the ability to make an accessible web site. You just went a little (way) overboard. Less is more when it comes to being fancy. The coolest web sites I have ever seen are fancy in the simplest, classy and cleanest approach. Your site isn't clean, classy or simple.

 

I'm making this to stay busy, and one day earn a decent paycheck with it.

I plan to enable end-users to host their own content on seductiveapps.com, and I've got a source release for people who want to host their own domain with seductiveapps, in exchange for 10% of the money they make with it.

I also plan to host more games and apps on seductiveapps.com, to attract a returning visitor base.

I "need to get smacked"... I should warn u i know kung-fu

And in the age just before fiber internet, it doesn't hurt to design a page for the fiber internet age

The menu is at the top-left of the site Still being debugged though, not quite ready at this time..

I'll see what i can do about the classiness of my website

 

It's not going to happen. I am really sorry man, I always try to be positive, but this site is never ever going to work no matter how fast our internet is. As others have said, you are talented and some of the individual things you are doing are pretty cool. When you put all these things together like you have it becomes a huge mess that no one will ever use, at least not for very long.

Please take the criticism you have received and work on something new. I have scrapped projects countless of times, especially in the beginning, as I have realized that there are better ways to do things. When you do this it is not a total loss, you can still reuse some of the things that did work nicely, your function to change the background seems like it's working pretty well for example.

If you think it's just dp which is giving you a hard time then feel free to ask others, do some user tests before you waste more time on this framework/site.

I hope you will listen to what people are saying. If you won't listen to the truth and if you lash out at people who are honest and tell you the truth then people will eventually stop telling you the truth. When people don't bother to tell you the truth you will truly be stuck.

 

Wait a few years for youtube and netflix at ultra HD resolutions to become popular, or webgl games... That in itself will force society to upgrade to fiber and faster computers and phones.

The menu is now performing much better, after tonight's debugging session fixed many issues with it.

 

What I meant to say was that it is not going to happen, even with fiber your page will still take more than 3 sec to load, probably about 20 sec. Even if computers were 5 times as good/fast your site will still be considered slow.

On top of that, your site is hard to navigate and it offers nothing that is useful to the user as a whole.

You could keep working on the same site, but you will need to remove so much that it is probably better to start over.

I am done trying to help you, good luck.

 

I went back to view the update from my Desktop... After 90 seconds of waiting for anything to load I closed out.

I've read everyones comments and I don't think the message was clear. So I'll be beyond blunt... Your web site absolutely SUCKS. Noone in their right mind will wait longer than 15 seconds to see your content (or lack of rather). It took over 20 seconds to load on my new lap top. It takes over 90 seconds on my workstation. Once the site loads I fail to see what the fuck it's about. Then I go to your Apps and Games and I'm presented with this confusing menu that I can't navigate with or even read the labels clearly. For the love of god redesign your web site because your visitors are NOT having an enjoyable experience. It is NOT accessible or the least bit practical. You keep on making asinine excuses to justify why you wasted a LOT of time on this HORRIBLE result when you should be taking down notes and working on something that would leave people complaining less.

I personally don't give a shit about what deathshadow, popsicle or the majority of the other geeks say on here. They are usually absurd and think their preference is fact. However in this case I could not agree with them more. Screw the tech geeks here...fucking have any normal person go to your web site and get their feedback. I guarantee you they will say "oh..I see your site is not up yet" then when it eventually loads they will say "what am I doing? What should I do now?".

Change your fucking site so your time hasn't been wasted on producing crap. /Blunt.

 

I'm just assuming it's down altogether... Since Opera hangs at 24/89 files, and Firefox just shrugs it's shoulders and times out.

Of course given how that giant train wreck of a site would also kill any server it's hosted on...