sandboxTheme JS Features

Feature ist das Grundgerüst eines Features. Du kannst dieses Feature einfach als Codebasis verwenden.

In Feature gibt es sehr viele Erklärungen zu jeder einzelnen Methode.

In der Javascript-Console deines Browsers kannst du die Logs von Feature ansehen.

Config

options: {
  classNames:{
    active: 'active',
    dummy: 'dummy'
  },
  selectors: {
    container: '.feature-dummy',
    dummy: '.dummy',
  },
  texts: {
    dummy: 'move your mouse over the box'
  }        
},

Beispiel

Bewege deine Maus über die Dummy Box und beobachte dabei die Javascript Console deines Browsers

Zeigt und versteckt Inhalte, die sich in einem konfigurierbaren Container befinden, gruppiert nach Überschriften, die ebenfalls konfiguriert werden können.

Config

Alle Überschriften "H3", die in einen Element mit ".content" class Attribut enthalten sind, verstecken alle darauf folgenden Inhalte bis zur jeweils nächsten "H3" Überschrift.

options: {
  /**
   * Index of Accordeon to open.
   * 
   * First number is the index of the content if there are more then one.
   * Second number ist the index of the accordeon in that content to open.
   * Empty string let all accordeons be closed exept there is a hash opener in the URL.
   * 
   * @type {String} String containing two numbers. 
   * @example
   * '01' Opens the second accordeon in the first content occurances
   */
  open_index: '',
  selectors: {
    content: '.content',
    heading: 'h3'
  },
  classNames: {
    heading: 'heading',
    content: 'content',
    active: 'active',
    enabled: 'enabled',
  }
},

open_index: Legt fest, welches accordeon beim Seitenladen geöffnet sein soll.

Wird von einem Hash, beispielsweise "#accordeon-02" überschrieben.

selectors: Legt die Container- und Überschriftenelemente fest.

Beispiel

Ich bin ein Beispiel

HTML

<div class="content">
  <h3>Beispiel</h3>
  <p>Ich bin ein Beispiel</p>   
</div>

Überwacht ob vom Beginn der Seite aus gescrollt wurde und fügt dem HTML "body" Element eine Klasse "scrolled" hinzu wenn es zutrifft.

Config

/**
 * @member   {object}  config  feature options. 
 * @property {number}  offset  the scroll treshold when to trigger the switch
 * 
 * @memberof andboxTheme.features.scrolled
 */
config: {
  offset: 100
},

Offset: In der Configuration kann eingestell werden ab welcher Scrollweite in Pixel das geschehen soll

Beispiel

Scrolle rauf und runter um den Effekt zu sehen.

Code

#dev-themes-logo{
  width:297px;
  transition:all ease 150ms;
}
.scrolled #dev-themes-logo{
  width:150px;
}

Zeigt in einem Horizontalen Balken an wie weit bereits gescrollt wurde

Config

options: {
  selectors: {
    progress: 'progress.scroll',
  }
},

Beispiel

HTML

<progress class="indicator scroll" value="0"></progress>

Scroll to erweitert langweilige HTML Sprungmarken und fügt diesen einen Scrolleffekt hinzu.

Config

options: {
  /**
   * options for the scrollIntoView method
   * @link https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView
   */
  scrollIntoViewOptions: {
    behavior:'smooth'
  }
},

Beispiele

Klicke auf den Link

Gehe ganz nach oben

HTML

<a rel="scrollto" href="#top">Gehe ganz nach oben</a>

Das Attribut "rel" muß den Wert "scrollto" eingetragen haben und es muß auf der Seite ein Element mit der ID des Hashwertes des "href" Attributs geben.

Klicke auf den Button

Gehe ganz nach oben

HTML

<button rel="scrollto" data-href="#top">Gehe ganz nach oben</button>

Das Attribut "rel" muß den Wert "scrollto" eingetragen haben und es muß auf der Seite ein Element mit der ID des Hashwertes des "data-href" Attributs geben.

Eine Figure mit einem Link zu einem Youtube Video und einem Lokalen Vorschaubild werden auf Klick zu einem Youtube Iframe.

In der Figcaption ist der nötige Hinweis zur Datenschutzerklärung einzugeben.

Config

options: {
  youtube_api_src: 'https://www.youtube.com/iframe_api',
  autoplay: true,
  classNames:{
    preview: 'youtube-preview',
    iframe: 'youtube-iframe',
    started: 'started',
    api_script: 'youtube-api',
  },
  selectors: {
    preview: 'figure.youtube-preview',
    caption: 'figcaption',
    api_script: '#youtube-api',
  }
},

Beispiel

HTML

<figure class="youtube-preview">
  <a target="_blank" rel="noopener, noreferrer" href="https://youtu.be/aqz-KE-bpKQ"><img src="img/big-buck-bunny-preview.jpg" /></a>
  <figcaption>Mit Klick auf das Vorschaubild wird eine Verbindung zu Youtube aufgebaut. Lesen Sie sich unsere <a href="datenschutzerklaerung.html">Datenschutzerklärung</a> durch!</figcaption>
</figure>

Eine Figure mit einem Link zur Iframe-Quelle und einem Lokalen Vorschaubild werden auf Klick zu einem eingebetteten Iframe.

In der Figcaption ist der jeweils nötige Hinweis zur Datenschutzerklärung einzugeben.

Config

options: {
    classNames:{
      started: 'started'
    },
    selectors: {
      preview: 'figure.frame-preview',
      frame: '.frame',
    }
},

Beispiel

HTML

<figure class="frame-preview">
  <a target="_blank" rel="noopener, noreferrer" href="https://goo.gl/maps/rjSFFuS6f7zcEKGn7" data-map="https://www.google.at/maps/place/MIMAZ+Immobilien/@47.6964719,13.3457582,7z/data=!4m2!3m1!1s0x0:0x99c9d125e18f64fb?sa=X&ved=2ahUKEwjy6_2E7Lj3AhXk4IUKHasjCqwQ_BJ6BAg6EAU"><img src="img/google-places-preview.png" /></a>
  <figcaption>Mit Klick auf das Vorschaubild wird eine Verbindung zu Google Maps aufgebaut. Lesen Sie sich unsere <a href="datenschutzerklaerung.html">Datenschutzerklärung</a> durch!</figcaption>
</figure>

Eine Figure mit einem Link zur Iframe-Quelle und einem Lokalen Vorschaubild werden auf Klick zu einem eingebetteten Iframe.

In der Figcaption ist der jeweils nötige Hinweis zur Datenschutzerklärung einzugeben.

Config

options: {
  embed_suffix: '/embedded/result,js,html,css/',
  classNames:{
    started: 'started'
  },
  selectors: {
    preview: 'figure.jsfiddle-preview',
    frame: '.frame',
  }
},
templates:{
  frame: '<iframe class="frame" allowfullscreen="allowfullscreen" frameborder="0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" />'
},

Beispiel

HTML

<figure class="jsfiddle-preview">
  <a target="_blank" rel="noopener, noreferrer" href="https://jsfiddle.net/9k2wx3d6/1/"><img src="img/google-places-preview.png" /></a>
  <figcaption>Mit Klick auf das Vorschaubild wird eine Verbindung zu jsFiddle.com aufgebaut. Lesen Sie sich unsere <a href="datenschutzerklaerung.html">Datenschutzerklärung</a> durch!</figcaption>
</figure>