Custom JS/CSS - Reference Specific Page

Question

I would like to change the attributes elements on page load using js/css, but only on certain pages, how do you reference the page in js/css?

Answer 1

You may want to export your document (in5 > Export HTML5 with in5...) with Output set to Multi-page Web so that each page exports as a separate, numbered HTML page. Here's more information: 

• How to Export One HTML File Per Page

Comments

Hi Myra

thanks for your reply, but I don't think I explained it very well!

I'm working on a multi-page website which is for a group of companies, each company will have a specific key colour, so I need a script that when a certain page loads, say "003.thml" for example, I want to change the background colours, icon colours, sub heads etc etc for that specific page.

I'm just unsure how to reference/target the specific page with js.

---

Hi Chris,

Thank you for the clarification.

You could set up your document like you would for creating a multi-lingual document with a button the user selects to determine which company and consequently their styles (as opposed to a language and the content in that language) are shown. Any of the content that changes for that company could be placed on separate object states in multi-state objects (MSOs) throughout your document that are all organized consistently (i.e., company 1, company 2 for object state names). You'll need to set your document's output to Web instead of Multi-page Web for this approach to work. 

When you export (in5 > Export HTML5 with in5...), go to the Resources section and add the following JavaScript:

resetMSOs = false;

$(function(){
  function checkState(e){
    var $this = $(this);
    if(!$this.parents('.activePage').length) return;
    var classes = this.className.replace(/ *(mso|flipcard-[^ ]+|pageItem)/g,'');
    if(!classes.match(/\w{2,}/)){ $this.off('newState',checkState); return; }
    classes = classes.split(' ').join('.').replace(/\.{2,}/g,'.');
    var currentState = $this.children('.state.active').index();
    $('.mso').not($this).filter(classes).each(function(index,el){
      toState($(this).attr('data-id'), currentState);
    });
  }
  $('.mso').on('newState',checkState);
});

The code above has been updated from the following article:

• How to create a multi-lingual document with interactive language switching

If you'd like to use different approach with custom code, then you may need to reach out to a web developer.

---

Hi Myra

found a solution to the problem I was having, here it is if anyone is interested.

The site is for a group of companies, each company has it own specific key colour, the interface will be the same, I didn't want to create 8 separate master pages, I tried this even with a parent linked to the master pages for consistent elements across all masters, but became unwieldy.

I created 1 master page for the interface, with a text box with an alt of 'Current Company' (which I will use as part of a breadcrumb for each page). On each page I changed the content of the text box of 'Current Company' to 'Company 1', 'Company 2', Company 3' etc. etc.

then linked a js file to the resources section of the export dialog box.

Here's a snippet of the js file I created which works as expected, I'm not a coder so used Chat GPT to help write the specific code.

$(document).ready(function () {

  var text = $("[alt='Current Company']").text().trim();

  var $pageLogoImg = $('img[alt="Page Logo"]');

  var $phoneIconImg = $('img[alt="Phone Icon"]');

  var $markerIconImg = $('img[alt="Marker Icon"]');

  var $clockIconImg = $('img[alt="Clock Icon"]');

  var $24HourIconImg = $('img[alt="24 Hour Icon"]');

  var $footerLogoImg = $('img[alt="Footer Logo"]');

  // Group Dark Green - 4b6b45, Group Light Green - 7d9c79, Group Light Light Green - cbd3c8

  if (text === "Group of Companies") {

    $("[alt='Header Coloured Stripe']").css("background-color", "#4b6b45");

    $("[alt='Footer Coloured Stripe']").css("background-color", "#4b6b45");

    $("[alt='Side Panel Background']").css("background-color", "#cbd3c8");

    $pageLogoImg.attr('src', 'CK_Assets/Images/Group_Logo.png');

    $phoneIconImg.attr('src', 'CK_Assets/Images/Group_Phone_Icon.png');

    $markerIconImg.attr('src', 'CK_Assets/Images/Group_Marker_Icon.png');

    $clockIconImg.attr('src', 'CK_Assets/Images/Group_Clock_Icon.png');

    $24HourIconImg.attr('src', 'CK_Assets/Images/Group_24Hour_Icon.png');

    $footerLogoImg.attr('src', 'CK_Assets/Images/Group_Logo_WOB.png');

  }

  else if (text === "Company 1") {

    $("[alt='Header Coloured Stripe']").css("background-color", "#62b34f");

    $("[alt='Footer Coloured Stripe']").css("background-color", "#62b34f");

    $("[alt='Side Panel Background']").css("background-color", "#d5e7cd");

    $pageLogoImg.attr('src', 'CK_Assets/Images/Company_1_Logo.png');

    $phoneIconImg.attr('src', 'CK_Assets/Images/Company_1_Phone_Icon.png');

    $markerIconImg.attr('src', 'CK_Assets/Images/Company_1_Marker_Icon.png');

    $clockIconImg.attr('src', 'CK_Assets/Images/Company_1_Clock_Icon.png');

    $24HourIconImg.attr('src', 'CK_Assets/Images/Company_1_24Hour_Icon.png');

    $footerLogoImg.attr('src', 'CK_Assets/Images/Company_1_Logo_WOB.png');

    $('.Footer-Button-Over, .Footer-Button-Click').css('background', '#62b34f');

  }

  else if (text === "Company 2") {

    $("[alt='Header Coloured Stripe']").css("background-color", "#67a5b0");

    $("[alt='Footer Coloured Stripe']").css("background-color", "#67a5b0");

    $("[alt='Side Panel Background']").css("background-color", "#ccf4f3");

    $pageLogoImg.attr('src', 'CK_Assets/Images/Company_2_Logo.png');

    $phoneIconImg.attr('src', 'CK_Assets/Images/Company_2_Phone_Icon.png');

    $markerIconImg.attr('src', 'CK_Assets/Images/Company_2_Marker_Icon.png');

    $clockIconImg.attr('src', 'CK_Assets/Images/Company_2_Clock_Icon.png');

    $24HourIconImg.attr('src', 'CK_Assets/Images/Company_2_24Hour_Icon.png');

    $footerLogoImg.attr('src', 'CK_Assets/Images/Company_2_Logo_WOB.png');

    $('.Footer-Button-Over, .Footer-Button-Click').css('background', '#67a5b0');

  }

etc etc

ChrisK

---

Thank you for sharing your approach and your code. :)