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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts

    Image always there in the same place, even if scrolling down

    Hello...

    let's say I have this image: http://mysite.com/image.png


    I want this image to be:

    • Attached (touching) the right side of the browser;
    • Always there even if the page is long and the user scrolls down


    For example something like the famous twitter "follow me" that is in many different site.

    Please help....

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Location
    Florida
    Posts
    155
    Thanks
    16
    Thanked 2 Times in 2 Posts
    I know what you are talking about, I did some looking and here is the closest I could find:

    http://dynamicdrive.com/dynamicindex4/flyimage2.htm

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Hi, thanks but it didn't work.

    However I've found this code:

    PHP Code:
    #floatingimage {
    bottom:10px;
    right:0px;
    position:fixed;
    _position:absolute;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
    _right:expression(document.documentElement.scrollLeftdocument.documentElement.clientWidth offsetWidth);
    }
    #floatingimage a img {border:0} 

    However in this case the image is in the right bottom corner.

    How can I make this image appear in the right center?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 06-24-2010 at 02:15 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    This is another one which you might be able to customize to the position you want:

    Floating Top Bar script

    This stays in the lower right hand browser on scroll and can be modified:

    Jump to top Link
    ☠ ☠RON☠ ☠

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Hi all, thanks for your help and for the links you gave me... however I think it's better if you send you to the site I am working on, the link is this. Please look at the image on the left... the one I want to float.

    Well... it's floating... GOOD.... but it's not clickable It's a link, but not clickable... why?

    The CSS is this:
    Code:
    #floatingimage {
    bottom:50%;
    left:0px;
    position:fixed;
    _position:absolute;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
    _right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
    }
    #floatingimage a img {border:0}
    The HTML is this:
    Code:
    <div id="floatingimage">
    <a href="http://wizazforum.pl"><img src="http://wizazforum.pl/images/statusicon/forum_new-48.png"></a>
    </div>
    Please suggest...

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Just inserted your code given above and image was clickable for me in IE and FF. Must be something else in your CSS and/or HTML stopping it. Some of these errors may be causing the problem, but they need fixing even if they are not:

    112 CSS Errors

    43 Critical HTML Errors
    Last edited by Major Payne; 06-26-2010 at 06:09 PM.
    ☠ ☠RON☠ ☠

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your image isn't clickable for me on your link in FF3.6. Applying a z-index to #floatingimage seems to fix this.

    I agree with MajorPayne about fixing your other errors. In particular some of your IE conditional comments are not properly formatted.

  • #9
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Hi.. thanks a lot for your help!!!

    I have tried with:

    PHP Code:
    z-index:-1
    and
    PHP Code:
    z-index
    in the #floatingimage, but it's still unclickable.

    I will try to correct these errors... I will open a new thread for them. However, don't you think this problem may be caused by some javascript? I see that in this template I have a lot of javascript, but I don't know how they can be related to each others...

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    AMAZING!!!

    After moving the <div id="floatingimage"><a href=... from the body to the footer it works and it's clickable!!!

    So strange... but well... it works..

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Quote Originally Posted by utnalove View Post
    AMAZING!!!

    After moving the <div id="floatingimage"><a href=... from the body to the footer it works and it's clickable!!!

    So strange... but well... it works..
    Good indication that you may have a coding problem within the container it was in that caused it to be unclickable.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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