Clickable area not lining up with display for div?

Discussion in 'Web Design and Development' started by ArtOfWarfare, Sep 24, 2012.

  1. ArtOfWarfare macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #1
    I'm trying to make animating sprites that are clickable without using flash. On click (or touch), they should display a popup bubble. When the screen is clicked again (anywhere, be it on the icon, the bubble, or outside both,) it should dismiss. The issue is that clickable areas don't align with their sprites.

    Here's the webpage:

    https://dl.dropbox.com/u/60354330/site/index.html

    The clickable area for each of these pipes is an area of the same size as the sprites, but centered on the corner that's on the outside edge on the side that the steam flows from.

    I have tested this on Safari 6 (Mac,) iOS 6, Android 4.0's browser, and Chrome (version 21 on Windows 7?) and the behavior is the same in all of those browsers.

    Any suggestions on why it doesn't line up or how to fix it?

    All of the relevant code is in index.html. Here's what I believe the relevant excerpts are:

    Code:
    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>CSS sprite demo</title>
    
    	<style type="text/css">
    .spipe
    {
    	position: absolute;
    
    	width: 1px;
    	height: 1px;
    
    	background: url(spipe.png) no-repeat 0 0;
    	background-size: 1px 20px;
        
    	-webkit-animation-name: spipe;
    	-webkit-animation-duration: 1.0s;
    	-webkit-animation-iteration-count: infinite;
    	-webkit-animation-timing-function: linear;
    	-webkit-transform-origin: top left;
    }
    
    .left
    {
    	-webkit-transform: scale(100, 60);
    }
    	</style>
    </head>
    <body>
        <div id="toppipe" class="popup spipe left" style="top:120px;left:200px;" popupHTML="<b>Hello</b>,<br><i>Top</i>"></div>
    </body>
    </html>
    
    It gets scaled down and back up because otherwise it'll roll from frame to frame.

    It seems like the issue is that the clickable area scales up from a different origin than the rest of the div, but if I change the transform origin to something else, say 50% 50%, it's still offset by the same amount. Translating the div gets applied the same way to both the clickable area and the div, thus that can't be used to fix the issue either.
     
  2. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #2
    Just off the top of my head, why not a wrapper div or an overlay div to control the clickable area?
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    I'm thinking since class spipe sets 1px width and height you might need to set the actual dimensions of each sprite in your inline styling which currently only sets positioning.

    Inline styling overrides stylesheets, use with caution, on a side note. Gets real confusing when debugging style issues sometimes.
     
  4. ArtOfWarfare thread starter macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #4
    I tried getting rid of the inline styles but the results were still the same. I use inline styles so that positions can be defined in the HTML file... I'm making this all for a company which would like to make several interactive blueprints. Ultimately, they'd like to be able to easily make their own using just HTML and the CSS/JS files I'll provide them with.

    The only languages I'm familiar with are C, Obj-C, and Java (I know some C++)... up until I started working on this last week, I knew nothing about JS/JQ and very little about HTML/CSS. My point is, I don't know what those are. If you could provide code demonstrations or a link to where I might find out more, it'd be helpful... (I haven't yet found a very good place for getting information about these languages... like Apple's Docs are for Obj-C and their APIs)
     

Share This Page