Solved

Call a php custom function that return a <div> inside another <div>

Posted on 2016-08-22
23
35 Views
Last Modified: 2016-08-23
Hello;
With these codes below i create 6 <div> that arrange in 2 columns and 3 rows,and then call custom function writeMsg() that return a div inside each of 6 <div>,but the output has problem,and return <div> doesn't appear inside each one of created div.

Thanks for your help.

php codes

  <?php
 function writeMsg() {
 $tab ="<div class='functiontest'>";
 echo "test";
 $tab .="</div>";
 return $tab;
 }
 $test = writeMsg();
  echo "<div class='wrapper'>";
   for( $i=0; $i < 6; $i++ ){
    echo "<div>" . $test . "</div>";
   }
  echo "</div>";
  ?>

Open in new window


css
 .functiontest{
    width:200px;
    height:200px;
    display:block;
    background-color:#F4F5BD;
    float:left;
   }
   .wrapper{
    background-color:#F7ABAC;
    display:block;
    width:1000px;
    min-height:1000px;
    float:none;
    clear:both;
    box-sizing:border-box;
    }
   .wrapper div{
    width:330px;
    height:300px;
    border:1px solid black;
    float:left;
    margin-left:7px;
    margin-bottom:10px;
    display: block;
    background:#cccccc;
    text-align: center;
    }
   .wrapper div:nth-child(2n+1){
    clear:left;
    }

Open in new window

0
Comment
Question by:MOSTAGHASSI
  • 11
  • 11
23 Comments
 
LVL 142

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 41766394
I presume the "echo test" is in the wrong place... and it should be like this
this should work "better", and provide you the divs with the test X inside

  <?php
 function writeMsg( $msg ) {
 $tab ="<div class='functiontest'>";
 $tab .= $msg;
 $tab .="</div>";
 return $tab;
 }

  echo "<div class='wrapper'>";
   for( $i=0; $i < 6; $i++ ){
    echo "<div>" . writeMsg("test " . $i) . "</div>";
   }
  echo "</div>";
  ?>

Open in new window

0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766397
You're doing a double nesting here. writeMsg() crerates a div and then you wrap that inside echo "<div>" . $test . "</div>";

Your class='functiontest' dis become children of children of the wrapper div.

Simply look at the HTML output. What you have done is:

<div class='wrapper'>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
</div>

Open in new window


Did you include the css?
To me this shows up (zoomed out, shrinked view):

Divs
You get the table layout, but all the inner divs are double, because they are two nested divs each.

Only do:
   for( $i=0; $i < 6; $i++ ){
    echo $test;
   }

Open in new window


Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766400
Thanks,no the problem still exist,you can delete the echo test the <div class='functiontest'> does not appear inside the each one of 6 divs.
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766404
Yes it does, but your CSS .wrapper div{...background:#cccccc;...} overrides the styling of the functiontest class, most prominently it makes the divs grey. The .wrapper div styling is applied to any div inside a wrapper div.

Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766408
Ok, but how can solve it?
0
 
LVL 29

Accepted Solution

by:
Olaf Doschke earned 500 total points
ID: 41766410
For example simpler, straight forward:
<!doctype html>
<head>
<style>
   .functiontest{
    width:200px;
    height:200px;
    display:block;
    background-color:#F4F5BD;
    float:left;
   }
   .wrapper{
    background-color:#F7ABAC;
    display:block;
    width:1000px;
    min-height:1000px;
    float:none;
    clear:both;
    box-sizing:border-box;
    }
   .wrapper2{
    width:330px;
    height:300px;
    border:1px solid black;
    float:left;
    margin-left:7px;
    margin-bottom:10px;
    display: block;
    background:#cccccc;
    text-align: center;
    }
   .wrapper div:nth-child(2n+1){
    clear:left;
    }
</style>	
</head>
<body>  
<div class='wrapper'>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
</div>
</body>
</html>

Open in new window


Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766415
No,by you codes,i lose the 6divs.
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766425
To produce this:
<div class='wrapper'>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
<div class='wrapper2'><div class='functiontest'>test</div></div>
</div>

Open in new window


you obviously need this:

 for( $i=0; $i < 6; $i++ ){
    echo "<div class='wrapper2'>" . $test . "</div>";
   }

Open in new window


Yes, I first removed the divs, as I thought they were unneccessary.

Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766426
If is possible that arrange the return div from function and arrange in instead of 6divs gary inside the .wrapper it is ok also.
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766428
Sorry, can you rephrase that, please? I don't understand what you mean.

Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766430
My mean is this that suppose i have .wrapper how can call the function in this wrapper and arrange the output of fuction(which is a yellow div) inside the .wrapper 6 times in 2 columns and 3 rows and delete the 6div gray ?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766434
call a function inside the wrapper? I don't see how a html tag calls a function.

Could you just show the html you want?

Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766441
<div class='wrapper'>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
</div>

Open in new window


in 2 columns and 3rows
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766449
We had that and just in gray instead of yellow, though you complained about that solution. Then simply remove the .wrapper div part:

<!doctype html>
<head>
<style>
   .functiontest{
    width:200px;
    height:200px;
    display:block;
    background-color:#F4F5BD;
    float:left;
   }
   .wrapper{
    background-color:#F7ABAC;
    display:block;
    width:1000px;
    min-height:1000px;
    float:none;
    clear:both;
    box-sizing:border-box;
    }
   .wrapper div:nth-child(2n+1){
    clear:left;
    }
</style>	
</head>
<body>  
<div class='wrapper'>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
</div>
</body>
</html>

Open in new window


CSS:
.functiontest{
    width:200px;
    height:200px;
    display:block;
    background-color:#F4F5BD;
    float:left;
   }
   .wrapper{
    background-color:#F7ABAC;
    display:block;
    width:1000px;
    min-height:1000px;
    float:none;
    clear:both;
    box-sizing:border-box;
    }
   .wrapper div:nth-child(2n+1){
    clear:left;
    }

Open in new window


PHP (as already given):
<?php
 function writeMsg() {
 $tab ="<div class='functiontest'>";
 echo "test";
 $tab .="</div>";
 return $tab;
 }
 $test = writeMsg();
  echo "<div class='wrapper'>";
   for( $i=0; $i < 6; $i++ ){
    echo  $test; // <--no additional div here
   }
  echo "</div>";
  ?>

Open in new window


Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766471
Olaf,these version does not create 6divs,it just show a big yellow div inside the wrapper,but your above codes that contain wrapper2 and was regarding the question work well.
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766476
It is just looking like one big div, You can style this further with either border, margin, and/or padding to see the 6 divs. That it's 6 and not just one div is starting at you already, because it shows 6x "test" and it has the size of 2x3 divs.

Are you really Ok? You lack a lot of HTML and CSS knowledge it seems.

Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766477
i think your early css codes must be:

css

.functiontest{
    width:200px;
    height:200px;
    display:block;
    background-color:#F4F5BD;
    float:left;
   }
   .wrapper{
    background-color:#F7ABAC;
    display:block;
    width:1000px;
    min-height:1000px;
    float:none;
    clear:both;
    box-sizing:border-box;
    }
   .wrapper div:nth-child(2n+1){
    clear:left;
    }

Open in new window


this bring the 6 yellow divs but its arrangement is not ok,i think the php codes also must modify.
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766478
I made the yellow work as per your specification, I removed the necessity of the grey divs, also per you demand. What now?

Bye, Olaf.
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766479
>its arrangement is not ok

As I already said, work with the styling inside the functiontest CSS class, add padding or margin or border to separate these 6 divs.

See http://www.w3schools.com/css/css_boxmodel.asp on how margin, border and padding are cvontributing to the box model of HTML, this is very basic and fundamental HTML knowledge you should already have, time to learn that.

Bye, Olaf.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766480
Thanks a lot for your help,i got my answer.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766484
Appreciate for your help.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41766820
@Olaf,before your comment :
Are you really Ok? You lack a lot of HTML and CSS knowledge it seems.

and just above it i had accepted your answer,yes i'm ok,and my knowledge is enough that i set forth a question and consider the right answer,you know that on EE there is not obligated for a person that answer a question so if you think that my question are false,you can don't participate.

In addition your suggestion is not a good solution (while it works as my request in question)because you changed the php codes and basic my css,but i accepted because the output of your codes was the things that i wanted.

The best solution that i could find is:add a small codes above the css without changing the php codes,as below:
.wrapper div.functiontest{
    width:200px;
    height:200px;
    display:block;
    background-color:#F4F5BD;
    float:left;
   }

Open in new window


Thanks
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41766866
I have to assume you are able to change all you post, not only the CSS. You can only expect a solution fulfilling all your needs and limitations, if you also specify them, as simple as that. How should anyone know you can't change the PHP? It could also be vice versa, if the CSS is as given and not under your control, so what assumptions should one make before answering?

And on topic of the HTML: It seems to me your intermediate classless divs are just there to layout the whole HTML and that could also be done using margin and or padding of the functiontest divs. Besides that, you also asked for how it could work without these divs as you specified the HTML outcome you wished to have in your post ID: 41766441

Bye, Olaf.

To put it together for striaght comparison:

1. Your original and still same PHP code outputs this:
<div class='wrapper'>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
<div><div class='functiontest'>test</div></div>
</div>

Open in new window


In your post D: 41766441 you  said you wished HTML like this:
<div class='wrapper'>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
<div class='functiontest'>test</div>
</div>

Open in new window


There is an additional layer on DIVs you removed here, as I also did by changing the PHP.

So from my point of view you twice changed your mind of what HTML you want to look like a 2x3 grid in the course of this thread. That was causing some annoyance to me, as it's hard to hit a moving target. Besides that, there are lots of ways leading to rome, lots of solutions, fine you found one.

Bye, Olaf.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now