Owen Ffrancon Owen Ffrancon - 4 months ago 7
Javascript Question

Cannot get simple JQuery commands to work

I'm having a ton of problems understanding Javascript and JQuery at the moment - they're causing me major headaches. Here's what I'm trying to do:

Replace the end of long item descriptions with ellipses. I want it to work for however many item descriptions that I have.

I tried doing it myself, completely failed, then tried to use a jquery.ellipsis plugin. Linking \jquery.ellipsis-master\jquery.ellipsis-master\src\jquery.ellipsis.js seems to have stopped my code from running at all. The alert does not show.

<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="jquery.ellipsis.js" type="text/javascript">

alert("JS works");

$(document).ready(function () {

function pTruncate() {
$('.ideaText').each(function () {

$(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false});

});
};

pTruncate();

$(window).resize(function () {
pTruncate();
});

});


Can somebody explain which file from Github I'm supposed to use? The ellipsis plugin is from https://github.com/bebraw/jquery.ellipsis

Answer

You cannot put your JS code in a <script> element that has a src attribute. It's one or the other. To do what you need you have to add your own <script /> tag, like this:

<p class="ideaText">Phasellus lacinia ... est.</p>
<p class="ideaText">Lalalalalala ... lalalala.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script src="jquery.ellipsis.js" type="text/javascript"></script>
<script>
    alert("JS works");

    $(document).ready(function () {
        function pTruncate() {
            $('.ideaText').each(function () {
                $(this).ellipsis({
                    visible: 3, 
                    more: '…', 
                    moreClass: 'more', 
                    separator: ' ', 
                    atFront: false
                });
            });
        };

        pTruncate();

        $(window).resize(function () {
            pTruncate();
        });
    });
</script>