Jump to content

Showing data from foreach into Marquee

salgergawi

By salgergawi
in PHP

 Share

Recommended Posts

salgergawi Newbie

salgergawi

Posted
Posted

I want to let the data shows in marquee but it shows only one record which is coming from foreach loop.

 

this par of code is show about 60 rows by foreach loop:
<?php
        if($reginoal_own_units<>0){
            $total_regional_units +=$reginoal_own_units;
            $count++;
            if($reginoal_own_units==1){
                $marq1= "you have ". $reginoal_own_units . " unit, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }else{
                $marq2= "you have ". $reginoal_own_units . " units, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }

?>

The HTML tag is the folowing out of the foreach loop:
<marquee bgcolor="lightblue" width="100px" hight="10px">
        <?php echo $marq1 . " " . $marq2; ?>
</marquee>

Link to comment
Share on other sites
salgergawi Newbie

salgergawi

Posted
  • Author
Posted

@dsonesuk i have added this code but still geting all record in one block how can i get them geting in them looping one each other, please look at the image

 

here is the part of the code: the class name is the CSS class="marquee"

<div class="marquee">
<p class="marquee">
<?php
        if($reginoal_own_units<>0){
            $total_regional_units +=$reginoal_own_units;
            $count++;
            if($reginoal_own_units==1){
                echo "you have ". $reginoal_own_units . " unit, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }else{
                echo "you have ". $reginoal_own_units . " units, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }

?>
</p>
</div>

 

how can i get them in a row, keep noting please these echo comes out from foreach loop.

marquee.png

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

I don't know why you included a flock of white birds, flying across pale blue sky, at a vast distance in a row of 3 for?

The reason you get one row each time is $marq1 will always overwrite the previous content and replace with the new current content.

You need to set $marq1 =$marq2=""; outside the loop the add '.=' to join content 

   if($reginoal_own_units==1){
                $marq1.= "you have ". $reginoal_own_units . " unit, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }else{
                $marq2.= "you have ". $reginoal_own_units . " units, ". $countryname ." and your revenue : ".round($regional_calc,0);
            }

ALL paragraphs, must be outside the loop, being block elements they will stack content above one another if within a loop. 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">

            .scroll-left {
                width: 1200px;
                height:170px;
                overflow: hidden;
                position: relative;
                background: white;
                color: black;
                border: 1px solid orange;
                margin: 0 auto;
            }

            .scroll-left p {
                position: absolute;
                width: auto;
                height: 100%;
                font-size:150px;
                line-height: 170px;
                margin: 0;
                text-align: center;
                white-space:nowrap;
                padding-right: 100%;
                padding-left:25%;
                /* Starting position */

                top: 0;
                left:100%;

                -moz-transform: translateX(0);
                -webkit-transform: translateX(0);
                transform: translateX(0);
                /* Apply animation to this element */

                -moz-animation: scroll-left 13s linear infinite;
                -webkit-animation: scroll-left 13s linear infinite;
                animation: scroll-left 13s linear infinite;/**/
            }
            /* Move it (define the animation) */

            @-moz-keyframes scroll-left {
                0% {
                    -moz-transform: translateX(0);
                }
                100% {
                    -moz-transform: translateX(-100%);
                }
            }

            @-webkit-keyframes scroll-left {
                0% {
                    -webkit-transform: translateX(0);
                }
                100% {
                    -webkit-transform: translateX(-100%);
                }
            }

            @keyframes scroll-left {
                0% {
                    -moz-transform: translateX(0);
                    /* Browser bug fix */

                    -webkit-transform: translateX(0);
                    /* Browser bug fix */

                    transform: translateX(0);
                }
                100% {
                    -moz-transform: translateX(-100%);
                    /* Browser bug fix */

                    -webkit-transform: translateX(-100%);
                    /* Browser bug fix */

                    transform: translateX(-100%);
                }
            }
        </style>
    </head>
    <body>

        <div class="scroll-left">
            <p>Start - The Quick Brown Fox Jumps over the lazy Dog and barks out Loudly - End</p>
        </div>

    </body>
</html>

 

Link to comment
Share on other sites
salgergawi Newbie

salgergawi

Posted
  • Author
Posted
On 12/23/2021 at 6:22 PM, dsonesuk said: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">

            .scroll-left {
                width: 1200px;
                height:170px;
                overflow: hidden;
                position: relative;
                background: white;
                color: black;
                border: 1px solid orange;
                margin: 0 auto;
            }

            .scroll-left p {
                position: absolute;
                width: auto;
                height: 100%;
                font-size:150px;
                line-height: 170px;
                margin: 0;
                text-align: center;
                white-space:nowrap;
                padding-right: 100%;
                padding-left:25%;
                /* Starting position */

                top: 0;
                left:100%;

                -moz-transform: translateX(0);
                -webkit-transform: translateX(0);
                transform: translateX(0);
                /* Apply animation to this element */

                -moz-animation: scroll-left 13s linear infinite;
                -webkit-animation: scroll-left 13s linear infinite;
                animation: scroll-left 13s linear infinite;/**/
            }
            /* Move it (define the animation) */

            @-moz-keyframes scroll-left {
                0% {
                    -moz-transform: translateX(0);
                }
                100% {
                    -moz-transform: translateX(-100%);
                }
            }

            @-webkit-keyframes scroll-left {
                0% {
                    -webkit-transform: translateX(0);
                }
                100% {
                    -webkit-transform: translateX(-100%);
                }
            }

            @keyframes scroll-left {
                0% {
                    -moz-transform: translateX(0);
                    /* Browser bug fix */

                    -webkit-transform: translateX(0);
                    /* Browser bug fix */

                    transform: translateX(0);
                }
                100% {
                    -moz-transform: translateX(-100%);
                    /* Browser bug fix */

                    -webkit-transform: translateX(-100%);
                    /* Browser bug fix */

                    transform: translateX(-100%);
                }
            }
        </style>
    </head>
    <body>

        <div class="scroll-left">
            <p>Start - The Quick Brown Fox Jumps over the lazy Dog and barks out Loudly - End</p>
        </div>

    </body>
</html>

 

Thank you very much, works perfect, and thank you for your advise on the replay above ...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...