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.
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.
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>
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.
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?
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.
Reply With Quote
Bookmarks