HTML / CSS question (single page scrolling)

sYnister

[new question]
anyone have an idea on how to make a div/image visible or invisible depending on where the user has scrolled to? take a look here for an example:

http://www.infinvision.com/index.php

when you scroll down a bit, a "back to top" position:fixed image appears but disappears if you click it or scroll back to the top yourself. how is this done?
[/new question]


Old question below

I'm redesigning a website for a client and they have an idea of what they want and an example that they showed me but I've never attempted something like this before so I was hoping someone could help me out.

First, this is the template they were inspired by: http://bogawat.com/themes/strokes/

Do you see how when you click one of links, the content on the right scrolls accordingly? I originally assumed that they were separate frames and the links were referencing an <a> somewhere in the content frame but on closer inspection, the content seems to be a really long <div> with a wrapper hiding the excess and the link is telling that div to scroll x many pixels to the different sections. Before I continue, would I be correct in that assumption?

Once that is settled, the client's design calls for a page divided into three sections (columns): a left "navigation" section, a middle "explanation" section and a right "content" section. Would there be a way for a link in the nav section to call for the div in the middle section to scroll to a certain point and another div in the content section to scroll as well independently? If so, how? I don't really know what to search for on tutorial websites to get this going

This may be confusing so I can draw out what I mean when I get home. Any help is appreciated[/COLOR]

Jimmy King

That site is using jQuery for DOM manipulation. That is almost certainly what is being used to do the scroll. I briefly glanced and noticed a .animate() call in there, which is jQuery stuff.

wmelon

basically you're looking at some custom javascript on that page. I'd recommend looking into jQuery.

sYnister

Thanks for the quick replies Jimmy and melon, I'll be looking for some jquery tutorials. Hope it won't be too much of an undertaking

Jimmy King

It's pretty easy to do with jQuery. I've got a site that does some auto-expanding/scrolling stuff using it and I'm terrible at front end/UI work. If I can do it, anyone can.

EWom

Remember to test test test with stuff like that. I see they use a special ie7 style sheet. Be prepared for shit to not work in specific browsers and then use your google-fu to figure out how to make it work. IE is usually the one thats an asshole about it though.

Tejs

jQuery's .animation() function is perfect for smoothly animating from one numeric value to the next. All you would need to do is get a handle to your second div and third div, and then .animate() them as you wish.

sYnister

very much appreciated everyone, especially Tejs, i looked through some JQuery tutorials and you explanation about handles just started to get everything clicking. maybe a quick secondary question for those of you still lurking the topic. i see that the website i linked before uses Cufon (http://cufon.shoqolate.com/generate/) to embed a .ttf font into the webpage. i am aware and have used sIFR before but never heard of Cufon, is it stable? does it work well?

wmelon

Cufon is great. i've used it extensively.

sYnister

thanks again to everyone who helped with the above question. just one more little one now.

anyone have an idea on how to make a div/image visible or invisible depending on where the user has scrolled to? take a look here for an example:

http://www.infinvision.com/index.php

when you scroll down a bit, a "back to top" position:fixed image appears but disappears if you click it or scroll back to the top yourself. how is this done?

Infidel

sYnister wrote: »

thanks again to everyone who helped with the above question. just one more little one now.

anyone have an idea on how to make a div/image visible or invisible depending on where the user has scrolled to? take a look here for an example:

http://www.infinvision.com/index.php

when you scroll down a bit, a "back to top" position:fixed image appears but disappears if you click it or scroll back to the top yourself. how is this done?

You would have an event tied to scrolling, and you can get the current offset of the window with the page (0 is the window is right at the top of the page, 100 means it is 100 pixels scrolled down / cutting off from the top, etc.)

Looks like they calculate a scroll offset for the Y and fadeIn/Out based on if it is > some threshold.

In jQuery, you'll want to look at the .scroll() event method and the .scrollTop() value.

Disrupter

Yeah, something like

you would bind the event to the scroll

something like

$(window).bind('scroll', function(){
if($(this).scrollTop() > 200) {
$("#theTab").show();
}
else
{
$("#theTab").hide();
}
});

Basically this would bind the function to the scroll so every time you scroll that function is called. I didnt test this but, it should work.

Delzhand

wmelon wrote: »

Cufon is great. i've used it extensively.

Cufon is pretty great, the only caveat is that while your text can be read by search engines, it can't be highlighted. Works great for headers and logos, though, but you probably don't want your body or paragraph text to use it.