?
Solved

Displaying a small image at the right bottom of the screen

Posted on 2005-03-08
13
Medium Priority
?
121 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
  • 4
  • 3
  • 2
  • +2
11 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

621 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