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

WordPress

Tom Stock
Tom Stock
3,614 Points

How to combine the Wordpress loop and Javascript variables

I am currently working on a Wordpress theme, I am now in the stage that I am going to make it responsive. Unfortunately I got stuck at the part where Javascript and the php from Wordpress get together.

What I want is that the length of the excerpt is different per screen size. I already made a function in functions.js so you can simply edit the size of the excerpt, the problem however is that the excerpt itself doesn´t change and only display´s the first excerpt instead of updating it as the loops runs again.

Is this fixable? Or is there a better way to do this? Thanks in advance!

Tom

Link to the workspace: https://teamtreehouse.com/workspaces/6144742#

I'm not sure if that would work or not, because that function would be executed on the server side, so as you resize the browser it wouldn't be executing again. Does that make sense?

Tom Stock
Tom Stock
3,614 Points

Yes, it does. The code only executes with the first value of the loop, as the loop goes around is doen't update the value. And even if it did it will fill all the div's with the class with the same value, so also the div's that should have another value.

What I want is that every time the loop goes around there will be a different value. I know Javascript isn't the best way to do this but I don't know how to achieve this with PHP or CSS. And if I don't resize the excerpt the text will be to long for the div so it will go outside the div.

1 Answer

Tom Stock
Tom Stock
3,614 Points
text-overflow: ellipsis;
overflow: hidden;

My problem isn't achievable with Javascript so I decided to use a CSS solution. The code above works just fine, the only thing is that you can see only the upper part of the last sentence if the div has a particular height.