www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jul 2012
    Posts
    10

    adding text while image rotating / centering the rotating image

    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

  2. #2
    Join Date
    Jul 2012
    Posts
    22
    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.

  3. #3
    Join Date
    Jul 2012
    Posts
    10
    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

    Quote Originally Posted by payukim View Post
    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.

  4. #4
    Join Date
    Jul 2012
    Posts
    22
    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.

  5. #5
    Join Date
    Jul 2012
    Posts
    10
    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



    Quote Originally Posted by payukim View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles