FAQ

  • Website Customizations: Hiding an element on pages (04-12-2012)

Need assistance for CONTENTdm?

Website Customizations: Hiding an element on pages

Last review: April 12, 2012

Description: How to hide interface elements on your CONTENTdm 6 Website

Resolution

You can use a jQuery-based custom JavaScript function to remove or hide interface elements on the fly for specific pages or specific collections on your website.

One common example relates to the full-text search field. In CONTENTdm 6, there is a "Text" tab that displays the text in the collection's full text field. Because this information comes from a metadata field, the full text data also is listed with the metadata display. If you just hide this field using CONTENTdm Administration, both the full text metadata display and the "Text" tab are hidden. But you can hide this information in the metadata independently of the "Text" tab by using some jQuery code.


GETTING STARTED

The basic syntax in jQuery to hide an HTML element by its HTML "id" attribute is:

$('#HTMLelementID').hide();

For this example, we want to hide both the field in the metadata and the label for that field. To do this, you need to know the unique identifier or nickname for the full-text field (see Section V Nicknames in the version 5 documentation on Customizing Display Views for information on finding field nicknames).

he id tag for the block of text containing the metadata is: metadata_FIELDNICKNAME
The id tag for the label of the full-text field would be: metadata_nickname_FIELDNICKNAME

So if your full-text field had the nickname "transc", you could hide these fields with the following jQuery code:

$('#metadata_nickname_transc').hide();
$('# metadata_transc').hide();

If you wanted to be extra-careful, you could first check if there was a full-text field present:



if ($('#cdm_fulltext_field_present').val() == 1) {

cdm.util.ConsoleLogger("Full Text Field found in collection.");

if ($('#metadata_nickname_transc').length) {

$("#metadata_nickname_transc").hide();

$("#metadata_transc").hide();

cdm.util.ConsoleLogger("Full Text Field Hidden.");

}

}

DEALING WITH MULTIPLE COLLECTIONS


Perhaps you have different nicknames for your full-text search field in different collections or you have another reason to hide the full-text search field in the metadata view only in certain collections. You can go through a process to described in the FAQ "Nickname Tool: Editing field names" to harmonize your nicknames on the CONTENTdm Server, or you can wrap this function in "if" or "case" statements.

For example, say that in collections, p15900coll1 and mgs, the nickname was "transc" but in collections, p15900coll3 and test01, the nickname was "lyricsa" and in all other collections you wanted to leave it alone.


You could use the following code:

switch($("#cdm_collection").val()){

case "p15900coll1":

case "mgs":

if ($('#cdm_fulltext_field_present').val() == 1) {

cdm.util.ConsoleLogger("Full Text Field found in collection.");

if ($('#metadata_nickname_transc').length) {

$("#metadata_nickname_transc").hide();

$("#metadata_transc").hide();

cdm.util.ConsoleLogger("Full Text Field Hidden.");

}

}

break;

case "p15900coll3":

case "test01":

if ($('#cdm_fulltext_field_present').val() == 1) {

cdm.util.ConsoleLogger("Full Text Field found in collection.");

if ($('#metadata_nickname_lyricsa').length) {

$("#metadata_nickname_lyricsa").hide();

$("#metadata_lyricsa").hide();

cdm.util.ConsoleLogger("Full Text Field Hidden.");

}

}

break;

default:

//Here you can do something else for all the other collections. This

//default section can simply be removed if you have nothing else to do.

break;

}

 

 

BRINGING IT ALL TOGETHER

Just to wrap it all up, you probably want to hide these HTML elements after that page has loaded. You can launch this in the ready function on your page:

 

$(document).ready(function(){

switch($("#cdm_collection").val()){

case "p15900coll1":

case "mgs":

if ($('#cdm_fulltext_field_present').val() == 1) {

cdm.util.ConsoleLogger("Full Text Field found in collection.");

if ($('#metadata_nickname_transc').length) {

$("#metadata_nickname_transc").hide();

$("#metadata_transc").hide();

cdm.util.ConsoleLogger("Full Text Field Hidden.");

}

}

break;

case "p15900coll3":

case "test01":

if ($('#cdm_fulltext_field_present').val() == 1) {

cdm.util.ConsoleLogger("Full Text Field found in collection.");

if ($('#metadata_nickname_lyricsa').length) {

$("#metadata_nickname_lyricsa").hide();

$("#metadata_lyricsa").hide();

cdm.util.ConsoleLogger("Full Text Field Hidden.");

}

}

break;

default:

//Here you can do something else for all the other collections. This

//default section can simply be removed if you have nothing else to do.

break;

}

});

 

You can then upload this script to the Custom Scripts section under the Custom Pages/Scripts section of the Website Configuration Tool as a .js file. If you are already using a custom script, you can merge this with your existing scripts. Remember that if you are including this in a PHP file, you will need to put tags around your javascript. Otherwise, they should be left out.

For more information about Custom Scripts, see the version 6 Custom Pages/Script help file.