The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

How do i apply this javascript code to this navigation?

  • Anonymous
    # February 23, 2013 at 11:47 am

    I’m not all that experienced with javascript and i would like to know how can i apply this javascript code.

    to the header navigation bar of this pen? []( “”)

    The source and use of the javascript code can be found here []( “”)

    # February 23, 2013 at 11:57 am

    `elem` represents to replace that with an actual element.

    # February 23, 2013 at 12:00 pm

    @chrisburton I’ve already tried that and tried it again but there was no change.

    # February 23, 2013 at 12:03 pm

    Where are you loading jQuery? Why isn’t the javascript in the javascript panel?

    You might want to rethink some of your markup as well. Using `
    ` tags to separate content is pointless when you could just use a block level element (such as a `p` tag).

    # February 23, 2013 at 12:03 pm

    I also updated the pen and included the javascript code. I basically want the navigation link to fill the entire width of the header div automatically. And shrink automatically when it overflows.

    # February 23, 2013 at 12:08 pm

    When do you expect this function is needed? What element will overflow it’s parent?

    Edit: Nevermind, should have refreshed before submitting my comment :P

    # February 23, 2013 at 12:13 pm

    @chrisburton I got rid of that on my original html code. that code is from a few days ago. But how do i apply the javascript? also i dont know what you mean by> Where are you loading jQuery? Why isn’t the javascript in the javascript panel?

    # February 23, 2013 at 12:19 pm

    @Jarolin Please take some time to read this:

    # February 23, 2013 at 12:43 pm

    @chrisburton i don’t see what it is your asking me to do. The javascript code is in the pen.

    # February 23, 2013 at 12:44 pm

    Something like:

    $(function() {

    function adjustType(elem) {
    var fontSize = 50;
    var parentWidth = elem.parent().width();
    var left = parseInt(elem.css(‘left’));

    do {
    elem.css(‘font-size’, fontSize + ‘px’);
    } while (fontSize > 0 && elem.outerWidth() > (parentWidth – left));

    will do the trick, with

    display: inline-block;
    white-space: nowrap;

    on your `#headernav`.

    Not the most elegant solution, but it works (for now, I should look into a more robust version). Your logo got some positioning issues but that has nothing to do with the changes I made :P

    # February 23, 2013 at 12:51 pm

    If you’ve read the link above, I was teaching you how to use CodePen properly.

    # February 23, 2013 at 12:59 pm

    @CrocoDillon there is a change but the text remains the same size even when it overflows the header. I want the text to automatically shrink to the proper size to prevent it from overflowing.

    # February 23, 2013 at 1:03 pm

    It worked for me, can you update your codepen so I can see what went wrong?

    # February 23, 2013 at 1:08 pm

    @CrocoDillon i updated the pen with the changes you provided.

    # February 23, 2013 at 1:10 pm

    It’s because he isn’t properly using CodePen. Remove the script tags at the beginning and end of the code on the JS panel. Then, click on the sprocket button on the JS panel next to the number (top right corner) and choose jQuery on the dropdown. Done.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed