SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help:- How to go a specific portion of page after clicking Submit button?

    I would greatly appreciate your help on this topic. I have a page on wordpress using a php plugin. Urgently need to ensure that the user is directed ti go to a specific point on the page instead of going to the top or bottom andhave to scroll back or forward to figure out.

    Thank you.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You can identify a point in the page for links to go to by putting an ID on that element. For example, if you wanted people to be able to jump to a sub-heading saying "Thanks" on a page called "feedback.htm", you would have something like
    HTML Code:
    <h2 id="thanks">Thank you for your feedback!</h2>
    and then to link to that particular point, you would reference feedback.htm#thanks.

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clarification

    Quote Originally Posted by Stevie D View Post
    You can identify a point in the page for links to go to by putting an ID on that element. For example, if you wanted people to be able to jump to a sub-heading saying "Thanks" on a page called "feedback.htm", you would have something like
    HTML Code:
    <h2 id="thanks">Thank you for your feedback!</h2>
    and then to link to that particular point, you would reference feedback.htm#thanks.

    I am using a php plugin on wordpress. I tried to include this in the form code but it din't seem to work. I am a total beginner to this. If you could please give me a bit of detailed guidance, I would sincerely appreciate it.

    Apologies, if this sounds really stupid.

  4. #4
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This one is more complicated. First, I needed a page where I could show a table with both a locked top row and locked left column. After two years of searching and testing, I found a great script by Richard Cornford, which Ive posted at <http://www.oasections.com/articles/scrollabletable.html>. However, the table acts up if you try to link via an anchor tag to a specific row in the table.

    At the top of each page in the site <http://www.oasections.com/>, I have a search form and button, where the user enters a number (e.g., 1-99) that adds a numbered anchor to the URL of the resulting page: <http://www.oasections.com/oasectionindex.html#99>
    I've tried both <a name="99"> and <div id=99></div> in various parts of the table, i.e., the (locked) row header as well as the 1st cell in that (movable) row. What happens is, when you link to the row 99, the rest of the row has moved up by over half a row height, so it no longer lines up. Reload the page without the anchor, and it lines up correctly. I need this for all 90+ lines on the page (as well as other pages).

    I'm debating about trying to use window.scroll to specific pixel coordinates or a specific number of lines, but haven't gotten that far yet.... I just can't find any good alternatives to an anchor tag. I've even tried a paid expert's code website, but no dice.

    If you do a search for 99 (control+F), it will scroll into view fine. Which is why I've tried finding a script that would run a text search after the page loads, but I've put that on the back burner as well.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by roboatrader View Post
    I've tried both <a name="99"> and <div id=99></div>
    The problem is right there – IDs are not allowed to begin with digits (and I don't think names are either, although I'm not certain OTTOMH), only letters, so you will need to put a letter in front of the '99'.

  6. #6
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, okay a good start! It's reacting more consistently now. I had a hallelujah moment last night when it placed the div in the 2nd cell of that row (the movable portion):
    <tr>
    <th class="lodgename">99 Tonkawa</th>
    <td class="section"><div id="99"><!--2013--></div></td>

    the th is the locked portion, the td is the movable portion of that row.

    It worked fine, but only the very first time it loaded

    Now, i've added an l, and im trying:

    <tr>
    <th class="lodgename"><div id="l99">99 Tonkawa</th>
    <td class="section"><!--2013--></td>

    vs

    <tr>
    <th class="lodgename">99 Tonkawa</th>
    <td class="section"><div id="l99"><!--2013--></td>

    Now, it either scrolls the to that right row before the table finishes loading, which it then "redraws" to the top of the table. OR it will do the same behavior as before.

    Do I close the tag? <div id="l99"></div> or <div id="l99"><!--2013--></div> ? That changes behavior too. Ill have to list more specifics based on more tests.

    Thanks,

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Similar Problem

    All, I have a similar problem and using:

    Code:
        <INPUT TYPE="submit" NAME="submit" VALUE="Submit These Changes"  
        onclick=window.location = "#prof_top"; window.scrollTo(0,0)>
    Both "onclick' javascript codes work individually/seperately in my direct page at:

    Code:
    localhost//data/mypage.php
    but when rendering through the WordPress at:

    Code:
    localhost//mypage.php
    Neither work.

    I'm attempting to force the submit action to goto the top of the page as the update message appears there after submission of the page/values to the mysql DB.

    Not understanding why these work one place and not the other.

    Have created dups of same file for testing, but will eliminate the dups with symlink once I understand and can clear this error.

    All help appreciated!

    Cheers!
    OMR


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
  •