What do you think of the way this menu works?

I'll see you all again in a few years

I'll be damned to spend time on a forum where what i do is constantly being attacked by 'experts' running 90s hardware and internet connections
Startup time in the age of fiber (or outsourcing of serving of javascript and PNGs) should be around 8 to 15 seconds for first view, then about 6 seconds for consecutive views.
If you can't muster 15 seconds of patience, then good luck with your impatience on another site.

Ok, i'll see, after a nap, what I can do to speed up things. I want textured and colored PNGs for my dialogs, to show off what various colors do to a background image, but I don't want over 20 seconds of loadtime for people not on my LAN, either. In a few hours I'll code in something simple that'll fetch my default PNGs from imgup.net, which is quite fast for loading large PNGs. The javascript is another story, but perhaps I can host that at my ISP (concatenated, gzipped)..

 

Which is why we're reacting so badly -- WE'RE NOT!!! We're talking i5's and i7's on 15mbps or faster, and it sucks... bad... and right now doesn't even work and time's out before it even finishes.

Oh wait, it's now TRYING to do something in firefox... this is on my i7 4700mq lappy wtih GTX760m video over 11n on 25mbps parent connect... "this site will show soon" and spinning thing, CPU maxed out on one core, white background (so can't see if you still have that logging or not)... and ... nothing. I let it run in the background for two minutes. Ended up killing it... Though you know, I THINK I may have found a decent use for it... Open it up in 8 separate tabs in Chrome as a replacement for Prime95.

Yeah, '90's hardware' -- RIGHT. Though it's really laughable how you keep calling this stuff futuristic when what I'm seeing is SO 1990's in terms of appearance and just plain goofy animooted nonsense and endless pointless scripttardery that does NOTHING to help do what's actually important on a website; delivering content to users. You gonna add falling snowflake animations now that we're entering the season?

It's also a laugh when I seem to be frothing at the mouth LESS THAN OTHERS over this; When NetStar is dropping F-Bombs and agreeing with me... Wow. You've REALLY accomplished something special to pull that one off.

Shame that's "special" as in how some Olympics are...

Has anyone on any forum reacted at all differently to what we're telling you? ANYWHERE? I'd be shocked if even the limp wristed status quo FTMFW "don't you DARE say anything negative" kiss-asses at Sitepoint didn't take you to task on this one.

 

deathshadow, seriously, take a chill pill man.. or at least dont get a heartattack it's only a website

 

I've reduced the number of scripts loaded, and offloaded most of the large PNGs to imgup.net..
Please see if the thing is still so slow to download (as i can't test that myself)..

 

Big white empty page of nothing. As if the HTML file is empty.

Yeah, it's 200, but there's NO markup.

 

See that's real strange, as is the 90 seconds startup time you people reported.

I just checked at an apple store what the loadtime is. it's 8 seconds, and that was before offloading the main background picture to imgup.net as I have done just now when returning from the apple store.

Deathshadow, what browser are you using?

 

Correction, somehow I got a www in there, and you have no masking/redirect set up to handle that... hence the blank page. If you go to www.seductiveapps.com, there's nothing there. (301 that sucker!) -- so that's kind of a "my bad, your bad" situation

Now that I can see it, the menu is still painfully slow to use. I don't know what technique you are using to show the flyouts and fade them in/out, but it's bad... no, bad... really bad. Painfully bad. They take too long to appear, I'm never sure if I should be waiting or clicking, and when you do click on something it takes entirely too long to respond. It sits there and never finishes loading at 311 out of 311 files -- which given what I'm seeing I'm wondering what the devil it needs 311 separate files for...

That 311 files meaning that real world best case -- BEST CASE -- as in you are sitting on top of the server -- you're looking at a first load delay of 9 seconds, but the real world average is more like 60 seconds, and a worst case scenario of half the files timing out and the files that do load averaging around FIVE MINUTES. Internet 101, file handshakes average 200ms for every file past the first eight to most of the world from wherever you are hosted -- best case (sitting next to the server) is 30ms each, worst case can be a second, and if you do too many of them taking a second or more on a open connect, most server configs (apache, ngnix) will force a timeout on the REQUEST. Good browsers will re-send the request (Chrome, Safari, ChrOpera, Presto Opera), bad browsers (firefuxxors and internet exploder) will not... and that's JUST based on file counts, having NOTHING to do with if you are on the fastest fiber or the slowest dialup -- it's more about region, distance from server, hops to server, etc, etc... Basically it's ping time times two as the AVERAGE overhead. (even though each handshake should actually take five times ping plus bandwidth for the headers)... since to your server I'm seeing:

psn-workstation:\\watchtower\bin>ping seductiveapps.com

Pinging seductiveapps.com [82.161.37.94] with 32 bytes of data:
Reply from 82.161.37.94: bytes=32 time=125ms TTL=51
Reply from 82.161.37.94: bytes=32 time=123ms TTL=51
Reply from 82.161.37.94: bytes=32 time=127ms TTL=51
Reply from 82.161.37.94: bytes=32 time=122ms TTL=51

Ping statistics for 82.161.37.94:
    Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),
Approximate round trip times in milli-seconds:
    Minimum = 122ms, Maximum = 127ms, Average = 124ms

psn-workstation:\\watchtower\bin>

Code (markup):

I'd be seeing an average of 248ms ping time so your 300+ files takes around 60 seconds overhead NOT counting bandwidth... and that's a number that there is NO reprieve in sight for just due to how TCP/IP works. Sure, we might be able to stream 45mbps over fiber in a single file.... but that doesn't mean the handshaking per file is any better. SPDY with HTTPS is supposed to alleviate this, in practice it ends up STILL a wash and worse, is more load for the server hosting it!

Much less it's so big NONE of it is going to stay in browser cache long enough to have any savings there... since just visiting that page is a flush and most of the larger files would be rejected for caching... and you're generating some of the CSS from PHP meaning it's ALWAYS reloaded.

Seriously, these:

cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache

Code (markup):

When serving CSS is a BAD thing.

It still just sits there spinning it's wheel doing nothing in Firefox...

Digging deeper into the menu -- Are you actually rewriting the markup from the script instead of attaching dom elements and events? A view source and view generated source / document inspection don't even come CLOSE to matching. The menu and it's first item has this as the coded markup:

	<div id="siteMenu" class="vividMenu vividTheme__menu_005" style="position:absolute; visibility:hidden; left:-500px; top:10px; width:auto; height:35px; z-index:999000000">
			<ul style="display:none;">
		<li><a href="/">Apps &amp; Games</a>

Code (markup):

Which is bad since if you are using the style attribute you're doing something wrong... but go in with the document inspector in chrome (only place it loads and functions what I guess is meant to be "properly") and, well...

<div id="siteMenu__item__0" class="vividMenu_item" vividmenu_changestatecondition="undefined" vividmenu_changestatekey="undefined" vividmenu_itempath="0" style="text-align:center; vertical-align:middle; position:absolute; width:90px; height:35px;filter:progid:DXImageTransform.Microsofs.theme.Alpha(opacity=100);; left:0px;top:0px;display:block;z-index:991000000;" onclick="sa.menu.onclick(this,event);" onmouseover="sa.menu.onmouseover(this,event); " onmouseout="sa.menu.onmouseout(this,event); "><table style="cursor:pointer;z-index:99110000002;position:absolute;width:100%;height:100%"><tbody><tr><td id="siteMenu__item__0__td" class="vividMenu_item_td" style="background-color:transparent; text-align:center;vertical-align:middle;filter:alpha(opacity=100);">Apps &amp; Games</td></tr></tbody></table><div id="siteMenu__item__0__img1" style="z-index: 991100000; position: absolute; width: 90px; height: 35px; opacity: 1; background-image: url(http://seductiveapps.com/seductiveapps/com/ui/vivid/themes/buttonsAndMenus/menu_005.png); background-color: transparent; background-position: 0px 0px;"></div><div id="siteMenu__item__0__img2" style="z-index: 991100001; position: absolute; width: 90px; height: 35px; opacity: 0; background-image: url(http://seductiveapps.com/seductiveapps/com/ui/vivid/themes/buttonsAndMenus/menu_005.png); background-color: transparent; background-position: 0px 0px;"></div></div>

Code (markup):

HOLY HANNAH, where is that mess coming from? Are you going all Nyetscape 4 on us by adding that with InnerHTML or something?!? (since it's NOT in the delivered markup, and even if it were welcome to 1997!)

I'm wondering if that's the problem, you are wasting so much time adding elements in the scripting the redraws and refresh just takes too long, much less all the properties added in the parser instead of using the DOM. Worse, the outdated/outmoded onevent attributes in there just begging for it to be slow -- and worse in the case of onmouseover and onmouseout doing CSS' job. You do know how to apply static CSS from a stylesheet and manipulate things from the DOM, right? Semantic markup instead of abusing table around single TD elements? (which doesn't even make SENSE?!? If there's only one cell it's NOT a table!)

Table for layout? Bad. Table with only one TD? STUPID/POINTLESS, STYLE attribute on static elements that are likely to be the same on all pages or even across multiple like elements? Pointless code bloat. Id's on elements generated by the scripting? Pointless!

.. and that according to the document inspector that's absolute positioned OVER the menu? What's that all about, can't you just use the existing menu elements for... whatever the devil that mess of "HTML, what's that?" is supposed to do?

Really that mostly seems to be the issue here, you are using hundreds of K of javascript to do tens of K of CSS' job!

Oh, and your whole "video" thing from before? I'm still not getting what you are doing for video ANYWHERE on the site that warrants the site itself using scripting for it -- at least not if you're going to go ahead and abuse an IFRAME for content delivery anyways. Could you explain what it is we're even supposed to be seeing on that since I'm just not seeing it? If you explain the functionality you are trying to aim for, perhaps we can help you implement it better. Though honestly again, I'd pitch ALL of this in the trash and start over -- but to do that we need far, far better explanations of what this is supposed to do since to be frank, it's not doing it.

 

Aha, found out where that www came from... FF keeps adding it ALL BY ITSELF if you don't include the http first; odd, I've never seen that behavior before, but I swear, FF is becoming the new IE.

 

Deathshadow, all of the scripting, all of the explicit style="" settings, the fact that searchengine-crawler-compatible initial HTML is transformed by scripts to augment it with advanced visual capabilities, are to make it work. See my earlier messages in this thread what the whole does, and why..
I'm not going to repeat myself.

 

Here's what should be alarming...in actuality we aren't on 90's hardware and internet connections. In fact, our set ups are probably more advanced and current than YOUR average visitor. Take a minute to think about that while your page loads.

First view of a web site should be 20+ seconds? I haven't seen load times like that since the days of dialing up to AOL.

You simply don't get it. You're ignorant. We have ALL visited THOUSANDS and THOUSANDS of other web sites for the last 15 years. I can't even remember the web sites that take longer than 15 seconds to load. Most likely because I hit the back button like EVERY OTHER online surfer. We don't need luck for our "lack of patience"...we simply don't visit those web sites or wait for them to load. Do you not understand?

 

Here's a little story for you... A while ago I created this slick modern web site that uses all the fancy modern technologies. I showed it to my Geek friends who all gave me the thumbs up. Then I launched the web site and it performed POORLY. Upon investigation I discovered the majority of my web site traffic were using older browsers and could not experience all the pizazz my site had. Now you could say they were on ANCIENT systems but the reality was they just haven't updated their browsers in the last year (several months). I went through a "fuck em" phase where I ignorantly thought I was doing the internet a favor by NOT catering to the people who haven't updated their browsers with in the last several months. Welp...I was only fucking myself because ALL of my "visitors" suffered. What did I do? I ended up modifying my web site and removing all of the modern fanciness and found out my web site converted nicely. Sometimes you have to take a few steps back to walk forward with the crowd.

I remember M Night Shyamalan (director of the Sixth Sense) talking about his FAVORITE scene in the movie. It was a deleted scene that was never released. He felt the scene was perfect and it was how he wanted his soon to be a blockbuster hit to end. However, he made the decision to cut the scene because 1. it would make the movie shorter and 2. his audience would relate better to an alternative ending. Brilliant. That movie made his career and he has never had that kind of success since.

You need to cater to your audience. If your site was about the development of Apps & Games and Navigation Bars your audience are more than likely developers with advanced hardware. But if your site is showcasing your products odds are your visitors aren't up to date like you are. In either case you have people HERE on advanced systems having difficulty with your site. That should be a clear indication that you are not catering to your less techy audience.

 

Visual -- that's STYLE -- that's CSS' job. That's what I'm not getting, what makes you think ANY of that needs scripting or even more markup? I'm not seeing ANYTHING in that menu that warrants the use of javascript whatsoever -- much less more markup thrown at it! What are you doing that needs all that extra code? I'm just not seeing it! What makes you think you need some new elements positioned over / replacing that perfectly good existing markup? What makes you think you should be generating tags with innerHTML in 2014? This isn't 1998-2003! To be brutally frank, it's as if you are diving for the JS (and pointless bloated garbage like jQuery) because you don't know enough about how to leverage markup and use CSS to be, well... making a layout. Which sadly seems to be the case for 90%+ of the people who throw things like jQuery onto websites...

I mean, that demo I made, what exactly is yours doing that as a menu mine can't? Well, other than spiking the CPU into the ceiling, having hover states that take so long to appear you wonder if they are broken, have hovers that don't disappear even when they should (usually the 3rd or 4th depth ones just stick there open, probably because you're calling events instead of queuing them to a handler chain or their own independent timeouts) and fill up the DOM with so many elements and rules it drags even the fastest machine to a crawl? What are you doing that makes you think you need single TD tables? What are you doing that makes you think you need multiple DIV around those tables? I'm just not seeing it, and I don't think ANYONE else here is either. I'm actually willing to put in the time to try and help you do this better, but I can't even figure out what the devil all that "code for nothing" is even supposed to be doing in the first place.

Your explanations do not match up with what you are doing -- or at least the "functionality" the menu is... well, I'd say providing, but it's so slow, painful, counterintuitive and hard to read I wouldn't go so far as to call it functional.

Could simply be it's so non-functional I can't even get to what you are saying it should be doing. I'm going to go back and re-read your posts, but I've already done so twice and came up empty on an actual explanation of what all that mess of "JS for nothing" is supposed to accomplish and/or why you think you can't do it from the existing DOM elements... or why you aren't using the DOM and your stylesheets to do it.

 

I'm enhancing and expanding CSS with my framework. I'm doing what CSS can not. Once again, see my earlier messages in this thread on what that is.

and yes the menu isn't quite done yet. more work remains there.

point is : while you're all copying the competition, i'm building something fresh and new. it's ready for consumption as of right now (with the offloading of large artwork files to imgup.net and perhaps soon the inclusion of a concatenation script and more proper cache parameters for all those javascript and css tags - that are coded in this way atm to facilitate debugging btw) and will only get better. vastly better given time.

people who say this is like geocities of the 90s fail to examine what my framework can do beyond the so-called neat-and-standard ways you pundits here are so hot for. your impatience is to blame, not my "lack of standards adherance" - i *do* adhere to standards, extend upon them even.

you pundits here probably don't know enough about javascript to understand how mine gets the job done in the least amount of code. example? the menu component re-uses the button component for all it's menu items, right... the shared code for that is in yet a 3rd object used by both the button and the menu. there's no redundant code anywhere in my framework. apps (in an iframe, in a seperate dir under /apps, all polymorphic setup) can re-use the very script tags the window.top outer shell seductiveapps uses.
or is that over your head already?

 

Wait, when you say:

"a menu with crossfades of video fragments for 4 different menu-item states (normal, hover, selected, disabled) and crossfades between video fragments when the state of the menu-item changes."

Do you mean images, not video? I don't see any video support for that and since you can't actually set opacity on IFRAME, VIDEO, EMBED or OBJECT, that statement makes no sense whatsoever. I mean right now you're using this image:

http://seductiveapps.com/seductiveapps/com/ui/vivid/themes/buttonsAndMenus/menu_005.png

Which is a simple image spritesheet -- But it's doing all sorts of bizzare stuff on the hovers -- of course being a fixed image they're accessibility rubbish since you're automatically non-scalable -- and even if you did scale (CSS3's background-size property) you get the fact that browsers scale images like CRAP. ...and that's unlikely to change any time soon which is why some folks are embracing SVG, and others like myself try to do as much as possible from the CSS; since you can style things any damned way you like from the CSS. Again, that's CSS' job!

Of course, there is no "selected" state, do you mean focus? It's not a button, textarea, select or input, so there is no "selected" .. are you actually saying you can do VIDEO there? If so, GOOD GOD WHY?!? -- and where is it since your demo doesn't show it, and can barely run using static images.

I'll modify my menu demo to replicate what I THINK you are trying to do... except as dynamic with filtered PNG overlays and underlying color.

Fading animated menu states are NOT something we brag about at this point; again, something CSS3 can do with ease.

 

I think we have not only the candidate, but winner of the absolute worst pile of crap since angelfire! On my DSL connection, The site has still not loaded in over 10 minutes, just some ridiculous circle.

You really should consider a new career path, just give that website idea to someone else, who can have it functioning in a 1/4 of the time as you. And without using style from the 1990's.

Listen to deathshadow & MarkusTenghamn if you want any chance of success with this horrid website.

Otherwise your wasting your time, this will never pick up traffic. May as well bring back neon clothes and fannypacks since were going back to the 90's!

 

The original poster can't use a fanny pack. He would pack it so full of shit he doesn't need it would just rip.

 

I anyone else hasn't noticed... With in the source this message i displayed if JavaScript is disabled:

I found this humorous. We are all on slow internet connections and have no patience while this clown is on a 280kbs server and admits his site can take minutes to load.

 

Firefox, right? The page flat out refuses to load here in FF.

 

Personally I think he's just yanking everyone's chain, he's not really expecting to deploy this unusable crap and is just after some attention.

 

There's a cost/benefit variable that you haven't considered. The cost (bigger datastreams, cost of home equipment etc.) - today, Netflix have 4k streaming, but it's not very much used, simply because very few people have 4k resolution monitors at home at the moment.
That's fine - of course this will change over the years, but at one point there will be a "enough" - where the benefit doesn't outweigh the cost.

Right now, however, the site doesn't work at all in Firefox (it comes up with a warning that javascript is needed - believe me, it's on). In Chrome, the load-time has gone down considerably (yay!) - but the menu doesb't work - the hover state lingers, and it shows up and disappear at random. This applies to the first and third main menu item.

As for your statement about reusing code - this is what CSS is for - there's not reason to reuse code, you create the code ONCE, and then you show/hide stuff based on CSS properties. There's no need for javascript for the main menu display - just for adding specific modifications to the content of the menu after it's been loaded from wherever.