hide scrolling from a div element

January 14, 2010 at 02:18:58
Specs: Win XP SP3, 4 Go

I'm working on my new photo gallery.

I placed on the main html page 2 div elements.

- one for the gallery title banner
- the other for the gallery itself

I want the div containing the title banner to always remain there when people are scrolling down the pictures gallery.

Is it possible, i don't want use a frameset because i don't want to slice the wallpaper.

Here's a sample of my gallery:

Thank you in advance.

See More: hide scrolling from a div element

Report •

January 14, 2010 at 13:51:47
I know there's a way to float elements, but I can't recall what it is right now. :|

I've used scrolling divs a lot with tables and whatnot, so that *might* work for your need. As an idea, try some variation of below.

<style type="text/css">  

body {   
   background-image: url(stripes.png) }

img {
   margin: 10px;
   border: 0px }

#d {
   text-align: center;
   height: 5%;
   margin-bottom: 10px;
   border: 1px solid red }

#c {
   height: 90%;
   overflow: auto }


<div id="d">jibbersh</div>
<div id="c">
<script type="text/javascript">

   for(var i=0; i < 250; i++) {
      document.write("<img src='' width='100' height='100'>");

Hopefully some flavor of the above will work for you... well maybe at least until someone else pops in with the floating method. :P


Report •

January 14, 2010 at 16:55:29
Hmmmm, thank you for taking the time to answer and write some code.

Unfortunately, by looking at it, i must say that i see nothing there that can help me.

However, i could not understand the following part, i wish i could because maybe it might be useful for my purpose :

for(var i=0; i < 250; i++) {

Report •

January 15, 2010 at 18:32:18

Would do it in standards compliant browsers...but IE doesn't support fixed positioning, so you need some javascript to update the position of the header whenever the user scrolls the page.

Something like this (with jQuery):
$(window).scroll(function() {
$('#myElement').css('top', $(this).scrollTop() + "px");

Have a look at this thread:

Report •

Related Solutions

January 16, 2010 at 01:23:05
Ok, first, thank you Fist.

We are progressing, i'm slowly but surely learning.

I re-write the code and made it cleaner so it will be easier for me to understand.

Here is a list of what is working and not working:

- Gallery title does not scroll in Firefox and IE 8 (still scroll in IE 6 unfortunately)
- Gallery itself is centered in Firefox and IE 8 (not centered in IE 6)

- When photo gallery is scrolling, it scroll OVER the gallery title which i don't want of course.
- Gallery title is not centered for both Firefox and IE 8 (but is centered in IE 6)

Here is the link again, please look at the code, what could it be that i have missed.


Thank you. :-)

Report •

Ask Question