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>
Related
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.
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'm trying to pass a pass php value through "href" from one div to another div.
As we can do this from one page to another like
is there a way to do it using id(css selector)
for ex:
<div id="div1">
</div>
can you please suggest a way to where i can pass a php value through "href" from one division to another division in the same page
Yes. Sure you can. Just use the # in the link. It will tell browser that the link is pointing to an element on the same page.
<!-- Link pointing to target Div -->
Click here to scroll to target div
<!-- Target Div -->
<div id="div<?php echo $id; ?>">
</div>
You can use below code. Pass your php id to your div
<div id="div<?php echo $id ?>"></div>
This is a crosspost from here.
I would like to go straight to back end when I login on my modal login. What do I need to do to enable this, without using plugins. Do I need to use AJAX to display wp-login.php page?
http://codex.wordpress.org/Function_Reference/wp_login_form
in modal body just put the function name in php tag.
<div id="modal">
<div class="modal-body">
<?php wp_login_form(); ?>
</div>
</div>
and you can find here in plugins and look demo
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.