...

View Full Version : Image always there in the same place, even if scrolling down



utnalove
06-23-2010, 10:38 PM
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....

The reaper
06-23-2010, 11:00 PM
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

utnalove
06-23-2010, 11:39 PM
Hi, thanks but it didn't work.

However I've found this 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.scrollLeft+ document.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?

effpeetee
06-24-2010, 03:00 PM
Useful sites here. (http://www.exitfegs.co.uk/Sources.html)

and here. (http://www.netmechanic.com/news/vol7/html_no10.htm)

and here. (http://simplebits.com/notebook/2004/09/08/centering/)

Frank

Major Payne
06-24-2010, 06:25 PM
This is another one which you might be able to customize to the position you want:

Floating Top Bar script (http://www.dynamicdrive.com/dynamicindex17/floatbar.htm)

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

Jump to top Link (http://www.dynamicdrive.com/dynamicindex5/jumptop.htm)

utnalove
06-25-2010, 09:38 PM
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 (http://www.przepiekna.pl). 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:

#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:

<div id="floatingimage">
<a href="http://wizazforum.pl"><img src="http://wizazforum.pl/images/statusicon/forum_new-48.png"></a>
</div>

Please suggest...

Major Payne
06-26-2010, 07:06 PM
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 (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.przepiekna.pl%2F)

43 Critical HTML Errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.przepiekna.pl%2F)

SB65
06-26-2010, 07:46 PM
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.

utnalove
06-26-2010, 09:53 PM
Hi.. thanks a lot for your help!!!

I have tried with:


z-index:-1;
and

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...

utnalove
06-27-2010, 12:02 AM
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..

Major Payne
06-27-2010, 03:24 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum