For a blog file, all the comments on the articles, created by a php foreach loop, have each their own Reply button what opens a modal dialog with tinymce in the textarea.
A noticed, when there are may comments, the page loading takes some time. When i looked in the brower-inspector, i see at the end tiny is loading for each textarea a "sink" element just before the close tag of the body:
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
....and so on...
The loading of these divs takes some time and it decreases the performance of the page loading.
Is there anything i can do about this to increase the performance of page loading?
As KIKO said, you need to have a single reply modal for all comments. Since you didn't specify what platform you're using, here's a general approach.
Each reply button should have a data attribute with the ID of the comment you want to reply to. For example
<button class="reply-button" data-comment-id="<?php echo $comment->id; ?>">Reply</button>
Or leave the data-comment-id attribute empty if the comment is going to be attached to the post, and not as a reply to some other comment.
If you're showing multiple blog posts on a single page and want each to have their own reply button, just add data attribute post-id, like so:
<button class="reply-button" data-post-id="<?php echo $blog_post->id; ?>">Reply</button>
Use JavaScript to open comment modal and pick up the appropriate data attribute. For example:
$('.reply-button').on('click', function() {
const commentId = $(this).data('comment-id');
const postId = $(this).data('post-id');
showCommentModal(commentId, postId);
});
showCommentModal function should show the single modal you have on the page. Using commentId and postId it should prepare to post the comment either as a reply to another comment or to a blog post.
Related
I have an "index.php" page to display all posts from database in a LEFT div as follows:
<div class="col-md-6" id="left">
<a id="link" href="post.php?id=<?php echo $postid;?>"><?php echo $submsg;?></a>
</div>
Also, I have a RIGHT div on same page to expand post when user click on the post link to "read more, comment, like.." as follows:
<div class="col-md-6" id="right">
</div>
And I have a "post.php" page to load it into the RIGHT div..
And I have this Jquery script:
<script>
$("a#link").click(function(e){
e.preventDefault();
$('#right').load(this.getAttribute('href'));
});
</script>
Everything is fine but there's only one problem which is the href of the page is always "index.php" and I want it to changes into the post link when It display in the RIGHT div.
How can I do it?
Thanks in advance.
I am on my way trying to get Masonry running with InfinitScroll. I found out that I need the appended method in Masonry. Example:
http://codepen.io/desandro/pen/nhekz
This doesn't work properly because everytime I hit the append button, my Wordpress page reloads. The console says:
Updating because HTML element modified
After the reload all my added DIVs are gone.
Can someone help?
The Problem was a html Element which forces a page reload.
<h1>Masonry - appended</h1>
<p><button id="append-button">Append new items</button>
<div class="masonry">
<div class="item w3"></div>
<div class="item h2"></div>
<div class="item h4"></div>
</div>
I used a div element insted of the button to add masonry elements and the problem was solved
<div id='test2'>click</div>
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") )};
});
I am in a little trouble here. The solution my be easy but no idea clicked till now. I have a text area to be filled by the user with ckeditor. if incase the text is too long, i used php to split the content before rendering and i would added a see/hide more action using jquery toggle effects. a minor work around may be:
if the text was
Appropriate length text here.Other hidden texts here.
it would be
<div class="show always">Appropriate length text here.</div>
<div class="togglehidden1">See more</div>
<div class="hidefirst" style="display:none">Other hidden texts here.</div>
<div class="togglehidden2" style="display:none">Hide more</div>
but the deal here is the ckeditor actually puts a whole lot of html stuffs here, in real the the string we receive is completely unthinkable of. for e.g.:
<div><p><b>Appropriate</b> length text here.</p></div><div>Other hidden texts here.</div>
using the same method to split and insert some see more actions then it would be
<div class="show always"><div><p><b>Appropriate</b> length</div>
<div class="togglehidden1">See more</div>
<div class="hidefirst" style="display:none">here.</p></div><div>Other hidden texts here.</div></div>
<div class="togglehidden2" style="display:none">Hide more</div>
so, only this div is hidden
<div class="hidefirst" style="display:none">here.</p></div>
and this section here is left seen.
<div>Other hidden texts here.</div></div>
please suggest. am i doing it the wrong way?
Here is a working fiddle.
The HTML code
<div class="show always">
<div><p><b>Appropriate</b> length here.</p>
<div class="togglehidden">See more</div>
</div>
</div>
<div class="hidefirst">
<div>Other hidden texts here.</div>
</div>
The jQuery code (using the slideToggle() to create an animation)
$(document).ready(function() {
//hide the content when the document is ready
$('.hidefirst').hide();
//on clicking the See more/Hide More toggle the visible state of element
$('.togglehidden').bind('click', function() {
$('.hidefirst').slideToggle(function() {
// if element is visible change the text to Hide more
if ($(this).is(':visible'))
$('.togglehidden').html('Hide more');
// else change the text do See more
else
$('.togglehidden').html('See more');
});
});
});
Bind the click event to the .togglehidden class
Use the slideToggle() to show/hide the content of .hidefirst
In the slideToogle callback check if the content is visible and set
the appropriate message.
Hope it helps.
I am trying to do some article list, where you can select them using checkbox.
In case you are not sure to select or not, there's option to click on header, and get more information about the article.
I have used this example. So where's the problem ? I don't want to expand articles that I select, just those where I click on header.
JQ script part is OK, because it works fine, it expands / collapses correctly, problem is or in CSS or in HTML, where to place checkbox to see it in header.
I have sample HTML:
<div class="art_list">
<div class="art_head"><div class="art-chk"><input type="checkbox" name="reguser" value="Deki" /></div>Artilk-1 </div>
<div class="art_body">Artikl 1 ima sve</div>
</div>
And this gives me checkbox in the header, but when I check it, it expands the article.
I have tried this also:
<div class="art_list">
<input type="checkbox" class="art-chk" name="reguser" value="Deki" />
<p class="art_head">Artikl-2 </p>
<div class="art_body">Artikl 2 ima sve</div>
</div>
It hides checkbox in the header, and no matter that I've tried putting z-index for art-list, art-head, lower then art-check, I can't see it.
Here is JS:
function hideShowArticles(){
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".art_body").hide();
//toggle the componenet with class msg_body
$(".art_head").click(function()
{
$(this).next(".art_body").slideToggle(600);
});
});
}
So what am I missing ?
I need:
[X] Header
and that only click on "header" expands the article, click on checkbox, selects the article without expanding it. Click on header expands the article below checkbox and header, that remain above whole description.
Is this right?
http://jsfiddle.net/chrismackie/S3rWC/
Is this what your trying to do?
http://jsfiddle.net/chrismackie/srG5k/