Solved

Making all Div tag a link

Posted on 2013-02-02
26
289 Views
Last Modified: 2013-02-02
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
Comment
Question by:TLN_CANADA
  • 11
  • 11
  • 2
  • +1
26 Comments
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847209
<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
 
LVL 42

Expert Comment

by:sedgwick
ID: 38847215
Just add onclick in the div and in the style change cursor to pointer

<div onclick="Your-link" class=...
0
 

Author Comment

by:TLN_CANADA
ID: 38847220
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
 
LVL 42

Expert Comment

by:sedgwick
ID: 38847226
With the style:
<div onclick="Your-link" style="cursor: hand"
0
 

Author Comment

by:TLN_CANADA
ID: 38847237
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38847240
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
 

Author Comment

by:TLN_CANADA
ID: 38847252
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847274
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
 

Author Comment

by:TLN_CANADA
ID: 38847283
Thanks nickinthooz,

This shows as a link when I scroll over, but when I click on the div tags nothing happens.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38847303
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
 

Author Comment

by:TLN_CANADA
ID: 38847327
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847393
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
 

Author Comment

by:TLN_CANADA
ID: 38847411
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847419
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847421
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
 

Author Comment

by:TLN_CANADA
ID: 38847428
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847453
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847460
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
 

Author Comment

by:TLN_CANADA
ID: 38847499
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847528
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
 

Author Comment

by:TLN_CANADA
ID: 38847541
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
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847555
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
 
LVL 6

Accepted Solution

by:
nickinthooz earned 500 total points
ID: 38847560
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
 

Author Comment

by:TLN_CANADA
ID: 38847567
Thanks Nick. It does show a hand now but this way when I click nothing happens.
0
 

Author Comment

by:TLN_CANADA
ID: 38847574
That's it! Thank you very much for your fast efficient help.
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38847575
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Alert not firing 2 34
Detecting robots? 5 35
HTML CSS 7 20
Glyph icons in Bootstrap 3 4 16
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now