• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  1. Support

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

Download
Matrix-1.9.7
Includes the onepager feature
matrix-1-9-7-min.js
js File 294.5 KB
Download
Download
Matrix-1.9.6
Includes the new carousel
matrix-1-9-6-min.js
js File 291.0 KB
Download
Download
Matrix-1.9.5
Includes jQuery UI, jarallax plugin, white label feature, updated admin menu
matrix-1-9-5-min.js
js File 270.6 KB
Download
Download
Matrix-1-9.4
Includes the fluid sections
matrix-1-9-4-slim.js
js File 168.7 KB
Download
Download
Matrix-1.9.3
This version includes the bug fix for admin menu displayed in Firefox browser
matrix-1-9-3-slim.js
js File 168.5 KB
Download
Download
Matrix-1.9.2
Includes the jQuery library v.3.6.1;
Removed YTplayer js plugin*
matrix-1-9-2-slim.js
js File 168.1 KB
Download

* 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'));
Download
Matrix-1.9.1
Includes the updates of YTplayer
matrix-1-9-1-slim.js
js File 228.7 KB
Download
Download
Matrix-1.9.0
Includes Matrix Add-ons section in admin menu
matrix-1-9-0-slim.js
js File 223.0 KB
Download
Download
matrix-1.8.9
Removed sticky alert plugin
matrix-1-8-9-slim.js
js File 222.9 KB
Download
Download
matrix-1.8.8
includes the option with fullwidth Jimdo galleries
Uploaded: 24.05.2021
matrix-1-8-8-slim.js
js File 223.9 KB
Download
Download
matrix-1.8.7
This version insludes the Block Elements in Matrix Themes menu
Uploaded:22.03.2021
matrix-1-8-7-slim.js
js File 223.4 KB
Download
Download
matrix-1.8.6
This version includes the new Matrix Themes admin dashboard.
matrix-1-8-6-slim.js
js File 223.6 KB
Download

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

add-20 bg-grey  mid-round has-shadow is-100

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 -->

Support

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Helper classes
  • Common support issues
  • Contact

Features

  • Templates
  • Page Builder
  • Add-ons
  • Landing pages
  • Alt Classes
  • Matrix variables

Get inspired

  • Most popular templates
  • Website examples
  • Custom widgets
  • Block Elements
  • Fluid Sections

Quick links

  • Marketplace
  • Pricing
hide-in-doc-page

draggable-logo

Showcase

 

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

About | Privacy Policy | Cookie Policy | Sitemap
Created with Jimdo
Log in Log out | Edit
  • Scroll to top
Close