Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 323
  • Last Modified:

Making all Div tag a link

Hi all,

I have a div tag that I am creating from the DB and rather than making some of the text a link (as it is now) I want to make the entire div tag a link so that if a user clicks anywhere on it , it takes them to the linked page. Here is what I have now:

echo "<div class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating' data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


Thanks so much!

D
0
TLN_CANADA
Asked:
TLN_CANADA
  • 11
  • 11
  • 2
  • +1
1 Solution
 
nickinthoozCommented:
<a style="display:block" href="http://www.google.com">
  <div class="xyz">My div contents</div>
</a>

Open in new window


You need to add display:block style to the div and link it as you would any other link.

echo "<a style='display:block' href='http:www.google.com'><div class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating' data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div></a>\n\n";

Open in new window

0
 
Meir RivkinFull stack Software EngineerCommented:
Just add onclick in the div and in the style change cursor to pointer

<div onclick="Your-link" class=...
0
 
TLN_CANADAAuthor Commented:
Thanks Nick,

Here is what I put on the page:

echo "<a style='display:block' href='http://www.clear.com/showenq.php?id=$rec_id'><div class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating' data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div></a>\n\n";

Open in new window


but this does not allow the entire div to be a link and now also displays lots of blank divs on the page which link to different records.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Meir RivkinFull stack Software EngineerCommented:
With the style:
<div onclick="Your-link" style="cursor: hand"
0
 
TLN_CANADAAuthor Commented:
Thanks sedgwick,

Here is what I have now but its giving the error on the first line:

		echo "<div onclick="http://www.clear.com/showenq.php?id=$rec_id" style="cursor: hand" class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating' data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' >".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";
	}
	echo '</div>';	

Open in new window


Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/clear555/public_html/allenq_isotope2.php on line 141
0
 
Scott Fell, EE MVEDeveloperCommented:
There are several choices where one includes using javascript.  But no need for that.

One option is to make the <a> tag into a block as I have and no need for a div.  The other option that is only going to be valid in html5 is surrounding the div by an a link.  The example by @nicknthooz is doing both of these. But you only really need to do one.  However, if your page does not validate for html5, then the <a> goes inside the block.

http://jsbin.com/uqojoy/3/edit

<style>
div.redbox {
  background-color:red;
  color:white;
  height:100px;
  width:100px;
}

a.redlink  {
  background-color:red;
  color:white;
  height:100px;
  width:100px;
  display:block;
}
  </style>
  <a href="somepage.html"><div class="redbox">this is a link</div></a>
  <hr>
  <a href="somepage.html" class="redlink">this is a link</a>

Open in new window

0
 
TLN_CANADAAuthor Commented:
Hi padas,

Here is the css for each div tag element which is created from the php echo

.isotope-item {
  width: 150px;
  height: 150px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: blue;
  color: white;
  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}

Open in new window


Could I put the PHP in this?

Thanks,

D
0
 
nickinthoozCommented:
no, the php has to go in the page.  To get rid of that error, change all the double quotes to a single quote in the onclick and style tags.


      
	echo "<div onclick='http://www.clear.com/showenq.php?id=$rec_id' style='cursor: hand' class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating' data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' >".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";
	}
	echo '</div>';

Open in new window

0
 
TLN_CANADAAuthor Commented:
Thanks nickinthooz,

This shows as a link when I scroll over, but when I click on the div tags nothing happens.
0
 
Scott Fell, EE MVEDeveloperCommented:
The php is running before the page loads.   The server processes the page, converts what it needs to text/html then writes the data to the browser.  So we are really concerned with your rendered html more then the php except for cases like managing quotes as  nickinthooz points out.

I just don't see the need for javascript though.  

if you are using just the <a> tag to act as a div, just use your php to render <a class=".isotope-item " href="somepage.html">this is my link</a>.  Then your css would just need  to change

.isotope-item {

to

a.isotope-item {

and add
display:block;
0
 
TLN_CANADAAuthor Commented:
Hi padas,

Here is what I have on the page now

		echo "<a class='isotope-item ".$c." ".$lc."' href='http://www.clear.com/showenq.php?id=$rec_id' data-id='$id' data-rating='$rating' data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' >".$rec_title."</a><br>Rating: $rating</h3>
			  </a>\n\n";

Open in new window


and in the css file

.isotope-item {
  width: 150px;
  height: 150px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: blue;
  color: white;
  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}

a.isotope-item {
display:block;
}

Open in new window


There are extra elements on the page and extra bacground colours being displayed now also.
0
 
nickinthoozCommented:
with your onclick, do open.window(), look at the fiddle example I did below and change google to your path

http://jsfiddle.net/eZhAH/10/

<div style="cursor: hand; cursor: pointer;width:200px;border:dashed;" ONCLICK="window.open('http:www.google.com','_self')">link</a> 

Open in new window

0
 
TLN_CANADAAuthor Commented:
I will leave out the PHP passing part for now to see if we can get it to work without it.

Here is what I have Nick

echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' onclick='window.open("http://www.google.com")'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


it gives the error:

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';'
0
 
nickinthoozCommented:
everywhere you want a double quotation to show in the line needs to be escaped with a \

so for this:
ONCLICK="window.open('http://www.google.com','_self')"

Open in new window

you would need:
ONCLICK=\"window.open('http://www.google.com','_self')\"

Open in new window

0
 
nickinthoozCommented:
since your using php you can use this to get around all the crazy characters

$something='<div style="cursor: hand; cursor: pointer;width:200px;border:dashed;" ONCLICK="window.open('http://www.google.com','_self')"></div>';

$something=htmlspecialchars($something);

Open in new window

0
 
TLN_CANADAAuthor Commented:
Thanks Nick,

How would I integrate the special characters issue into the code I already have as it's echoing a loop?

Here's the full loop, as I mentioned I just want the link to apply to the whole div rather than to just the category description text as it currently is:

while ( $row = mysql_fetch_array( $query ) ) 
	{
		// Getting the values of the selected records
		
		$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
		$rec_id            =   $row["gen_enq_id"];          // The record's ID
		$rec_category_name =   Category($rec_category_id);  // The record's category name
		$rec_title         =   $row["gen_enq_desc"];        // The record's title
		$rec_timestamp     =   $row["gen_enq_timestamp"];   // The record's timestamp
                $rec_epoch         =   strtotime($row["gen_enq_timestamp"]);   
                $rec_type          =   $row["gen_enq_type"];
                $rating            =   $row["gen_enq_rating"];    
                $id = $row['gen_enq_id'];
		if($x%2 == 0) {
		  $c = 'category';
		} else {
		  $c = 'element';
		}
		$lc = "category-".$rec_category_id;
		$x++;
		// =**= Displaying the fetched values on the page =**= \\
		echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' onclick='window.open("http://www.google.com")'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";
	}

Open in new window

0
 
nickinthoozCommented:
take this part
echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' onclick='window.open("http://www.google.com")'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


and anywhere you want quotes to display in the string you put a \ before the quote, for example, if you write:
echo "this is how to "escape"";

Open in new window

it will throw errors
However, if you write it like this:
echo "this is how to \"escape\"";

Open in new window


it will echo:

this is how we "escape"
0
 
nickinthoozCommented:
try this:

echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' onclick='window.open(\"http://www.google.com\")'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


if all you added was
 onclick='window.open("http://www.google.com")'>

Open in new window

then it should work
0
 
TLN_CANADAAuthor Commented:
Thanks, it works now with the google link. Sorry, I still don't quite understand how to put back in the PHP link correctly though in its place.

Here is what I have now:

		echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' onclick='window.open(\"http://www.clear.com/showenq.php?id=$rec_id'")'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


but it gives the error:

Parse error: syntax error, unexpected ')', expecting ',' or ';'
0
 
nickinthoozCommented:
see if this will work:

echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' onclick=\"window.open('http://www.clear.com/showenq.php?id=$rec_id')\">
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window

0
 
TLN_CANADAAuthor Commented:
Thank you! This works. One small thing, doing it this way, the cursor does not change to a hand when I scroll over the objects. Is there any way to alter this?
0
 
nickinthoozCommented:
echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' style='cursor: hand; cursor: pointer;' onclick='window.open('http://www.clear.com/showenq.php?id=$rec_id')'>
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


adds the hand to it.
0
 
nickinthoozCommented:
sorry, used the wrong link, try this one:
echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' style='cursor: hand; cursor: pointer;' onclick=\"window.open('http://www.clear.com/showenq.php?id=$rec_id')\">
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


adds the hand with the working link, you should be all set.
0
 
TLN_CANADAAuthor Commented:
Thanks Nick. It does show a hand now but this way when I click nothing happens.
0
 
TLN_CANADAAuthor Commented:
That's it! Thank you very much for your fast efficient help.
0
 
nickinthoozCommented:
echo "<div  class='isotope-item ".$c." ".$lc."' data-id='$id' data-rating='$rating'  data-symbol='".$rec_id."' data-epoch='".$rec_epoch."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."' data-type='".$rec_type."' style=\"cursor: hand; cursor: pointer;\" onclick=\"window.open('http://www.clear.com/showenq.php?id=$rec_id')\">
				<p>".$rec_category_name."</p>
				<h3 class='name'><a style='margin:0; padding:0; position: relative;' href='http://www.clear.com/showenq.php?id=$rec_id'>".$rec_title."</a><br>Rating: $rating</h3>
			  </div>\n\n";

Open in new window


see if that makes a difference.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 11
  • 11
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now