Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.
Navigation

Readmore Functions

Last updated on 28 days ago
GrimlochGrimloch
Posted 30 days ago
OK guys I have a new thing I'm working on. In my grims_blog infusion on my site, I have implemented a jQuery Readmore function. I have discovered after much experimentation and reading hundreds of posts and searches on the web, that jQuery will only output pure text (NO HTML - all formatting is lost) so my question is this. Is there anyway that a readmore function (by any method) will honor html within the text? I suspect the answer will be no but thought I'd ask anyway.
My site:
https://whisperwillow.net/infusions/g.../index.php
...in case you'd like to take a look.
Edited by Grimloch on 05-01-2021 14:30, 11 days ago
douwe_yntemadouwe_yntema
Posted 30 days ago
Mostly used is a jQuery script executing a PHP file when triggered. The PHP-file output is put in a part of the screen.

See here: https://www.codexworld.com/bootstrap-modal-popup-form-submit-jquery-ajax-php/
GrimlochGrimloch
Posted 30 days ago
I really don't understand how that can help me; I don't want a popup window or modal. I want the article to expand to read the rest. Please take a look at my blog. As it is all formatting is lost and it displays only text but it's all run together. It wo't allow line breaks or any kind of html formatting.
FalkFalk
Posted 30 days ago
Search for innerHTML, should plenty of examples. But it will retain HTML from any source.
GrimlochGrimloch
Posted 29 days ago
Thanks guys. Total complete success !!! Check out https://whisperwillow.net/infusions/grims_blog/index.php ... I simply modified the jQuery function I already had in place. I replaced "var myStr = $(this).text();" with "var myStr = $(this).html();" and other places in the script which called for 'text'... Granted there is no "Show Less" function but that's OK. I'm satisfied with what I have now.
Thanks again!
Edited by Grimloch on 18-12-2020 15:48, 29 days ago
GrimlochGrimloch
Posted 29 days ago
OK; so I was a little pre-mature guys. I do need some more help. I would like to add a "read-less" function to my existing function and have no idea how to go about it. This is my current function:
echo '<script>
$(document).ready(function(){
    var maxLength = 500;
    $(".show-read-more").each(function(){
        var myStr = $(this).html();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(\'<a href="javascript:void(0);" class="read-more"><br><div align="center"><b>...continue reading...</b></div></a>\');
            $(this).append(\'<span class="more-html">\'+removedStr+\'</span>\');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-html").contents().unwrap();
        $(this).remove();
    });
});
</script>\n';

...and this is the very simple css:
.show-read-more .more-html {
        display: none;
}

...and this is the calling part:
<p class='show-read-more'>$body</p>

...I'm pretty good most of the time at modifying existing code but I have little experience with jQuery functions but I'm learning. Thanks in advance if you can help me.
douwe_yntemadouwe_yntema
Posted 29 days ago
I think you have to set the contents of more.html to none or set the diplay to none
GrimlochGrimloch
Posted 29 days ago
I know what you are saying but I have no idea how to implement that or where it goes...
GrimlochGrimloch
Posted 28 days ago
OK guys you can forget this one. I found another script that works well outta' the box. More/Less now achieved.
You can view all discussion threads in this forum.
You cannot start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
You cannot set up a bounty in this discussion thread.
Moderator: Support Team
Users who participated in discussion: Falk, Grimloch, douwe_yntema,