TechnoDiver

Ha! That was indeed a very quick clue. Thank you. but strangely it only works with == in the if statement, not the if else. which seems to me like it should need the == in both of them This works -> if (document.getElementById("commentResponse").style.display == 'none') { document.getElementById("commentResponse").style.display = 'block'; } else if (document.getElementById("commentResponse").style.display = 'block') { document.getElementById("commentResponse").style.display = 'none'; } return false; This doesn't -> if (document.getElementById("commentResponse").style.display == 'none') { document.getElementById("commentResponse").style.display = 'block'; } else if (document.getElementById("commentResponse").style.display == 'block') { document.getElementById("commentResponse").style.display = 'none'; } return false; The second one with the 2 == doesn't even display the textarea. Why is that? Seems like the double = should be required in both the if and ifelse

Could someone give me a quick clue as to why the following, very simple, JS isn't working properly, please? <script> function toggleResponseArea() { if (document.getElementById("commentResponse").style.display = 'none') { document.getElementById("commentResponse").style.display = 'block'; } else if (document.getElementById("commentResponse").style.display = 'block') { document.getElementById("commentResponse").style.display = 'none'; } return false; } </script> The text area is initially set to display: none; in the stylesheet. I've used an onclick attribute for the 'reply' element in the HTML. And to be clear, when the page is loaded (display: none;) and the reply 'button' is clicked it does change the textarea to display: block; that's not the problem. The issue is when it's clicked again it doesn't change it back from display: block; to display: none; Thanks for the help.

Hello Freakazoids, I hope the weekend saw you all happy & healthy and the new week promises the same for everyone. This post isn't about any particular issue I'm having. Rather, I'm looking for some advice and direction from people with more experience than me. As the title says, I'm in the process of building a comments section for a project. The stage I'm at now is figuring out the best way to implement it. l'd like it to go deeper than just allowing replies to original comments - allowing replies to replies etc. Though it doesn't have to be infinitely so like Reddit where replies to replies to replies have replies ad infinitum. My first thought was to do it as lists and store it in the comments column of the posts table in the DB. Where the array of original comments is named with the post_id, assign an id to the comment and name the response array with the comment_id, assign the response array an id, name another list (2nd level replies) with the 1st level response id etc etc. Or using JSON in a similar manner building it deeper and deeper as replies accumulate. Then I figured maybe it's best to make a separate comments table with a post_id column, and there could be a replies column too; but I wasn't clear in my head how I would use that with replies to replies etc. I don't expect the project to ever be so big that it needs infinite replies like Reddit but I would like it to go 3 or 4 replies deep. I've no doubt that I'm capable of doing this but I'm hoping for some advice from those who have done it before - your experience with it, the mistakes you've made along the way, things to consider that someone at my level would likely overlook, best practices and exactly what is the best way to implement this etc. TIA to everyone who finds the time and will to respond, the best to you all

Thank you, That's a different way of thinking about it that I can see will add value in the future, I appreciate your response

OK, you were right, I was over thinking it and my disposition against CSS caused me to neglect to research d-flex better. This is the amended CSS/HTML -> <div class='original'> <div class='comment-content d-flex col-lg-12'> <div class='comment-author author-thumbnail'> <img src='../usernet/img/{$data['profile_pic']}' alt='author'> </div> <div class='comment-meta'> <a href='#' class='post-author'>{$data['commenter']}</a> <a href='#' class='post-date'>{$data['date']}</a> <p>{$data['comment']}</p> </div> </div> <div class='comment-actions'> <a href='#' class='comment-like'><span><i class='fa fa-thumbs-up'></i> Like</span></a>&nbsp;&nbsp; <a href='#' class='comment-like'><span><i class='fa fa-reply' aria-hidden='true'></i> Reply</span></a>&nbsp;&nbsp; </div> </div> I had to take the comment actions out of the <div> with d-flex. But even saying that, here's an example of why I have such an issue with CSS. Here's the relevant style -> .original .comment-actions { text-align: right; padding-bottom: 10px; margin-right: 20px; } Why in the name of everything that's holy did 'margin-bottom' not work and I had to use 'padding-bottom' to get it up a little?? This is part rhetorical question and part real question. When I got it into place, pre-margins, I thought 'great!! finally. Now let's add some margins' my head almost went into the keyboard when margin-bottom did nothing. Why?? I can't understand it

Hello Freaks, I hope the week has treated you all well so far. I have an issue, it's frustrating, I hate CSS - it never does what I think it should. I'm working on a single post page with comments at the bottom. Even though a lot of the CSS is mine, it was originally from a template. I'm trying to properly position the 'like' and 'reply' icons within each comment element and it's just not going how I want it to. Not only can't I get it positioned properly but I can't get it to maintain that position regardless of comment length (it changes position as the comment gets longer). Here's the CSS and HTML -> CSS: /* COMMENT AREA */ .comment_area { border-bottom: 1px solid #d0d5d8; padding-bottom: 50px; } .comment_area .title { margin-bottom: 50px; } .comment_area .comment-content .comment-author { -webkit-box-flex: 0; -ms-flex: 0 0 51px; flex: 0 0 51px; min-width: 51px; margin-right: 45px; height: 51px; border-radius: 50%; } .comment_area .comment-content .comment-author img { min-width: 51px; height: 51px; border-radius: 50%; } .comment_area .comment-content .comment-meta { margin-bottom: 30px; /* width: 100%; */ } .comment_area .comment-content .comment-meta .post-author { margin-bottom: 5px; display: block; font-size: 16px; color: #003b46; } .comment_area .comment-content .comment-meta .post-date { font-size: 12px; text-transform: uppercase; margin-bottom: 0; color: #656565; display: block; margin-bottom: 20px; } .comment_area .comment-content .comment-meta p { margin-bottom: 15px; font-size: 14px; line-height: 2; font-weight: 500; /* width: 100%; */ } /* .comment_area .comment-content .comment-actions { width: 100%; border-top: 1px solid; border-color: #a8a8a8; display: block; z-index: 2; position: relative; top: 150px; } */ /* .comment-actions .comment-like { position: relative; top: 150px; } */ .comment_area .single_comment_area { margin-bottom: 10px; } .comment_area .single_comment_area:last-of-type { margin-bottom: 0; } .comment_area .single_comment_area { margin-left: 40px; margin-top: 30px; } /* END COMMENT AREA */ HTML: <div class='original'> <div class='comment-content d-flex col-lg-12'> <div class='comment-author author-thumbnail'> <img src='../usernet/img/{$data['profile_pic']}' alt='author'> </div> <div class='comment-meta'> <a href='#' class='post-author'>{$data['commenter']}</a> <a href='#' class='post-date'>{$data['date']}</a> <p>{$data['comment']}</p> </div> <div class='comment-actions'> <a href='#' class='comment-like'><span><i class='fa fa-thumbs-up'></i> Like</span></a>&nbsp;&nbsp; <a href='#' class='comment-reply'><span><i class='fa fa-reply' aria-hidden='true'></i> Reply</span></a>&nbsp;&nbsp; </div> </div> </div> Here's a SS example. (I've not put in the HTML for the reply as it's the same as the original at the moment). The icons aren't consistently in the same position and I don't want them on the top but in the bottom right corner. There's a block in my CSS code above that is commented out. That gets them on the bottom but not in a fixed position relative to their respective comment boxes. You'll also see that the responses are just echoing the comment right now, ignore it, I'm in the early stages of this part of the project. I believe this is all that's needed to clarify my issue. I'm at the end of my temper with it and need some help. Thank you

Hay, Kicken, quick question - why the use of the max() function in the $page assign? Why not just $_GET['page']??

That's a really excellent idea. I feel I would have eventually evolved into using just 1 variable, I tend to be really sloppy on the first run through.. thank you

It's an icon tag directly from font-awesome I mean, in the end it got me properly functioning code with the math ops done inline like I was looking for. Thanks for your replies. I appreciate all guidance

The only errors I got are the warnings and the typeError because there are no -10 or -1 elements I had it exactly how you wrote it at first and changed to sprintf so I could do the math ops on $from and $to inline How? I see mine and the one you posted as the same. That's a statement that begs a follow up I was afraid of that, thanks.

Hi, Freaks. I've got a quick question I'd like to ask out of curiosity I coded a simple pagination functionality last night. It's nothing intricate. The page it's for pulls a large amount of data and is displayed 10 rows at a time. To determine which data to display it uses a simple $_Get['from'] and $_GET['to']. They start out as $from = 0; and $to = 10; and are each incremented or decremented by 10 if the user clicks 'prev' or 'next'. I got it functioning properly and then needed a quick if statement to disable the 'prev' if $from == 0 && $to == 9; (so it didn't go to -10 and -1 respectively and break the script). This was the original try -> <?php if($from == 0 && $to == 9) { $state = "disabled"; } else { $state = "active"; } $html = sprintf("<a href='/qcic/newsnet/pages/%s.php?act_id=%s&act_title=%s&from=%s&to=%s' class='%s'><i class='fa fa-angle-left'></i> previous</a>", $actor, $id, $actor, ($from-10), ($to-10), $state); echo $html; And it did not work. $from became -10, $to became -1 and it broke the script. I changed it to this -> <?php if($from == 0 && $to == 9) { $state = "disabled"; $html = sprintf("<a href='#' class='%s'><i class='fa fa-angle-left'></i> previous</a>", $actor, $id, $actor, ($from-10), ($to-10), $state); } else { $state = "active"; $html = sprintf("<a href='/qcic/newsnet/pages/%s.php?act_id=%s&act_title=%s&from=%s&to=%s' class='%s'><i class='fa fa-angle-left'></i> previous</a>", $actor, $id, $actor, ($from-10), ($to-10), $state); } echo $html; This way worked So I have 2 simple questions regarding this: 1. Why didn't the first method work and I had to make the $html variable twice and actually remove the URL? and 2. How would I provide the same functionality to the 'next' button with an undetermined amount of data? - i don't know how many entries there may be, but when the script gets there I want it to know it got there and act accordingly. Can I get open thoughts on ways to achieve this? TIA and the best of Sundays to all you freaky geeks

Interesting, thank you

what happens when you hit the button? Here's my entire table element -> <table class="col-lg-12 mb-5"> <tr class="bg-color-fourth mb-2"> <th class="ps-1">Rank</th> <th></th> <th>Name</th> <th>Total net worth</th> <th>Last change</th> <th>Country</th> <th>Industry</th> <th></th> </tr> <?php $cnt = 0; while($cnt<10) { $leech = $leeches[$cnt]; $name = $leech->personName; $image = explode("//", $leech->squareImage); $image[0] = "https://"; $image = implode("", $image); $age = "?"; $final_worth = (int)($leech->finalWorth/1000); $last_change = (int)($leech->finalWorth - $leech->estWorthPrev)/1000; if($leech->estWorthPrev > $leech->finalWorth) { $class = "red"; } elseif($leech->estWorthPrev == $leech->finalWorth) { $class = "black"; } else { $class = "green"; } $source = $leech->source; $country = $leech->countryOfCitizenship; $source = ucwords($leech->source); $rank = $cnt + 1; $html = " <tr class='mt-2'> <td>{$rank}.</td> <td><img src='{$image}' height='75' width='75'></td> <td>{$name}</td> <td class='bold'>\${$final_worth}B</td> <td class='{$class}'>\${$last_change}</td> <td>{$country}</td> <td>{$source}</td> <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More &nbsp;<i class='fa fa-arrows-v' aria-hidden='true'></i></button> </td> </tr> <tr > <td colspan='8' id='details{$cnt}' style='display: none'>lorem fucking ipsum wahoo baby - {$cnt}</td> </tr> "; $cnt++; echo $html; } ?> </table> It uses no css other than that inline style and adding some color to positive/negative values. I have no idea what could cause it like this. Have you tried to use the JS to see what happens for you after you click the button??

ok, I was talking about after I hit the button, in the script that changes it to block instead of none. funnily enough, when I take it out it displays properly (colspan=8) So, if I take out display: none the second row spans the 8 cols. BUT they're visible on page load and I don't want that. When I have display: none there they obviously don't appear on page load and they DO appear after I hit the button, except when they do appear it pushes everything from the top row over and only populates the first col as in the SS above. Why is this? here's the js again for reference -> <script> function showDetails(cnt) { var details = "details"+cnt; var x = document.getElementById(details); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> I can't get my head around why this is happening.

I was actually just working on exactly this. I had a revelation as I was leaving the site from my OP. What I'm actually working on is that it's not working and I don't know why -> $html = " <tr class='mt-2'> <td>{$rank}.</td> <td><img src='{$image}' height='75' width='75'></td> <td>{$name}</td> <td class='bold'>\${$final_worth}B</td> <td class='{$class}'>\${$last_change}</td> <td>{$country}</td> <td>{$source}</td> <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td> </tr> <tr > <td colspan='8' id='details{$cnt}' style='display: none'>lorem fucking ipsum wahoo baby - {$cnt}</td> </tr> "; but even with the colspan it's only populating it into the first column. On the brighter side, I got the js functionality working lol but for some reason it's not spanning the 8 columns. Any ideas??

Hi Freaks, the weekend is upon us again. I wish you all well. I have an issue I've been working on today and have hit a mental roadblock. Hoping someone with the time and will will talk me through it. I'm creating a table while looping through an API array and I've hit a couple snags. Here is the repeated HTML -> $html = " <tr class='mt-2'> <td>{$rank}.</td> <td><img src='{$image}' height='75' width='75'></td> <td>{$name}</td> <td class='bold'>\${$final_worth}B</td> <td class='{$class}'>\${$last_change}</td> <td>{$country}</td> <td>{$source}</td> <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td> </tr> <tr > <div id='details'>lorem fucking ipsum wahoo baby</div> </tr> "; Everything was going as expected until I went to add the second row (div#details). There's actually 2 issues at play here - the first is how I make each button/div#details connected so button1 only effects div1 etc. I can't tackle that one yet though, because right now when any button is clicked div#details shows up above the table header rather than underneath the previous row. So until I have the positioning correct I can't really tackle the js functionality. Can someone please tell me why the <tr><div#details> is not appearing underneath it's previous row? The js code is as follows -> <script> var cnt = <?php echo $cnt; ?>; function showDetails(cnt) { var details = "details"; var x = document.getElementById(details); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> I know the code is a mess right now. It's kind of shameful lol but like I said I can't really do more with it until I can figure out why that table row isn't positioning properly

Yea, I'm always willing to learn though. The project I post on here mostly about literally started with 2 files and expanded into hundreds over the past year. I hadn't even owned a computer in 5 years until I bought this laptop last year specifically to try to make this project. Pretty much had to completely relearn HTML, CSS, JS and learn from scratch AJAX/JSON, MySql, PHP, GIT, OOP, working with APIs etc, it's been quite the journey. I have no background nor training in webdev, it's totally a self-taught project, in which this forum has been invaluable. Saying all that, I wouldn't even know where to start in the direction you're speaking of. Are you referring to frameworks like Laravel?

Yea, I'm a bozo sometimes, man. I totally knew that and was overthinking it. I'm laughing at myself right now. Thanks

Yea, I'm using absolute paths, for the most part. The issue that I'm trying to resolve is with the <link> elements in head.php.for For all includes I was using absolutes except in the link and script elements I was still using relatives. I have a $root variable using DOC_ROOT that's in the ini file at the top of each page. Sample usage is thus -> The problem I'm having is using it in the link element. It sounds so stupid and basic but I can't get that variable to get picked up for the css and scripts. 2 ways I've tried are -> <link rel="stylesheet" type="text/css" href="<?php echo $root.'/css/actors.css';?>"> <link rel="stylesheet" type="text/css" href="{$root}/css/gallery.css"> Neither work. Do I have to put the entire absolute path here each time or is there a special syntax that I'm being stupid and overlooking/forgetting about??

No problem, per se. I don't need to move it. It would be totally for organizational purposes. I'm using absolutes, as well. This issue I was trying to circumvent is that page.php and index.php share some resources (head.php, footer.php etc.) and even though it's easy enough to sort that out there's the stylesheets that are linked to from head.php that get messed up. As I was typing this last night I realized that absolute paths are likely the solution. Still having trouble with the stylesheets though. So yea, I was looking for something that in retrospect seems kind of hacky. Thought there may have been a technique or method that could pseudo-reference a resource location. But, like I said, the file doesn't need to be moved, it would be for purely organizational/aesthetic purposes. Thanks for your reply

Hi Phreaks, weird question. Difficult one to explain and I was and still am clueless on what to research if it's even possible. I even had difficulty with the title of this post. If one has a simple file setup like this -> root dir |-page.php |-index.php and decided to alter it to the following: root dir |-pages/page.php |-index.php Than that developer would have to add '../' a few places where they had require(), include(), scripts, styles etc. and this would lead to even more issues if page.php shared resources with index.php. So my question is, is there a way to, instead of changing all the other paths to resources, is it possible to make pages/page.php appear as if it's still in the root directory to the other resources? To rephrase that - even though page.php is now one level deeper than it use to be, is there a technique that makes it still appear to be in the root directory to all the resources it calls? Like assign it a pseudo-location or something to where any resource that connects to it does so as if it's still located in the root directory?

Ok, thank you. I'm going to work on creating that string in a PHP method, I'm part way there as I type. I hope you can respond again if I have to readdress this issue lol Thanks again

Hay, Barand, Thanks for your answer. I'm playing around with it now. I've got it populating correctly in the actual project but realize I'll have an issue soon. The <select> menu for the categories was originally populated by a PHP method which used the cat id from the database as the value in the <option> element. I was the method I was calling in the OP is -> <?php public function selectCat($type) { $table = "categories"; $field = "type"; // $type = "top"; $rule = "ORDER BY id ASC"; $query = $this->_db->get($table, array($field, "=", $type), $rule); $this->_data = $query->all(); $str = ""; foreach($this->_data as $obj) { $cat_id = $obj->id; $category = $obj->category; $title = ucwords($category); $str .= " <option value='$cat_id'>$title</option> "; } return $str; } So I'm thinking I'll rewrite this method to return your JSON.parse($string) replacing "A", "B", "C" etc with the values from the type field; "1", "2", "3" etc keys with cat ids and "Cat 1", "Cat 2", "Cat 3" etc with the category names... you get the picture. In your very experienced opinion is this the best way to do this or would you suggest a different way?

Hello Freaks and Geeks, I hope the weekend is seeing you all healthy and happy. I've been debating the proper implementation of a task. Hoping to find someone sitting in front of the computers feeling helpful. I believe I need to JS/AJAX for this, so I hope I'm in the right forum I have a form. In that form there's a <select> dropdown for a 'category' and one for 'type' of contribution. I'd like to make it so that the options available in the category dropdown are conditional on what was chosen in the type dropdown. So if I had the following PHP -> <?php <div class="form-group"> <label>Category</label> <select class="form-control" name="cat_id" id="category"> <?php if(!$this) { echo $post->selectCat('top'); } else { echo $post->selectCat('actor'); } ?> </select> </div> the "(!this)" in the if condition is meant only as a placeholder to keep the error notis away in my IDE and does nothing, nor was ever expected to. So in this implementation I thought to have 2 methods. Create a JS boolean function and either call selectCat('top') or selectCat('actor') depending on what the JS returned. I could also, though not sure how yet, call the PHP methods directly from the JS. What would be the best way to complete this task? The way I started with, the other way I mentioned, another way I haven't thought about?? All advice, input and criticism welcome.. TIA and the best to you all during these messy times

Hi Phreaks, I hope you've all made it through the weekend with sound body and mind. The following 2 methods have been working together harmoniously for quite a while: <?php public function action($action, $table, $where = [], $rule = "") { if(count($where) === 3) { $operators = array('=', '<', '>', '<=', '<='); $field = $where[0]; $operator = $where[1]; $value = $where[2]; if(in_array($operator, $operators)) { if($rule == "") { $sql = "{$action} FROM {$table} WHERE {$field} {$operator} ?"; } else { $sql = "{$action} FROM {$table} WHERE {$field} {$operator} ? {$rule}"; } if(!$this->query($sql, array($value))->error()) { return $this; } } return false; } public function get($table, $where = [], $rule = "", $column = "*") { return $this->action("SELECT {$column}", $table, $where, $rule); } My original belief was that it was easily extensible. I'm now to the point I'm trying to do that and receiving behaviour that I don't understand. If the action() method becomes thus -> <?php public function action($action, $table, $where = [], $rule = "") { if(count($where) === 3) { $operators = array('=', '<', '>', '<=', '<='); $field = $where[0]; $operator = $where[1]; $value = $where[2]; if(in_array($operator, $operators)) { if($rule == "") { $sql = "{$action} FROM {$table} WHERE {$field} {$operator} ?"; } else { $sql = "{$action} FROM {$table} WHERE {$field} {$operator} ? {$rule}"; } if(!$this->query($sql, array($value))->error()) { return $this; } } } else { $sql = "{$action} FROM {$table}"; echo "this <br>"; return $this; } echo "false <br>"; return false; } with the added else{} statement to handle queries without WHERE conditions, and call it with just the $table parameter -> <?php public function get() { // $table = "posts"; $table = "categories"; $field = "*"; $query = $this->_db->get($table); // print_r($query); var_dump($query); } //normally, using conditions, it would look like this: $query = $this->_db->get($table, array($field, "=", $value); It returns: which we can see is picking up my else{} statement as it should but is returning this empty object. Could someone explain this to me? thank you