?
Solved

Displaying a small image at the right bottom of the screen

Posted on 2005-03-08
13
Medium Priority
?
120 Views
Last Modified: 2010-07-27
Hi Everyone,

I want to write a cross browser DHTML/CSS/Javascript code which will display a small icon at the right bottom of the screen. Could you please write me a small example code for this? Thanks!

0
Comment
Question by:blacklord
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
13 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13488078
<div style="right:0px;bottom:0px;position:absolute"><img src="yourImage.gif" border="0"></div>
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 13488083
Smallest example I could think off:

<body style="background: url(myimage.jpg) no-repeat 100% 100% white;">
</body>

-r-
0
 

Author Comment

by:blacklord
ID: 13495199
Batalf, thanks for your answer it seems correct but whne there is a content which needs scrolling, image does not continue being at the right bottom of the page :(
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 49

Expert Comment

by:Roonaan
ID: 13495387
Have you tried adding an image just in front of the </body> tag and right-align it?

-r-
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13495441
You could use javascript to move the image when the page is scrolled.

<html>
      <head>
      <style type="text/css">
      #myImage{
            position:absolute;
            right:0px;
            bottom:0px;      
      }      
      </style>
      <script type="text/javascript">
      var imageHeight = 20; // Height of image
      function moveImage(){
            document.getElementById('myImage').style.top = (document.body.offsetHeight/1 + document.body.scrollTop/1) - imageHeight + "px";
      }
      </script>
      </head>
      <body onscroll="moveImage()">
      <div id="myImage"><img src="myImage.gif" border="0"></div>      
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      </body>
</html>
0
 

Author Comment

by:blacklord
ID: 13495583
Thanks for your answer but is there any chance to perform this within a javascript or CSS? I am trying to develop a service for my clients and i will ask them to insert one line of code into their HTMLs. I can not describe them how to insert different codes into different locations such as body onscroll, etc.

Is there any chance to perform this within js or css?

Thanks!
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13495694
If you put it as background image of your bod tag, then it should be possible with CSS:

<html>
      <head>
      <style type="text/css">
      #myImage{
            position:absolute;
            right:0px;
            bottom:0px;      
      }      
      body{
            background: url('yourImage.gif');
            background-position: bottom right;
            background-attachment:fixed;
            background-repeat:no-repeat;
      }
      </style>

      </head>
      <body>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      Content<br>
      </body>
</html>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13495705
Forgot to remove the

#myImage{
          position:absolute;
          right:0px;
          bottom:0px;    
     }  

part of the code. It's from the previous example.
0
 

Author Comment

by:blacklord
ID: 13495745
Batalf, you're correct this displays the image at the right bottom but i don't want this :)

There was a website which offers a service to website owners. It was generating a one line javascript code and you were inserting it into your website pages (in <head> tag). Then a small + icon was being displayed at the right bottom of each page on your website. When a visitor moves mouse icon to over it, numbers from 1 to 5 were being displayed and they were rating the website content. If they want, they were posting additional comments through this right-bottom div. I don't remember this website (if you know, please let me know). I want to build this kind of code.

I hope i explained my need detailed :)

Thanks!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 15360875
JS File:

document.write('<style type="text/css">'+
'.nonTransparent { background-color:white }'+
'#fixme {'+
'     /* netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */'+
'     position: absolute; right: 20px; bottom: 10px;'+
'}'+
'body > div#fixme {'+
'     /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */'+
'     position: fixed;'+
'}'+
'<\/style>'+
'<\!--[if gte IE 5.5]>'+
'<\![if lt IE 7]>'+
'<style type="text/css">'+
'div#fixme {'+
'     /* IE5.5+/Win - this is more specific than the NS4 version */'+
'     right: expression(  20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + "px" );'+
'     top: expression(  -40 + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) +"px" )'+
'}'+
'<\/style>'+
'<\![endif]>'+
'<\![endif]--><div id="fixme">Hello</div>')




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
      <title>Untitled</title>
 
</head>

<body>
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content

<script src="bottom.js"></script>
</html>
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 15591312
PAQed with no points refunded (of 250)



Computer101
EE Admin
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question