Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Making all Div tag a link

Posted on 2013-02-02
26
Medium Priority
?
315 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 
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 53

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 53

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
 
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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

670 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