WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Implementing already existing javascript code (overflow ellipsis) (13 posts)

  1. ggg377
    Member
    Posted 1 year ago #

    Hi. I'm trying to implement CSS text-overflow: ellipsis to a single-line WordPress excerpt that can have varying length (because tags and categories appear next to it, often in different quantities). I googled a bit and found out this could only be done through javascript and somebody already published the code I needed on a public forum. Unfortunately I don't know how to implement it on WordPress.

    Here's a live example of what I'm trying to do, I'm trying to use ellipsis on the gray text (I already used ellipsis on the title, that wasn't a problem because I could set a fixed width to it): http://goldenred.web44.net/

    The potential solution I found: http://jsfiddle.net/qPbfw/1/

    Anyway, if I want to implement this javascript code, where do I put the javascript bit in WordPress? Would I need to place it in functions.php? I already placed <?php wp_enqueue_script("jquery"); ?> into header.php. And let's say I have a class "excerpt" for the gray text, would I need to create a container surrounding it to make it work?

    My code that generates a post: http://pastebin.com/w10eBmmm
    CSS for the code: http://pastebin.com/ZZumNAAC

    Thanks in advance for your help. Overall even if anyone could point me towards the right direction I would be really happy, because this is one of the last big issues I have with my setup. If someone told me where to place the raw javascript code I would already be much closer. Like always, all out of the box solutions are welcome as well (maybe I don't need javascript at all?) :)

  2. ggg377
    Member
    Posted 1 year ago #

    I looked at the javascript code for a bit and tried to come up with something that would fit my needs:

    Original code:

    (function($) {
            var containerWidth = $('.column').parent().width()
                - $('.column:first').width()
                - $('.column:last').width()
                - 6; //6 because the borders add 1px per side, per column
            $('.column:nth-child(2)').width(containerWidth);
        })(jQuery);

    Modified code:

    (function($) {
            var containerWidth = $('.container').width()
                - $('.cattags').width()
            $('.excerpt-links').width(containerWidth);
        })(jQuery);

    I would make the "container" class surround the whole row (categories, tags, excerpt) and "cattags" to surround categories and tags. Then the script should subtract the width of categories+tags from the container width and result in the width for the excerpt, which could then have proper overflow and text-overflow values. Does this make sense?

    I'll try putting the function into functions.php and I'll tell you how it goes. This could be a dumb thing to do (and the code could be wrong too), but I don't really have much to lose here :)

    edit: I apparently took way too much of a simplistic approach here as javascript functions can't be added in such a manner. I'm doing more research atm.

  3. ggg377
    Member
    Posted 1 year ago #

    Alright here's what I did now: 1) made the function into a width.js file

    2) uploaded width.js to my root,

    3) added

    <?php wp_enqueue_script("jquery"); ?>
    <script type="text/javascript" src="/width.js"></script>

    to my header,

    4) added

    <script type=”text/javascript”>(function($) {
            var containerWidth = $('.container').width()
                - $('.cattags').width()
            $('.excerpt-links').width(containerWidth);
        })(jQuery);</script>

    to body (right after the tag),

    5) changed index.php as such (created "container" and "cattags classes"): http://pastebin.com/W23uWBhZ,

    5) added

    container {
    width: 453px;
    }

    to CSS,

    6) changed .excerpt-links code as such:

    .excerpt-links {
    color: #8c8c8c;
    text-overflow: ellipsis;
    white-space: nowrap; overflow: hidden;
    }

    Nothing happened :/ Waiting on responses now I guess.

  4. ggg377
    Member
    Posted 1 year ago #

    After doing some more research I think that instead of

    <script type=”text/javascript”>(function($) {
            var containerWidth = $('.container').width()
                - $('.cattags').width()
            $('.excerpt-links').width(containerWidth);
        })(jQuery);</script>

    I should have something like this:

    -edit never mind-

    after the body tag, with the variables used properly and in context of my code. Unfortunately all of this is a little beyond me now as I don't really understand most of the variables and I'm not even sure if I'm headed towards the right direction with all this. I'm sorry for posting so many times in a row, but I felt like I had to post all this to maybe help someone else guide me closer to the solution.

    edit: also this:

    jQuery noConflict wrappers
    Note: The jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load.

    In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. For example:

    *sigh*

  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    You ought to be using a browser developer tool that has displays the browser's console log, when developing with JavaScript. This is what Google Chrome's built-in developer tool showed in its console log [screenshot].

  6. ggg377
    Member
    Posted 1 year ago #

    Thanks Andrew, that helped!

    Anyway I think I made some progress now.

    1. my function is still in a width.js file in my root directory

    2. I have this

    <?php wp_enqueue_script("jquery"); ?>

    in my header before <?php wp_head(); ?>.

    3. I added this to functions.php

    <?php
    function load_container() {
        wp_register_script('width', '/width.js', array('jquery'), false );
        wp_enqueue_script('width');
    }
    add_action('init', 'load_container');
    ?>

    4. I kept the CSS tweaks for .container (453px width) and .excerpt-links (nowrap, hidden and ellipsis)

    5. As the jQuery script had {} symbols around it there was actually no need to majorly edit the script so it now looks like this:

    jQuery(function($) {
            var containerWidth = $('.container').width()
                - $('.cattags').width()
            $('.excerpt-links').width(containerWidth);
        });

    I get no errors from the console, yet it still doesn't work. Will someone mind looking at my setup. I think there might be a slight misunderstanding somewhere. I suspect the functions.php code, particularly the "add_action" values.

    Thanks :)

    edit: I switched up the jQuery script a bit to match the original. I also changed the index code (all 3 classes, the overall box, cats+tags and excerpt are now "container"), the appropriate CSS span classes (I was able to modify both the excerpt area and cats+tags area through CSS with container:first-child and container:last-child modifiers).

    jQuery(function($) {
            var containerWidth = $('.container').parent().width()
                - $('.container:first-child').width()
            $('.container:last-child').width(containerWidth);
        });

    Still doesn't work though.

  7. keesiemeijer
    moderator
    Posted 1 year ago #

    You don't need this in your header:

    <?php wp_enqueue_script("jquery"); ?>

    With wp_register_script you tell it your script depends on jquery. WorPress will enqueue both scripts with wp_head();

    Try it with the "wp_enqueue_scripts" hook.

    add_action('wp_enqueue_scripts', 'load_container');

    Have you tried to execute your javascript when the DOM is fully loaded.

    jQuery(document).ready(function($) {
        // $() will work as an alias for jQuery() inside of this function
        // your code here ...
    });
  8. ggg377
    Member
    Posted 1 year ago #

    Thank you for your answer keesiemeijer. I removed that line from the header and replaced the init hook with wp_enqueue_scripts.

    The code looks like this now:

    functions.php: http://pastebin.com/768erG4Y
    index.php: http://pastebin.com/rcYdxUpn
    style.css: http://pastebin.com/Gjt5170B
    width.js: http://pastebin.com/HSYrambC

    Still doesn't work. I'm glad the overall implementation was somewhat correct though. Maybe someone will be able to pinpoint a bug in my code. I'll start looking into the DOM option now.

  9. ggg377
    Member
    Posted 1 year ago #

    Alright I tried the fully loaded DOM code - no help unfortunately.

    tweaked width.js: http://pastebin.com/bGUxw9Ls

  10. keesiemeijer
    moderator
    Posted 1 year ago #

    I think you get a conflict because there are multiple spans with the class "container". Maybe you don't have to use javascript for this. I wrapped the last line with all the categories, tags and text in a paragraph with a class ".links-text" and gave it the styles of ".container:last-child"

    Here is an example: http://jsfiddle.net/GzqZK/

  11. ggg377
    Member
    Posted 1 year ago #

    Wow. That is an awesome find! I actually thought using ellipsis on a combined class like this would be impossible. That is a very good sign for me. I definitely think using javascript won't be the case now.

    However in my setup, I also have the image, which is floating left. So when I implement a similar code to your jsfiddle, the text does get truncated, but it also moves away from it's intended spot (where it can extend to 100% of #post). To avoid this, I created a new div around it (#bottomwrapper) and set a fixed width for it (453px), but it still moves away. Using display: inline didn't work either. If only I could figure out how to surround the area of cats+tags+excerpt with a wrapper that would behave as #post does now and it could extend to 100% within that wrapper, my problem would be solved.

    current index.php: http://pastebin.com/TPBME2mK
    current style.css: http://pastebin.com/2NxafwHg

    I also left the current problem online on my site. I'll start figuring out how to move the truncated text to its intended spot soon.

    If anyone has ideas on how to do this in a clean manner, I'd be happy to hear them.

  12. keesiemeijer
    moderator
    Posted 1 year ago #

    Maybe with this css:

    #bottomwrapper {
    width:453px;
    margin: 0;
    padding: 0;
    float: right;
    }
    
    .links-text {
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
    	padding: 0;
    }

    You will need to test this in many browsers.

  13. ggg377
    Member
    Posted 1 year ago #

    Thanks for the code! I was just experimenting with floats as you posted this. I overlooked the margin parts.

    Anyway it works now! I really can't thank you enough for helping me with this. I'll get to checking the compatibility now.

    The javascript "exercise" I got was pretty intimidating, but it will definitely prove useful in the future.

    Anyway thanks a ton keesiemeijer and Andrew!

Topic Closed

This topic has been closed to new replies.

About this Topic