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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,287
    Thanks
    30
    Thanked 863 Times in 861 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.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    helpanoob (01-05-2014)

  4. #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
  •