help to add an image over the webpage!

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • snjflame
    New Member
    • Feb 2010
    • 3

    help to add an image over the webpage!

    hi, I want add an PNG image using .js and it should appear like this twitter badge,
    link: http://www.go2web20.net/twitterFollowBadge/

    - it should not move while scrolling like this twitter badge,
    - can anybody make me a javascript and html code for that!
  • larztheloser
    New Member
    • Jan 2010
    • 86

    #2
    Quite easy. Use HTML to code your image and put it in a div layer. Make the CSS position attribute of the layer "absolute" and make the height and width of the layer the same as the image. Also set the top attribute so that it is the desired distance down from the top. Now, use javascript to find the width of the client's screen. See this website for details on getting a client's width/height: http://www.howtocreate.co.uk/tutoria.../browserwindow

    Finally get access to the layer using document.getEle mentById or something, then set the left attribute of the layer's style property to the width of the screen minus the width of your layer. You might also want to create a function called onResize which updates the position of the layer so it is still right-aligned.

    Comment

    • snjflame
      New Member
      • Feb 2010
      • 3

      #3
      thx, for the reply, but don't know javascript?

      Comment

      • larztheloser
        New Member
        • Jan 2010
        • 86

        #4
        Put this inside javascript script tags. It's only a very basic solution and won't yet update on page resize.

        Code:
          var myWidth = 0;
          if( typeof( window.innerWidth ) == 'number' ) myWidth = window.innerWidth;
          else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) myWidth = document.documentElement.clientWidth;
          else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) myWidth = document.body.clientWidth;
          document.getElementById("PUT YOUR ID HERE").style.left = parseInt(myWidth - 25)+"px"; //replace the 25 with the width of your graphic

        Comment

        Working...