Linking or scrolling to Specific scetion in PHP when using dynamic div id

Question

In HTML we can create A single page site with smooth scrolling, and highlighted navigation links depending on which section is currently being viewed.To do the above in HTMl we link to this point (e.g. from the top of the page), we link using the hash character (#) and the name of the destination anchor: Go To Contact Form

The same I am Trying to Implement in PHp but I am facing Issues.

    <div class="wrap">
        <div class="main">
             <div class="open-positions">
                <?php
        function readCSV($fileName) {
          $rows = array();
          $rows = file($fileName);
          return $rows;
    }   

    ?>

      <span><b>Available Positions: </b></span>
      <ul>
     <?php
     $rows=readCSV('joinUs.csv');
      $max = sizeof($rows);
              for ($x=1; $x<$max; $x++) {
          echo "<li> <a href='#".$rows[$x]."'>$rows[$x] |</a> </li>";

    } 

     ?>
      </ul>


<div class="position" id="<?php print_r(readCSV('joinUs.csv')[1]);?>">
 Job Descreption here

</div>

The Anchor Id seen while inspecting is Sr. Product Engineer and $rows[$x] is Sr. Product Engineer and both are same still Its not scrolling(from top of site on clicking the Click).

When I am hardcoding to Sr. Product Engineer it Its Working. It not working only in case of dynamic div id.While Inspecting in browser I am able to see correct div ID.

How to fix the above issue. please let me know if any other clarification is required.

Attached is the ScreenShot

enter image description here

I was Requested in comment to post html source code also:

  <span><b>Available Positions: </b></span>
  <ul>
 <li> <a href='#Sr. Product Engineer
'>Sr. Product Engineer
 |</a> </li><li> <a href='#Quality Assurance Engineer
'>Quality Assurance Engineer
 |</a> </li><li> <a href='#Frontend Javascript Engineer
'>Frontend Javascript Engineer
 |</a> </li><li> <a href='#Business Development Manager
'>Business Development Manager
 |</a> </li>  </ul>



</div>
<div class="position" id="Sr. Product Engineer
">
  <h2 class="position-title">Sr. Product Engineer
</h2>

  <div class="section">
    <p>
      <span class="section-title"><b>This is what we have in mind for you, the Role:</b></span>
      <span class="section-description">
        You will be part of the tech team and will be working closely with founders
        and design team on the core product. You will be working to build new features,
        fix bugs and refactor things as necessary.
      </span>
    </p>

    <p>
    <ul class="section-list">
      <li>Responsible for the tech architecture</li>
      <li>Take ownership of things</li>
      <li>Write simple/readable code which is testable, extendable, robust and highly scalable</li>
      <li>Help getting new joinees upto speed with the product</li>
      <li>Suggest new features, priorities tasks and see to their completion</li>
    </ul>
    </p>
  </div>

Please help as in above source code you can see PHP generates the same ID in html.When I am hardcoding the id It working but without hardcoding its not working.

first of all try using a valid id (that doesn't contain spaces and most punctuation) http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Popnoodles, Jun 04 '14 at 19:09
I got to know for dynamic div id the above approach does not work.What you want me to edit in the question? — Rahul Jain, Jun 04 '14 at 19:13
PHP generates HTML. So you'll have to look what's wrong in the HTML. Use a valid ID and post the HTML. — mb21, Jun 04 '14 at 19:40

mb21 · Answer 1 · 2014-06-04T20:20:13.680

0

Use valid IDs without dots or spaces or any other special characters.

<a href='#SrProductEngineer'>Sr. Product Engineer</a>
<h3 id="SrProductEngineer">Sr. Product Engineer</h3>

To generate that dynamically with PHP:

<?php
$str = readCSV('joinUs.csv')[1];
$id = preg_replace('/[^A-Za-z0-9]/', '', $str); // Remove all characters except A-Z, a-z, 0-9
echo '<a href="#' . $id . '">' . $str . '</a>';
echo '<h3 id="' . $id . '">' . $str . '</h3>';
?>

edited Jun 04 '14 at 20:20

answered Jun 04 '14 at 19:57

mb21

34,845
8
116
142

I understand Your Point But I have a requirement that name will have . and In Page also I have to display as the same.and I am use name as id.So I cant handle this kind of case.is there any alternative solution. – Rahul Jain Jun 04 '14 at 20:13
Updated my answer. But IDs are not allowed to have special characters. That's the rule. Like all web addresses have to start with `http://`. That's the rule as well. – mb21 Jun 04 '14 at 20:21

score 0 · Answer 2 · answered Jun 04 '14 at 20:32

0

Inside the loop, just name the id's as

position_0, position_1, position_2

and then anchor them using

#position_0, #position_1, #position_2

answered Jun 04 '14 at 20:32

user2727195

7,122
17
70
118

Linking or scrolling to Specific scetion in PHP when using dynamic div id

2 Answers2