Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post

    HTML Form stops window.onScroll?

    I have a bar at the bottom of the window that sinks down once the user scrolls.
    You can see it here: http://www.sfcrc.com/directions.html

    For some reason, on pages with a form, this does not work:
    http://www.sfcrc.com/patientemail.html

    Here is the JS used to implement the action:
    Code:
    window.onscroll = function() {
    bottomFloat(false);
    sideShow(false,window.innerWidth,document.getElementById("sidemenu").offsetWidth);
    };
    Code:
    function bottomFloat(show) {
        if (show){
            document.getElementById('bottomfloat').style.bottom="0px";
        } else {
            document.getElementById('bottomfloat').style.bottom="-20px";
        }
    }
    The first bit of code gets called in nagging-sidemenu.js, the second bit of code is in bottomfloat.js. This doesn't seem to be an issue for any other page, so I can only assume it is the forms that is preventing window.onScroll to be triggered.

    Is that the issue? Then how can I fix this?

    Thanks for your help guys!

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Your non-working page doesn't install "nagging-sidemenu.js"

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ummmm...there is a very simple reason.

    NOWHERE in that page (http://www.sfcrc.com/patientemail.html), either in the main HTML file or in any of the ".js" files, can I find:
    Code:
    window.onscroll = function() { ... }
    And that's because, on that page, you DO NOT INCLUDE the file "nagging-sidemenu.js" !!!

    I assume that's because, on that page, you don't need a side menu.
    But this page:
    http://www.sfcrc.com/forms.html
    also doesn't have or need a side menu and yet it includes "nagging-slidemenu.js", presumably with blank content.

    So just do the same thing.

    **************

    I hope you won't take this wrong, but I find the "feature" to be more of an annoyance than anything. If, after scrolling down on the page, I *THEN* decide I do want to contact you, my only choice for finding the contact info is to click on one of the navigation links again. How irritating, all for the sake of saving 20 pixels of real estate at the bottom of the screen.

    ********
    EDIT: See, now, if I wrote short answers such as Logic Ali just did, I could be the first to answer, too. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    iksfcrc (02-23-2013)

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 633 Times in 623 Posts
    The <form> tag is missing as well so that form isn't going to work either.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oops...yes, he does.

    <form action="patientemail.php" method="post">

    On line 85.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Quote Originally Posted by Old Pedant View Post
    Oops...yes, he does.

    <form action="patientemail.php" method="post">

    On line 85.
    I viewed the page source and did a find on 'form' and couldn't locate it - I wonder why? The HTML validator gives lots of errors about <tr> and <td> tags misplaced as well.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Logic Ali View Post
    Your non-working page doesn't install "nagging-sidemenu.js"
    Quote Originally Posted by Old Pedant View Post
    Ummmm...there is a very simple reason.

    NOWHERE in that page (http://www.sfcrc.com/patientemail.html), either in the main HTML file or in any of the ".js" files, can I find:
    Code:
    window.onscroll = function() { ... }
    And that's because, on that page, you DO NOT INCLUDE the file "nagging-sidemenu.js" !!!
    *facepalm* DOH!

    Wow, I sure feel like a dummy. My eyes totally glossed over that. I must have thought I was viewing the source for patientemail.html but was probably viewing something else. Thanks for catching that silly mistake. I'm sorry I took your guys' time up with something to trivial.

    Quote Originally Posted by Old Pedant View Post
    I assume that's because, on that page, you don't need a side menu.
    But this page:
    http://www.sfcrc.com/forms.html
    also doesn't have or need a side menu and yet it includes "nagging-slidemenu.js", presumably with blank content.

    So just do the same thing.

    **************

    I hope you won't take this wrong, but I find the "feature" to be more of an annoyance than anything. If, after scrolling down on the page, I *THEN* decide I do want to contact you, my only choice for finding the contact info is to click on one of the navigation links again. How irritating, all for the sake of saving 20 pixels of real estate at the bottom of the screen.

    ********
    EDIT: See, now, if I wrote short answers such as Logic Ali just did, I could be the first to answer, too. <grin/>
    OldPedant, yes, I will simply add in nagging-sidemenu.js. I know my code isn't the cleanest, but i'm primarily in a "let's just get it working" mode. Although I would really prefer to do it cleaner, that's just how the cookie crumbles with this project.

    What I'd really like to do, is have the pages generated on the fly (pulling the menu code from one file, the content from another, then the bottom code (bottomFloat) from another file, then maybe using PHP, generate one page from that. That way, every time I make a change to the menu structure, I don't need to go an edit every single page, and instead, can edit just one file. But that's a different story.

    Any suggestions there?

    And, no, I won't take your suggestions the wrong way. I'm doing a lot this for my own personal growth, so I appreciate all the comments.

    So you suggest not hiding it? I originally had it up at all times, but my boss and some co-workers suggested that it gets in the way, so I made it hide when scrolling, because I figure you are only scrolling if you are near the bottom and actually reading the content. If you want to see the contact info, you can mouseover the banner, and it will pop back up. But I suppose that's not clear to the user. Any ideas on how to improve this?

    First answers are nice, but I learn more from your responses, so thank you.

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    The <form> tag is missing as well so that form isn't going to work either.
    Quote Originally Posted by Old Pedant View Post
    Oops...yes, he does.

    <form action="patientemail.php" method="post">

    On line 85.
    Quote Originally Posted by felgall View Post
    I viewed the page source and did a find on 'form' and couldn't locate it - I wonder why? The HTML validator gives lots of errors about <tr> and <td> tags misplaced as well.
    The form works great. I have tested it several times. You're welcome to test it too! It will send you a confirmation email.

    Your search should have found 'form' all over the place in that source code. Not just the tag, but 'form' is found in the form of text (i.e. in'form'ation) and so forth.

    But I will take a look at that page in HTML validator and see what kinds of errors arise, it certainly couldn't hurt. Thanks for checking!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, I don't use PHP, but I've done similar things in ASP.

    If you promise not to laugh at the badly outdated JavaScript (and to some extent the HTML), look here:
    http://www.ArtsOfSnohomish.org

    That's a site I originally built about 6 years ago and that has morphed some over the year but still has a lot of my very old style HTML and JS code in it.

    But the important point is, if you do a VIEW==>>SOURCE on any of the pages you will find they are all identical down to this point:
    Code:
    		<!-- CONTENT GOES HERE 
                 followed by include of MasterBottom.asp 
                 unless end of this div is handled on the page
              -->
    (and then the code at the bottom of each page is identical, too).

    So each one of those pages simply consists of (in PHP coding terms):
    Code:
    <?php 
    include "masterTop.php"
    ?>
    ... html and php content as appropriate ...
    <?php 
    include "masterBottom.php"
    ?>
    Could it/should it be more sophisticated? Could I/should I spend some time to update it? Yes, but it's all pro bono I work I do for the non-profit gallery (which gets maybe 200 hits a month), so it's just not high priority.

    But my point to you is simple: Use a handful of "masterXXX.php" files and juse include them in each of your pages.

    Oh, by the by: My "masterTop.asp" file also actually includes three other files. One that sets the colors and other styles for the month (it changes roughly once a month), one for the navigation at the left, one for the stuff at the top.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Old Pedant,

    Thanks for your advice.

    I took the time this morning to switch everything to php. I'm so much happier now that I only have to edit one file every time I edit my menu structure. I'm also less likely to miss a small mistake in my menu structure, since I only have to catch it once to fix it.

    Did you have any input on the bottom banner, given the additional information I provided?

    Or are you still of the mindset that it's annoying and not as useful as I had hoped?

    Thanks again for all your help!

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I still think it's annoying to have it disappear and then have to go search for the phone #, etc. by going to another page or refreshing the current page.

    If you want to use it, I'd invert it: Put the phone numbers on the top line and the essentially useless "Have questions? Call us today!" on the bottom line. If that useless line scrolls away, it's no loss.

    Another possibility: Kill it completely if they scroll down, but if they scroll all the way back up, then un-hide it.

    But really, as small as it is, I don't see the reason to hide any of it. I might feel differently if it were 5 or 10 lines long.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    By the by, as a minor point: You might want to use URL rewriting so that you hide the ".php" extension on the pages.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Old Pedant,

    If you want to see the information, all you need to do is mouse over the banner. Does this not happen for you? If that is the case, then perhaps there is something wrong with my JS, or perhaps you have JS turned off? (That wouldn't seem to make sense though, since you are able to see the banner being lowered)

    If it's not a js issue, then I suppose I am not making it clear enough that you can mouse over the banner to see the contact information.

    Your solution of inverting the information is probably the simplest, and least confusing solution --> simply remove the "Have questions? Call us today!".

    That solution allows for the information to be accessible at all times, and doesn't make things any more confusing. If I do things that way, then there's no hiding necessary either.

    I appreciate your input, and I will look into url rewriting. I'm not familiar with it, but I guess I might have to become familiar with it. By hiding the .php, what would the result be?

    Like this?
    Code:
    http://www.sfcrc.com/index
    Or this?
    Code:
    http://www.sfcrc.com/
    I understand that there is a lot of variation on how I can implement it. But I guess my question is: URL rewriting is the solution to what problem with .php extension? Readability? SEO? Security?
    Last edited by iksfcrc; 02-26-2013 at 01:24 AM.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, I see it by mousing over it.

    But to how many naive users will that be obvious? If it's over 3% I'll be surprised.

    Maybe if you changed it to say "Look here for questions"? That might do it.

    **********

    Your front page, index.php, should already come up by default.

    But for all the other pages it would just hide the ".php" (but still allow it).

    Both Windows (IIS 7, at least) and Linux support pretty easy URL rewrites of this nature.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    I see, yeah that's what I thought. I'll likely just remove the top line and leave only the contact info there. Sometimes simpler is better, yes?

    I'll look into the url rewriting. Again, thanks for all the help.


  •  

    Posting Permissions

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