www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Always centered

Hybrid View

  1. #1
    Join Date
    Feb 2009
    Posts
    47

    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/

  2. #2
    Join Date
    Feb 2009
    Posts
    47
    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

  3. #3
    Join Date
    Aug 2012
    Location
    Belgium
    Posts
    66

  4. #4
    Join Date
    Feb 2009
    Posts
    47
    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.

  5. #5
    Join Date
    Aug 2012
    Location
    Belgium
    Posts
    66

    Sorry, I misunderstood your needs... this should be it^^

    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>

  6. #6
    Join Date
    Feb 2009
    Posts
    47
    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

  7. #7
    Join Date
    Aug 2012
    Location
    Belgium
    Posts
    66

    hmmm.....

    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);
    }

  8. #8
    Join Date
    Feb 2009
    Posts
    47
    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

  9. #9
    Join Date
    Aug 2012
    Location
    Belgium
    Posts
    66

    If this is what you mean...

    add this in your css under the body tag:

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

  10. #10
    Join Date
    Feb 2009
    Posts
    47
    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?

  11. #11
    Join Date
    Feb 2009
    Posts
    47
    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;
    }

  12. #12
    Join Date
    Aug 2012
    Location
    Belgium
    Posts
    66

    I think something went wrong...

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

    c.f. attachement

  13. #13
    Join Date
    Feb 2009
    Posts
    47
    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

  14. #14
    Join Date
    Feb 2009
    Posts
    47
    Oh I meant

    HTML Code:
    #first_img_margin{
    margin:0 auto;
    }

  15. #15
    Join Date
    Aug 2012
    Location
    Belgium
    Posts
    66

    I don't get it...

    "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|...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles