Move this code-line into the body? This possible?

themoon · 01-23-2013, 02:34 PM

I am by no means an html expert.. I stumble along trying to find bits and pieces and make it work.

Currently I have this code which works great:
This is between the head tags:

Code:

<style>
margin: 0px;
.fadein { position:relative; }
.fadein img { position:absolute; left:15; top:246px; }
</style>
<script src="RotatingImages/jquery.min.js"></script>
<script>
$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

This is between the body tags:

Code:

<div class="fadein">
<img src="RotatingImages/001.jpg">
<img src="RotatingImages/002.jpg">
<img src="RotatingImages/003.jpg">
</div>

Is there anyway to move this line:
.fadein img { position:absolute; left:15; top:246px; }
into the body?

Or maybe I'm asking the wrong question. But I need to create another one of these rotating slide shows on the same page. But I need to put it in a different spot on the page.

sunfighter · 01-23-2013, 03:02 PM

Study this to see what I did. You have to redo the images:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<style type="text/css">
margin: 0px;
.fadein { position:relative; }
.fadein img { position:absolute; left:15; top:246px; }
.fader { position:relative; }
.fader img { position:absolute; left:415px; top:0px; }
</style>
<script src="RotatingImages/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
$(function(){
	$('.fader img:gt(0)').hide();
	setInterval(function(){$('.fader :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fader');}, 1000);
});
</script>
</head>

<body>
<div class="fadein">
<img src="images/1.jpg">
<img src="images/2.png">
<img src="images/3.jpg">
</div>

<div class="fader">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.png">
</div>
</body>
</html>

themoon · 01-23-2013, 06:31 PM

Ok, I'm pretty sure I see what you did. I feel kind of stupid for not doing it this way. You basically repeated the same code but changed out the name id's assigned.

Thank you for taking the time to reply and help me out. I appreciate it. I really do.