Moving divs into other divs based on div numbers?

toolman · August 19, 2023, 8:04pm

Hi there,
I’m not sure if this a PHP, HTML or JS question, so please move if it’s in the incorrect forum.

I have the following PHP what outputs some 10 divs with some user details in. At the moment, they are in just a standard line one after the other.

What I would like to do is move each one into a specific div in a grid.

I’m not sure of the best way to do this - would i do this using PHP? Or could I output them all and then just move them with jQuery? If jQuery, I guess I would need to give each of the divs created with PHP a unique number-class?

In the below code, I would like to move each of of the 10 divs into one of the red boxes in the grid, so one red box has one user details div. Hope that makes sense.

Can anyone suggest a good way to do this?

Many thanks!

This is my PHP/HTML:

<!-- USER SECTION -->
 <section class="container-fluid bg-white community-users-wrapper">

<!--  user code -->
    <?php
// Define the number of random users you want to fetch
$number_of_users = 10;

// Include WordPress core files
require_once('wp-load.php');

// Query to fetch random users
$random_users_query = new WP_User_Query(array(
    'orderby' => 'rand',
    'number' => $number_of_users,
));

// Get the results
$random_users = $random_users_query->get_results();

// Loop through the random users and display their information
if (!empty($random_users)) {
    foreach ($random_users as $user) {
        $user_id = $user->ID;
        $user_profile_url = get_author_posts_url($user_id);
        $user_display_name = $user->display_name;
        $user_first_name = $user->user_firstname;
        $user_last_name = $user->user_lastname;
        $user_avatar_url = get_avatar_url($user_id);
		// Get the custom user role value from usermeta
        $selected_role = get_user_meta($user_id, 'selected_role', true);
        $first_letter = mb_substr($user_first_name, 0, 1);
        
        
        
        echo '<div class="community-user-wrap">
        <div class="box">
        <a href="#" class="circle">
        <img src="' . $user_avatar_url . '" alt="' . $user_display_name . '">
        </a>
    <div class="initials">';
    

        echo '<h6><a href="' . $user_profile_url . '">' . $first_letter . '</a></h6> 
    </div>
    <div class="hid-box">
      <h6><a href="' . $user_profile_url . '">' . $user_first_name . '</a></h6>' ;
//      <h3><a href="' . $user_profile_url . '">' . $user_first_name . ' ' . $user_last_name . '</a></h3>' ;
      
      // Display the custom user role based on the selected_role value
        if ($selected_role === 'primary') {
            echo '<p>Local Resident or Visitor</p>';
        } elseif ($selected_role === 'secondary') {
            echo '<p>Local Business</p>';
        } 
          
     //echo ' <p>Local Resident or Visitor</p>
    echo '</div>
  </div>
  <a href="#top" class="close">Close</a>
</div>
  ';
        
    }

} else {
    echo 'No random users found.';
}
    ?>
    <!-- end user code -->
    
    
    <!-- GRID -->
<div class="community-user-grid">
    <div class="user-item-1 user"> Grid box 1</div>
    <div class="user-item-2 user">  Grid box 2</div>
    <div class="user-item-3 user">  Grid box 3</div>
    <div class="user-item-4 user">  Grid box 4</div>
    <div class="user-item-5 user">  Grid box 5</div>
    <div class="user-item-6 user"> Grid box 6 </div>
    <div class="user-item-7 user"> Grid box 7 </div>
    <div class="user-item-7 user"> Grid box 8 </div>
    <div class="user-item-9 user">  Grid box 9</div>
    <div class="user-item-10 user">  Grid box 10</div>
    <div class="user-item-11"> Grid box 11 </div>
</div>    
    <!-- end GRID -->
   
  </section>  
<!-- end USER SECTION -->

and this is my SCSS:

/*********************************************************************************
COMMUNITY USERS
*********************************************************************************/

.community-users-wrapper{
    
           

            .community-user-wrap {
              display: flex;
              flex-direction: column;
              height: var(--my-height);
              max-width: 390px;
              min-width: 390px;
              border-radius: calc(var(--my-height) / 2) 0 0 calc(var(--my-height) / 2);
              overflow: hidden;

                .box {
              height: var(--my-height);
              display: flex;
              flex-direction: column;
              position: relative;
              flex: 1 0 100%;
                     &:hover img{
                        -webkit-box-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.5);
                        -moz-box-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.5);
                        box-shadow: 5px 50px -10px rgba(0, 0, 0, 0.5);
                    }


                    .initials{

                        h6{
                        background: $brand-green;
                        height: 40px;
                        width: 40px;
                        border-radius: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24px;
                        text-transform: uppercase;
                        color: $brand-purple;
                        font-family: $museo;
                        font-weight: $fw-500;
                        position: absolute;
                        z-index: 10;
                        pointer-events: none;
                        bottom: 0;
                        left: 70px;
                        border: 2px solid $brand-green-medium;
                        }
                    } 

            .circle {
              width: var(--my-height);
              height: var(--my-height);
              border-radius: 100px;
              position: absolute;
              left: 0;
              top: 0;
              z-index: 2;
              cursor: pointer;


                img{
                    border-radius: 100px;
                    border: 3px solid $brand-green;
                    transition: all .3s ease; 

                }

            }

              .community-user-image {
              border-radius: 100px;
              position: absolute;
              left: 65px;
              bottom: 0;
              z-index: 3;


            }

             .community-user-image:hover ~ .hid-box,
            .circle:hover ~ .hid-box,
            .hid-box:hover {
              transform: translateX(0%);
            }



             .hid-box {
              display: flex;
              flex-direction: column;
              position: relative;
              justify-content: center;
              flex: 1 0 100%;
              height: var(--my-height);
              overflow: auto;
              padding: 0 1rem 0 calc(var(--my-height) * 1.3);
              border-radius: calc(var(--my-height) / 2);
              background: $brand-blue-light;
              margin-right: 2rem;
              transform: translateX(-100%);
              transition: 1s ease;


                  h6, p {
                     margin: 0;
                    font-family: $work-sans;
            }

                 h6{
                     font-size: 20px;
                     font-weight: $fw-500;
                 }

              p {
              margin-top: 0;
                  font-size: 16px;
                font-weight: $fw-400!important;
            }
            }


            }
               .close {
              opacity: 0;
              pointer-events: none;
              transition: 0.1s ease;
            } 

            }
    
     
      
                    
/* GRID */
.community-user-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 0px;
grid-row-gap: 30px;
    
    [class^="user-item-"] {
        background: #ccc;
        padding: 30px;
        
        &.user{
            background: #ff0000;
        }
    } 
    
.user-item-1 {  grid-area: 1 / 1 / 2 / 2; }
.user-item-2 { grid-area: 1 / 3 / 2 / 4; }
.user-item-3 { grid-area: 1 / 6 / 2 / 7; }
.user-item-4 { grid-area: 1 / 8 / 2 / 9; }
.user-item-5 { grid-area: 3 / 2 / 4 / 3; }
.user-item-6 { grid-area: 3 / 7 / 4 / 8; }
.user-item-7 { grid-area: 5 / 1 / 6 / 2; }
.user-item-8 { grid-area: 5 / 8 / 6 / 9; }
.user-item-9 { grid-area: 7 / 2 / 8 / 3; }
.user-item-10 { grid-area: 7 / 7 / 8 / 8; }
.user-item-11 { grid-area: 2 / 3 / 7 / 7; }
                
 /* end GRID */
     
            
    }



}
            /* testing small screen */
            @media screen and (max-width: 800px) {
              .community-user-wrap {
                overflow: visible;
                margin: 1rem;

                  .box {
                display: block;

                  .hid-box {
                display: grid;
                place-items: center;
                align-content: center;
                aspect-ratio: 1 / 1;
                height: auto;
                max-width: 300px;
                padding: 1rem;
                z-index: 4;
                transform: scale(0);
                transform-origin: 0 0;
                box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
                opacity: 0.9;
              }
              }
                }


              .community-user-image:hover ~ .hid-box,
              .circle:hover ~ .hid-box,
              .hid-box:hover {
                transform: scale(100%);
              }

              @media (any-hover: none) {
                .community-user-wrap {
                  position: relative;
                }
                .box:hover + .close {
                  position: absolute;
                  top: 1rem;
                  left: 1rem;
                  text-align: center;
                  z-index: 999;
                  color: red;
                  opacity: 1;
                  pointer-events: initial;
                }
              }
                
                

}

OR the compiled CSS:

/*********************************************************************************
COMMUNITY USERS
*********************************************************************************/
.community-users-wrapper {
  /* GRID */ }
  .community-users-wrapper .community-user-wrap {
    display: flex;
    flex-direction: column;
    height: var(--my-height);
    max-width: 390px;
    min-width: 390px;
    border-radius: calc(var(--my-height) / 2) 0 0 calc(var(--my-height) / 2);
    overflow: hidden; }
    .community-users-wrapper .community-user-wrap .box {
      height: var(--my-height);
      display: flex;
      flex-direction: column;
      position: relative;
      flex: 1 0 100%; }
      .community-users-wrapper .community-user-wrap .box:hover img {
        -webkit-box-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.5);
        box-shadow: 5px 50px -10px rgba(0, 0, 0, 0.5); }
      .community-users-wrapper .community-user-wrap .box .initials h6 {
        background: #3defc0;
        height: 40px;
        width: 40px;
        border-radius: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        text-transform: uppercase;
        color: #4a2a85;
        font-family: museo, serif;
        font-weight: 500;
        position: absolute;
        z-index: 10;
        pointer-events: none;
        bottom: 0;
        left: 70px;
        border: 2px solid #20c79b; }
      .community-users-wrapper .community-user-wrap .box .circle {
        width: var(--my-height);
        height: var(--my-height);
        border-radius: 100px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        cursor: pointer; }
        .community-users-wrapper .community-user-wrap .box .circle img {
          border-radius: 100px;
          border: 3px solid #3defc0;
          transition: all .3s ease; }
      .community-users-wrapper .community-user-wrap .box .community-user-image {
        border-radius: 100px;
        position: absolute;
        left: 65px;
        bottom: 0;
        z-index: 3; }
      .community-users-wrapper .community-user-wrap .box .community-user-image:hover ~ .hid-box,
      .community-users-wrapper .community-user-wrap .box .circle:hover ~ .hid-box,
      .community-users-wrapper .community-user-wrap .box .hid-box:hover {
        transform: translateX(0%); }
      .community-users-wrapper .community-user-wrap .box .hid-box {
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        flex: 1 0 100%;
        height: var(--my-height);
        overflow: auto;
        padding: 0 1rem 0 calc(var(--my-height) * 1.3);
        border-radius: calc(var(--my-height) / 2);
        background: #f1eff9;
        margin-right: 2rem;
        transform: translateX(-100%);
        transition: 1s ease; }
        .community-users-wrapper .community-user-wrap .box .hid-box h6, .community-users-wrapper .community-user-wrap .box .hid-box p {
          margin: 0;
          font-family: work-sans, sans-serif; }
        .community-users-wrapper .community-user-wrap .box .hid-box h6 {
          font-size: 20px;
          font-weight: 500; }
        .community-users-wrapper .community-user-wrap .box .hid-box p {
          margin-top: 0;
          font-size: 16px;
          font-weight: 400 !important; }
    .community-users-wrapper .community-user-wrap .close {
      opacity: 0;
      pointer-events: none;
      transition: 0.1s ease; }
  .community-users-wrapper .community-user-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 30px;
    /* end GRID */ }
    .community-users-wrapper .community-user-grid [class^="user-item-"] {
      background: #ccc;
      padding: 30px; }
      .community-users-wrapper .community-user-grid [class^="user-item-"].user {
        background: #ff0000; }
    .community-users-wrapper .community-user-grid .user-item-1 {
      grid-area: 1 / 1 / 2 / 2; }
    .community-users-wrapper .community-user-grid .user-item-2 {
      grid-area: 1 / 3 / 2 / 4; }
    .community-users-wrapper .community-user-grid .user-item-3 {
      grid-area: 1 / 6 / 2 / 7; }
    .community-users-wrapper .community-user-grid .user-item-4 {
      grid-area: 1 / 8 / 2 / 9; }
    .community-users-wrapper .community-user-grid .user-item-5 {
      grid-area: 3 / 2 / 4 / 3; }
    .community-users-wrapper .community-user-grid .user-item-6 {
      grid-area: 3 / 7 / 4 / 8; }
    .community-users-wrapper .community-user-grid .user-item-7 {
      grid-area: 5 / 1 / 6 / 2; }
    .community-users-wrapper .community-user-grid .user-item-8 {
      grid-area: 5 / 8 / 6 / 9; }
    .community-users-wrapper .community-user-grid .user-item-9 {
      grid-area: 7 / 2 / 8 / 3; }
    .community-users-wrapper .community-user-grid .user-item-10 {
      grid-area: 7 / 7 / 8 / 8; }
    .community-users-wrapper .community-user-grid .user-item-11 {
      grid-area: 2 / 3 / 7 / 7; }

/* testing small screen */
@media screen and (max-width: 800px) {
  .community-user-wrap {
    overflow: visible;
    margin: 1rem; }
    .community-user-wrap .box {
      display: block; }
      .community-user-wrap .box .hid-box {
        display: grid;
        place-items: center;
        align-content: center;
        aspect-ratio: 1 / 1;
        height: auto;
        max-width: 300px;
        padding: 1rem;
        z-index: 4;
        transform: scale(0);
        transform-origin: 0 0;
        box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
        opacity: 0.9; }

  .community-user-image:hover ~ .hid-box,
  .circle:hover ~ .hid-box,
  .hid-box:hover {
    transform: scale(100%); } }
@media screen and (max-width: 800px) and (any-hover: none) {
  .community-user-wrap {
    position: relative; }

  .box:hover + .close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    text-align: center;
    z-index: 999;
    color: red;
    opacity: 1;
    pointer-events: initial; } }

This is what I am trying to create:

Also, I couldn’t find a way to create a “fiddle” for this. Are there any online tools I can use similar to JSFiddle but for PHP?

Thanks again!

SamA74 · August 19, 2023, 8:17pm

If the resulting HTML is to remain static once rendered to the page, go with PHP.
If the HTML needs any interaction or change “on the fly” then you need javascript.

That would be an ID as oppsed to a class. But IDs can’t begin with a number, though they may conatin a number.

It may help to show the HTML you intend to end up with.

ralphm · August 19, 2023, 10:41pm

As a side note, your CSS doesn’t look particularly well compiled, as it starts with nesting.

Anyhow, as said, it would be handy to see the HTML output. But you can easily place your items within your grid areas with CSS. You have everything set up to do that.

Drummin · August 20, 2023, 12:33am

Just increment the division user-item number in the foreach loop. Here’s a simplified version so it’s easier to see. You can add all your display extras where the Grid Box is displayed.

<?php    
echo '<!-- USER SECTION --> 
<section class="container-fluid bg-white community-users-wrapper">    
	<!-- GRID -->
	<div class="community-user-grid">';	

// Loop through the random users and display their information
if(!empty($random_users)){    
	$n=1;
	foreach($random_users as $user){
	
		echo ' <div class="user-item-'. $n .' user"> Grid box '. $n .'</div>';	
		$n++;					
	}
} else {
    echo 'No random users found.';
}								
							
	echo '<div class="user-item-11"> Grid box 11 </div>
	</div>    
	<!-- end GRID -->
   
</section>
<!-- end USER SECTION -->	 
';

?>

toolman · August 20, 2023, 6:01am

Thanks for the replies.

This is the HTML that is output:

It’s also included in the PHP above if that helps with also the HTML for the “user details” that is output in the PHP.

Regarding the CSS, I will tidy this up.

The PHP from @Drummin makes sense with the increment of the user-item- class. I can switch to Ids which would probably be better, but I am not sure how to then get the items into the HTML grid after being output using the PHP.

Many thanks for your help.

Drummin · August 20, 2023, 8:00am

I think the “CSS Class” works just fine as it is simply defining the grid position. As for the “items”, they are already are in that grid pattern IF you are using the css. Note I used the compiled css version for testing. Yes, the css might need some tweaking to look as expected but each “loop” or user record is in the designated grid box. I’m just not setup to do a full WP test so I looped through a dummy array of 10 records for the foreach loop test.

Adding your code back into the sample would look like this but I make no promise on this untested code.

<?php

echo '<!-- USER SECTION --> 
<section class="container-fluid bg-white community-users-wrapper">    
	<!-- GRID -->
	<div class="community-user-grid">';	

	// Loop through the random users and display their information
	if(!empty($random_users)){    
		$n=1;
		foreach($random_users as $user){
	
			
			$user_id = $user->ID;
			$user_profile_url = get_author_posts_url($user_id);
			$user_display_name = $user->display_name;
			$user_first_name = $user->user_firstname;
			$user_last_name = $user->user_lastname;
			$user_avatar_url = get_avatar_url($user_id);
			// Get the custom user role value from usermeta
			$selected_role = get_user_meta($user_id, 'selected_role', true);
			$first_letter = mb_substr($user_first_name, 0, 1);
			
			echo ' <div class="user-item-'. $n .' user">';				
				echo '<div class="community-user-wrap">
					<div class="box">
						<a href="#" class="circle"><img src="' . $user_avatar_url . '" alt="' . $user_display_name . '"></a>    
						<div class="initials">
							<h6><a href="' . $user_profile_url . '">' . $first_letter . '</a></h6> 
						</div>
						<div class="hid-box">
							<h6><a href="' . $user_profile_url . '">' . $user_first_name . '</a></h6>' ;
							if ($selected_role === 'primary') {
								echo '<p>Local Resident or Visitor</p>';
							} elseif ($selected_role === 'secondary') {
								echo '<p>Local Business</p>';
							}		
						echo '</div>
					</div>
					<a href="#top" class="close">Close</a>
				</div>';
			
			echo '</div>';	
					$n++;					
		}
	} else {
	    echo 'No random users found.';
	}								
							
	echo '<div class="user-item-11"> Grid box 11 </div>
	</div>    
	<!-- end GRID -->
   
</section>
<!-- end USER SECTION -->	 
';

?>

toolman · August 20, 2023, 10:29am

Awesome, thank you very much! That has worked fantastically!

This is what I now have:

So I will have a tidy up of the CSS as the widths are pushing it out of the container/body width.

Thanks again for your help!

system · November 19, 2023, 5:29pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.