1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Blogger Comment Form Collapse-Expand - Help me out

Discussion in 'Web Design' started by Scorpion Ghost, Dec 30, 2013.

  1. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    I implemented this guide i found for the comment form on a small blogger blog i use to test stuff.

    Basically it collapses the comment form and the user clicks it to expand it if they want to place a comment. But i encountered 2 problems.

    One is that the widget won't work on posts that have one or more comments to them. It only works on posts with No comments.

    The other is that when i view the blog in chrome the pager links (previous/newest/home) dissapear.

    Here is the tutorial i used: http://www.mybloggertricks.com/2012/06/expandcollapse-blogger-comment-box-with.html

    Here is my blog so you can see the difference. This post has comments, so open any other post on the blog to see how it looks on a post with no comments: http://testingtestingblogblognow.blogspot.com/2013/09/test-post-1.html

    I did try to solve it myself, but failed.

    If anyone can help me out it would be much appreciated. Thanks. :)
     
  2. mypmmail

    mypmmail Junior Member

    Joined:
    Jan 31, 2008
    Messages:
    111
    Likes Received:
    27
    I think his site do not have the collapsible box for post already with comments too.
    But you can achieve it by adding the same code around this line of code

    As for the pager links, it is because you lack of the following code
    This line of code should be between

    end of <div class="blog-posts hfeed">
    and
    start of <div id="blog-pager" class="blog-pager">
     
    • Thanks Thanks x 1
  3. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    Thanks man, but it didn't work.

    When i add the code around this line of code:

    What happens is that the comments and the comment form become included in the widget. So the comments and the comment form get expanded/collapsed as i click the button.

    And in a way, that could be good. But what also happens is that when i click on "Reply" on Any comment, the comment form loads normally, but a new blank tab opens as well...

    And about the pager links, well, that didn't work. I tried implementing it as you said, but it didn't work...

    Thanks for trying anyway. :)
     
  4. mypmmail

    mypmmail Junior Member

    Joined:
    Jan 31, 2008
    Messages:
    111
    Likes Received:
    27
    Sorry, I'm not sure about the commentsHolder part as I can't really test it.

    But for the pager links, I would really think it will work.
    asdf.jpg

    You can edit the html through Chrome or Firefox and you will see that adding the line did work.
     
    • Thanks Thanks x 1
  5. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    Eheeey thank you man... I did it!

    Although, in the HTML it looked a bit differently than in your screenshot, here is where i had to put it:

    123.GIF

    Thanks a lot, couldn't have done it without you. :)

    Ok, that's one down, one to go.

    Actually, when i originally implemented this to my test blog i spent hours trying to make it work for posts that have comments on them, but failed...

    I tried to find the part of code that affects ONLY the comment form, and wrap that with the code. But the closest i got to it was to wrap the comment form and the comments, or wrap the whole area from X Comment: down to the pager. Or i think i even managed to wrap the whole goddamn page in it.. But i didn't manage to do what i wanted, to wrap Only the comment form...

    Anyway, thanks for the help man, i appreciate it...

    If there's anything i can do for you, don't hesitate to PM me. :)
     
  6. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    Well, actually there is an issue with the solution above.

    While it does solve the positioning, it makes it so that every time the "Reply" button is clicked on any existing comment a new _blank tab opens...

    As soon as i remove the <div class="clear"></div>, it stops happening...

    I tried inserting <p></p>

    I tried inserting <a></a>

    Didn't work at all.....

    HOORAAY... I tried <p class="clear"></p> and it worked, and a new tab Doesn't open when i click "Reply" on any comment.

    Perfect...

    Now, i tried doing the comment form again, but i couldn't get it to work... I managed to make it disappear entirely at one point though :p
     
  7. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    Hahahahahaha I managed to wrap Every number of posts under a label for each label, on the sidebar... hahaha funny as fuck!!

    I'll leave it like that for you to see, hilarious.... :D
     
  8. mypmmail

    mypmmail Junior Member

    Joined:
    Jan 31, 2008
    Messages:
    111
    Likes Received:
    27
    :)

    I think you got the expansion and collapse working, just that you put in the wrong place.

    Look for the code
    Code:
    <form action="/comment-iframe.do" method="POST" name="commentForm" id="commentForm" >
    // some more code including the commentsHolder and postCommentButtonHolder
    </form>
    
    and wrap with the script given to something like
    Code:
    <h3 class="trigger active">Click Here To add Comment</h3>
    
    <div class="toggle_container" style="display: block;">
    <div class="block">
        <form action="/comment-iframe.do" method="POST" name="commentForm" id="commentForm" >
        // some more code including the commentsHolder and postCommentButtonHolder
        </form>
    </div>
    </div>
    

    That's what I would try to do.
    As said, you got it working, but just that you put in the wrong location.
     
  9. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    See, that's the problem.

    If i go to "Inspect Element" and look at the code, i can see the code you told me to wrap.

    But if i open my blog's HTML and search for the code, it's nowhere to be found...

    I don't understand it... I don't have that code in my HTML, but i can clearly see it if i Inspect Element...

    I'm not a coder or anything, so my knowledge of all this is limited. Maybe some sort of Javascript or something is used which - when the page loads - creates that piece of code. So i should look for the javascript...

    Anyway, thanks for your effort man.. :)
     
  10. mypmmail

    mypmmail Junior Member

    Joined:
    Jan 31, 2008
    Messages:
    111
    Likes Received:
    27
    I tried to search through my own blogger theme and I think it may be because the code you are looking for is located at the other widget.

    There are different widgets in blogger theme.

    Did you try to download them to your local?

    To find the location of the code, this is what I will do
    - go to each of the widget, copy and paste the entire code into a local file, 1 widget to 1 file
    - then I'll use a search tool to search the content (try other search terms within the block of code as it's unlikely everything is in javascript)

    hth
     
    • Thanks Thanks x 1
  11. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    879
    Likes Received:
    171
    I may have misunderstood you, but when you search the HTML section it searches through the whole thing, so if it ain't there it ain't there...

    Unless you meant to download the backup of the blog?

    lol.. I think that this is a lost cause... Even the guys on stackoverflow ignored me on this one, and i know there's some insanely good programmers there...

    Anyway, it's not that important anyway.. I've wasted enough time on this situation...

    If somebody actualy knows the solution, i would be happy to hear it...

    Thanks for taking an interest mypmmail