10. JS Updates
Please be advised that the latest version of the 'matrix.js' file, which is used in Matrix Themes, is now available in the 'Updates' section. This version includes the initialization from HTML and is distinct from previous versions. If you are using a Matrix theme that was installed before 2023, it is important to remove all script and JavaScript code from the HTML (located in 'Design' > 'Custom Templates' > 'HTML') in order to ensure proper functioning.
Archived js files
Matrix-1.9.5
Includes jQuery UI, jarallax plugin, white label feature, updated admin menu
Matrix-1.9.3
This version includes the bug fix for admin menu displayed in Firefox browser
Matrix-1.9.2
Includes the jQuery library v.3.6.1;
Removed YTplayer js plugin*
Removed YTplayer js plugin*
* YTplayer has been removed because of the Cookies options. This plugin is available in section 'Enterprise package' as a standalone plugin.
If you upload this version to your website, you'll need to remove the YTplayer initialization from HTML:
// tubular
$("#hs-video").YTPlayer();
$('#hs-video').appendTo($('.matrix-hero'));
Matrix-1.9.0
Includes Matrix Add-ons section in admin menu
matrix-1.8.8
includes the option with fullwidth Jimdo galleries
Uploaded: 24.05.2021
Uploaded: 24.05.2021
matrix-1.8.7
This version insludes the Block Elements in Matrix Themes menu
Uploaded:22.03.2021
Uploaded:22.03.2021
matrix-1.8.6
This version includes the new Matrix Themes admin dashboard.
Note: if you update your website with this version, you need to remove the admin menu from HTML , otherwise the new dashboard won't be visible.
bg-gray add-10 mid-round
Jimdo CDN
02. Js innit
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
if ($('.cc-bs').css('text-align') == 'center') {
$('body').addClass('matrix');
}
// lazy load
var viewPortHeight = $(window).height();
$(".lazy").each(function(){
offsetTop = $(this).offset().top;
if(offsetTop < viewPortHeight){
$(this).addClass("loaded");
}
});
$(window).on("scroll", function(){
scrollTop = $(window).scrollTop();
$(".lazy").each(function(){
offsetTop = $(this).offset().top - scrollTop;
if(offsetTop < viewPortHeight){
$(this).addClass("loaded");
}
});
});
// slideshow height
function setHeight() {
windowHeight = $(window).innerHeight();
$('.cc-indexpage .matrix-hero__,.main-page .matrix-hero__').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
$('.bg-caption,.single-caption').fadeIn().css('display','block');
$('.is-fadein').fadeIn(1000).css('display','flex');
$('.is-fadein-block').fadeIn(1000).css('display','block');
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
$('.has-push-layout').addClass('is-pushed');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
$('.has-push-layout').removeClass('is-pushed');
event.preventDefault();
}
});
$(".mt").on("click", function(e){
$("a.mt").removeClass("active");
$(this).addClass("active");
});
// Magnific Popup plugin
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 200,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
// sticky
$('.fixed,.fixed-mobile').sticky({ topSpacing: 0 });
// Get the height of our container
var container_height = $('.main-equal').height();
$(".equal").css('min-height',container_height);
// append elements
$('.hs-magic').appendTo($('.magic-field'));
$('.cc-jimdo').removeClass('cc-m-blogselection');
$('.has-sidebar-menu').appendTo($('.sidebar-nav'));
$('.draggable-hero,.bg-caption').appendTo($('.new-hero'));
$('.is-header').appendTo($('.slider_holder'));
// custom classes
if ( $('div').hasClass('has-transparent-header') ) {
$('#cc-inner .hs-header').addClass('').attr('style','position:absolute;background: transparent!important;');
$('body').addClass('has-transparent-header')
}
if ( $('div').hasClass('has-sticky-white') ) {
$('body').addClass('has-sticky-white')
}
if ( $('.draggable-hero').hasClass('has-arrow') ) {
$('#downbutton').css({ "display": "block" });
}
if ( $('.draggable-hero').hasClass('has-white-overlay') ) {
$('.matrix-hero .hs-overlay').css({ "background-color": "white" }).css({ "opacity": "0.4" });
}
if ( $('div').hasClass('has-no-gutter') ) {
$('.hs-content .gutter').css({ "padding": "0" });
$('body').addClass('hide-subnav')
}
// style editor
$(".is-switcher").appendTo($(".style-switcher"));
$(".cc-content-parent").css("opacity", "1");
$(".j-calltoaction-wrapper").fadeIn(1000).css("display", "block");
$(".j-htmlCode .hs-button,#cc-inner #hs-container .j-formnew input").fadeIn(1000).css("display", "inline-block");
if ( $('.draggable-hero').hasClass('main-page') ) {
$('body').addClass('main-page')
}
$("head").append('');
// sf-menu
$('.hs-menu ul').superfish({
delay:500,
animation:{opacity:"show",height:"show"},
speed:"fast",
autoArrows:false
});
// md-menu
$('.hs-mega .j-nav-variant-nested > ul > li:has( > ul)').addClass('menu-dropdown-icon');
$('.hs-mega .j-nav-variant-nested > ul > li > ul:not(:has(ul))').addClass('normal-sub');
$(".hs-mega .j-nav-variant-nested > ul > li").hover(function (e) {
if ($(window).width() > 943) {
$(this).children(".hs-mega ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
if( /Android/i.test(navigator.userAgent) ) {
// Double tap for Android devices
$(".menu-dropdown-icon").one("click", false);
}
// slickmenu
$('.menu').slicknav({
duplicate:false,
closedSymbol: '+',
openedSymbol: '-',
label : '',
allowParentLinks: true,
prependTo:'.m-wrapper'
});
// overlay menu
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
// Parallax
$(window).enllax();
new universalParallax().init();
// toggles
$('div.toggle > div.content').hide();
$('div.toggle > a.switch.opened').next().show();
$('div.toggle > a.switch').click(function() {
$(this).toggleClass('opened').next().slideToggle('fast');
return false;
});
// accordeon
$('.accordeon_content').hide();
$('.accordeon_title').click(function(){
$(this).parent().toggleClass('active').siblings().removeClass('active');
$('.accordeon_content').slideUp();
if(!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
// tabs
$('ul.tabs-nav > li:first-child').addClass('active');
$('div.tab-content').hide();
$('div.tab-content:first-child').show();
$('ul.tabs-nav a').click(function() {
var nav = $(this).parent().parent('ul.tabs-nav');
if (!$(this).parent().hasClass('active')) {
$('> li', nav).removeClass('active');
$(this).parent().addClass('active');
var target = $(this).attr('href');
var container = $('div.tabs-container').has(target);
$('> .tab-content', container).hide();
$(target, container).fadeIn();
}
return false;
});
// smooth scroll
$('a[href^="*"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
})(jQuery);
//]]>
</script>
js minified
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(),function(i){i(document).ready(function(){"center"==i(".cc-bs").css("text-align")&&i("body").addClass("matrix");var e=i(window).height();function a(){windowHeight=i(window).innerHeight(),i(".cc-indexpage .matrix-hero__,.main-page .matrix-hero__").css("min-height",windowHeight)}i(".lazy").each(function(){offsetTop=i(this).offset().top,offsetTop<e&&i(this).addClass("loaded")}),i(window).on("scroll",function(){scrollTop=i(window).scrollTop(),i(".lazy").each(function(){offsetTop=i(this).offset().top-scrollTop,offsetTop<e&&i(this).addClass("loaded")})}),a(),i(window).resize(function(){a()}),i(".bg-caption,.single-caption").fadeIn().css("display","block"),i(".is-fadein").fadeIn(1e3).css("display","flex"),i(".is-fadein-block").fadeIn(1e3).css("display","block"),i(".cd-btn").on("click",function(e){e.preventDefault(),i(".cd-panel").addClass("is-visible"),i(".has-push-layout").addClass("is-pushed")}),i(".cd-panel").on("click",function(e){(i(e.target).is(".cd-panel")||i(e.target).is(".cd-panel-close"))&&(i(".cd-panel").removeClass("is-visible"),i(".has-push-layout").removeClass("is-pushed"),e.preventDefault())}),i(".mt").on("click",function(e){i("a.mt").removeClass("active"),i(this).addClass("active")}),i(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({disableOn:200,type:"iframe",mainClass:"mfp-fade",removalDelay:160,preloader:!1,fixedContentPos:!1}),i(".popup-with-zoom-anim").magnificPopup({type:"inline",fixedContentPos:!1,fixedBgPos:!0,overflowY:"auto",closeBtnInside:!0,preloader:!1,midClick:!0,removalDelay:300,mainClass:"my-mfp-zoom-in"}),i(".fixed,.fixed-mobile").sticky({topSpacing:0});var s=i(".main-equal").height();i(".equal").css("min-height",s),i(".hs-magic").appendTo(i(".magic-field")),i(".cc-jimdo").removeClass("cc-m-blogselection"),i(".has-sidebar-menu").appendTo(i(".sidebar-nav")),i(".draggable-hero,.bg-caption").appendTo(i(".new-hero")),i(".is-header").appendTo(i(".slider_holder")),i("div").hasClass("has-transparent-header")&&(i("#cc-inner .hs-header").addClass("").attr("style","position:absolute;background: transparent!important;"),i("body").addClass("has-transparent-header")),i("div").hasClass("has-sticky-white")&&i("body").addClass("has-sticky-white"),i(".draggable-hero").hasClass("has-arrow")&&i("#downbutton").css({display:"block"}),i(".draggable-hero").hasClass("has-white-overlay")&&i(".matrix-hero .hs-overlay").css({"background-color":"white"}).css({opacity:"0.4"}),i("div").hasClass("has-no-gutter")&&(i(".hs-content .gutter").css({padding:"0"}),i("body").addClass("hide-subnav")),i(".is-switcher").appendTo(i(".style-switcher")),i(".cc-content-parent").css("opacity","1"),i(".j-calltoaction-wrapper").fadeIn(1e3).css("display","block"),i(".j-htmlCode .hs-button,#cc-inner #hs-container .j-formnew input").fadeIn(1e3).css("display","inline-block"),i(".draggable-hero").hasClass("main-page")&&i("body").addClass("main-page"),i("head").append(''),i(".hs-menu ul").superfish({delay:500,animation:{opacity:"show",height:"show"},speed:"fast",autoArrows:!1}),i(".hs-mega .j-nav-variant-nested > ul > li:has( > ul)").addClass("menu-dropdown-icon"),i(".hs-mega .j-nav-variant-nested > ul > li > ul:not(:has(ul))").addClass("normal-sub"),i(".hs-mega .j-nav-variant-nested > ul > li").hover(function(e){943<i(window).width()&&(i(this).children(".hs-mega ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),/Android/i.test(navigator.userAgent)&&i(".menu-dropdown-icon").one("click",!1),i(".menu").slicknav({duplicate:!1,closedSymbol:"+",openedSymbol:"-",label:"",allowParentLinks:!0,prependTo:".m-wrapper"}),i("#toggle").click(function(){i(this).toggleClass("active"),i("#overlay").toggleClass("open")}),i(window).enllax(),(new universalParallax).init(),i("div.toggle > div.content").hide(),i("div.toggle > a.switch.opened").next().show(),i("div.toggle > a.switch").click(function(){return i(this).toggleClass("opened").next().slideToggle("fast"),!1}),i(".accordeon_content").hide(),i(".accordeon_title").click(function(){i(this).parent().toggleClass("active").siblings().removeClass("active"),i(".accordeon_content").slideUp(),i(this).next().is(":visible")||i(this).next().slideDown()}),i("ul.tabs-nav > li:first-child").addClass("active"),i("div.tab-content").hide(),i("div.tab-content:first-child").show(),i("ul.tabs-nav a").click(function(){var e,a=i(this).parent().parent("ul.tabs-nav");return i(this).parent().hasClass("active")||(i("> li",a).removeClass("active"),i(this).parent().addClass("active"),e=i(this).attr("href"),a=i("div.tabs-container").has(e),i("> .tab-content",a).hide(),i(e,a).fadeIn()),!1}),i('a[href^="*"]').on("click",function(e){e.preventDefault();var a=this.hash,e=i(a);i("html, body").stop().animate({scrollTop:e.offset().top},900,"swing",function(){window.location.hash=a})})})}(jQuery);
//]]>
</script>
03. HTML structure
<style type="text/css">
/*<![CDATA[*/
@import url("04-custom-widgets.css");
@import url("05-helper-classes.css");
@import url("06-media-queries.css");
@import url("07-admin-menu.css");
@import url("08-libraries.css");
@import url("09-updates.css");
@import url("10-style-editor.css");
/*]]>*/
</style>
<!-- start template -->
<div id="hs-container">
<!-- start style switcher -->
<div class="wrap-collabsible admin-only" style="position:fixed;">
<input id="collapsible" class="toggle" type="checkbox" /> <label for="collapsible" class="mtx-toggle"> </label>
<div class="collapsible-content">
<div class="content-inner">
<div class="inner style-switcher is-draggable" style="background:#2e2e2e;max-width:400px;">
<div class="content-switcher is-draggable">
</div>
</div>
</div>
</div>
</div>
<!-- end style switcher -->
<div class="global-colors brand-bg brand-link large-inner has-push-layout has-custom-text has-custom-blog has-custom-nav has-right-nav">
<div class="button_container only-mobile" id="toggle">
<span class="top"> </span> <span class="middle"> </span> <span class="bottom"> </span>
</div>
<div class="overlay" id="overlay">
<div class="inner">
<div class="left-align w-100">
<div class="is--left add-top-30">
<div class="magic-field g-font">
</div>
</div>
<div class="m-wrapper jmd-nav g-font size-25 weight-400 add-top-30">
<ul class="menu">
<li>
<var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>
</li>
</ul>
</div>
<!-- end m-wrapper -->
</div>
<!-- end right align -->
</div>
</div>
<div class="g-header-section">
<div class="hs-top-header bg-primary hidden">
<div class="max-inner cc-clearover">
<div class="right-align mobile-left add-10 size-12 color-white link-white">
<div class="fa fa-mobile">
</div>
(+46) 432‑582-02,
<div class="fa fa-envelope add-left-10">
</div>
<a href="mailto:office@mail.se"> office@mail.se</a>
</div>
<!-- end hs-right -->
</div>
<!-- end inner -->
</div>
<!-- end hs-top-header -->
<div class="c">
</div>
<div class="hs-header bg-white has-nav-inverted__ cc-clearover">
<div class="max-inner fixed-mobile">
<div class="inner__ is--flex cc-clearover no-padding__">
<div class="is--flex1__ is-eq">
<div class="no-padding">
<div class="hs-logo w-100 is--flex__ is-draggable is-fadein-block add-top-10 add-btm-10">
</div>
<!-- end logo -->
</div>
</div>
<div class="is--center is-fadein">
<div class="hs-menu g-font weight-400">
<div class="nav-options">
<nav>
<var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>
</nav>
</div>
</div>
<!-- end hs-menu -->
</div>
<div class="is--right is-fadein is-eq">
<div class="is--left hide-mobile">
<div class="magic-field g-font">
</div>
</div>
<div class="right-align is--flex no-padding">
<div class="sc-wrapper custom-basket-color size-11">
<var>shoppingcart</var>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end header -->
</div>
<!-- end g-header section -->
<div class="c">
</div>
<div class="matrix-hero">
<div class="jtpl-background-area" background-area="fullscreen">
<div class="hs-overlay opacity-4">
</div>
<div class="is-new-caption">
<div class="inner is-hero-draggable is-draggable g-font animated fadeInUp">
</div>
</div>
</div>
</div>
<div class="slider-holder g-font">
<div class="slider_holder lazy">
</div>
</div>
<div class="hs-content bg-white form-white g-font">
<div class="inner cc-clearover">
<!-- ************* 2nd level nav ************* -->
<div class="left-align">
<div class="hs-subnav size-11">
<var variant="breadcrumb" edit="0">navigation</var>
</div>
</div>
<!-- ************* end 2nd level nav ************* -->
<div class="c">
</div>
<div class="gutter">
<var>content
</div>
<!-- end gutter -->
</div>
</div>
<!-- end inner -->
<div class="c">
</div>
<div class="hs-footer o-form g-font color-hr-2">
<div class="inner cc-clearover">
<div class="gutter">
<div class="hs-matrix">
<var>sidebar</var>
</div>
<!-- end hs-matrix -->
</div>
<!-- end gutter -->
</div>
<!-- end inner -->
</div>
<!-- end footer -->
<div class="footer-btm has-link-inherit has-top-border">
<div class="inner cc-clearover">
<div class="gutter">
<var>footer</var>
</div>
<!-- end gutter -->
</div>
<!-- end inner -->
</div>
<!-- end footer btm -->
<div class="has-sidebar-menu">
<var levels="2,3" expand="false" variant="standard" edit="1">navigation</var>
</div>
<!-- end global -->
</div>
<!-- end container -->
</div>
<!-- end template -->
<!-- wow animation -->
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// wow
wow = new WOW(
{
boxClass: 'wow',
animateClass: 'animated',
mobile: true,
offset: 100
}
)
wow.init();
});
})(jQuery);
//]]>
</script>
<!-- end wow animation -->
draggable-logo
Main colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template sections
| body | |
| top-header | |
| header | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Other elements
| social icons | |
| navigation color | |
| subnav background |
Mobile navigation
| background color | |
| navigation color |
| Template configurations |
| has-center-nav g-font has-large-header |
| Navigation styles |
| size-15 weight-400 snip-nav --line01 is-uppercase |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 is-uppercase |
| Heading H2 |
| weight-400 is-uppercase |
| Heading H3 |
| weight-600 is-uppercase |
| Buttons |
| weight-600 is-uppercase |
| Animations |
Note: All changes made here will be applied to your entire website.
is-switcher
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE