adding text while image rotating / centering the rotating image

**debojam** · 07-09-2012 09:43 AM

hello
i have 2 other big trouble i've just made on my first page an image rotator and my client wants me to add text that fade in and fade out during the image rotation on it
here is the page
http://debojam.bugs3.com/main/index4.html
i looked everywere didnt find any code that can help me with that

another trouble as you can see if i open my page on resolution 1024*768
the image rotator is not centered can't seem to put him exactly on the center

any help would really be appreciated

thank you

**payukim** · 07-09-2012 10:54 AM

Take a look in using jquery. This's much easier than using pure javascript.
In this case you have to download jquery plugin and put into the page you want to use.

Check this. It may help: http://api.jquery.com/category/effects/. It has fadeIn(), fadeOut() can be used to your trouble.

**debojam** · 07-09-2012 01:13 PM

thank you for your answer i'm really new at this and again it seems like i can't make it work on the rotator because it's not a specific image i want the text to start 3 second after the page load it's just doesnt work

Originally Posted by payukim

Take a look in using jquery. This's much easier than using pure javascript.
In this case you have to download jquery plugin and put into the page you want to use.

Check this. It may help: http://api.jquery.com/category/effects/. It has fadeIn(), fadeOut() can be used to your trouble.

**payukim** · 07-09-2012 10:50 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>test</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        setTimeout(function(){
          $("#test").fadeIn(500)
        },3000)
      })
    </script>
  </head>
  <body>
    <div id="test" style="display:none; text-align:center">test<br />
    </div>
  </body>
</html>

Try this. I'm not sure this's what you want. In this code the text "test" will show up after 3 sec the page loaded.

You can see I included the jquery.js (you can get it from jquery.com). $(document).ready() means everything inside ready will work right after the page loaded. And I set timeout to work after 3 sec (3000), then call the fadeIn() after 3 sec passed.

Try it to Adapt it yourself.

**debojam** · 07-10-2012 10:36 AM

thank you very much for the reply i will try it as soon as i get home
just for me not to be confused you meant i can put this for my rotation picture and my text will start fade in after a few second

thank you

Originally Posted by payukim

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>test</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        setTimeout(function(){
          $("#test").fadeIn(500)
        },3000)
      })
    </script>
  </head>
  <body>
    <div id="test" style="display:none; text-align:center">test<br />
    </div>
  </body>
</html>

Try this. I'm not sure this's what you want. In this code the text "test" will show up after 3 sec the page loaded.

You can see I included the jquery.js (you can get it from jquery.com). $(document).ready() means everything inside ready will work right after the page loaded. And I set timeout to work after 3 sec (3000), then call the fadeIn() after 3 sec passed.

Try it to Adapt it yourself.

Thread: adding text while image rotating / centering the rotating image

Thread Tools

Display

adding text while image rotating / centering the rotating image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions