jQuery Magic Frame/Overflow Vanishing Scroll Bar?

[psionicsin]

Hey guys. I'm looking for something, and I'm hoping that I can explain this correctly so you all can understand.I'm redesigning a website: http://rutholsonphoto.com/testbuildv3/index.phpAnd in avoidance of not wanting the viewers to be distracted with a constantly refreshing page when they click a link, I'm opting to ad AJAX functionality (which also means that I don't need a hundred cloned pages lol).But anyway my concern lies with the content...The content will appear in an area that is 800px by 540px. Most of the content filling it will be that size, however there is also a bevy of content that will extend vertically far longer than just 540px.However I DON'T want the page itself to extend with the content. I've never ever been a fan of scrolling super long pages. So I figured "I can add an overflow to the main content's div!"And although this would help for my longer content, I know from experience that this will leave me with a vertical and horizontal scroll bar for the static content. I don't know why, but even though the area is 800px by 540px, the frame will still create those bars if the content touches the sides or something.So then I was wondering...Is there some sort of jQuery plug-in that exists to where I can define a conditional overflow property in it?Something like it will look to make sure the content measures 800px by 540px, and if it does, it won't add any scroll bars. However if the height of the content measures more than 540px it will create a scroll bar to navigate the content with. But the REAL magic will come where when the users mouse stops moving, the scroll bar turns invisible (1sec fadeout). And to activate and return scroll bar again, all they have to do is move their mouse OVER the main content area.Does something like this exist? Or do you all think I'm trying to do something hard to where there's a far easier alternative?

[thescientist]

I think you might just need to define some padding's to cushion the content a little bit to make sure it doesn't show scroll bar in all browsers even if the content is withing the concerned dimensions. There probably is something in the jQuery library to do the fading part, but it seems reasonable enough that you could probably do it on your own, although the experience in learning jQuery will undoubtedly be valuable.

[psionicsin]

I think you might just need to define some padding's to cushion the content a little bit to make sure it doesn't show scroll bar in all browsers even if the content is withing the concerned dimensions. There probably is something in the jQuery library to do the fading part, but it seems reasonable enough that you could probably do it on your own, although the experience in learning jQuery will undoubtedly be valuable.

SO you're saying for me to make the content area bigger, keep the content size the same, but pad the area around by 10 or so pixels to stop the bars while still allowing visibility?

[thescientist]

I would test by putting text content in the the div that will have content inside it, until it reaches the right edge, and slowly pad the right hand (and/or the left hand side) until you don't have horizontal scroll bars in all browsers.

[psionicsin]

I would test by putting text content in the the div that will have content inside it, until it reaches the right edge, and slowly pad the right hand (and/or the left hand side) until you don't have horizontal scroll bars in all browsers.

Oh I sure am about to test. A question though...would this also work for 800x540 images? I don't think I'd be able to pad those without something funky going on. I'm VERY sure it'll work for text, but text is a 3rd class citizen compared to the images and ads we need to run.Thi is what we have currently in terms of content that will fill that container.http://rutholsonphoto.com/index.php

[thescientist]

you could always set images to the background of the div. It will mostly take some trial and error to get the perfect balance. Get working first what is most critical (in this case images), and then see how the text plays into it.

[psionicsin]

you could always set images to the background of the div. It will mostly take some trial and error to get the perfect balance. Get working first what is most critical (in this case images), and then see how the text plays into it.

That wouldn't work for our situation as the site will be AJAX, although I understand where you're coming from.We have slideshowpro which would run at a resolution of 800x540 on the "gallery" page. Can't set that to a background div. And also there is a jQuery slider gallery for the homepage. Not to mention various other HTML/CSS strictly formatted content pages to fill in that content as well.

[dsonesuk]

I'm sure i remember seeing scrollbar created using jquery, where you can hover over the bar and the page would scroll in that direction, if it exists, and is jquery, i don't see why you can't use onmousemove or stop, to make the JQ scrollbar fadein or fadeout