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

JavaScript

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
Posted by LaVaughn Haynes
LaVaughn Haynes
12,397 Points

JavaScript memory and inline event attributes

At my job we use a CMS for the website. The way they have it set up we are not able to use external or embedded javascript or css... only inline. Unfortunately I'm back in the 90's.

Anyway, I just want to toggle the visibility of a DIV when the user clicks the "more" link on a product. If I use an IIFE in the onclick event attribute ( <a onclick="IIFE()">more</a> ) I can get the desired effect. My question is will this present a memory issue doing this multiple times? I know that the page will need to contain 30-40 products.

I don't know how to test memory usage in js and I haven't had any luck searching on google. The function is below (expanded to 3 lines). I'm just passing a reference to the "a" that was clicked (this) and the class of the div that I want to toggle (.class).

(function(t,c){ 
    $(t).parent().find(c).slideToggle();
})(this,'.class');

This is how it would be used in the code

<div>
    Article 1 
    <a onclick="(function(t,c){ $(t).parent().find(c).slideToggle(); })(this,'.hideme'); return false;" href="#">more</a>
    <div class="hideme" style="display: none;">
        This is more content
    </div>
</div>

<div>
    Article 2 
    <a onclick="(function(t,c){ $(t).parent().find(c).slideToggle(); })(this,'.hideme'); return false;" href="#">more</a>
    <div class="hideme" style="display: none;">
        This is more content
    </div>
</div>

1 Answer

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

To answer your question, I don't think it should be a big problem. Even if it does result in a memory leak (which would still be weird), all of it would get washed away whenever the user loads a new page.

The way they have it set up we are not able to use external or embedded javascript or css... only inline. Unfortunately I'm back in the 90's.

Something's not right here. What CMS is this? Even if it has no built-in asset handler, I'm sure there's a way you could hack something into it that's better than what you currently have.

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

It's Adobe CQ5. More specifically, they purposefully only allow inline code/css. Paste it in and it'll just get handled like plain text. It's not a limitation of the CMS at all. It's purely intentional.

We have 20 sections with their own web editors (some which don't even really know HTML) and one IT department so I suspect that they have all of these restrictions because they don't want to then have to support 20 sections. I get it.

The down side is that if there is some functionality that we need we can't use it unless they provide it. For example, because I couldn't use a javascript toggle, when we had conference earlier this year I had to post a "schedule at a glance" for all of the programs. Then I had to create another schedule (basically same information) with the detail information added. Then I had to create another to list program files. It's horrible and time consuming. Especially when there are constant speaker changes and program updates for several weeks before the event. All of that has to be updated in multiple places.

If there are any suggestions of how to get around that I'm open. I know this is horrible. I've only been here maybe 6 months. If I had known that this is how it was I honestly probably would have passed on the job offer honestly.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I can understand the actions of the IT guys. They're trying to lock things down to prevent other people (sales/marketing) from messing up. Unfortunately, it sounds like they're throwing the baby out with the bathwater when it comes to this.

Just to double-check, you're sure that there's no way possible for you to use external CSS and JS, right? Also, what HTML doctype are you using?

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

This is my first time using CQ5 but as far as I can see there seems to be no way for me to link to any external files unfortunately. In fact, when I took their mandatory training they told me to do it inline. My only interface with the site are the content modules that they have chosen to give us access to. They just got CQ5 maybe a year ago so maybe they will eventually address these issues.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The tragedy is that I started learning SASS and Angular last year and I was excited. I joined Treehouse several months ago to learn and start from the very beginning but this new job not only takes so much time but it also started cancelling out what I was learning as I spend 40+hrs per week doing things the wrong way :)

Anyway, thanks for the feedback