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 to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing Format Within Rotating Div

    I am using the code below on a site. What do I need to include to change the font, text size, and text color, and where do I insert those lines of code? (Each line will have the same formatting -- does it need to be repeated six times or can I do it all at once ) Thanks!

    <div id="d1" style="display: none;">text 1</div>
    <div id="d2" style="display: none;">text 2</div>
    <div id="d3" style="display: none;">text 3</div>
    <div id="d4" style="display: none;">text 4</div>
    <div id="d5" style="display: none;">text 5</div>
    <div id="d6" style="display: none;">text 6</div>
    <div><span face="times" color="green" style="color: green; font-family: times;">
    <script type="text/javascript">// <![CDATA[
    divs = ['d1','d2','d3','d4','d5','d6'];
    function hideDivs() {
    for (var i=0; i<divs.length; i++)
    document.getElementById(divs[i]).style.display = 'none';
    }

    function showDiv() {
    hideDivs(); //hide them all before we show the next one.
    var randomDiv = divs[Math.floor(Math.random()*divs.length)];
    var div = document.getElementById(randomDiv).style.display =
    'block';

    setTimeout(showDiv,1000); //set a delay before showing the next div
    }


    showDiv();
    // ]]></script>
    </span></div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    If the JS isn't changing it, use CSS to style your divs:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    
    <style type="text/css">
    .playdiv{
    	width: 100px;
    	height: 100px;
    	border: 1px solid black;
    /*	use font to do your stuff      */
    }
    #d1{
    	background-color: red;
    }
    #d2{
    	background-color: green;
    }
    #d3{
    	background-color: blue;
    }
    #d4{
    	background-color: yellow;
    }
    #d5{
    	background-color: pink;
    }
    #d6{
    	background-color: Chocolate ;
    }
    </style>
    </head>
    
    <body>
    <div id="d1" class="playdiv">text 1</div>
    <div id="d2" class="playdiv">text 2</div>
    <div id="d3" class="playdiv">text 3</div>
    <div id="d4" class="playdiv">text 4</div>
    <div id="d5" class="playdiv">text 5</div>
    <div id="d6" class="playdiv">text 6</div>
    <span face="times" color="green" style="color: green; font-family: times;">The span</span>
    
    <script type="text/javascript">
    divs = ['d1','d2','d3','d4','d5','d6'];
    function hideDivs() {
    	for (var i=0; i<divs.length; i++)
    	document.getElementById(divs[i]).style.display = 'none';
    }
    
    function showDiv() {
    	hideDivs(); //hide them all before we show the next one.
    	var randomDiv = divs[Math.floor(Math.random()*divs.length)];
    	var div = document.getElementById(randomDiv).style.display =
    	'block';
    	setTimeout(showDiv,1000); //set a delay before showing the next div
    }
    showDiv();
    </script>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    helpanoob (01-05-2014)

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So helpful thank you!!


  •  

    Posting Permissions

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