Member Avatar for zacharysr

How do i collapse data i pulled out of mysql? I have a messaging system that shows all messegse between you and another member.

<table border='1' width='100%'>
                <?php
                $ID = $_COOKIE['idCookie'];
                $memberid = $_GET['id'];
                $query = mysql_query("SELECT * FROM `private_messages` WHERE to_id='$ID' AND To_Deleted='0' AND from_id='$memberid' OR to_id='$memberid' AND from_id='$ID' ORDER BY id ASC");
                while($row = mysql_fetch_assoc($query)){
                $subject = $row['subject'];
                $toid = $row['to_id'];
                $read = $row['opened'];
                $fromid = $row['from_id'];
                $messageid = $row['id'];
                $message = $row['message'];
                $message = str_replace($smile_symble, $smile_pic, $message);
                $message = preg_replace('/\-(.*)\-/', '<s>$1</s>', $message);
                $message = preg_replace('/\_(.*)\_/', '<u>$1</u>', $message);
                // The Regular Expression filter
                $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
                // The Text you want to filter for urls
                $text = $message;
                // Check if there is a url in the text
                if(preg_match($reg_exUrl, $text, $url)){
                    // make the urls hyper links
                    $text = preg_replace($reg_exUrl, "<a href='{$url[0]}'>{$url[0]}</a>", $text);
                    $message = $text;
                }else{
                    // if no urls in the text just return the text
                    $message = $text;
                }
                $check_pic = "members/$fromid/image01.jpg";
                $default_pic="members/0/default.png";
                $query2 = mysql_query("SELECT * FROM `members` WHERE id LIKE '$fromid'");
                            while ($row = mysql_fetch_assoc($query2)){
                            $firstname = $row['firstname'];
                            $lastname = $row['lastname'];
                    if(file_exists($check_pic)){
                    $user_pic ="<img src=\"$check_pic\" width=\"75\" heign='75'>";
                    }else{
                        $user_pic ="<img src=\"$default_pic\" width=\"75\" heign='75'/>";
                    }
                    $fwd=$_GET['id'];
                    echo "<tr>
                    <td width='75'><a href=''>$user_pic</a></td>
                    <td valign='top'><a href=''>$firstname $lastname</a> - <a href='messages.php?removeid=$messageid&fwd=$fwd'>Delete</a></br><hr>$message</td>
                    </tr>";
                $update = mysql_query("UPDATE `private_messages` SET opened='1' WHERE to_id='$fromid' AND from_id='$toid'");
                }
                }
                ?>
                <tr>
                <td colspan='2' align='center'>
                    <form action='messages.php?Box=messagebox&id=<?php echo $memberid ?>' method='post' name="bottom">
                    <table>
                    <tr><td>Message:</td><td>
                    <textarea id='Msg' name='Msg' cols='50' rows='4'></textarea></td></tr>
                    <tr><td colspan='2' align='right'>
                    <input name='parse_var' type='hidden'  value='Message'/>
                    <input type='submit' value='send'/></td></tr></table>
                </td>
                </tr>
                </table>

How would i collapse the data being shown on the screen so if there's say 5 messeges. When it get's to six. the top 5 will be collepsed and hidden. but the 6th one will show. so it shows there's something there. But its like "minimized" And when they click on the collapsed data it expands and shows the text in the messages.

But with the collapsed data. The last message stills shows.

  • 2 Contributors
  • 1 Reply
  • 401 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

As said, this is primarily a client‑side job. A simple, maintainable pattern for is: emit each message with a predictable CSS class (for example pm) inside a wrapper (for example div.messages), then use a small JS routine to add a collapsed state when the total exceeds a threshold. CSS hides the older messages while leaving the most recent visible; a toggle button expands them.

Minimal example (works with block elements; for table rows replace display:block with display:table-row and place the toggle in a <tr><td colspan="...">):

/* CSS */
.messages .pm { margin:6px 0; }
.messages.collapsed .pm { display:none; }
.messages.collapsed .pm:last-child { display:block; }
.collapse-toggle { display:block; margin:6px 0; cursor:pointer; }
// JS (vanilla)
document.addEventListener('DOMContentLoaded', function(){
  var container = document.querySelector('.messages');
  if (!container) return;
  var msgs = container.querySelectorAll('.pm');
  var collapseWhenMoreThan = 5; // threshold
  var keepLast = 1;             // how many to keep visible when collapsed

  if (msgs.length > collapseWhenMoreThan){
    var hiddenCount = msgs.length - keepLast;
    container.classList.add('collapsed');
    var btn = document.createElement('button');
    btn.className = 'collapse-toggle';
    btn.textContent = 'Show ' + hiddenCount + ' earlier messages';
    container.insertBefore(btn, container.firstChild);
    btn.addEventListener('click', function(){
      var collapsed = container.classList.toggle('collapsed');
      btn.textContent = collapsed ? ('Show ' + hiddenCount + ' earlier messages') : 'Hide earlier messages';
    });
  }
});

Notes and troubleshooting

  • Ensure each message output from PHP carries a class (pm) and all messages sit inside one wrapper (.messages). If using <tr>, adjust CSS as mentioned.
  • For dynamic updates (AJAX/new message), rerun the collapse logic or encapsulate it in a function.
  • Server‑side alternative: render only the most recent messages and output a single collapsed summary element; JS then expands it.
  • Security/logic: the existing code uses old mysql_* calls and appears to echo raw message HTML — move to PDO/MySQLi with prepared statements and escape output (e.g., htmlentities) to prevent SQL injection and XSS. Also double‑check the message read/update WHERE logic so the wrong messages are not marked opened by mistake.
Member Avatar for Member #120589

that's javascript.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.