...

View Full Version : Treating Div As Link



Tanner8
01-21-2012, 08:26 AM
Hey, currently I am using the onclick event on div's to go to a certain page. The reason is specific to my styling, otherwise I would just use a proper link. The page basically has a large mouse over and highlighting portion, so anywhere you click it will go.

However the drawback is that you cannot right click and open as a new window or anything. Is there any way to be able to do this? I tried styling a normal HREF link to my needs but it completely breaks everything. I then tried wrapping the div in a link which also breaks the page. Is there any simple way to accomplish this? Thank you

UltimateCoder
01-21-2012, 08:45 AM
Yes there is. You are probiblary using the line onclick="window.location('URL')" but you can change that to window.open('url'). This should work, and you can add in the hieght and width. I belive that on dynamic drive there is a good wizard that will help you.

Arbitrator
01-21-2012, 09:34 AM
I then tried wrapping the div in a link which also breaks the page. Is there any simple way to accomplish this?
<a href=""><div>Content</div></a>Because the a element is an inline element (with CSS display: inline) by default, you will need to restyle it with display: block. For example:


a.block { display: block }


<a class="block" href=""><div>Content</div></a>

Note that this structure is allowed in HTML5. div elements inside of a elements are disallowed in previous versions of HTML (4.01) and XHTML (1.0/1.1), however.

abduraooft
01-21-2012, 09:56 AM
Drop that <div> and set display:block; and other styles to the anchor itself.

Tanner8
01-21-2012, 10:00 AM
Yes there is. You are probiblary using the line onclick="window.location('URL')" but you can change that to window.open('url'). This should work, and you can add in the hieght and width. I belive that on dynamic drive there is a good wizard that will help you.

That won't do it, I need the link options you get by right clicking on a link.



<a href=""><div>Content</div></a>Because the a element is an inline element (with CSS display: inline) by default, you will need to restyle it with display: block. For example:


a.block { display: block }


<a class="block" href=""><div>Content</div></a>

Note that this structure is allowed in HTML5. div elements inside of a elements are disallowed in previous versions of HTML (4.01) and XHTML (1.0/1.1), however.

That's what I was looking for. I could have sworn I tried displaying as block also, that's what I *thought* I initially tried. I guess I either forgot to try and thought I did, or something else was off.

As for the rules. It seems to work well. It is a little sketchy in IE8 (Right clicking doesn't treat it like a link) but it still works when clicked normally. The whole point of this was just for convenience so you can open in a new page or something if you want. It's no biggy though.

Thank you!

Arbitrator
01-21-2012, 11:05 AM
It is a little sketchy in IE8 (Right clicking doesn't treat it like a link) but it still works when clicked normally.I just looked into this in IE9. You can get around this problem by following abduraooft's suggestion of eliminating the div element or you can replace that element with a span element (which you will have to style as display: block).

Also worth noting in the cases with the div element: while the right-click menu options for links do not appear, you can still middle-click or Ctrl+left-click to open the them in a new tab. Likewise, you can invoke a new window by Shift+left-clicking.

Tanner8
01-21-2012, 08:11 PM
I just looked into this in IE9. You can get around this problem by following abduraooft's suggestion of eliminating the div element or you can replace that element with a span element (which you will have to style as display: block).

Also worth noting in the cases with the div element: while the right-click menu options for links do not appear, you can still middle-click or Ctrl+left-click to open the them in a new tab. Likewise, you can invoke a new window by Shift+left-clicking.

Great that solves that issue.

I found out why it didn't work when I thought I tried display block. I did try it. The reason it didn't work is because on the area where I tried it (There are multiple instances) has another link inside. So it is a large mouse over region with a link inside. When you try to nest anchor tags all hell breaks loose, which is why it didn't work when I tried it.

http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

Is there any way to get around this issue? Or would I need to just use JS to get this functionality? Thank you

felgall
01-21-2012, 09:10 PM
Nesting <a> inside one another is not allowed in ANY version of (X)HTML.

It sounds like what you are trying to do is more along the lines of an image map where clicking on certain spots takes you to specific pages and clicking anywhere else takes you to another page. Perhaps you can set up what you want that way - you may need to overlay a transparent image over the content and then assign the areas for each destination to match with the underlying content.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum