SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I create an arrow on active list item?

    I am about to create a page that has a list to the left and the actual content to the right. When the user clicks on one of the items in the list, the item should turn yellow and an arrow should point to the right. The arrow will partially be outside the list panel. Se picture below.

    arrow on active element.PNG

    I have thought about creating the arrow with HTML5 canvas element, is that the right way? How do I get the arrow to go over the panels border?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi HermioneN. Welcome to the forums.

    You are better off doing this with background images, or perhaps a bit of CSS3. Don't use canvas, as it's not as well supported and is overkill. If you can post your markup and the appropriate image, we can help finish it off. Read this for guidance on how to post a useful code sample:

    http://www.sitepoint.com/forums/show...Posting-Basics

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

    I do not have any picture for the arrow. Do I need a special type of picture to be able to dynamically change the height of it? I do not think I will know the height of the list item before rendering the page.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by HermioneN View Post
    I do not think I will know the height of the list item before rendering the page.
    That's going to make the arrow effect a little more difficult. So the shape of the arrow part will vary?

  5. #5
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do not have the final requirements yet, but the list items height may vary depending on the data in the items.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by HermioneN View Post
    I do not have the final requirements yet, but the list items height may vary depending on the data in the items.
    At this stage, my advice would be to lock down the exact requirements and possible scenarios that the code will need to deal with. It's a recipe for misery to approach coding without knowing exactly what you're dealing with.

  7. #7
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then I have to wait. The project is just in the beginning and we have just got some basic layout samples. I thought that this arrow could be a problem and wanted to look into a solution now when I have the time.

    Thanks for your time. I may return when I have more information.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ralph said we do need to to know the dynamics but here's an old demo you might like to play around with meanwhile.

    http://www.pmob.co.uk/temp/mitred-arrow5.htm

    It uses mitred borders to make the arrow effect and will scale within reason over a few lines of text.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by HermioneN View Post
    I thought that this arrow could be a problem and wanted to look into a solution now when I have the time.
    Yep, definitely a good strategy. Bear in mind that it's harder to do if the height of those list items will vary—assuming you must have the arrow. But there are workarounds, such as having a smaller arrow that is centered and is always the same height, no matter how tall the list item is ... though that might look a bit odd.

    I may return when I have more information.
    Definitely do that. There are lots of CSS enthusiasts here who will be happy to help.

    Edit:

    Nice example, Paul.

  10. #10
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul. That gives me something to start with.


Bookmarks

Posting Permissions

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