Meddysong Posted March 2, 2019 Share Posted March 2, 2019 I'm pretty weak at the front-end side. I can sometimes create something in CodePen or JSFiddle, usually building off other examples, but knowing how to make my site use this JS properly always remains a mystery. I know I have to create a JS file to be included with the Page and it needs to start with something like ;( function($, _, undefined){ "use strict"; ips.controller.register('pages.front.titlename.main', { and close with }); }(jQuery, _)); but am not sure how else to get my function working. I've tried looking at other JS on my site and they're all responding to events such as clicking. I want mine to be a simple onLoad thing, where the browser evaluates the whole page and then adds a class to an element if it detects the presence of a certain trigger class by another element. Here's a working example I've put together in JSFiddle. If I wanted that to work on my site as a page_object, how should I write it? (My user case is something similar. It's for Pages. On some pages I want the header visible but on others I want to hide it. The Pages all start with something like <article class="site">. I want this JS to detect whether the article element has "hide-header" as a class. If it does, it will add a CSS class to my header section which has the properties display: none.) Link to comment Share on other sites More sharing options...
Meddysong Posted March 10, 2019 Author Share Posted March 10, 2019 @newbie LAC kindly came to the rescue. I thought I'd write it up here in case it came in handy for anybody who finds this topic one day. My original attempt was: ;( function($, _, undefined){ "use strict"; ips.controller.register('pages.front.fullwidth.main', { if( $("article").hasClass( "no-header" ) ) { $( ".themeHeader" ).addClass( "ipsHide" ); } }); }(jQuery, _)); The relevant line in my page was: <article class="hero__outer ce-site menu-large-only no-header" data-controller="pages.front.fullwidth.main"> and I wanted <div class="themeHeader ipsClearfix"> to become <div class="themeHeader ipsClearfix ipsHide"> as a result. Not a bad attempt for somebody who doesn't really understand the intricacies here but not enough for it to work. It needed to be: ;( function($, _, undefined){ "use strict"; ips.controller.register('pages.front.fullwidth.main', { initialize: function () { var scope = this.scope; if (scope.hasClass("no-header")) { $(".themeHeader").addClass("ipsHide"); } } }); }(jQuery, _)); And now it works perfectly 🙂 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.