Cannot go to anchored link 1

[dmacster]

Here's a rough link of listings - click a listing, see the anchored image - except it doesn't.

http://capegazette.powweb.com/listings.php

Here's my code for the listings page

  <?php 
  
   //CREATE THE SQL QUERY TO PULL ALL VISIBLE LISTINGS
   
   $sql = "select * from advertisers a left join category c USING(category_id) ";
   $sql .= "WHERE a.visible = 1 order by c.category_name asc, a.advertiser_name asc ";

   $result = mysql_query($sql);
   
   $currentCategory = "";
   
   while($row = mysql_fetch_array($result)){
   
      //PRINT OUT THE CATEGORY NAME EVERY TIME IT CHANGES
      if($currentCategory == "" || $currentCategory != $row['category_id']){
         echo "<div class='categoryName' style='font-weight:bold;margin-top:8px;'>";
         echo "<a href='category.php?cid=".$row['category_id']."'>" .stripslashes($row['category_name'])."</a></div>";
         $currentCategory = $row['category_id'];
      }
      
      //PRINT OUT THE ADVERTISER
      echo "<div class='advertiserName'>";
      echo "<a href='category.php?cid=".$row['category_id']."#advertiser_".$row['advertiser_id']."'>";
      echo stripslashes($row['advertiser_name']);
      echo "</a></div>";
   }
   
?>

And here's the category page stuff

  <?php 
   
   //make sure there is a valid category id passed
   $found = false;
   $category = array();
   
   $catSql = "select * from category where category_id = '".$_GET['cid']."'";
   $result = mysql_query($catSql);
   if(mysql_num_rows($result) > 0){
      $found = true;
      $category = mysql_fetch_array($result);
   }
   

   if($found){
      
      $sql = "select * from advertisers a left join category c using(category_id) WHERE ";
      $sql .= " c.category_id = '".$_GET['cid'] . "' and a.visible = 1 order by a.advertiser_name asc ";
   
      $result = @mysql_query($sql);
      //PRINT OUT THE CATEGORY TITLE
      echo "<h1>".stripslashes($category['category_name'])."</h1>";
      
      //LOOP THROUGH THE RESULT SET AND PRINT OUT THE IMAGES
      while($row = mysql_fetch_array($result)){
         
         //PUT EACH ADVERTISER IN A SEPARATE DIV THAT CAN BE USED FOR STYLING
         echo "<div>";
         
         //PRINT OUT THE ANCHOR FOR THE RECORD
         echo "<a name='product_".$row['product_id']."' />\n";
         
         //PRINT OUT THE FIRST IMAGE IF IT EXISTS
         if(trim($row['img1']) != "" && file_exists($row['img1']))
            echo "<img src='".$row['img1']."' alt=\"".stripslashes($row['advertiser_name'])."\"/>";
			echo "<br>";
			echo "<a href='listings.php'>Back to Listings</a>";
			echo "<br>";
         
         //A SECOND IMAGE EXISTS.  SPIT OUT A BREAK AND DISPLAY THE IMAGE   
         if(trim($row['img2']) != "" && file_exists($row['img2'])){
            echo "<br>";
            echo "<img src='".$row['img2']."' alt=\"".stripslashes($row['advertiser_name'])."\"/>";  
			echo "<br>";
         }   
         
         echo "</div>"; 
      }
   }
   else{
      //put an error message here
      ?>
         you screwed up - please try again
      <?
   }
?>

I'd like to get this part going so I can get working on the styling, but this is baffling me.

What do I need to change?

Thanks,
Donna

 

[Vragabond]

You're not outputting the ids that that the link relates to. When you try to link to a part of the page using #anchor notation, this anchor must exist in the actual code in the form of an id on an element. In your code, none of the element ids match the one that is referred to in the address, so the page stays at the top. Change the image code in the first if sentence to read:

echo '<img src="' . $row['img1'] . '" alt="' . stripslashes($row['advertiser_name']) . '" [b][blue]id="' . $row['advertiser_name'] . '"[/blue][/b] />';

And it should work. I changed the quoting in this line to better keep track of it myself (changing between single quote and double quote notation within one tag is a bit confusing).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[dmacster]

Hmm - I kind of understand, but that didn't work. I also tried changing the 'advertiser_name' at the end of yours to advertiser_id, but no love.

Thanks,
Donna

 

[Vragabond]

Sorry, forgot to change all the relevant code:

echo '<img src="' . $row['img1'] . '" alt="' . stripslashes($row['advertiser_name']) . '" id="advertiser_' . $row['advertiser_id'] . '" />';

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[dmacster]

Still doesn't seem to get it for me. I am using this for the category file, right?

Thanks,
Donna

 

[Vragabond]

It does work on page reload. That is because by then, the images are cached.

Let's look at the issue.

Your HTML on the second page is very simple and the browser downloads that immediately. Then it looks for the img tags and replaces those by requesting the images from server. Since the entire HTML file is loaded before the images begin loading, all the anchors (id elements with the names you refer to in the address bar) are actually stacked at the top of the page. So the browser is correct in scrolling to the top of the page.

By the time images load, the ids are in different locations, but by then the command to jump to the anchor has already been completed. In the second scenario (on refresh), images are loaded from cache and thus appear sooner and the page manages to jump to the appropriate space.

The best way to avoid that (and a good practice in any case) is to add width and height attributes to all your images. These width and height attributes will immediately tell the img tag how much space it needs to reserve for the image itself and the anchor will scroll to the correct place.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[dmacster]

Okay - I see it working with refresh.

Not to be silly, but how can I set the image and height in the html when the img path comes from the db?

Thanks,
Donna

 

[Vragabond]

You will need to store the dimensions of the image in the database as well. Alternatively, you could get image size via the getimagesize() function, but you would need to check how quick that function is. Descriptions and examples of use of this function are in the manual.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[dmacster]

Thanks, vragabond. I'll look into it.

Donna

 

[dmacster]

Vragabond - thanks again for clarifying the problem. I did add fields to my db to hold the width and height. Below is the working code, in hopes it helps another.

<?php require_once("includes/connection.php"); ?>

  <?php 
   
   //make sure there is a valid category id passed
   $found = false;
   $category = array();
   
   $catSql = "select * from category where category_id = '".$_GET['cid']."'";
   $result = mysql_query($catSql);
   if(mysql_num_rows($result) > 0){
      $found = true;
      $category = mysql_fetch_array($result);
   }
   

   if($found){
      
      $sql = "select * from advertisers a left join category c using(category_id) WHERE ";
      $sql .= " c.category_id = '".$_GET['cid'] . "' and a.visible = 1 order by a.advertiser_name asc ";
   
      $result = @mysql_query($sql);
      //PRINT OUT THE CATEGORY TITLE
      echo "<h1>".stripslashes($category['category_name'])."</h1>";
      
      //LOOP THROUGH THE RESULT SET AND PRINT OUT THE IMAGES
      while($row = mysql_fetch_array($result)){
         
         //PUT EACH ADVERTISER IN A SEPARATE DIV THAT CAN BE USED FOR STYLING
         echo "<div>";
         
         //PRINT OUT THE ANCHOR FOR THE RECORD
         echo "<a name='advertiser_".$row['advertiser_id']."' />\n";
         
         //PRINT OUT THE FIRST IMAGE IF IT EXISTS
         if(trim($row['img1']) != "" && file_exists($row['img1']))
            echo '<img src="' . $row['img1'] . '" width="' . $row['img1width']. '" height="' .$row['img1height'] . '" alt="' . stripslashes($row['advertiser_name']) . '" id="advertiser_' . $row['advertiser_id'] . '" />';
			echo "<br>";
			echo "<a href='listings.php'>Back to Listings</a>";
			echo "<br>";
         
         //A SECOND IMAGE EXISTS.  SPIT OUT A BREAK AND DISPLAY THE IMAGE   
         if(trim($row['img2']) != "" && file_exists($row['img2'])){
            echo "<br>";
            echo '<img src="' . $row['img2'] . '" width="' . $row['img2width']. '" height="' .$row['img2height'] . '" alt="' . stripslashes($row['advertiser_name']) . '" id="advertiser_' . $row['advertiser_id'] . '" />';
			echo "<br>";
         }   
         
         echo "</div>"; 
      }
   }
   else{
      //put an error message here
      ?>
         you screwed up - please try again
      <?
   }
?>

Donna

 

[jet042]

@dmacster

Thanks for posting the working code for anyone else who may search for it. That is exactly how this forum is supposed to work.

 

[dmacster]

I try. This is the evening work - daytime is all print design. But I figure if someone else sees it spelled out, and trust me, using the same field names as the questioner helps us newbies follow along, maybe it will help. I search all I can before posting, but sometimes this old brain just ain't gettin it.

Donna