SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 58
  1. #26
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Never mind this. It's a separate issue. Just for the ease of things, I think I'll make the #invalidemail animate upwards. I'm not quite sure why #emailbox has overflow hidden in the first place. Hopefully, I'm not putting sugar in the sacrament here, but I can't imagine why hiding the overflow would be necessary there- I want #invalidemail to be visible when necessary. The #lpfoot overflow hidden absolutely can't be changed.

  2. #27
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I took a quick glance and agree with you. Couldn't see why it had overflow:hidden, either.

    I'm sticking with the Submission form stuff for now until I get that worked out.

  3. #28
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How's it going? Anything I can do to help?

  4. #29
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I've been mulling a classic design issue. Objects that are displayed on the screen with position:fixed do not scroll... that's usually the intent. But, if the object might be rendered in a small viewport or if it is filled with text and might be rendered at larger font sizes, the top and/or bottom ends can overflow a short screen and will not be viewable - no vertical scrollbar.

    If the objects were allowed to scroll with the page, then zoomed text and small viewports wouldn't be a problem, but that wouldn't fulfill your wish to keep the objects fixed in the viewport (the lightbox effect).

    The code that I've come up with looks fine at "normal" sizes or if zoomed a little larger. It requres a minimum widow height of about 535px - closer to 600px is better - and will look fine in the vast majority of laptops. So, I guess it depends on the minimum height of the screen that you are targeting at this time.

    You mentioned that you are considering a complete redesign for the smallest devices, so maybe the version shown in these screenshots will be satisfactory until that happens.

    The "submit" and "success" boxes are both vertically extendable.

    The space for the error message is hidden unless a message is displayed.

    These screenshots show a *screen* height of 768px. At that height, there seems to be plenty of "flexi-space" in which the user can change his/her settings.

    Let me know if these will work for you.

    (This is a link to the screen shots so you don't have to wait for them to be approved.)
    https://www.dropbox.com/s/4zdn8ldp9q...ubmits-scr.rar

    SubmitForm1.gif SubmitForm2.gif SubmitSuccess.gif

  5. #30
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, these will do nicely. For #successfulsubmit, the only tweak I have is that I'd like to put the e-mail address submitted along with the other text above. The red text is supposed to be for a "Click to exit" text to appear. Will it be too crowded in there if I want to have text there that says, "Make sure to check your spam folder!", or something like that?

    Thanks, Ron.

  6. #31
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is really nifty new markup and styles, Ron!

    One of the only things that remains is the form submit buttons protrude into #submissionform as the browser height becomes shorter. It gets in the way of the nice error message section. It looks as though the buttons may have fixed positioning as they appear to maintain the same distance from the bottom of the window, but I believe it may be just because of the margins. Not sure why.

    I changed a very small bit of it as it needed to adapt to the JavaScript stuff. For example, the <p> with a class of .exit needed to have a minimum height added to it so the #successfulsubmit height didn't "jump" when that was added in by the JavaScript.

  7. #32
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    One of the only things that remains is the form submit buttons protrude into #submissionform as the browser height becomes shorter. It gets in the way of the nice error message section. It looks as though the buttons may have fixed positioning as they appear to maintain the same distance from the bottom of the window, but I believe it may be just because of the margins. Not sure why.
    The submitbuttons are position:absolute and are relative to the bottom of #submissionform. They shouldn't intrude into the form at all. If they do, look for some code out of place, or something else overriding my code.

    However, I just realized that those boxes do not stay in the middle of the window when the height in changed in the Presto version of Opera. FF, IE8&9, and Chrome are good. But Opera 12 is totally NOT. Guess my testing wasn't as thorough as I thought. Back to the drawing board.

    EDIT: I just downloaded and installed Opera 15 and the code works just fine. I'm not gonna worry with Opera 12.

  8. #33
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I figured why the buttons were moving around. Beginning at line 375, where .submitbutton div is being positioned absolutely, the code is now:

    Code:
    .submitbutton {
        text-align:center;
        position:absolute;
        left:0;
        right:0;
    	top:416px;
    }
    Before, the top property was assigned a value of 100%. This was the reason it would move around and protrude on the error message section. What's strange is that using the bottom property instead would make it behave incorrectly... don't know why that is.

    As for the #invalidemail thing that appears when my scripts detect invalid input, I elected to just make the div fade in/appear on top of the emailbox div. Every content container has the overflow hidden, which I don't fully understand why. Let me know if you like it when you see it.

    I think this basically finished for the landing page responsive design. I'll get started on the home page design shortly, using a lot of the same techniques. I'll get it fully validated, speaking of the names and i.d.'s not being the same, but I believe I do use the names for the scripts.

    fresh link

  9. #34
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Tyler,

    lp.css has the following code on line 532:
    Code:
    #submissionform {
        bottom:90px;
    }
    Adding {bottom:90px} to #submissionform broke it and made the buttons "float around".

    Why was it added? What were you trying to achieve? Maybe your design intent is different than I expected?
    I coded the buttons to move down when that error message box appeared so it would get the user's attention and so their mouse would not still be sitting over the "Sign Me Up" button.
    The code positioning those buttons should not have had to change after the fixed height for the error message was instituted. Your new code for the buttons isn't flexible... it will not adapt to changes in text height within the body of the form.

    I suggest that you delete the changes to #submissionform and .submitbutton and restore the css that I sent (shown below) and the buttons should work properly. If they don't, please explain exactly how they fail and let me look at the code.

    (line 532)
    Code:
    #submissionform {    /* DELETE */
        bottom:90px;
    }
    (line 375)
    Code:
    .submitbutton {
        position:absolute;
        left:0;
        right:0;
        top:[colo=blue]100%[/color];    /* CHANGE from 416px */
        text-align:center;
    }

  10. #35
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah. I know how that got in there. I was copying the new styles into my already existing style sheet in my website directory. That little section remained in there and that's what went wrong. All fixed now.

    I think it's good to go now and I can start copying this new HTML into my other landing pages. That's if you think it's all clear. It's all validated as well.

  11. #36
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    As far as I can tell, the code is quite stable and good to go.

    It would probably have been easier to add the missing styles into the code that I sent, rather than adding my new code into your existing sheet. The reason is that you could have clicked and tested as your styles were being inserted and checked for bugs. There probably would not have been many to add, either. Just a thought.

    Are you happy with the Mailing List box and links in the "footer" section? I have not tested the Mailing List box and the animation associated with it, but the links have a small glitch as the window is being narrowed. Not a big deal at all, but something to look at if you're interested.

    Ron

  12. #37
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    You also realize that you do not have to reserve that space for the error message. The code that I sent is supposed to respond to a JavaScript command to remove display:none and open up the space for that message. The height of the box responded to the height of the paragraph text. A clever feature, I thought. It kept the #submissionform shorter unless an error message was triggered. You might want to reconsider that feature before going live.

  13. #38
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Finally, I know you were not crazy about text that became a narrow column beside a fixed image at narrow window widths. I offered some code that would scale the images. The scaling can be handled differently... more easily, I think.

    I mention this because, I don't think the centered text at small widths is especially attractive. IMHO, left aligned or justified would be better. I think we can arrive at a better solultion than center aligning the text by scaling the images down a bit in a fluid fashion. To me, it's worth experimenting.

    "That's all, folks!"

    Cheers

  14. #39
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm going to re-insert the code for that nifty little feature.

    I am interested in finding out more on re-seating the footer content- the mailing list box and the nav links. This would just mean getting rid of #lpfoot? I think they should stay at the bottom of the content, but I don't know what exactly could be done other than just removing #lpfoot and pushing the elements up into #lpcontent.

  15. #40
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    I am interested in finding out more on re-seating the footer content- the mailing list box and the nav links. This would just mean getting rid of #lpfoot? I think they should stay at the bottom of the content, but I don't know what exactly could be done other than just removing #lpfoot and pushing the elements up into #lpcontent.
    You gave me a start! #lpfoot is already within #lpcontent as it should be. Nothing to change about that.

    I was just wondering if the animation is working satisfactorily (like I said, I have not looked at it) and whether or not you wanted to tweak that row which includes the links.

    Guess I'm asking about three things... the animation at all widths, the behavior of the row as the window width narrows, and the behavior of both items at different text sizes (zooms or user prefs).

  16. #41
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Let me take this post to address all the issues.

    First, the centering of the text and everything- I removed that code. Everything except for the images should be always aligned to the left. I kinda like the images with the float removed and centered as the width narrows, but I will entertain any new ideas that you have of scaling the images.

    Secondly, the error message shortening/heightening feature. I put in the styles directly from your upload. The buttons still appear outside the box at the beginning, and the error message border is still there, even though the <p> element is empty initially (no error has been output). When the error is output, the buttons may only move about 20px down. We may have a misunderstanding on this. The JavaScript does not change the display property of the error message box, but I did add that into the script to change it to block display when an error is output. It still does not achieve the desired effect.

    Third, the animation does do well at all widths. The rows adjust nicely, but you said you noticed a glitch. I've seen nothing I'm dissatisfied with on the footer row.

  17. #42
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    (1) The text looks better to me. The top two centered images look OK, the last one seems to waste space, however it is centered like the other two, so it gets a pass.

    (2) This link displays an image of what I see in Firefox. Buttons beneath the form; box for error message visible and text that I added visible; buttons move down as little or as much as is needed to accommodate the error message and its box. No misunderstanding about the JavaScript... you have to add a line of JavaScript to remove display:none or apply display:block, however you do it, at the same time the submiterror text is applied for that part of the feature to work as intended.

    https://www.dropbox.com/s/ynimb5d845...20130705-1.gif

    Please post a screen shot if what you see is different than what I see.

    You'll have to explain/describe what the desired effect is that you are not seeing. I don't know what that is.

    (3) The animation looks good to me. Earlier, you had described a sliding effect for the e-mail error tab, but I see you have implemented a dissolve effect instead. It seems a little slow, but looks great.

    The "glitch" that I observe has to do with the transfer of the items in that row from horizontal to stacked. I'll have to look at it again before I can offer a recommendation.

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

    I believe our misunderstanding is what the effect is supposed to actually do when the error text is sent back. I thought the buttons are supposed to be initially positioned inside the graphic, and then moved down 100px or so to be underneath the graphic when the error text appears. In actuality, what I think you mean is that the buttons are underneath the graphic at all times and just move down about 30px when the error appears. Yes, I see the submit buttons there in my browser as it appears in your screenshot.

    -Ty

  19. #44
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Yes, just like the left two screen shots in post #29. The position of the buttons remains below the #submissionform; however, if an error message is triggered, a space for the error message is opened up within #submissionform, thus pushing the bottom of #submissionform lower along with the buttons beneath it.

    Do you see on your PC the same behavior that is shown in the screenshots?
    and
    Is that satisfactory?


    Aside: I never considered positioning the buttons inside #submissionform initially, then moving them below #submissionform if an error were triggered. That strkes me as an unexpected change in the "look" of the form that might annoy users. It didn't cross my mind.

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

    Yes, I do see the same behavior as post #29. You may check the test page to see for yourself. I believe this is satisfactory and a useful feature.

    Now, I'm wanting to know if you have any other ideas before I start copying this HTML over into my 30 or so already-existing landing pages. I already did that once, and now I'll have to do it again. It is a very time-consuming, tedious task, and I would hate to have to do it all over again if you don't think the site should go live quite yet without a couple of other tweaks.

    In a previous post, you had mentioned an idea of how to scale images more efficiently. The other idea was to abolish #lpfoot and move the mailing list box and nav links up into #lpcontent.

    With the image scaling, I don't think that every image should have a scaling effect, which would change the way it's coded. A lot of the images are very small.

  21. #46
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    Ron,

    Yes, I do see the same behavior as post #29. You may check the test page to see for yourself. I believe this is satisfactory and a useful feature.
    OK, good. Just want to be sure we're on the same page.

    Quote Originally Posted by etidd View Post
    In a previous post, you had mentioned an idea of how to scale images more efficiently.
    It's an idea ahead of its time. Although I still believe that centering the smaller images creates wasted white space, the page is OK as it is. I don't have a better solution, yet; just the belief that one exists. Don't wait for this one.

    Quote Originally Posted by etidd View Post
    With the image scaling, I don't think that every image should have a scaling effect, which would change the way it's coded. A lot of the images are very small.
    Understood and Agreed.

    Quote Originally Posted by etidd View Post
    The other idea was to abolish #lpfoot and move the mailing list box and nav links up into #lpcontent.
    No! Not my idea! You'll still need a container for the "footer" stuff (mailing list form and links), so you may as well leave it named the way it is. There is nothing wrong with "#lpfoot". The ID sounds odd because in your first, non-fluid design #lpcontent and #lpfoot were peer-level containers. In this new fluid design, #lpfoot is nested within #lpcontent as it should be now. There is no need to change the idname of #lpfoot unless you just don't like the idname! Again: #lpfoot is already inside #lpcontent. There is nothing to move!

    Quote Originally Posted by etidd View Post
    Now, I'm wanting to know if you have any other ideas before I start copying this HTML over into my 30 or so already-existing landing pages. I already did that once, and now I'll have to do it again. It is a very time-consuming, tedious task, and I would hate to have to do it all over again if you don't think the site should go live quite yet without a couple of other tweaks.
    Understood. I can relate to "time-consuming" and "tedious". My pet peeves are rework due to: poor planning (or poor descriptions of wishes) or rushing to get something out the door too soon. ... time consuming.

    I don't see anything significantly wrong with the current design, except an accessibility issue with the stuff in the footer. When text-only is zoomed significantly larger, the layout "breaks".

    In the interest of expediency (bread and butter) you can certainly publish the site as it is and the majority of users will be satisfied. Those who are visually impaired and zoom text-only larger may have a problem in the footer, though. If you publish now, I would recommend continuing to improve the footer boxes and being willing to publish "version 2" after the footer is redesigned to be more accessible/zoomable.

    https://www.dropbox.com/s/fuwg0pg12y...omedfooter.gif
    zoomedfooter.gif

  22. #47
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Tyler, take a look at this shrinking image treatment and see if it appeals to you.
    The smallest images are not affected at all.

    Delete this media query entirely.
    Code:
    @media screen and (max-width:650px) {
    	.floatRight img, .floatLeft img {
    		float:none;
    		margin:0 auto;
    		max-width:90%;
    	}
    }
    Change the image related css to look like this.
    Code:
    img {
        display:block;
    }
    .floatRight,
    .floatLeft {
        overflow:hidden;
        margin:8px 0;       /* vertical margin between content sections */
    }
    .floatRight img,
    .floatLeft img {
        border:3px inset #000;
        width:auto;
        max-width:55%;    /* tweak as desired */
        height:auto;
    }
    .floatRight img {
        float:right;
        margin-left:.5em;
    }
    .floatLeft img {
        float:left;
        margin-right:.5em;
    }
    It's just a though.

  23. #48
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Lots of Ronpat's thoughts are good thoughts!

  24. #49
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    I haven't seen the shrinking image code appear in your test page and you didn't comment about it. What is your verdict?

    Is the code (HTML and CSS) in the test page up to date? The "call2action" box code is ready. Will have to send you the images.

  25. #50
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It is updated now.

    I will look forward to analyzing the fluid call-to-action code to see what I can learn.


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
  •