/    Sign up×
Community /Pin to ProfileBookmark

adding text while image rotating / centering the rotating image

Copy linkTweet thisAlerts:
Jul 09.2012

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
[url]http://debojam.bugs3.com/main/index4.html[/url]
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

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@payukimJul 09.2012 — 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.
Copy linkTweet thisAlerts:
@debojamauthorJul 09.2012 — 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

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.[/QUOTE]
Copy linkTweet thisAlerts:
@payukimJul 10.2012 — [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>
[/CODE]

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). [I][B]$(document).ready[/B]()[/I] means everything inside [I][B]ready[/B][/I] will work right after the page loaded. And I set timeout to work after 3 sec (3000), then call the [B][I]fadeIn()[/I][/B] after 3 sec passed.



Try it to Adapt it yourself.
Copy linkTweet thisAlerts:
@debojamauthorJul 10.2012 — 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



[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>
[/CODE]

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). [I][B]$(document).ready[/B]()[/I] means everything inside [I][B]ready[/B][/I] will work right after the page loaded. And I set timeout to work after 3 sec (3000), then call the [B][I]fadeIn()[/I][/B] after 3 sec passed.



Try it to Adapt it yourself.[/QUOTE]
×

Success!

Help @debojam spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...