How do I create a floating icon on my website?

Discussion in 'OT Technology' started by 2FWNC, Jun 28, 2007.

  1. 2FWNC

    2FWNC I'm a little bit special

    Joined:
    Sep 8, 2005
    Messages:
    5,448
    Likes Received:
    0
    Location:
    Under The Sea
    Let's say I wanted to create a floating icon, one that could be placed anywhere on the page, then moved again by clicking and dragging it. I also want it link back to the home page. So the user can move the home page icon to wherever they find it most convienent. How would I do that?

    :hsd:
     
  2. Hydrogen

    Hydrogen building block

    Joined:
    Apr 14, 2005
    Messages:
    2,615
    Likes Received:
    0
    Location:
    Joliet, IL
    flash would be the best way imo
     
  3. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    This can be done with Javascript, but I don't know the code. Try searching for "Javascript draggable objects" or something like that.
     
  4. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    flash would be a HORRIBLE way. Don't do it.



    and your idea is half-baked imo. I don't recommend it, at all.



    btw, I can easily get a drag/drop object in jscript... takes less than 2 minutes. However, you're gonna have trouble if you want it to be a clickable link -- because the link will navigate on mouse_up -- which means you must write a handler to determine if the up event was due to a drag, or not.
     
  5. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Eh, a handler for that would be pretty simple. If the pointer moves during the mouse_down event, mark a DragDrop boolean flag as True; then, when processing mouse_up, only launch the hyperlink if DragDrop == False; lastly, reset DragDrop to False under all conditions.
     
  6. 2FWNC

    2FWNC I'm a little bit special

    Joined:
    Sep 8, 2005
    Messages:
    5,448
    Likes Received:
    0
    Location:
    Under The Sea
    Thanks :hsd:
     
  7. 2FWNC

    2FWNC I'm a little bit special

    Joined:
    Sep 8, 2005
    Messages:
    5,448
    Likes Received:
    0
    Location:
    Under The Sea
  8. peerk

    peerk New Member

    Joined:
    Mar 14, 2005
    Messages:
    984
    Likes Received:
    0
  9. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Is your Opera set to emulate Firefox?
     
  10. peerk

    peerk New Member

    Joined:
    Mar 14, 2005
    Messages:
    984
    Likes Received:
    0
    No. It was set as Opera.

    I just tried out all the settings and only the IE ones work.

    A quick work around can be done by adding this to the browser detection section.

    Code:
     s = "Opera";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }
    
     
  11. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Heh. I'll give you credit for not putting "assert(false);" in the section that deals with non-Opera browsers.
     
  12. tyrionlannister

    tyrionlannister New Member

    Joined:
    Jun 13, 2006
    Messages:
    710
    Likes Received:
    0
    Location:
    New York
    Let's throw usability out the window... I'm sure it will look cool, but you can increase the stickiness of your pages by having a navigation system that is easy to find and won't wander away on the users if they're idiots. If they drag this icon off the screen or leave it half way up the page while they read, it's likely you'll lose the visitors who don't want to bother looking for it to go back to the main site.

    As ugly as it is, if you want a floating icon, your better bet is to give a div a fixed position across the top of the page so that they'll have a link back no matter where they are in the article.
     

Share This Page