Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DHTML image float from right to left

Status
Not open for further replies.
nwruiz

nwruiz

Programmer
Jun 22, 2005
60
US
Hello,

I have constructed an image for my company that will float from off the screen at the top of the page to a location in the middle of the page. The purpose of this is for the electric company to ask customers to fill out a survey.

However, the company would like me to make the image float from off the right side of the screen and float left toward the middle of the screen. However, if I do this, the dreaded horizontal scrollbar displays and foils my plans. Instead of appearing to be coming from off the screen, the user sees a large amount of horizontal space on their screen.

Is there any way to suppress the horizontal scrollbar, so that the image floats seamlessly, as it did when it floated from the top of the page? Thank you very much for your time.

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net
 
Sort by date Sort by votes
HMM....not sure i understand. but i would suggest using the css clip function on the body element of the page. or u could disable the horizontal bar....i think that is the css overflow function. if possible post code.

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...;)
 
Upvote 0 Downvote
Clip and overflow-x: hidden seem to work, but only in Internet Explorer. Is there an alternative for clip that works for Firefox? I need to ensure cross-browser compatibility. This is what I used in my CSS file to get it to work in IE:

Code: 
body
{
  overflow-x:hidden;
  /* Define a rectangle that encapsulates the document */
  clip: rect(auto, auto, auto, auto);
}

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net
 
Upvote 0 Downvote
To better explain what I'm trying to do, I am attaching the DHTML code I used to make an image float from the top of the window to a place toward the middle.

Code: 
<!-- HTML CODE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, [URL unfurl="true"]www.pspad.com">[/URL]
  <title></title>
  
  <script language="javascript" src="scripts/moveImage.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/movingImageStyle.css">
  </head>
  <body>
    <img class="dance" id="me" src="images/takeasurvey_flyout.jpg" onload='showImage()'>
  </body>
</html>

Code: 
// JavaScript Document -> scripts/moveImage.js
var id = "me";   // Image object's id
var i = -100;    // Y-Coord position of image on page
var intShow;     // Interval to repeat show function
var intFade;     // Interval to repeat fadeAway function
var timeToLast = 5000;  // Time (in milliseconds) to show image until it fades

var isIE = navigator.appName.indexOf("Microsoft") != -1;
var isNS = navigator.appName.indexOf("Netscape") != -1;

// Name this window
window.name = "myWin";

// Makes the image drop-down from the top
function showImage()
{
  intShow = setInterval("show()", 10);
}

function show()
{
  if(i < 200)
  {
    i++;
    document.getElementById(id).style.top = i;
  }
  else
  {
    clearInterval(intShow);
    // Fade the image away
    setTimeout("fade();", timeToLast);
  }
}

// Fade the image
function fade()
{
  i = 100;
  intFade = setInterval("fadeAway()", 10);
}

function fadeAway()
{
  if(i > 0)
  {
    // If current browser is IE, fade this way
    if(isIE)
    {
      document.getElementById(id).filters.alpha.opacity -= 1;
    }
    // If current browser is Netscape, fade this way
    else if(isNS)
    {
      // For older Mozilla and Netscape browsers
      document.getElementById(id).style.Mozopacity = i/100;
      
      // For newer Mozilla browsers
      document.getElementById(id).style.opacity = i/100;
    }
    i = i - 1;
  }
  else
  {
    clearInterval(intFade);
    
    // Move image off of screen
    document.getElementById(id).style.top = -100;
  }
}

Code: 
/* CSS Document styles/movingImageStyle.css */
img.dance
{  
  /* Sets image to solid (In both IE and Netscape) */
  filter:alpha(opacity=100);
  -moz-opacity: 100%;
  
  /* Sets image's position */
  position:absolute;
  top: 100px;
  left: 560px;
  
  /* Prevents link border around image */
  border: 0;
}

I have specified the directories and filenames for the .js and .css file, so that you would not have to modify the code. The only thing you have to change is the image that's being displayed in the HTML file. Replace the .jpg in the images/ directory to one that is currently on your computer.

The challenge I have is to modify the code to cause the image to float from off the right side of the screen toward the middle of the screen. By using the same technique of placing the image so far to the right that it is hidden, the scrollbar appears at the bottom. I have managed to suppress the scrollbar in IE, using the code in the previous post; however, it does not work for Firefox.

Good luck troubleshooting this problem.

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net
 
Upvote 0 Downvote
Has anyone figured out how to make an image float from off the right screen in towards the left while suppressing the horizontal scrollbar in Netscape/Firefox?

Nick Ruiz
CO-OP Intern, PPL Electric Utilities
Webmaster, DealMerchant.net
 
Upvote 0 Downvote
I think you have to define the clipping on the fly as the image scrolls giving it exact values of the rectangle to clip. give it a try, i dnt ave firefox at work so cannot test, everything works in IE as expected.

---------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
768
trevil620
trevil620
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
792
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
915
xwb
xwb
MDGarcia
  • Locked
  • Question
Connection to ORACLE from OutSystems
Replies
0
Views
235
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top