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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts

    How to implement a "cycling" news item on refresh/reload

    Here is the site I am working on: http://www.abrametal.com

    What I wanted to do, is have the bottom News DIV change each time the page is loaded/refreshed. In this way I could have a different picture and text and give some variety to the users. I didn't want to make another slideshow but instead, a new div on reload/refresh.

    Any idea on how I can implement this type of idea would be greatly appreciated.

    Best,
    C

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    <script type="text/javascript">
    var ray=
    {
    imgsRef:['Picture1.jpg','Picture2.jpg','Picture3.jpg',
    		'Picture4.jpg','Picture5.jpg','Picture6.jpg',
    		'Picture7.jpg','Picture8.jpg','Picture9.jpg'], // Images you wish to display randomly
    cycle:function(el)
    	{
    	var rand=Math.floor(Math.random()*this.imgsRef.length); // Create random number
    	this.getID(el).setAttribute('src',this.imgsRef[rand]);
    	},
    getID:function(el)
    	{
    		return document.getElementById(el);
    	}
    }
    window.onload=function()
    	{
    		ray.cycle('myimage'); // Pass the id of your image
    	}
    </script>
    <style type="text/css">
    p{
    width:500px;
    }
    p img{
    width:200px;
    height:150px;
    float:left;
    margin:5px;
    }
    </style>
    <base href="http://rangana.moonylist.com/images/">
    <p>
    <img src="Picture9.jpg" alt="Default Image" id="myimage">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus.
    </p>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    colinkites2000 (11-19-2008)

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    67
    Thanks
    28
    Thanked 0 Times in 0 Posts
    Thanks - I will give this a try and see how it goes! Will this cycle the text as well though?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have put it here.

    It's a bit crude.


    Frank
    Last edited by effpeetee; 11-19-2008 at 04:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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