Dynamically hide content in body and TOC
Posted: Mon Nov 03, 2014 9:49 am
This issue is kind of a continuation of the one here: http://www.oxygenxml.com/forum/topic10918.html.
Check out this sample page: http://idratherbewriting.com/ditaqrg/#j ... ector.html.
If you select a programming language from the language selector, the content in the main body filters to show only the content tagged for that language.
What I can't figure out his how to apply the same filtering to items in the Table of Contents.
I'm guessing that because the OxygenXML webhelp is frames-based, there are really 3 separate frames here. As it relates to jQuery, what happens to the main content frame doesn't affect what happens in the TOC pane or the header pane.
In this demo, I've set up a jquery style selector that adds a class to the body element. This changes the styles and certain things get hidden. It looks like this:
I added it to webhelp_topic_js.
I also added some custom styles to my skin.css file:
The same jquery style selector adds a class to #bck_toc just as it does to body. This should allow the same effects to happen as with the body element, but this never happens because the TOC is in a separate page (I believe).
Is there any way to add or remove classes via jQuery such that it works across frames? I really want to be able to hide certain entries in the TOC that have a specific class.
Check out this sample page: http://idratherbewriting.com/ditaqrg/#j ... ector.html.
If you select a programming language from the language selector, the content in the main body filters to show only the content tagged for that language.
What I can't figure out his how to apply the same filtering to items in the Table of Contents.
I'm guessing that because the OxygenXML webhelp is frames-based, there are really 3 separate frames here. As it relates to jQuery, what happens to the main content frame doesn't affect what happens in the TOC pane or the header pane.
In this demo, I've set up a jquery style selector that adds a class to the body element. This changes the styles and certain things get hidden. It looks like this:
Code: Select all
function removeAddBodyClass(){
$("body").removeClass();
$("body").addClass($.cookie('body_colour'));
$("#bck_toc").removeClass();
$("#bck_toc").addClass($.cookie('body_colour'));
}
removeAddBodyClass();
$("#selector").change(function(){
$.cookie('body_colour', $("#selector").val());
removeAddBodyClass();
});
$("#selector > option").each(function() {
if($(this).val() == $.cookie('body_colour')){
$(this).attr("selected","selected");
}
});
I also added some custom styles to my skin.css file:
Code: Select all
/* by default, java is shown because on initial page load, we don't want blank spaces with no code.*/
/*hide other languages*/
body [data-platform*="cpp"], #bck_toc li.cpp {
display:none;
}
body [data-platform*="dotnet"], #bck_toc li.dotnet {
display:none;
}
body [data-platform*="php"], #bck_toc li.php {
display:none;
}
/*when java is selected...*/
body.java [data-platform*="java"] {
display:block;
}
body.java .ph[data-platform*="java"] {
display:inline;
}
#bck_toc.java li.java {
display:block;
}
/*when cpp is selected...*/
body.cpp [data-platform*="cpp"] {
display:block;
}
body.cpp .ph[data-platform*="cpp"] {
display:inline;
}
#bck_toc.cpp li.cpp{
display:block;
}
body.cpp [data-platform*="java"] {
display:none;
}
/*when dotnet is selected...*/
body.dotnet [data-platform*="dotnet"] {
display:block;
}
body.dotnet .ph[data-platform*="dotnet"] {
display:inline;
}
#bck_toc.dotnet li.dotnet {
display:block;
}
body.dotnet [data-platform*="java"] {
display:none;
}
/*when php is selected...*/
body.php [data-platform*="php"] {
display:block;
}
body.php .ph[data-platform*="php"] {
display:inline;
}
#bck_toc.php li.php {
display:block;
}
body.php [data-platform*="java"] {
display:none;
}
Is there any way to add or remove classes via jQuery such that it works across frames? I really want to be able to hide certain entries in the TOC that have a specific class.