?
Solved

sliding a message onmouseover

Posted on 2003-03-11
6
Medium Priority
?
374 Views
Last Modified: 2008-01-09
ok, its a pretty simple question.  In my navigation, I have a bunch of links to different places.  When the user puts their mouse over one of the links, i want a message telling about the page to scroll from left to right on the top of the navigation, and then stop when it hits the side:

  message<-------------------(scrolling)--------------------------message

I have tried using the html <marquee behavior='slide'> but it goes to slowly for my liking.  I tried to mimick the effect but faster using javascript, but it will not work either.  Here is the code:

<script language='javascript'>
<!--
     function slidemsg(message)  {
          document.getElementById('slider').innerHTML=message
          slideit()
     }
     function slideit()  {
          if(document.getElementById('slider').style.pixelLeft > 5)  {
               document.getElementById('slider').style.pixelLeft -= 10
               setTimeout('slideit()',1000)
          }
     }
//-->
</script>
<style>
<!--
#slider  {
     position:absolute;
     top:10;
     left:50;
}
-->
</style>
<body>
<div id='slider'></div>
<br>
<br>
<br><a href='main.html' onMouseOver='javascript:slidemsg("Main: The main page");'>Main</a><br>
<a href='sports.html' onMouseOver='javascript:slidemsg("Sports: Scores and stats for teams");'>Sports</a><br>
<a href='games.html' onMouseOver='javascript:slidemsg("Games: Fun games to pass the time with");'>Games</a>



There are other links as well, but these are just examples.

There is no error message, but the message does not slide across the screen.  
Any idea's?
0
Comment
Question by:superslamwich
[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
6 Comments
 
LVL 2

Expert Comment

by:mikkolsoft
ID: 8115113
Is this what you want to achieve?
<script language='javascript'>
<!--
          var pixelLeft = 50;
    function slidemsg(message)  {
         document.getElementById('slider').innerHTML=message
         slideit()
    }
    function slideit()  {
         if(pixelLeft > 5)  {
                                   document.getElementById('slider').style.left = pixelLeft;
              pixelLeft -= 10;
              setTimeout('slideit()',1000)
         } else {
                          pixelLeft = 50;
                     }
    }
//-->
</script>

I am not too sure about the pixelLeft property but it's an IE-only attribute and you might want to use offsetLeft instead. If that's not the effect you want, let me know.

Mikkol
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 8115373
See if this is fast enough.  You control spped with the scrolldelay (in milliseconds). Any value less than 60 requires the truespeed property, or the value will be set to 60.

<html><head> </head><body>

<marquee width="500" scrolldelay="10" truespeed>
Now it the time for all good men to come to the aid of the country</marquee>

</body>
</html>

Cd&
0
 
LVL 3

Author Comment

by:superslamwich
ID: 8115380
that is the type of thing I want, the only problem is that with that script, if you move quickly from one to another, the words will speed up and go faster and faster and over and over.  Is there any way to get it to not do that but keep the effect?
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 3

Author Comment

by:superslamwich
ID: 8115430
sorry, i wrote the previous comment while COBOL was submitting his.  It's actually to mikkolsoft.

Anyway...

that scrolldelay attribute works great, it's exactly what I was looking for.  

Thanks a lot COBOLdinosaur!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8115476
superslamwich,
I just thought I'd mention that you can also use scrollamount=#, this sets how many pixels the text will move every time.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8115583
A pretty good description of the marquess properties here:

http://www.blooberry.com/indexdot/html/tagpages/m/marquee.htm

Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 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