I'm working on comments for posts on my website. How to create a button in javascript that will open iframe window with comments when user clicks on that button? Something like Facebook have with their comments on posts. If there is a way to create this with other language I would like that you write it. I just wrote javascript because I heard that you can do that in javascript. If there is a more elegant and/or better way feel free to write it.
So below every posts I would add a button and when user clicks on it, it should open something like this:
<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>
And is there a way that iframe window loads only when you click on the button, not in the same time as page on which are posts? For example, if I have 10 posts on one page, and comments for all 10 posts are loading at the same time as the page with posts, it would slow down a page a lot.
Also do you know how to adjust iframe window size to amount of posts, so that if a post have 1 comment, window size is 100px, and if a posts have 5 comments, window size is 500px?
I know that Facebook have something much better than this for their comments, so if you know something better than my idea, please feel free to share it.
A trivial solution to your question would be..
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'></div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").html('<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>');
});
</script>
</body>
</html>
Or you can load all the comments onto a div element, and by default have that element hidden, and then once clicked on a button, you can show it. That solution could be
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'>
comment 1: ----
comment 2: -----
</div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
Try using something like prettyPhoto:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
If you scroll down on that page you will see an example where the loaded window displays an iFrame. Very handy for creating semi-ajax-like functionality to a website. You can use pretty much any lightbox clone out there for something like this, but I have found that prettyPhoto is the most robust and has a decent amount of support out there. This does use jQuery to work as well as it's own javascript file to function, but it is minimal.
Hope this helps.
I would jquery .load, .post, .get or .ajax
under every article have a div class named comments and display none css on that div. when the user clicks the view comments button for that article, send a request to the server and ask for comments for that article id.
you will want to store the id of the article in an attribute of the view comments link so that you can pass the .load request the id of the article you want comments for.
<div articleid="5" class="view-com-button">view comments</div>
<div class="comment" articleid="5" style="display:none"></div>
$(".view-com-button").click(function(event){
$(".comment[articleid='$(this).attrib("articleid").load("comment.php", {( "idarticle" : $(this).attrib("articleid") )};
});
