Tech Off Thread

16 posts

How not to do Silverlight

Back to Forum: Tech Off
  • evildictait​or

    I just followed one of the links to the MIX University to have a look at the Silverlight Firestarter, and came across this:

    http://www.visitmix.com/University/silverlight/firestarter/


    Take a particularly good look at the rollover on the right - I don't know what the hell it's doing, but they're obviously not doing it right. The rollover animation is sparodic and jumpy, and it wasn't even that great an idea to start off with.

    You'll also notice on the left panel that the overlay highlighting doesn't follow the Z-index of the pictures correctly or smoothly.

    A particularly bad example of Silverlight usage, and certainly not something that should be the frontpage advert for new Silverlight users.

    Edit: It seems to work better in IE7 (but is still jumpy and ugly) - it's truly appalling in Firefox.

  • littleguru

    well they somehow wanted to make it look like some fading to the other entries. Like you highlight the 3rd one and the second and first are higlighted less ... dunno why somebody would like to do this but they did it.

  • evildictait​or

    littleguru wrote:
    well they somehow wanted to make it look like some fading to the other entries. Like you highlight the 3rd one and the second and first are higlighted less ... dunno why somebody would like to do this but they did it.


    Try running it in Firefox, and you'll see it doesn't catch the mouse events properly, so it selects items that your mouse isn't over.

  • stevo_

    I kinda see the idea.. i think the highlighting doesn't take advantage of changing the text alphas and such.. which would perhaps make it more obvious.. as well.. it seems to get stuck because of what seems to be the hyperlinks mouseover event not propagating to its parents, thus they don't always see the mouses over event if you hit managed to get inside the rounded rectangle and over the hyperlink before the mouse event is updated.. (which also seems to be really easy)..

    It's scary that the mouse events are THAT slow though..

    Edit: Some small animation easing wouldn't hurt either.. it always takes that 'edge' off and makes things a bit more friendly.

  • evildictait​or

    Hmm. On further inspection it's because the HTML has a div containing a div. The outer div has the onmouseover setting, but under firefox, the inner div does not auto-propogate to the outer div any events it gets but doesn't want.

    So the mouseover gets swallowed by Firefox except when your mouse is at the extremities of the region.

    Turns out that the menu isn't actually Silverlight at all (just in a simmilar style), and that the Silverlight is entirely static and unappealing.

    Someone should get their act together on this. It's a pretty poor show for new Silverlight developers.

  • JChung2006

    It looks awful on Safari/Mac too. It needs work.

  • AdamKinney

    Good suggestions on the losing the "knightrider" effect on the right menu and making it smoother.  I work on "getting my act together".

    I'll also fix the rollovers to be more exact.  Got to love the attention to detail Smiley

  • rhm

    I'd give it a look, but Silverlight 1.0 still doesn't work in FF2. It wouldn't be so annoying if it wasn't that the web page claims that it does when it blatantly doesn't - I've tried running the installer about 10 times now, re-downloaded, rebooted, everything.

  • vesuvius

    

    The main issue I have with the main panel, is that it's just too fussy. This is the number one problem that I have with WPF, WPF/E at the moment.

    I am presented with 20 odd images and I need to decipher what each image pertains to. If this was a website based on fruits and I have an image of an apple, an orange and a banana, it's intelligible. The traditional File menu in winforms or menu in ASP.NET makes it immediately apparent where everything is. Office 2007 type Tooltips would be great for the on mouseover events as they would have more information. If I found a video I like and didn't bookmark it, I would have to go through all the vids again to try and find the one which I wanted.


    What happens if I try to search for a video? No search options. From an accessibility point of view, my rather blind uncle would never be able to use this type of site. It's simply unusable. Don't get me wrong I am an absolute wpf exponent. It's just that there is way to much experimentation going on, and not enough subtelty.

    The best of the best WPF sites will have subtelty as the key factor that they master. Intuitiveness coupled with subtelty (plus the WOW).


    I love the colours though, and the fact that the page size is minute.

  • Rossj

    evildictaitor wrote:

    Edit: It seems to work better in IE7 (but is still jumpy and ugly) - it's truly appalling in Firefox.


    More worrying, why is it any different in FF than in IE? I thought Silverlight was supposed to be a plugin.  If Silverlight can't deliver the same behaviour in two different browsers we're doomed to live in HTML 3 hell for eternity.

  • evildictait​or

    Rossj wrote:
    
    evildictaitor wrote:

    Edit: It seems to work better in IE7 (but is still jumpy and ugly) - it's truly appalling in Firefox.


    More worrying, why is it any different in FF than in IE? I thought Silverlight was supposed to be a plugin.  If Silverlight can't deliver the same behaviour in two different browsers we're doomed to live in HTML 3 hell for eternity.


    That menu isn't Silverlight.

  • AdamKinney

    RossJ:  The difference is due to differences in how the eventing is working in each browser in accordance with a windowless plug-in.  I'm changing the menu now to make it smoother in both browsers and to lose the odd hover behavior.

    vesuvius:  Regarding search, on this specific page there are only eight videos available and they are listed down the right side.  Therefore I don't think a search feature is necessary.

    I agree tooltips would be much better than no information on hover, rather than having to click on each one to learn about them.  This was pointed out by dshadle too (he also didn't like the current hover model), I just haven't added it yet.


    rhm: which os/version and version of FireFox are you on?

  • AdamKinney

    I've updated the site changing the rollover effect to a sliding, scaling highlight that should appear much smoother.  I moved the event handler from the underlying silverlight object up to the html div avoiding the windowless plugin differences.

    I've also updated the hover shapes on the starting image to match the screenshots below.  I changed from a solid brush to a gradient brush as well.  It doesn't look so much like a tracing sheet of paper on top of the image now.

    Tooltips are the list for next steps, but I need to run off and enjoy some Sunday-ness now Smiley

    EDIT:  If you've already viewed the site, you'll need to refresh the files to see the changes.

  • Rowan

    rhm wrote:
    I'd give it a look, but Silverlight 1.0 still doesn't work in FF2. It wouldn't be so annoying if it wasn't that the web page claims that it does when it blatantly doesn't - I've tried running the installer about 10 times now, re-downloaded, rebooted, everything.


    Do you have Adblock?

    The page also doesn't work in Firefox 3 due to browser sniffing in Silverlight.js.

  • evildictait​or

    Rowan wrote:
    
    rhm wrote:
    I'd give it a look, but Silverlight 1.0 still doesn't work in FF2. It wouldn't be so annoying if it wasn't that the web page claims that it does when it blatantly doesn't - I've tried running the installer about 10 times now, re-downloaded, rebooted, everything.


    Do you have Adblock?

    The page also doesn't work in Firefox 3 due to browser sniffing in Silverlight.js.


    I have Adblock (v.5) and am viewing it from Firefox (2.0.0.11) on Vista (Ultimate, RTM, no SP1 RC) with Silverlight (1.0.21115.0) and it all mainly works.

    AdamKinney wrote:
    

    I've updated the site changing the rollover effect to a sliding, scaling highlight that should appear much smoother.  I moved the event handler from the underlying silverlight object up to the html div avoiding the windowless plugin differences.

    I've also updated the hover shapes on the starting image to match the screenshots below.  I changed from a solid brush to a gradient brush as well.  It doesn't look so much like a tracing sheet of paper on top of the image now.



    Yay! Thank you. Since you're updating it anyway, can you make the videos' fullscreen? Tongue Out Cheers.

  • JChung2006

    It's looking better on Safari/Mac, but the top hovers in the menu aren't aligned with the text content. Enjoy your Sunday! There's time to work on it during the week.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.