Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    13
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,205
    Thanks
    23
    Thanked 605 Times in 604 Posts
    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>

  • Users who have thanked sunfighter for this post:

    themoon (01-23-2013)

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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