WordPress.org

Forums

Hide Posts? (17 posts)

  1. mcfmullen
    Member
    Posted 4 years ago #

    Alright, so I want my registered users to be able to do several things with the posts they see on my site where each post would have trigger buttons: Like and Don't Like

    1) Mark posts they like
    2) Mark posts they don't like

    The site would then allow each user to Show/Hide all liked posts and Show/Hide all disliked posts.

    This permits the user to see only what they choose to see: Stuff they like, stuff they don't like, stuff they haven't marked, or a mix.

    To see an example of what I mean see: http://www.win-free-stuff.ca/new-contests

    That site does run on wordprees. Looking at page source is a dead giveaway but the admin won't respond on how he did it.

    Any ideas on how this can be implemented are welcomed. I assume it uses mootools or scriptaculous but I don't know how the buttons can be made to function.

  2. mcfmullen
    Member
    Posted 4 years ago #

    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!

  3. popper
    Member
    Posted 4 years ago #

    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.

  4. mcfmullen
    Member
    Posted 4 years ago #

    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?

  5. popper
    Member
    Posted 4 years ago #

    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.

  6. mcfmullen
    Member
    Posted 4 years ago #

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

  7. popper
    Member
    Posted 4 years ago #

    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.

  8. mcfmullen
    Member
    Posted 4 years ago #

    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!

  9. popper
    Member
    Posted 4 years ago #

    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.

  10. mcfmullen
    Member
    Posted 4 years ago #

    perfect. Thank you so much!

  11. mcfmullen
    Member
    Posted 4 years ago #

    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?

  12. popper
    Member
    Posted 4 years ago #

    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.

  13. mcfmullen
    Member
    Posted 4 years ago #

    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?

  14. popper
    Member
    Posted 4 years ago #

    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.

  15. mcfmullen
    Member
    Posted 4 years ago #

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

  16. popper
    Member
    Posted 4 years ago #

    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.

  17. mcfmullen
    Member
    Posted 4 years ago #

    I've done it with scriptaculous. jQuery makes absolutely no sense to me:

    In <header>

    <script src="src/prototype.js" type="text/javascript"></script>
    <script src="src/scriptaculous.js" type="text/javascript"></script>

    In <body>

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

    In CSS:

    .hide {
      	float: right;
    	background: url(images/entered.png) no-repeat top center;
    	height: 30px;
    	width: 28px;
    	}

    Now, this only creates a button that hides the post. What I want is more akin to a pair of radio buttons (like/dislike) for each post which is then controlled by one of two checkbox switches (Hide all liked/Hide all disliked).

    Can that be done? the jQuery documentation is chinese to me...

Topic Closed

This topic has been closed to new replies.

About this Topic