asp.net-mvccssdigg

How does the DiggBar work?

How does the DiggBar work?

I'm trying to make an ASP.NET MVC DiggBar clone just for learning purposes and does anyone have a suggestion on how to specify the url of the content for the lower frame? How would you go about constructing that in MVC?

Also, I know that it is an iFrame, but how do they position it so regardless of scrolling it stays positioned at the top? Is it CSS magic?

alt text

Edit: I'm not interested in whether or not you like them. I am not putting one into production and I'm not asking for whether they are good design or not. I simply ~want~ to make one.

I find the DiggBar useful and I like it. Hell, you can turn it off in two clicks! Similarly, reddit has a reddit bar which is opt-in (probably better approach).

Solution

  • The basic html is:

    <html>
<head>
  <style type="text/css">
    #toolbar {position: fixed; top: 0; height: 40px; width: 100%; ... }
    #page {width: 100%; height: 100%;}
  </style>
</head>
<div id="toolbar">
  All your toolbar stuff here.
</div>
<iframe id="page" name="page" src="http://url.to/page" frameborder="0" noresize="noresize"></iframe>
</html>

    You would have a slug on your own URLs that maps to the page's URL, e.g.
    d1oKo3 => http://news.bbc.co.uk/2/hi/technology/7991708.stm

    All your view would have to do is look up the mapping and put the page's URL into the iframe's src. Just make sure you have a way for users to opt out, as some people don't like this sort of toolbar.