Hide Posts?

Alright. Using scriptaculous, I managed to get a Hide Post link to show next to each post. Clicking it will hide the post. Perfect.

<?php while (have_posts()) : the_post(); ?>

			<div class="post" id="post-<?php the_ID(); ?>">
			<div class="hide">
			<a href="#" onclick="Effect.toggle('post-<?php the_ID(); ?>', 'appear'); return false; ">Hide this post</a>
			</div>

Now the hard part:
I have to replace the Hide Post with two bottons: Like and Hate

These buttons would function like switches. The site would then present the user with Hide all Liked and Hide all Hated buttons.

Does this require cookies or MySQL? How would I set this up?

The only thing I can think of is a MySQL database storing USER ID, Post ID, liked and hated but with an infinite possibility of user and posts, I’d think it more efficient to use cookies but I’ve never used cookies before!

Well, MySQL is not a bad idea, the amount of data wouldn’t be that big. You could do a simple HABTM relationship between Posts and Users, so the only thing you should add is the relation table where you link the User ID whit the post ID and perhaps an integer value indicating wheter they liked/hated a post.

the problem here though is the wp_posts and wp_users both use the name ID so I can’t create a relational table because both have the same tags. The only way around it would be to duplicate the ID into a new field which is redundant and a waste of space.

Any ideas?

The fact that they both use the name ID for the primary key doesn’t matter at all, since you would be creating a new table, say:

liked_hated = (post_ID, opinion, user_ID)

where you could name the fields whatever you want.

yes but the foreign keys won’t work if the names aren’t the same.

Obviously, I’m missing something here. What won’t work? As far as I know, you can define a foreign key no matter the name of your field in relation to field it references.

In any case, MySQL would be the least efficient way of doing this. Some posts get deleted, etc. Would it not be better to do this using jQuery/Mootools/Scriptaculous? I.E a like button per post that stores its values in a cookie. The site checks the cookie and hides those posts. The site than also has buttons that allow the user to manual show/hide such posts?

My problem is actually getting that to work. If anyone has any ideas, please don’t be shy!

The thing with cookies, though, is that the user may choose to delete them, so you can’t trust them completely for data persistence. Also, post being deleted wouldn’t be a problem if you make post_ID a foreign key and choose Cascade on delete.

However, it’s your choice. If you prefer cookies, it would be pretty easy doing the whole thing with jQuery and this plugin.

Suppose you have a “hate” and “like” button inside #hate and #like divs:

$(document).ready(function(){
 $("#hate").click(function(){
  $("#post_div").hide();
  $.cookie('post_id','hate');
 });

$("#like").click(function(){
  $("#post").show();
  $.cookie('post_id','like');
 });
});

var show = $.cookie('post_id');
if (show=='hide')
	$("#post_div").hide();

It’s a simple example, but you get the idea. You’d need to check for null values too, and pass the post(s) on the page as a parameter to the script.

perfect. Thank you so much!

okay… what should my css have? how do I get the buttons to work? Say I have a png file with On and Off in it, how do I get it to switch between the two parts of the image?

I would do the toogle adding some classes to the button. Say:

.on {
    background-image: on.jpg;
}
.off {
    background-image: off.jpg;
}

Then in the JS you can just add or remove the class as you need it.

$("#button").click(function (){
    if ($(this).hasClass("on")) {
           arrow.addClass("off").removeClass("off");
    }
});

That’s the basic idea. That’s about all my jQuery expertise, though, :P.

Call me stupid but I can’t get any of your jQuery to work. This is what I’ve done:

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url(images/entered.png) no-repeat top center;
    color: #444;
    display: block;
    float: left;
    height: 30px;
    width: 28px;
    margin-bottom: 10px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button:active {
    background-position: bottom center;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

<a class="button" href="#" onclick="this.blur();"></a>

That is for the button. It switches between ‘on’ and ‘off’ states through CSS with a catch: it only switches when I click. When I let go of the mouse, it reverts to its ‘off’ state. How can I get the ‘on’ state to stay once clicked?

Well, all of my jQuery is untested, so maybe it isn’t working. Where are you adding it? Did you link again the jQuery library?

Regarding the example you posted, it won’t work unless you attach the class permanently to the <a>element. Which you could do like I posted above, or switching between your class and another one.

how would I call your function through onclick=”” ?

You wouldn’t, you should link to the jQuery library, then define the function inside a <script> inside the head, like:

<script type="text/javascript">
$(document).ready(function(){
 $("#hate").click(function(){
  $("#post_div").hide();
  $.cookie('post_id','hate');
 });

$("#like").click(function(){
  $("#post").show();
  $.cookie('post_id','like');
 });
});
</script>

In the above, you are defining de onClick() action of a particular div, with the function .click(). That’s the “jQuery way” ;P. I would recommend you take a look at the jQuery documentation, if you want to use the framework.

Again, it might be that the example is not working due to something else: js conflicts, perhaps? Maybe try to define some basic behavior first, like a message pop up when a user clicks on a button, to see if that works.