SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question why is there a 'relative' positioning...

    Hi - can someone please explain to me why there is relative positioning here, because when I remove it it has no affect visually, and usually you have an absolute positioning that goes along with relative, but there is none here.



    Code CSS:
    #gallery {
      background-color:#94C5EB;
      border:1px solid #015287;
      height:103px;
      width: 325px;
      overflow: auto;
      text-align:center;
      position: relative;
      margin-bottom: 10px;
    }
     
    #gallery img { 
      width: 97px; 
      height: 97px; 
      float:left; 
      border:1px 
      solid #fff; 
      padding:2px;
    }
     
     
    h2 {
      clear: both;
    }
     
    #ajaxInProgress{
    	width:325px;
    	height:13px;
    	padding: 2px 0;
    	margin-top:-5px;
    }
     
    .progress {
      background: #fff url(progress.gif) no-repeat center right;
    }


    Code HTML4Strict:
    		<div id="content">
    			<h2>
    				Image Gallery
    			</h2>
          <div id="ajaxInProgress"></div>
          <div id="gallery">
            <img src="../../images/beau_200.jpg" alt="" />
            <img src="../../images/fader_200.jpg" alt="" />
            <img src="../../images/kellie_200.jpg" alt="" />
            <img src="../../images/mofat_200.jpg" alt="" />
            <img src="../../images/johnny_200.jpg" alt="" />
            <img src="../../images/glenda_200.jpg" alt="" />
          </div>
          <h2>
            Welcome
          </h2>


    Code JavaScript:
    $(document).ready(function(){
      $('#ajaxInProgress')
        .ajaxStart(function() { 
          $(this).addClass('progress'); 
        })
        .ajaxStop( function(){ 
          $(this).removeClass('progress'); 
        });
      GALLERY.init();
    });
     
    var GALLERY = {
      container: '#gallery',
      url: 'getImages',
      delay: 5000,
      running: false,
     
      init: function() {
        var _gallery = this;
        $(this.container).scroll(function() {
          _gallery.checkScroll();
        });
      },
      checkScroll: function() {
        var gallery_div = $(this.container);
        if(gallery_div[0].scrollHeight - gallery_div.height() - gallery_div.scrollTop() <= 0) {
          this.load();
        }
      },
      load: function() {
        // Don't call if we're already running!
        if(this.running) {
          return;
        }
        this.running = true;
     
        var _gallery = this;
        $.ajax({ 
          type:"get", 
          url: this.url, 
          success: function(data){ 
            var images = data.split('|');
            $.each(images, function() {  
              _gallery.display(this);
            });
          },
          complete: function() {
            _gallery.running = false;
          }
        });
      },
      display: function(image_url) {
        $('<img></img>')
          .attr('src', '../../images/' + image_url)
          .hide()
          .load(function() { 
            $(this).fadeIn();
          })
          .appendTo('#gallery');
      }
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It would be easier if you could post a live link. Given the image and code you posted, it doesn't seem pos:rel is needed, but it might be there for the sake of the javascript code. The image suggests that the JS code isn't working, but perhaps when it is, the container needs the positioning (which is common with JS galleries).

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You can learn more about positioning in the CSS Reference here at SitePoint.

    As far as Relative Positioning (RP) is concerned it is really only need when you need to do the following -


    1. Visually shift an element using offset properties (top,bottom,left,right)
    2. Establish a containing block for absolute positioned children, so they position in relation to the parent container rather than the <body> (or nearest positioned ancestor).
    3. Auto stack the element above non-positioned elements lower in the source order
    4. Apply z-index values to an element for manual stacking orders

    can someone please explain to me why there is relative positioning here, because when I remove it it has no affect visually
    If the script was setting absolute positioning on the images then it would have been so the parent would be the containing block, as ralph mentioned.

    A lot of times beginners don't fully understand RP and they tend to place it on an element that doesn't need it. If you did not write the code and it is a template you found then that may be the case. That is why it still works when you remove it.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It would be easier if you could post a live link. Given the image and code you posted, it doesn't seem pos:rel is needed, but it might be there for the sake of the javascript code. The image suggests that the JS code isn't working, but perhaps when it is, the container needs the positioning (which is common with JS galleries).
    Quote Originally Posted by Rayzur View Post
    Hi,
    You can learn more about positioning in the CSS Reference here at SitePoint.

    As far as Relative Positioning (RP) is concerned it is really only need when you need to do the following -


    1. Visually shift an element using offset properties (top,bottom,left,right)
    2. Establish a containing block for absolute positioned children, so they position in relation to the parent container rather than the <body> (or nearest positioned ancestor).
    3. Auto stack the element above non-positioned elements lower in the source order
    4. Apply z-index values to an element for manual stacking orders

    If the script was setting absolute positioning on the images then it would have been so the parent would be the containing block, as ralph mentioned.

    A lot of times beginners don't fully understand RP and they tend to place it on an element that doesn't need it. If you did not write the code and it is a template you found then that may be the case. That is why it still works when you remove it.


    Hi ralph/Rayzur - thanks for your reply, this particular code is from a book (jQuery - Novice to Ninja, 2ed) that I am working my way through at the moment.
    I have a suspicion that this is probably fixing some old browser layout issue or something on similar lines....

    .

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mnaseersj View Post
    I have a suspicion that this is probably fixing some old browser layout issue or something on similar lines....
    Which file is it? Looking at those examples, the jQuery needs to move the images to the left every time the gallery is clicked on, so needs the positioning so it can set a left setting. But I couldn't see which example you are working from. Is it a chapter 4 example?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Which file is it? Looking at those examples, the jQuery needs to move the images to the left every time the gallery is clicked on, so needs the positioning so it can set a left setting. But I couldn't see which example you are working from. Is it a chapter 4 example?
    It's chapter 6, exercise 12 - so the jQuery every time it loads pictures after each scroll, the css is instructing them to float left relative to it's parent container. That makes sense to me know, have learnt something important today thanks you so much

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mnaseersj View Post
    the css is instructing them to float left relative to it's parent container.
    No, sorry, in the example I was looking at in CH4, there was a left: -300px etc setting relative to the container. Float:left doesn't rely on relative positioning. Floating just happens in relation to an element's container anyway.

    With this gallery, as the page loads the jQuery makes a calculation relating to the top of the container, e.g.

    top: 300px

    So that is probably the purpose of the relative positioning. I'm not familiar with the gallery or its purpose, though, as I'm not up to that in the book.

    When an element has relative or absolute positioning, it can be moved in relation to the top, bottom, left or right of its container.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, sorry, in the example I was looking at in CH4, there was a left: -300px etc setting relative to the container. Float:left doesn't rely on relative positioning. Floating just happens in relation to an element's container anyway.

    With this gallery, as the page loads the jQuery makes a calculation relating to the top of the container, e.g.

    top: 300px

    So that is probably the purpose of the relative positioning. I'm not familiar with the gallery or its purpose, though, as I'm not up to that in the book.

    When an element has relative or absolute positioning, it can be moved in relation to the top, bottom, left or right of its container.


    Yes, and I guess will come back to it again after some time when my head is a bit more clear and I can think straight, it's about 4.15 am here in London

    .

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mnaseersj View Post
    it's about 4.15 am here in London
    Ah, well get to bed, for goodness' sake!


Tags for this Thread

Bookmarks

Posting Permissions

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