Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Treating Div As Link

    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

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    67
    Thanks
    20
    Thanked 1 Time in 1 Post
    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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Tanner8 View Post
    I then tried wrapping the div in a link which also breaks the page. Is there any simple way to accomplish this?
    Code:
    <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:

    Code:
    a.block { display: block }
    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Drop that <div> and set display:block; and other styles to the anchor itself.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Tanner8 (01-21-2012)

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by UltimateCoder View Post
    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.

    Quote Originally Posted by Arbitrator View Post
    Code:
    <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:

    Code:
    a.block { display: block }
    Code:
    <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!

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Tanner8 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Tanner8 (01-21-2012)

  • #7
    New Coder
    Join Date
    Aug 2009
    Posts
    51
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •