Always centered

Hi,

I am making a website, and the body of the website is very long (8000px).
That's because everytime a link is in the header it slides to another coordinate on the long image.
But I was wondering if it is possible, to always have the coordinates that are shown in the center of the browser.

I don't know if I need javascript or just css and html.

I think I probably first need to find out the width of the users browser right?

I hope you understand what I meen and that you can help me.

The link to the site is: http://wearecrunch.dk/gammelsjuf/

I found some code, that I am trying to use to make a div the same size as the browser, so I can center something inside that div.
But I can't seem to get it working.

here is the javascript

Code:

---


// JavaScript Document

    function getObj(name){
    if (document.getElementById){
    this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
    }
    else if (document.all){
    this.obj = document.all[name];
    this.style = document.all[name].style;
    }
    }
   
    function getWinSize(){
    var iWidth = 0, iHeight = 0;
   
    if (document.documentElement && document.documentElement.clientHeight){
    iWidth = parseInt(window.innerWidth,10);
    iHeight = parseInt(window.innerHeight,10);
    }
    else if (document.body){
    iWidth = parseInt(document.body.offsetWidth,10);
    iHeight = parseInt(document.body.offsetHeight,10);
    }
   
    return {width:iWidth, height:iHeight};
    }
   
    function resize_id(obj) {
    var oContent = new getObj(obj);
    var oWinSize = getWinSize();
    if ((oWinSize.height - parseInt(oContent.obj.offsetTop,10))>0)
    oContent.style.height = (oWinSize.height - parseInt(oContent.obj.offsetTop,10));
    }
   
    window.onresize = function() { resize_id('divresize'); }

---

I am not sure what I should put where it says (name)
but the div I want to resize is called divresize.
I hope someone can help me.

thank you

http://www.hardcode.nl/archives_139/...ign-plugin.htm

Thank you,

but I'm quite new to Jquery.
So where do I refer to the ID that has to be centered.

I assume, I create a new file and link from my html to that file right?

But how does it tell the html file what part of the html file that has to be centered?

thank you for your time.

I believe this is what you need...

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">

function alignVert(victim){
var of = $('#'+victim).offset();
$(document).scrollTop(of.top);
}

</script>

<!-- html -->
<a href="javascript://" id="button" name="vertMe">click</a>

<script type="text/javascript">
$('#button').click(function(){
var victim = $(this).attr("name");
alignVert(victim);
});
</script>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p id="vertMe" style="color: red">some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>
<p>some text </p>

I think I'm doing it wrong, because nothing is happening.

at the top of my page i wrote this:

Code:

---

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">

function alignVert(victim){
var of = $('#'+victim).offset();
$(document).scrollTop(of.top);
}

</script>

<!-- html -->
<a href="javascript://" id="button" name="vertMe">click</a>

<script type="text/javascript">
$('#button').click(function(){
var victim = $(this).attr("name");
alignVert(victim);
});
</script>

---

and down where I want to center the thing I wrote this:

HTML Code:

---

<p id="vertMe">
                <div id="sliding-background">
               
                        <div id="main-bg">
                       
                                <!--<span id="first_img_margin">-->
                                <img src="images/bg_side1.jpg" />
                                <!--</span>--></span>
                                <span id="img_margin">
                                <img src="images/bg_side2.jpg" />
                                </span>
                                <span id="img_margin">
                                <img src="images/bg_side3.jpg" />
                                </span>
                               
                                <!--<img src="images/fireworks.jpg" />
                                <img src="images/main-bg2.jpg" />
                                <img src="images/slider-psyked.jpg" />-->
                       
                        <img src="images/ajax-loader.gif" alt="Loading..." class="ajax-loader" />
                </div> <!-- End #sliding-background -->
               
                <div id="extra-backgrounds">
                        <img src="images/bg_team.jpg" id="team_bg" />
                        <!--<img src="images/slider-wall.jpg" id="day-2-bg" />                       
                        <img src="images/slider-caesar.jpg" id="day-3-bg" />-->
                        </p>
                </div>

Is that not correct understood?

Thank's for your help

---

First, be sure you have jquery loaded:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Then, I suppose <div id="sliding-background"> is the div you want to slide to.

The anchor is wrote was just there to demonstrate, as of the p elements.
Give your anchor name the id of the "to slide" element:
name="sliding-background"

The event listener will extract the name and pass it threw to your alignVert() function. The function will calculate the offset of that element, then trigger a slide down to that position.

Try it by saving my snippet in a blank file, it work's. You can then play around in the function by giving additional offset values to fine tune your scrolling.
example:

function alignVert(victim){
var tune = somevalue;
var of = $('#'+victim).offset();
of.top += tune;
$(document).scrollTop(of.top);
}

Well actually the sliding-background, is the whole background that slides when I press one of the links in the header.
if you go to: http://wearecrunch.dk/gammelsjuf/
you can see what I mean.

and the body is all the way to the left as you can see, but I would like it centered, so no matter what link I had pressed on, the body will be centered.
So the sliding function already works.
and the sliding background is really long.
All the pics that is shown when a link is pressed are on the sliding-background.

I hope you know what I meen :)

Thank you for your time

add this in your css under the body tag:

margin-left: auto;
margin-right: auto;
width: 70%

hmm just tried that, it didn't move anything.
The header was centered with margin:0 auto;

but I can't seem to get the body centered, do you think it has something to do with the width of the sliding background, because it's so much longer than the screen size?

There is a div surrounding the img so the html look like this

HTML Code:

---


<span id="first_img_margin">
<img src="images/bg_side1.jpg" />
</span>

---

if I put a fixed margin on that div it works fine, and it moves to the left.

But then I tried to put a 0 auto on it and it's all the way to the left, it doesn't move an inch.

it looks like this:

Code:

---

#first_img_margin{
margin:0 auto;
}

---

When i modify the css as explained, I get it centered...

c.f. attachement

Hmm that's really strange.

But is the sliding background also on your version, and really long.
because it's 9700px in width, and I thought maybe that had something to do with it, but maybe not.

the whole html thing looks like this:

HTML Code:

---

<div id="sliding-background">
               
                        <div id="main-bg">
                       
                                <span id="first_img_margin">
                                <img src="images/bg_side1.jpg" />
                                </span>
                               
                                <span id="img_margin">
                                <img src="images/bg_side2.jpg" />
                                </span>
                               
                                <span id="img_margin">
                                <img src="images/bg_side3.jpg" />
                                </span>
                                <span id="img_margin">
                                <img src="images/bg_side4.jpg" />
                                </span>

---

and the whole css looks like this:

HTML Code:

---


#sliding-background {
       
       
        height: 517px;
        width: 9700px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
       
}

#main-bg {
        display: none;

#img_margin{
margin-left:573px;

}



#first_img_margin{
margin-left:50px;
}

}

---

It's really strange it doesn't work on mine :(

Oh I meant

HTML Code:

---

#first_img_margin{
margin:0 auto;
}

---

"because it's 9700px in width"

when i do a body width detection, i only get the width of my screen, witch means that your body fits to the screen, without overflow.

detection:

var x = $('body').width();
alert(x);

result: 1366 (my screen width)

by the way, I found these errors...

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/malmoe.jpg"

malmoe.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/malmoe2.jpg"

malmoe2.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/malmoe3.jpg"

malmoe3.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/station.jpg"

station.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/oresbron.jpg"

oresbron.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/oresbron2.jpg"

oresbron2.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/turning.jpg"

turning.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/turning2.jpg"

turning2.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/gun.jpg"

gun.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/malmoe.jpg"

malmoe.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/malmoe2.jpg"

malmoe2.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/oresbron2.jpg"

oresbron2.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/malmoe3.jpg"

malmoe3.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/station.jpg"

station.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/oresbron.jpg"

oresbron.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/turning.jpg"

turning.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/turning2.jpg"

turning2.jpg

"NetworkError: 404 Not Found - http://wearecrunch.dk/images/thumbs/gun.jpg"

gun.jpg

TypeError: a is null
[Stopper sur une erreur]

...||0;this.Le=Q[u](this,Ve,this,this.J)}J(Vg,V);Vg[F].O=function(){var a=this;a.j|...