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 <br> tags to separate content is pointless when you could just use a block level element (such as a p tag).
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.
@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?
$(function() {
adjustType($('#headernav'));
function adjustType(elem) {
var fontSize = 50;
var parentWidth = elem.parent().width();
var left = parseInt(elem.css('left'));
do {
elem.css('font-size', fontSize + 'px');
fontSize--;
} 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
@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.
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.
@Paulie_D It's the link on his first post. If you changed some stuff and it isn't updating, go to his profile and click on the pen we're working on (last page).
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? http://codepen.io/Jarolin/pen/iHCzc
The source and use of the javascript code can be found here http://www.metaltoad.com/blog/resizing-text-fit-container
elemrepresents to replace that with an actual element.@chrisburton I've already tried that and tried it again but there was no change.
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
<br>tags to separate content is pointless when you could just use a block level element (such as aptag).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.
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
@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?
@Jarolin Please take some time to read this: http://css-tricks.com/forums/discussion/comment/87079
@chrisburton i don't see what it is your asking me to do. The javascript code is in the pen.
Something like:
will do the trick, with
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
If you've read the link above, I was teaching you how to use CodePen properly.
@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.
It worked for me, can you update your codepen so I can see what went wrong?
@CrocoDillon i updated the pen with the changes you provided.
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.
http://cloud.chrisburton.me/N8sH
Could someone please provide a link to the latest good Pen?
@Paulie_D It's the link on his first post. If you changed some stuff and it isn't updating, go to his profile and click on the pen we're working on (last page).
@chrisburton I made those changes and it works now. Thank you.
@CrocoDillon thank you for your help also.