SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 39 of 39
  1. #26
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    The above recommendations will not interfere with or otherwise affect jQuery. They fix the improper positioning of the #submissionform.

  2. #27
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Ronpat. I put all of these changes & additions, and the page looks just fine.

  3. #28
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The noticable change is that the submissionform remains in the center of the page when the width of the browser window is changed.

    I tried looking at your home page but apparently the code hasn't been transferred to the server, yet. Will implement the gray overlay after I get a look at your current HTML and CSS and can make sure it will still work. You and Pullo can decide how best to toggle the effect.

  4. #29
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    Thank you, Ronpat. I put all of these changes & additions, and the page looks just fine.
    No, you have not moved the #submissionform up a few lines in HTML per my directions. It needs to be done. It's not optional. Until that is done, the box with the form will continue to be incorrectly positioned. Right now, it's in the upper left quadrant of the window.

  5. #30
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Oops! All right, I fixed it now.

  6. #31
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, it looks good on screen. You will now find that if you change the width of the browser window, the #submission form stays in the same place and does not drift across the page.

    I will be back in touch in a bit about the gray overlay code, if you are still interested. (Did my screen shot match your intent?)

  7. #32
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As far as CSS goes for the gray overlay, I have:

    Code:
    #blackoverlay{
        display:block;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
        background-color:black;
        z-index:1;
        -moz-opacity: 0.8;
        opacity:.80;
    	filter:alpha(opacity=80);
    }

  8. #33
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Yes, I think it needs to be tweaked a tad and possibly applied in a different manner. (Haven't looked at tonight's code yet.) I'm gonna test first, though. The color is a bit darker (more opaque) than the shade that I dreamed up. Do you prefer the darker shade?

  9. #34
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, here are the tweaks.
    Code:
    #blackoverlay {
        display:block;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        min-width:1171px;    /* add me, necessary. */
        height:100%;
        min-height:1010px;    /* add me, necessary. */
        background-color:black;
        z-index:1;    /* z-index:1 is all that is necessary.  8 is fine, but so is 1.  Your choice. */
        -moz-opacity: 0.8;
        opacity:.80;
        filter:alpha(opacity=80);
    }
    The reason for the min-width and min-height is to prevent the gray overlay color from failing to appear if the browser window is scrolled vertically or horizontally to bring off-screen parts into view.
    You can demonstrate the effect by reducing the width or height of your browser window smaller than the full web page, reloading the page, toggling the gray overlay on, then scrolling to see the out-of-view parts of the page. The gray overlay will be missing.



    FYI only:

    Apparently the above style is being applied via an empty div that is inserted by JavaScript just after the <body> tag.

    It is also possible to insert the code using a different technique:
    Code:
    body:after {
        content:"";
        display:block;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        min-width:1171px;    /* add me */
        height:100%;
        min-height:1010px;    /* add me */
        background-color:black;
        z-index:1;    /* z-index:1 is all that is necessary.  8 is fine, but so is 1.  Your choice. */
        -moz-opacity: 0.8;
        opacity:.80;
        filter:alpha(opacity=80);
    }
    It would normally be set to display:none and would be toggled on via JavaScript by changing "none" to "block".

    Both methods seem to work equally well.

  10. #35
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, I put those changes in there.

  11. #36
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning Off

    Awesome! We got the effect to toggle!

    But, with the current styles, the form is displaying off to the right and way down, instead of nicely positioned in the center. Here is a screenshot.

    I uploaded the current style sheet to the page.

    Adjusting the top and left attributes of #submissionform had no effect on its position.

  12. #37
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, I figured it out. The JavaScript was messing around with the positioning in this block:

    Code:
          // Overlay Effect Script for E-mail Submission Form
          jQuery.fn.center = function () {
            this.css("position", "absolute");
            this.css("top", ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
            return this; 
          }
    Commenting it out solved the positioning issue.

  13. #38
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Wow, this is getting better. You changed the position property for #blackoverlay from absolute to fixed. That works much better! It means that you can delete those two min-width:1171px and min-height:1010px "tweaks" because they are unnecessary. (and I just learned something new!)

    If you are interested, you can also reduce the z-index of #submissionform from 9 to 1. As wtih the #blackoverlay, the larger number works fine, but 1 is all that it really needs.

    A note: The "Join the Mailing List" flag hanging under the right wing seems to have changed appearance slightly. Was that intentional?

  14. #39
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ronpat View Post
    If you are interested, you can also reduce the z-index of #submissionform from 9 to 1. As with the #blackoverlay, the larger number works fine, but 1 is all that it really needs.
    Correcting a careless error in my posts...

    The z-index value of #submissionform has to be one greater than the #blackoverlay. If the overlay is zero, then 1 is OK here. If the overlay is 1, then #submissionform should be 2.


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
  •