Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
57 Comments
- dantidote, on 10/12/2007, -3/+30no joke, i was wanting to know this about 10 seconds ago. Damn, Digg can read minds now.
- actionscripted, on 10/12/2007, -1/+23Combine a <div> tag with jQuery and you've got an AJAX-enabled iframe replacement.
How trendy. :) - slackerbox, on 10/12/2007, -3/+18That is kind of true. One of the good thing about (i)frames is just that target page is loading. With CSS frames, the entire page is loading all over again. The (i)frames are just a bit more efficient.
- WeeklyGeek, on 10/12/2007, -2/+15Surprisingly, many designers don't know how to do this. Muuuch better than using a frame or an iframe.
- headzoo, on 10/12/2007, -0/+10"In Netscape 4 browsers and IE5/Win, the whole page scrolls instead of just the middle part."
Okay, seriously. Who still gives Netscape 4 much consideration when developing a site? - Isyso, on 10/12/2007, -1/+10This won't help unless you're using AJAX to load the pages.
- inactive, on 10/12/2007, -0/+7If you don't want your flash movie to replay, just use a cookie. Simple.
- NtHammer, on 10/12/2007, -1/+7innagadadavida
but then the div has its own scroll bar, instead of using the main pages scroll bar
this way is just better :D
thx a lot
digg++ - ,,|,_, on 10/12/2007, -5/+11pshh, come talk to me when you can do blinking text or a scrolling marque with CSS. Until then I see no need to move past what I learned in 1996...
- Curufir, on 10/12/2007, -0/+5"
I have tested this technique and found it to work in the following browsers:
Mozilla 1.4+/Mac OS X
Mozilla Firebird 0.61/Win
Safari 1.0/Mac OS X
IE6/Win
IE5.2/Mac OS X
OmniWeb 4.5/Mac OS X
Opera 7.11/Win
"
Not to be picky or anything, but I'm guessing there aren't that many Firebird 0.61 users left. Pretty old article I think.
Oh, in Konqueror 3.5.4 the adbox screws up the scrolling. - ,,|,_, on 10/12/2007, -1/+5xamado - stop stroking your geek beard. I'm joking...
- awhiteflame, on 10/12/2007, -2/+5It's *much* better than using iframes or frames, yes, but...still. I'd *much* rather scroll the entire page. I find it very annoying if there is a sub-window I have to scroll in, frame or not.
- theoallardyce, on 10/12/2007, -1/+4Whats really so bad about using frames and tables? I used to be a complete CSS fundamentalist, I would have been sent to Guantanamo as some kind of extremist for the way I advocated proper CSS and HTML usage but then I realised - HTML and CSS are possibly the two worst implemented and most ***** up standards in the entire history of computing. Since then I figure its just better to treat them both as a kind of "compiled" language of crap. Instead of concentrating on good markup I concentrate on a good semantic XML source and a transformation system, compiling HTML, CSS and JavaScript. That way I can compile the most cross-browser friendly code and if needed make separate outputs for other browsers, text-only, mobile etc. I still use CSS, and even lay it out a bit but I just accept that its a complete *****-up compared to a good table for real no-***** layout. And as for IFrames - they're practically a cross-browser replacement for AJAX up-daters.
As an analogy - who cares about good well formed assembly if you're writing in a high level language? Why give a crap about the compiled output that no-one in their right mind is ever going to look at when you can use whatever nicely structured language you want and hit compile? CSS was a great idea with great potential, and if you only care about Firefox then it still is a great idea. The reality is that IE ***** it up big time and for the next 5 years at-least its going to remain that way. - NtHammer, on 10/12/2007, -1/+4i think this way looks better ^_^
- keesj, on 10/12/2007, -2/+4It's not a trick actually, this is 'position: fixed''s intended use.
Btw, I think the article itself is much more interesting:
http://www.456bereastreet.com/archive/200411/who_framed_the_web_frames_and_usability/ - dolemite5005, on 10/12/2007, -0/+2Believe it or not, frames still have a place in the world of web development. Think of sites that have a huge left hand nav which act as a table of contents, such as various kinds of online technical documentation (think msdn library). The issues with breaking URL's, bookmarking, and printing, which the guy pointed out on his site, can be easily fixed with some simple scripting (eg. You type in the URL of a specific content page and the proper page loads with the frames built around it). With a little more trickery you can sync up the navigation to the current page as well. But yea, for pretty much anything else frames are not necessary at all.
- actionscripted, on 10/12/2007, -0/+2Look not to be a dick, but I fail to see how setting overflow:hidden would benefit someone trying to emulate an iframe with a <div> and a little jQuery.
You define the element's width with a little CSS, setting the overflow to auto. Then you replace the contents of the <div> using jQuery selectors, the get method, and drop the returned data into the <div>.
You can also load entire pages using some of the jQuery lightbox-type plug-ins.
Also, this can be done with nearly every other javascript library. - pixelbeat_, on 10/12/2007, -0/+2I did that to :)
http://www.pixelbeat.org/ - JMJimmy, on 10/12/2007, -0/+2This is a rendering bug in Gecko based browsers and will work on any site including Digg.
- topcataj, on 10/12/2007, -0/+2OMG, people are still thinking it cool that you can get rid of frames?
When I got into HTML properly around 99/2000 frames were a bad idea, not far off 7 years on and people are still using them and realising that perhaps there's a better way of doing it?!
ANd then people moan because MS say they have to make their new browsers backwards compatible, if progress in code usage is this slow, it's no wonder. - vince1731, on 10/12/2007, -0/+1Cool factor went down the drain after opening the page in IE - it's completely bozzed.
- likwidoxigen, on 10/12/2007, -0/+1There's a problem though, if you do an anchor and you don't use IE. FF and opera screw up and put the anchor all the way at the top of the viewport and hide the beginning of the information behind your header. This issue can be resolved with a javascript scrollto function. But that's a pain in the ass because sometimes security settings in IE dont' let the javascript run.
- dvws, on 10/12/2007, -0/+1i think this way looks better ^_^
it might look better....but putting the scroll bar on the content area that scrolls provides a better visual queue that there is more content than just what fits on the screen...I guarantee that if you set up a page like that most of your users wouldn't know that you can scroll and view more content. - Twango, on 10/12/2007, -0/+1Often tables are the clearer, better way ... they can be a lot less verbose. Styles work well with table elements. CSS is very useful, but not always the best tool for the job.
- ZephyrWest, on 10/12/2007, -0/+1I immediately thought "overflow: auto" the moment I saw the title... pretty obvious if you ask me.
- frankiejr, on 10/12/2007, -0/+1I designed & built something similar at the end of last year. I used a different method because I needed the footer to be at a fixed height, though. You can check it out here:
http://legendsofstyle.net/ - aura, on 10/12/2007, -0/+1A nifty trick but not one I intend to use, purely because people don't navigate a site expecting something without a scrollbar to move, and rightly so.
- johnie1, on 10/12/2007, -0/+1hey i did that:
http://pod-door.blogspot.com/
(:
it's good for a blog (when you only got one page) - isnoop, on 10/12/2007, -0/+1I'm glad this is finally getting some attention. Hopefully now our UI developers will take me seriously when I get around to proposing doing exactly this for the second time.
- gedw99, on 10/12/2007, -0/+1There is a bug in Firefox - its nto hug but kinda annoying:
Steps to reproduce:
1. Open the site in a browser.
2. Open another tab and go to googele or something. just give it the focus.
3. Resize the browser to half its size.
4. tab back to the fist tab that has this test page in it
You will notice that it is no longer aligned properly horizontally.
The code needs a onresize behaviour in the css i think - elmimmo, on 10/12/2007, -0/+1Might be better from a design standpoint. But it breaks usability badly since you cannot use page up/down keys anymore (try it and try to find were you left the reading when you scroll down with them), which is pretty much what the user is expected to do if there are scrollbars. Pretty frustrating if you ask me.
- inactive, on 10/12/2007, -2/+3This should be pretty useful for web designers. Frames are a real pain to mess with, and can get pretty messy if you don't do it properly. This should help clear things up.
- ikebowen, on 10/12/2007, -0/+0Not bad, I suppose, but position: fixed; has been around a while: ths isn't really a "new" concept, unless you count that IE 7 newly supports it.
- cpawl, on 10/12/2007, -0/+0With Javascript and DOM tabls you can keep content on a page with a refresh as well and at least it will not degrade if a browser does not support JS or DOM (or JS is disabled). In this case, the content will at least load like a normal page will.
I used CSS frames a few times but it all depends on my clients needs and audience. - Bloodwine, on 10/12/2007, -0/+0frames still have their place, such as in administration/control panels. The CSS trickery may present the page as if it were in frames, but you still have to load the content in all the faux frames on every page load.
Sure you can do some AJAX to emulate an iframe for the main content, but doesn't it seem a little silly to go through all that work when all you are doing is emulating frames which are readily available?! - slackerbox, on 10/12/2007, -1/+1It's a nice little trick, I've done this a couple of times. If you really wanted to get the more "frame" look & feel, though, you should only apply the overflow to the box with the content. That way the scroll bar will show up in the box with the content that you are actually scrolling.
- j4s0n, on 10/12/2007, -1/+1tis old, no digg.
- Innagadadavida, on 10/12/2007, -2/+2I was referring to what actionscripted said.
- JMJimmy, on 10/12/2007, -1/+1While this setup does work, be warned the way they do it is very fragile in IE. I was attempting to use their style for http://www.dougjohnsonphoto.com and it broke so many times on silly modifications. I started over from scratch and ended up with the current incarnation of that site. (note: site is a modification of minishowcase)
The idea is great for sure. - Vironex, on 10/12/2007, -1/+1A little on the obvious end, but still helpful to beginners or a good reminder of a much underused ... what is a CSS function/command called? Seriously, that's not rhetorical - I really don't remember.
By the way; IE eats this up. - malhtiek, on 10/12/2007, -2/+1The sidebar scrolls for me in Firefox 1.5.0.6
- Innagadadavida, on 10/12/2007, -8/+7You could also add overflow: hidden; to your div tag in css and make it appear like an iframe.
- fatbeaver, on 10/12/2007, -2/+1this got dugg? you've got to be kidding me ...
- f3l1x, on 10/12/2007, -1/+0yea im not a fan of the scroll controller. but the site has a place to change the style too. (sadly still using that damn scroller)
p.s. looks like some retard went through and modded people making valid points down and people making fun of netscape up - slackerbox, on 10/12/2007, -3/+1Calling it a "trick" is just a figure of speech. Come on, people.
- inactive, on 10/12/2007, -4/+1This looks really neat literally... Noo heavy html code or anything....
iframes are so IE6 - kevincannon, on 10/12/2007, -5/+2Is this a digg from the past. Anyone who's actually a professional web designer would've known this about 3 or 4 years ago.
- timmayers, on 10/12/2007, -4/+0Div tag with a jquery is a nice day!! I like it... need to try it :- )
- xamado, on 10/12/2007, -4/+0The scrollbar in that Earth Worm Jim site doesn't seem to work, at least in Firefox 1.5 under Linux.
- trylleklovn, on 10/12/2007, -5/+1Designers who are in the need of defining an area as a frame or an iframe, should not call them selfes designers.
-
Show 51 - 57 of 57 discussions



What is Digg?