How to make entire DIV tag clickable

While working on various aspects of designing of the website, we may have to deal with a scenario where we have to make part of page , DIV tag, entirely clickable. Lets see how we can work on this.

The best way is to enclose entire div tag in an anchor tag as follows. This way we can mention the link, if any, where page should redirect after clicking div tag.

<a runat="server" href="http://www.kpbdotnet.blogspot.com/">

<div class="jumbotron">

this is my DIV tag and we are making this complete div tag clickable

<p>

We are contents of div tag

</p>

</div>

</a>
We can have any content in div tag like image, a long description, etc.

Sometimes, instead of redirect we may have to write some code. So replace anchor tag with LinkButton control as follows

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">

<div class="jumbotron">

test div tag

<asp:Label ID="lbl" runat="server" Text="click"></asp:Label>

</div>

</asp:LinkButton>
Code Snippet for OnClick event is as follows -

protected void LinkButton1_Click(object sender, EventArgs e)

{

lbl.Text = "You click div tag.";

}
So working on existing controls as you require, is the best way to achieve what you need.

- Happy Coding -
 

 

Opening two windows on Hyperlink click

Sometimes, we may require to open two windows on one Hyperlink click.

We can achieve this easily with button control by mentioning on link on client side scripting and the other on server side coding. But when we have to use Hyperlink, the simplest way to achieve this is as follows -

<a runat="server" href="http://www.google.com" onclick="window.open('http://www.yahoo.com');" >click Me</a>


We can execute above code and after clicking on the link two different windows will open one for http://www.google.com and the other for http://www.yahoo.com


Happy Coding !

HTML Character Entities

Following post will give us an idea how to include character entities in our web pages.

Note : Character entities are case sensitive

I have included following aspx design page tags for your reference.

<form id="form1" runat="server">

<div>

HTML Character Entities. Entity names are case sensitive.

<p>this is &nbsp; space.</p>

<p>this is &amp; ampersand.</p>

<p>this is &lt; less than</p>

<p>this is &gt; greater than</p>

<p>this is &empty; empty</p>

<p>this is &nabla; NABLA</p>

<p>this is &cent; cent</p>

<p>this is &pound; pound</p>

<p>this is &yen; yen</p>

<p>this is &euro; euro</p>

<p>this is &copy; copyright</p>

<p>this is ® register trademark</p>

<p>this is &trade; trademark</p>

<p>this is &prod; pi</p>

<p>this is &sum; summation</p>

<p>this is &epsilon; epsilon<br />

this is &Epsilon; epsilon</p>

<p>this is &delta; Delta<br />

this is &Delta; Delta</p>

<p>this is &alpha; alpha<br />

this is &Alpha; alpha</p>

<p>this is &beta; beta<br />

this is &Beta; beta</p>

<p>this is &gamma; gamma

<br />this is &Gamma; gamma</p>

<p>this is &hearts; hearts<br />

this is &spades; spade<br />

this is &clubs; <br />

this is &diams; diamond</p>

Diacritical Marks to letter k

<p>k&#768;<br />

k&#769;<br />

k&#770;<br />

k&#771;</p>

</div>

</form>

 
   

After viewing this page in browser, we will see following    

this is   space.

this is & ampersand.

this is < less than

this is > greater than

this is ∅ empty

this is ∇ NABLA

this is ¢ cent

this is £ pound

this is ¥ yen

this is € euro

this is © copyright

this is ® register trademark

this is ™ trademark

this is ∏ pi

this is ∑ summation

this is ε epsilon
this is Ε epsilon

this is δ Delta
this is Δ Delta

this is α alpha
this is Α alpha

this is β beta
this is Β beta

this is γ gamma
this is Γ gamma

this is ♥ hearts
this is ♠ spade
this is ♣
this is ♦ diamond 

   

Diacritical Marks to letter k

k̀
ḱ
k̂
k̃  

 

 

for more details visit this link for details.