• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Display x of more than x lines in <div> block(s) on html page randomly

Jean

New Coder
I have two DIV Blocks with always more than 5 Lines of text per DIV Block.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<style>

body {
background: #2196f3;
color: #ffffff;
}

.div1 {
background-color: #2196f3;
}

.div2 {
background-color: #2196f3;
}

</style>
</head>

<body>

<div class="w3-container w3-center w3-padding">
<b>DIV1</b>
<div class="div1">
<p>Div Text1.1</p>
<p>Div Text1.2</p>
<p>Div Text1.3</p>
<p>Div Text1.4</p>
<p>Div Text1.5</p>
<p>Div Text1.6</p>
<p>Div Text1.7</p>
<p>Div Text1.8</p>
<p>Div Text1.9</p>
</div>

<div class="w3-container w3-center w3-padding">
<b>DIV2</b>
<div class="div2">
<p>Div Text2.1</p>
<p>Div Text2.2</p>
<p>Div Text2.3</p>
<p>Div Text2.4</p>
<p>Div Text2.5</p>
<p>Div Text2.6</p>
<p>Div Text2.7</p>
<p>Div Text2.8</p>
<p>Div Text2.9</p>
</div>


</body>
</html>

HOW can I shuffle the lines in both DIV bLocks that every time browser is reloaded 5 different from x Lines are displayed on screen?

Refresh/Reload browser

Code:
<div class="w3-container w3-center w3-padding">
<b>DIV1</b>
<div class="div1">
<p>Div Text1.1</p>
<p>Div Text1.2</p>
<p>Div Text1.4</p>
<p>Div Text1.6</p>
<p>Div Text1.7</p>
</div>

<div class="w3-container w3-center w3-padding">
<b>DIV2</b>
<div class="div2">
<p>Div Text2.3</p>
<p>Div Text2.4</p>
<p>Div Text2.6</p>
<p>Div Text2.7</p>
<p>Div Text2.9</p>
</div>
... and so on.

Is there a script for this?

P.S. I`m not a coder. I have no knowledge about this. It would be very helpful if someone could provide me with a working solution.
 
Last edited by a moderator:

simong1993

Active Coder
Staff Team
Guardian
Hey there, so this isn't going to happen in HTML, i could in Jquery, Java, PHP to name a few but for me i am going to do this in PHP. I have also sorted out your code as you was missing some end tags :D also you need to run this on a localhost of a server or it will not work and save the file with .php at the end :D


PHP:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <?PHP
            $Div1 = array("Div Text1.1", "Div Text1.2", "Div Text1.3", "Div Text1.4", "Div Text1.5");
            $Div2 = array("Div Text2.1", "Div Text2.2", "Div Text2.3", "Div Text2.4", "Div Text2.5");
            $Div1rand = array_rand($Div1, 4);
            $Div2rand = array_rand($Div2, 4);
        ?>
            
        <style>

            body {
            background: #2196f3;
            color: #ffffff;
            }

            .div1 {
            background-color: #2196f3;
            }

            .div2 {
            background-color: #2196f3;
            }

        </style>
    </head>

    <body>

        <div class="w3-container w3-center w3-padding">
            <b>DIV1</b>
            <div class="div1">
                <?PHP
                    echo "<p>Div " . $Div1[$Div1rand[0]] . "</p>";
                    echo "<p>Div " . $Div1[$Div1rand[1]] . "</p>"; 
                    echo "<p>Div " . $Div1[$Div1rand[2]] . "</p>"; 
                    echo "<p>Div " . $Div1[$Div1rand[3]] . "</p>";   
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
            <b>DIV2</b>
            <div class="div2">
                <?PHP
                    echo "<p>Div " . $Div2[$Div2rand[0]] . "</p>";
                    echo "<p>Div " . $Div2[$Div2rand[1]] . "</p>"; 
                    echo "<p>Div " . $Div2[$Div2rand[2]] . "</p>"; 
                    echo "<p>Div " . $Div2[$Div2rand[3]] . "</p>";   
                ?>
            </div>
        </div>


    </body>
</html>

What i am doing is storing your text into a PHP array then randomly echoing the data
 

Jean

New Coder
Hi Simon!

Works great! Thanks very much!

I`ve tried to adapt that code to my needs with further div.

I`ve tried to create a third DIV to shuffle only one of x, but it`s not working. I`ve changed several parameters but without success.

And I would like to ask if it would be possible to shuffle css style via extern style too?

This is my adapted code:
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://domain.com/css/style1.css">
        <link rel="stylesheet" href="https://domain.com/css/style2.css">
        <link rel="stylesheet" href="https://domain.com/css/style3.css">
      
        <?PHP
            $Div1 = array("Div Text1.1", "Div Text1.2", "Div Text1.3", "Div Text1.4", "Div Text1.5", "Div Text1.6", "Div Text1.7", "Div Text1.8");
            $Div2 = array("Div Text2.1", "Div Text2.2", "Div Text2.3", "Div Text2.4", "Div Text2.5", "Div Text2.6", "Div Text2.7", "Div Text2.8");
            $Div3 = array("Div Text3.1", "Div Text3.2", "Div Text3.3", "Div Text3.4", "Div Text3.5", "Div Text3.6", "Div Text3.7", "Div Text3.8");
            $Div1rand = array_rand($Div1, 5);
            $Div2rand = array_rand($Div2, 5);
            $Div3rand = array_rand($Div3, 1);
        ?>
          
      
    </head>

    <body>

        <div class="w3-container w3-center w3-padding">
            <b>DIV1</b>
            <div class="div1">
                <?PHP
                    echo "<p>" . $Div1[$Div1rand[0]] . "</p>";
                    echo "<p>" . $Div1[$Div1rand[1]] . "</p>";
                    echo "<p>" . $Div1[$Div1rand[2]] . "</p>";
                    echo "<p>" . $Div1[$Div1rand[3]] . "</p>";
                    echo "<p>" . $Div1[$Div1rand[4]] . "</p>";
                                      
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
            <b>DIV2</b>
            <div class="div2">
                <?PHP
                    echo "<p>" . $Div2[$Div2rand[0]] . "</p>";
                    echo "<p>" . $Div2[$Div2rand[1]] . "</p>";
                    echo "<p>" . $Div2[$Div2rand[2]] . "</p>";
                    echo "<p>" . $Div2[$Div2rand[3]] . "</p>";
                    echo "<p>" . $Div2[$Div2rand[4]] . "</p>";
                                      
                ?>
            </div>
        </div>
      
        <div class="w3-container w3-center w3-padding">
            <b>DIV3</b>
            <div class="div3">
                <?PHP
                    echo "<p>" . $Div3[$Div3rand[1]] . "</p>";                                      
                ?>
            </div>
        </div>

</body>
</html>

Would be perfect if you could help me further.
 
Last edited by a moderator:

simong1993

Active Coder
Staff Team
Guardian
Please put your code in BBcode as it make its so much easier to read :D

I havent copied and pasted your code this time, instead ive used the one i sent you as i didnt want to indent it again, Also now your using 1 div its best to use shuffle instead of random.

PHP:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <?PHP
            $Div1 = array("Div Text1.1", "Div Text1.2", "Div Text1.3", "Div Text1.4", "Div Text1.5");
            $Div2 = array("Div Text2.1", "Div Text2.2", "Div Text2.3", "Div Text2.4", "Div Text2.5");
            $Div3 = array("Div Text3.1", "Div Text3.2", "Div Text3.3", "Div Text3.4", "Div Text3.5");
            $style = array("<link rel='stylesheet' href='https://domain.com/css/style1.css'>", "<link rel='stylesheet' href='https://domain.com/css/style2.css'>", "<link rel='stylesheet' href='https://domain.com/css/style3.css'>");

            shuffle($Div1);
            shuffle($Div2);
            shuffle($Div3);
            shuffle($style); 

            echo $style[0]

        ?>
            
        <style>

            body {
            background: #2196f3;
            color: #ffffff;
            }

            .div1 {
            background-color: #2196f3;
            }

            .div2 {
            background-color: #2196f3;
            }

        </style>
    </head>

    <body>

        <div class="w3-container w3-center w3-padding">
            <b>DIV1</b>
            <div class="div1">
                <?PHP
                    echo "<p>Div " . $Div1[0] . "</p>";
                    echo "<p>Div " . $Div1[1] . "</p>";
                    echo "<p>Div " . $Div1[2] . "</p>";
                    echo "<p>Div " . $Div1[3] . "</p>";   
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
            <b>DIV2</b>
            <div class="div2">
                <?PHP
                    echo "<p>Div " . $Div2[0] . "</p>";
                    echo "<p>Div " . $Div2[1] . "</p>";
                    echo "<p>Div " . $Div2[2] . "</p>";
                    echo "<p>Div " . $Div2[3] . "</p>";   
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
        <b>DIV3</b>
            <div class="div3">
                <?PHP
                    echo "<p>" . $Div3[0] . "</p>";
                ?>
            </div>
        </div>


    </body>
</html>

This is the working code and if you load up your source when viewing then site and refresh the page you will see the style sheet link keep changing :)
 

Jean

New Coder
Please put your code in BBcode as it make its so much easier to read :D

I havent copied and pasted your code this time, instead ive used the one i sent you as i didnt want to indent it again, Also now your using 1 div its best to use shuffle instead of random.

PHP:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <?PHP
            $Div1 = array("Div Text1.1", "Div Text1.2", "Div Text1.3", "Div Text1.4", "Div Text1.5");
            $Div2 = array("Div Text2.1", "Div Text2.2", "Div Text2.3", "Div Text2.4", "Div Text2.5");
            $Div3 = array("Div Text3.1", "Div Text3.2", "Div Text3.3", "Div Text3.4", "Div Text3.5");
            $style = array("<link rel='stylesheet' href='https://domain.com/css/style1.css'>", "<link rel='stylesheet' href='https://domain.com/css/style2.css'>", "<link rel='stylesheet' href='https://domain.com/css/style3.css'>");

            shuffle($Div1);
            shuffle($Div2);
            shuffle($Div3);
            shuffle($style);

            echo $style[0]

        ?>
           
        <style>

            body {
            background: #2196f3;
            color: #ffffff;
            }

            .div1 {
            background-color: #2196f3;
            }

            .div2 {
            background-color: #2196f3;
            }

        </style>
    </head>

    <body>

        <div class="w3-container w3-center w3-padding">
            <b>DIV1</b>
            <div class="div1">
                <?PHP
                    echo "<p>Div " . $Div1[0] . "</p>";
                    echo "<p>Div " . $Div1[1] . "</p>";
                    echo "<p>Div " . $Div1[2] . "</p>";
                    echo "<p>Div " . $Div1[3] . "</p>";  
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
            <b>DIV2</b>
            <div class="div2">
                <?PHP
                    echo "<p>Div " . $Div2[0] . "</p>";
                    echo "<p>Div " . $Div2[1] . "</p>";
                    echo "<p>Div " . $Div2[2] . "</p>";
                    echo "<p>Div " . $Div2[3] . "</p>";  
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
        <b>DIV3</b>
            <div class="div3">
                <?PHP
                    echo "<p>" . $Div3[0] . "</p>";
                ?>
            </div>
        </div>


    </body>
</html>

This is the working code and if you load up your source when viewing then site and refresh the page you will see the style sheet link keep changing :)
Hi Simon!

Works great again ! Thanks very much again!


Sorry for the code. I will use BBcode in the future.

Would it be possible to create a further block = DIV4 that is visible once and once not? I mean the whole block not some lines of x like in DIV 1 and Div2.

So if someone come to website the whole DIV4 is visible (or not) and if the same or other refresh browser DIV4 is visible (or not)?

[CODE lang="rich" title="DIV4 whole block once visible once not"]<div class="w3-container w3-center w3-padding">
<b>DIV4</b>
<div class="div4">
<p>Div Text4.1</p>
<p>Div Text4.2</p>
<p>Div Text4.3</p>
<p>Div Text4.4</p>
<p>Div Text4.5</p>
</div>
</div>[/CODE]

Would be perfect if you could help me further again.
 

simong1993

Active Coder
Staff Team
Guardian
Give this a try :)


PHP:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <?PHP
            $Div1 = array("Div Text1.1", "Div Text1.2", "Div Text1.3", "Div Text1.4", "Div Text1.5");
            $Div2 = array("Div Text2.1", "Div Text2.2", "Div Text2.3", "Div Text2.4", "Div Text2.5");
            $Div3 = array("Div Text3.1", "Div Text3.2", "Div Text3.3", "Div Text3.4", "Div Text3.5");
            $Div4 = array("      
                <div class='w3-container w3-center w3-padding'>
                    <b>DIV4</b>
                    <div class='div4'>
                        <p>I am DIV4 </p>
                    </div>
                </div>
            ", " ");
            $style = array("<link rel='stylesheet' href='https://domain.com/css/style1.css'>", "<link rel='stylesheet' href='https://domain.com/css/style2.css'>", "<link rel='stylesheet' href='https://domain.com/css/style3.css'>");

            shuffle($Div1);
            shuffle($Div2);
            shuffle($Div3);
            shuffle($Div4);
            shuffle($style);

            echo $style[0]

        ?>
           
        <style>

            body {
            background: #2196f3;
            color: #ffffff;
            }

            .div1 {
            background-color: #2196f3;
            }

            .div2 {
            background-color: #2196f3;
            }

        </style>
    </head>

    <body>

        <div class="w3-container w3-center w3-padding">
            <b>DIV1</b>
            <div class="div1">
                <?PHP
                    echo "<p>Div " . $Div1[0] . "</p>";
                    echo "<p>Div " . $Div1[1] . "</p>";
                    echo "<p>Div " . $Div1[2] . "</p>";
                    echo "<p>Div " . $Div1[3] . "</p>";  
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
            <b>DIV2</b>
            <div class="div2">
                <?PHP
                    echo "<p>Div " . $Div2[0] . "</p>";
                    echo "<p>Div " . $Div2[1] . "</p>";
                    echo "<p>Div " . $Div2[2] . "</p>";
                    echo "<p>Div " . $Div2[3] . "</p>";  
                ?>
            </div>
        </div>

        <div class="w3-container w3-center w3-padding">
        <b>DIV3</b>
            <div class="div3">
                <?PHP
                    echo "<p>" . $Div3[0] . "</p>";
                ?>
            </div>
        </div>


        <?PHP
            echo $Div4[0];
        ?>


    </body>
</html>
 

Jean

New Coder
Hi Simon!

Works great again ! Thanks very much!


Sorry for late reply.

Would it be possible to generate random site AND freeze/block this result for the user who opened the url?

Example: User open url and get random result. But this random result does not change if this user refresh browser or come back later.

Would this or similar solution be possible maybe via IP/Cookie or whatever?

Would be perfect if you could help me further again.
 

simong1993

Active Coder
Staff Team
Guardian
Hiya Jean,

Your on the right track with cookies. So what you will want to do now is a IF query so IF Cookie empty give us a random option then store this random option into a cookie for next time. You will how ever need a cookie policy so bare that in mind :D

Have a read off https://www.w3schools.com/php/php_cookies.asp , it will give you a kick start but of course if you need any help or something does not make sense i will be happy to help :D
 

Jean

New Coder
Hi Simon!

Thanks for that link.

I read that information like a few other ones but I do not understand how to do it.

Could you please create a sample code for me I could use in that great code you already wrote for me?

Thanks

Jean
 

Jean

New Coder
Hi Simon!

Hope you are great!

Would it be possible to create a further block = DIV5 that is visible once and once not AND if visible random content?

Status 1: Not visible

Status 2: Visible and random "Div Text5.1", "Div Text5.2", "Div Text5.3", "Div Text5.4", "Div Text5.5"


I`ve tried a lot but all not working.

Thanks

Jean
 

simong1993

Active Coder
Staff Team
Guardian
Have a read of the link i sent you :D Here is a example -

Code:
<?php

    $Div5 = 1; 

    setcookie($Div5, time() + (86400 * 30), "/"); // 86400 = 1 day

?>

<html>

<body>



<?php

    if($_COOKIE[$Div5] != 1) {

      echo "Put Div 5 in here";

    }

?>

</body>
</html>

I haven't tested but that should work
 

Jean

New Coder
Hi Simon!

I`ve tried code for ONLY DIV5 and website was "working" = random every F5.
I`ve set cookie to 120 seconds to test but still working every F5 under 120 seconds.
So cookie is not working like I use it in code.

AND if I try to adapt your code to all other 4 DIV`s website it`s not working anymore = Server Error 500

[CODE title="Cookie, DIV5 and DIV6"]<!DOCTYPE html>
<html lang="en">
<head>
<title>Simon, the greatest!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<?PHP

$Div1 = 1;
$Div2 = 1;
$Div3 = 1;
$Div4 = 1;
$Div5 = 1;

setcookie($Div1, $Div2, $Div3, $Div4, $Div5, time() + (120 * 30), "/"); // 86400 = 1 day

$Div1 = array("Div Text1.1", "Div Text1.2", "Div Text1.3", "Div Text1.4", "Div Text1.5");
$Div2 = array("Div Text2.1", "Div Text2.2", "Div Text2.3", "Div Text2.4", "Div Text2.5");
$Div3 = array("Div Text3.1", "Div Text3.2", "Div Text3.3", "Div Text3.4", "Div Text3.5");
$Div4 = array("
<div class='w3-container w3-center w3-padding'>
<b>DIV4</b>
<div class='div4'>
<p>I am DIV4 </p>
</div>
</div>
", " ");


shuffle($Div1);
shuffle($Div2);
shuffle($Div3);
shuffle($Div4);
shuffle($Div5);



?>

<style>

body {
background: #2196f3;
color: #ffffff;
}


</style>
</head>

<body>

<div class="container mt-3">
<b>DIV1</b>
<div class="div1">
<?PHP
echo "<p>Div " . $Div1[0] . "</p>";
echo "<p>Div " . $Div1[1] . "</p>";
echo "<p>Div " . $Div1[2] . "</p>";
echo "<p>Div " . $Div1[3] . "</p>";
?>
</div>
</div>

<div class="container mt-3">
<b>DIV2</b>
<div class="div2">
<?PHP
echo "<p>Div " . $Div2[0] . "</p>";
echo "<p>Div " . $Div2[1] . "</p>";
echo "<p>Div " . $Div2[2] . "</p>";
echo "<p>Div " . $Div2[3] . "</p>";
?>
</div>
</div>

<div class="container mt-3">
<b>DIV3</b>
<div class="div3">
<?PHP
echo "<p>" . $Div3[0] . "</p>";
?>
</div>
</div>

<div class="container mt-3">
<b>DIV4</b>
<?PHP
echo $Div4[0];
?>
</div>
</div>

<?php

<div class="container mt-3">
<b>DIV5</b>
if($_COOKIE[$Div5] != 1) {

echo "Put Div 5 in here";

}
</div>
</div>
?>

</body>
</html>[/CODE]

And my question from #10 was:

Would it be possible to create a further block = DIV6 like DIV1 that is visible once and once not AND if visible random content?

DIV1 NOW is ALWAYS visible and random content.

Thanks
 

Top