Considering Jonathan's post concerning Swift Tabber:
https://community.sellerdeck.com/for...-tabs-to-swift
I have a customised version of Norman's Tabber Setup add-on SD V16 V5.08 imported on the site snapshot when I upgraded to SD v18 in use on the cartridge section of our site - see code below:
This functions well, however, I noticed that a script error appeared after the new version of JQuery was introduced to address the PCI external vulnerability scans failing issues, so I raised this with SD support and copy the response received below:
In view of the comment on the last line, I have not attempted the update as the site is functioning ok despite the error and I don't feel confident in trying this out for a live site with no time available for development and test.
I have downloaded the "ticked" jquery-ui-1.13.3.custom.zip folder but do not see a "jquery-ui-1.13.3.tabs.min.js" file included so not sure where to go next!
Question is does the Swift-Tabber V4.04 incorporate a later than "jquery-ui-1.10.1.tabs.min.js" in the Tabber Setup that could be adopted in the page for an SD v18 site that does not use the specific Swift design template?
https://community.sellerdeck.com/for...-tabs-to-swift
I have a customised version of Norman's Tabber Setup add-on SD V16 V5.08 imported on the site snapshot when I upgraded to SD v18 in use on the cartridge section of our site - see code below:
Code:
<script type="text/javascript" src="jquery-ui-1.10.1.tabs.min.js"></script>
<style>
/* SD V16 Tabber V5.08 need to override some global styles */
.dp_tab_widget {border-spacing:0;}
.dp_tab_widget div {border:0 !important;}
.dp_tab_widget li {border-bottom:0 !important;}
.tabinner {width:100%; padding:0; overflow:auto;}
.dp_extra_tab {display:none;}
/* V14 tweaks */
.tabber .ui-widget {font-size:inherit;}
.tabber .ui-widget-content {<actinic:block if="%3cactinic%3avariable%20name%3d%22TabContentTextColour%22%20%2f%3e%20%21%3d%20%22%22">color:<actinic:variable name="TabContentTextColour" />;</actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22TabContentTextWeight%22%20%2f%3e%20%21%3d%20%22%22">font-weight:<actinic:variable name="TabContentTextWeight" />;</actinic:block>}
<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberUserHeight%22%20%2f%3e%20%21%3d%200">.tabber .ui-tabs-panel {height:<actinic:variable name="TabberUserHeight" />px; overflow:auto;}</actinic:block>
</style>
<script type="text/javascript">
// tabber Variables
var dp_untabbedprefix = '<actinic:variable name="UntabbedPrefix" encoding="perl" selectable="false" />';
var dp_untabbedsuffix = '<actinic:variable name="UntabbedSuffix" encoding="perl" selectable="false" />';
var dp_tabprefix = '<actinic:variable name="TabPrefix" encoding="perl" selectable="false" />';
var dp_tabsuffix = '<actinic:variable name="TabSuffix" encoding="perl" selectable="false" />';
var dp_searchresultshowsdescription = <actinic:variable name="SearchResultShowsDescription" encoding="perl" selectable="false" />;
var dp_tabberemakeresponsive = <actinic:variable name="TabberMakeResponsive" encoding="perl" selectable="false" />;
var dp_tabberresponsiveheaders = <actinic:variable name="TabberResponsiveHeaders" encoding="perl" selectable="false" />;
var dp_tabprocessselector = '<actinic:variable name="TabberProcessSelector" encoding="perl" selectable="false" />';
var dp_tabnotselector = '<actinic:variable name="TabberNotSelector" encoding="perl" selectable="false" />';
function enabletabber(){ // enable tabber
$("div[id^='tabber_']:visible").tabs({active:0
<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberFixedHeight%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22TabberUserHeight%22%20%2f%3e%20%3d%3d%200%29" >, heightStyle: 'auto'</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberAnimation%22%20encoding%3d%22perl%22%20selectable%3d%22false%22%20%2f%3e%20%3d%3d%20%22Scroll%22" >, hide: 'slideUp', show: 'slideDown'</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberAnimation%22%20encoding%3d%22perl%22%20selectable%3d%22false%22%20%2f%3e%20%3d%3d%20%22Fade%22" >, hide: true, show: true</actinic:block>
});
<actinic:block if="%3cactinic%3avariable%20name%3d%22TabberFixedHeight%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22TabberMakeResponsive%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22TabberUserHeight%22%20%2f%3e%20%3d%3d%200%29" >
// fixed height tabs - so refresh on page resize
$( window ).resize(function() {
$("div[id^='tabber_']:visible").tabs("refresh");
});
</actinic:block>
}
</script>
<script type="text/javascript" src="tabberv5support.js"></script>
That JavaScript error appears to be due to the new version of jQuery not playing nicely with the version of jQueryUI you are using. See https://stackoverflow.com/questions/...ction#37925405 for example.
I can see you are using jquery-ui-1.10.1.tabs.min.js in the page, which must be part of a custom design. It’s over 10 years old according to the header. It needs to be updated to the latest version - using https://jqueryui.com/download/#!vers...00000000000000
Note that as this is your own customised code, that we can’t support it if there are further problems after the update.
I can see you are using jquery-ui-1.10.1.tabs.min.js in the page, which must be part of a custom design. It’s over 10 years old according to the header. It needs to be updated to the latest version - using https://jqueryui.com/download/#!vers...00000000000000
Note that as this is your own customised code, that we can’t support it if there are further problems after the update.
I have downloaded the "ticked" jquery-ui-1.13.3.custom.zip folder but do not see a "jquery-ui-1.13.3.tabs.min.js" file included so not sure where to go next!
Question is does the Swift-Tabber V4.04 incorporate a later than "jquery-ui-1.10.1.tabs.min.js" in the Tabber Setup that could be adopted in the page for an SD v18 site that does not use the specific Swift design template?
Comment