Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Devon Latzen
Courses Plus Student 4,356 PointsViewport Sized Typography & Fittext.js
Here is the video: http://teamtreehouse.com/library/websites/build-a-responsive-website/advanced-techniques/viewport-sized-typography-fittextjs
In this video, Allison shows us how to dynamically resize text using the "vw" unit, and a jQuery script from Chris Coyier at CssTricks.com.
As you resize the browser window, the text is supposed to resize in proportion to it. Mine is not working.
Here is my code: <script> $(function() { causeRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() { causeRepaintsOn.css("z-index", 1); }); }); </script>
What am I doing wrong here?
(Sorry about the unformatted code, I spaced 4x in front of each line. Don't know what's going on today.)
Thanks!
6 Answers
Devon Latzen
Courses Plus Student 4,356 PointsI finally figured it out by comparing my code to the project files from the video after this. In my call to jQuery through the Google CDN I was missing "http:". It just started with "//"
Oy.
James Barnett
39,199 Points@Devon
+1 for answering your own question
rock on with your bad self
James Barnett
39,199 PointsActually <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> is the preferred method of calling JQuery
As to why, here's the answer it's // intead of http://, here's the answer:
If you’re curious why the script reference is missing the leading http:, that’s a helpful trick which allows you to use a single reference that works on both HTTP and HTTPS pages.
The main caveat to keep in mind when using the protocol-less reference is that it will fail on pages loaded via file:/// (i.e. HTML pages you load directly from disk to your browser). So, do be sure to include the http: protocol in the URL if you happen to be developing without a web server at all, but don’t worry about omitting it otherwise.
Source: https://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/#protocolless
Allison Grayce Marshall
Treehouse Guest TeacherLooks like you figured it out! Let me know if you have any other problems, Devon. And thank you, James for jumping on this! :)
Devon Latzen
Courses Plus Student 4,356 PointsThanks James, that's a good piece of information to know. I'll keep it in mind for live projects. @ Allison: I finished the course and it was awesome, thanks for teaching it so well!
sergio savala
3,683 PointsI am unable to complete the first challenge on this quiz. I am typing correct syntax and applying the fittext to the correct level 1 header ? Using the unique ID defined within the fittext script, add the appropriate code to the level one header to make it scale with the fluid layout.