Hey all!
Trying to achieve a bootstrap style card that repeats itself vertically rather than horizontally. So far online I’ve horizontal. Does anyone know how to have a card repeat column style instead of row style?
Thank ya!!!
Well, vertical IS row style. If you create a DIV and have cards in it, just make the DIV the same width size as the cards and they will fall one after another. Or, create a DIV and have each card be a new row. Either of these should work.
1 Like
Thank ya for the help @ErnieAlex 
I found an example of an infinite loop which is what I want. Here is code that I made up(with the help of tutorials) and wanted to see if this is right. I want the card to appear like a blog timeline post and echo whatever is called from the form:
while(true) {
//code to be executed
}
<?php
while (true) {
echo "card";
}
?>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<form method="post" enctype="multipart/form-data">
<textarea rows="4" cols="50" name="comment" form="usrform">Comment</textarea>
Upload Image:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<button type="submit" form="nameform" value="Submit">Submit</button>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span style="font-size: 48px; color: #C0C0C0;">
<i class="fas fa-video"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<form method="post" enctype="multipart/form-data">
<div class="col-lg-10">
<input type="text" name="page_url" class="form-control" id="input_url" placeholder="Page embed URL" value="<?php echo !empty($userData['_url'])?$userData['url']:''; ?>">
<input type="submit" class="btn btn-primary" name="proSubmit">
</div>
</form>
<div class="card">
<div class="card-body">
<?php echo($_POST['comment']); ?>;
<?php echo($_POST['fileToUpload']); ?>;
<?php echo($_POST['page_url']); ?>;
</div>
</div>Well, you can not have an infinite loop. The browser would fill up and break. You are limited on how much data can be sent to the browser. The card looks fine. The form is fine, too. Not sure what you are asking help for. Let’s cover it a bit further.
You would have one user that enters data from the form like in your example you posted.
That would be saved into a database so it is kept for all other users to see.
Then, the card would be displayed in the list of posts.
You can’t loop around forever. First, it would use up all the memory in each user’s computer.
Also, since you post data constantly as users post data. So, you would probably only show the last posts, maybe the last 20 or so. Since you did not mention what you are trying to create, we have no idea on how to help. Perhaps you can give us an idea what you want to display these cards for? Ernie
1 Like
@ErnieAlex my goal is to create a blog post timeline for my site users.
Users can upload images and/or write comments and when they hit submit the results will end up on the card. I’m also letting users embed videos from other sites as well.
If you ever heard of Tumblr that is my structure inspiration.
I’m still learning my way around PHP so bear with me😊
So a chatroom? Well, if you want to do a chatroom, there are tons of free templates around for that.
Here is one: Free Chatroom PHP template
If you want to add this functionality to your current site, there are a lot of things to think about. Uploading images and text is easy. Just a standard form with handle that. Storing the data should be done in a database. ( Not images but, pointers to the images or video. ) Then, you have to display them which is easy to do. Most likely you have many different users on the site at one time. Therefore, you would need to have some JS (Javascript) that checks the database on a regular basis to check for new posts and to load them as they occur. You would also need to have an admin section to allow for removing posts if needed. The actual card display is easy as Bootstrap will take care of most of that. You of course can add some CSS to make them look the way you want them.
Well, once you get it all started, let us know what parts you need help with. Good luck
1 Like
Nope not a chatroom but a blog site moreso…I want the code to function like the dashboard on Tumblr. Ive attached a pic for you to see You see the navbar with the icons that will be what my dropdown code is. The result will end up on the card and resemble the post made by laughcentre. Sorry for being confusing…my apologies.
I thought of adding a chat to my site but instead added a simple forum…have people interacting more.
Oh, I see. Now I understand what you mean by infinite loop. Okay, well, here are some thoughts for you. It is possible using HTML, JS and AJAX.
First, a browser can not hold unlimited data. Most start having issues after a few megabytes. The way around that is that you keep an index on the page which shows the top card showing. Then, lets say on any browser, you might show ten cards or twenty, whatever works for your layout. If they push the down arrow or scroll down in that DIV, you increment the counter pointing at the first item. Then show the 10/20 of them and continue from there.
There are many many ways to do this. Here is one tutorial that walks you thru it. Instead of explaining in detail, this tut will help get you started. Infinite-Scroll-Tutorial
And here is a super simple page that does it in one simple example page. Might want to start testing with this version and link it to your database for testing it. Infinite-Scroll-Tutorial one-page
I think between these two examples, you should be able to understand it and get it working. Good luck!
1 Like
Thank ya so very much for the help…it means alot 