# developers.jseidl.at


# Bootstrap NoGutter

Bootstrap Gutter entfernen

Um das Bootstrap Gutter zu entfernen einfach auf das **row** element die Klasse **no-gutters** hinzufügen.

### CSS

<pre class="language-scss" data-line-numbers><code class="lang-scss">.row.no-gutters {
    margin-right: 0;
<strong>    margin-left: 0;
</strong>    &#x26; > [class^="col-"],
    &#x26; > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}
</code></pre>


# Center image

Center an image vertical and horizontal.

### HTML

{% code lineNumbers="true" fullWidth="false" %}

```html
<div class="wrap">
    <a href="#">
        <div>
            <span></span>
            <img src="" alt="" />
        </div>
    </a>
    <a href="#">
        <div>
            <span></span>
            <img src="" alt="" />
        </div>
    </a>
    <a href="#">
        <div>
            <span></span>
            <img src="" alt="" />
        </div>
    </a>
</div>
```

{% endcode %}

### CSS / SCSS

{% code lineNumbers="true" %}

```scss
div {
    height: 45px;
    min-width: 45px;
    text-align: center;
    margin-right: 14px;
    padding: 4px;
    position: relative;
    background-color: white;
    display: inline-block;
    span {
        width: 10px;
        height: 100%;
        display: inline-block;
        margin-left: -10px;
        vertical-align: middle;
    }
    img {
        vertical-align: middle;
        max-width: 120px;
    }
}
```

{% endcode %}


# Hamburger Menu (Mobile Menu)

Create a simple & useful mobile menu

{% hint style="warning" %}
**Dependency**: jQuery
{% endhint %}

### HTML

<pre class="language-html" data-line-numbers><code class="lang-html">&#x3C;div id="menu-trigger" class="pull-right hamburger-menu">
<strong>    &#x3C;span>&#x3C;/span>
</strong>    &#x3C;span>&#x3C;/span>
    &#x3C;span>&#x3C;/span>
&#x3C;/div>
</code></pre>

### CSS

<pre class="language-scss" data-line-numbers><code class="lang-scss">#menu-trigger{
    height: 36px;
    width: 36px;
    margin: 10px;
<strong>    span{
</strong>        transition: 0.1s linear;
        width: 100%;
        height: 3px;
        margin-top: 6px;
        background-color: white;
        display: block;
    }
<strong>    &#x26;.active{
</strong>        span{
            transition: 0.1s linear;
                &#x26;:nth-child(1){
                transform: rotate(45deg);
                position: relative;
                top: 10px;
            }    
            &#x26;:nth-child(2){
                display: none;
            }
            &#x26;:nth-child(3){
                transform: rotate(-45deg);
                top: 1px;
                position: relative;
<strong>            }
</strong>        }
    }
}
</code></pre>

### JavaScript

{% code lineNumbers="true" %}

```javascript
var $hamburgerMenu = $(".hamburger-menu");

$hamburgerMenu.on("click", function(e) {
        $hamburgerMenu.toggleClass("active");
        $(".mobile-navigation").toggleClass("active");
});
```

{% endcode %}


# Table-Cell

Center Elements in an Element

### CSS / SCSS

###

{% code lineNumbers="true" %}

```scss
.display-table {
    display: table;
    width: 100%;
    height: 100%;
    .display-table-cell {
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
        &.left {
            text-align: left;
        }
        &.right {
            text-align: right;
        }
        &.top {
            vertical-align: top;
        }
        &.bottom {
            vertical-align: bottom;
        }
    }
}
```

{% endcode %}

### HTML

{% code lineNumbers="true" %}

```html
<div class="display-table">
        <div class="display-table-cell">
                <p>I am Centered</p>
        </div>
</div>
```

{% endcode %}


# mMenu Hide

Hiee the mMenu at loading

Das jQuery Plugin [mMenu](https://mmenujs.com/) versteckt das mobile Menü erst nach laden. Um das anzeigen des mobilen Menüs zu verhindern kann man diesen code verwenden.

{% hint style="warning" %}
**Dependency:** mMenu
{% endhint %}

### CSS

{% code lineNumbers="true" %}

```scss
nav#menu:not(.mm-menu) {
    display: none !important;
}
```

{% endcode %}


# Scroll to Element

Scroll to a element using JavaScript, selecting time & element.

## JavaScript function <a href="#javascript-function" id="javascript-function"></a>

<pre class="language-javascript"><code class="lang-javascript">function scrollDown(triggerClass, elementToScroll, timeToScroll){
    $(triggerClass).on('click', function(){
        $('html, body').animate({
            scrollTop: ($(elementToScroll).offset().top)
        }, timeToScroll);
<strong>    })
</strong>}
</code></pre>

## JavaScript Call <a href="#javascript-call" id="javascript-call"></a>

```javascript
$(document).ready(function () {
    scrollDown('#scroll-down', '.page-content', 1000);
});
```

## HTML <a href="#html" id="html"></a>

```html
<div id="scroll-down"></div>
```


# Cookiebanner

For the EU-Cookie law you have to install a cookiebanner.

{% hint style="danger" %} <mark style="color:red;">**Outdated!**</mark>
{% endhint %}

## TYPO3 <a href="#typo3" id="typo3"></a>

### Version 1 (Extension) <a href="#version-1-extension" id="version-1-extension"></a>

You can use my Extension its in [TYPO3 TER](https://extensions.typo3.org/extension/cookiebanner/) and its called [cookiebanner](https://extensions.typo3.org/extension/cookiebanner/)

The Documentation can be found [here](https://github.com/Thejuse/cookiebanner/wiki/Get-Started)

***

### Version 2 (Template) <a href="#version-2-template" id="version-2-template"></a>

#### TypoScript

{% code lineNumbers="true" %}

```typoscript
page.headerData.20 = TEXT
page.headerData.20.value (
    #Insert CookieCode There
)
```

{% endcode %}

#### DemoCode

{% code lineNumbers="true" %}

```typoscript
page.headerData.20 = TEXT
page.headerData.20.value (
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    <script>
        window.addEventListener("load", function(){
        window.cookieconsent.initialise({
        "palette": {
        "popup": {
        "background": "#780c0d",
        "text": "#ffffff"
        },
        "button": {
        "background": "#ffffff",
        "text": "#780c0d"
        }
        },
        "content": {
        "message": "Diese Webseite verwendet Cookies, um die Bedienfreundlichkeit zu erhöhen.",
        "dismiss": "OK",
        "link": "Mehr erfahren",
        "href": "/impressum/"
        }
        })});
    </script>
)
```

{% endcode %}

***

### StaticCode

{% code lineNumbers="true" %}

```html
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
    window.addEventListener("load", function(){
    window.cookieconsent.initialise({
    "palette": {
    "popup": {
    "background": "#000"
    },
    "button": {
    "background": "#f1d600"
    }
    }
    })});
</script>
```

{% endcode %}


# DCE Backgroundimage (Section use)

If you want a section use fal you can render this also as Backgroundimage

{% code lineNumbers="true" %}

```html
{namespace dce=ArminVieweg\Dce\ViewHelpers}
<div class="container-fluid">
    <div class="row">
        <div class="slider" data-role="slider">
            <f:for each="{field.sliderelement}" as="slider-element">
                <f:for each="{slider-element.image}" as="image">
                    <div class="slide" style="background-image: url('{f:uri.image(image:'{image}',maxWidth:'1820')}')">
                        <div class="container">
                            <div class="content">
                                <h3>{slider-element.category}</h3>
                                <h4>{slider-element.header}</h4>
                                <p>{slider-element.text}</p>
                            </div>
                        </div>
                    </div>
                </f:for>
            </f:for>
        </div>
    </div>
</div>
```

{% endcode %}


# DCE Background Image

You can render a FAL-image as background image in a DCE.

{% code lineNumbers="true" %}

```html
<div style="background-image:url({f:uri.image(src:'{fileReference.uid}',maxWidth:'720',treatIdAsReference:'1')})"></div>
```

{% endcode %}


# Custom Form for Indexed Search

You can add a custom indexed search form for your TYPO3 indexed search extension.

{% code lineNumbers="true" %}

```html
<f:form class="main-search" pageUid="14" method="post" id="tx_indexedsearch" noCacheHash="true" absolute="0" action="search" extensionName="IndexedSearch" pluginName="pi2" controller="Search">
    <div class="hidden tx-indexedsearch-hidden-fields">
        <input name="tx_indexedsearch_pi2[search][_sections]" value="0" type="hidden">
        <input id="tx_indexedsearch_freeIndexUid" name="tx_indexedsearch_pi2[search][_freeIndexUid]" value="_" type="hidden">
        <input id="tx_indexedsearch_pointer" name="tx_indexedsearch_pi2[search][pointer]" value="0" type="hidden">
        <input name="tx_indexedsearch_pi2[search][ext]" value="" type="hidden">
        <input name="tx_indexedsearch_pi2[search][searchType]" value="1" type="hidden">
        <input name="tx_indexedsearch_pi2[search][defaultOperand]" value="0" type="hidden">
        <input name="tx_indexedsearch_pi2[search][mediaType]" value="-1" type="hidden">
        <input name="tx_indexedsearch_pi2[search][sortOrder]" value="rank_flag" type="hidden">
        <input name="tx_indexedsearch_pi2[search][group]" value="" type="hidden">
        <input name="tx_indexedsearch_pi2[search][languageUid]" value="-1" type="hidden">
        <input name="tx_indexedsearch_pi2[search][desc]" value="" type="hidden">
        <input name="tx_indexedsearch_pi2[search][numberOfResults]" value="10" type="hidden">
        <input name="tx_indexedsearch_pi2[search][extendedSearch]" value="" type="hidden">
    </div>
    <div class="input-row">
        <div class="form-group tx-indexedsearch-form">
            <f:form.textfield name="search[sword]" value="" id="tx-indexedsearch-searchbox-sword" class="form-control tx-indexedsearch-searchbox-sword" placeholder="Webseite durchsuchen..." />
        </div><!-- /.form-group -->
        <div class="form-group tx-indexedsearch-search-submit">
            <f:form.button type="submit" class="btn btn-default tx-indexedsearch-searchbox-button" name="search[submitButton]" value="" id="tx-indexedsearch-searchbox-button-submit">
                <i class="fa fa-search"></i>
            </f:form.button>
        </div>
    </div>
</f:form>
```

{% endcode %}


# Frontendlayouts for Bodyclasses

If you want for a specific page a specific layout or other custom things, you can add body classes. In TYPO3 you can add a class via Frontendlayouts.

## PageTS <a href="#pagets" id="pagets"></a>

```typoscript
### 0 = Default
TCEFORM.pages.layout {
    addItems {
        1 = Features
        2 = Stories
        3 = Pricing
    }
    altLabels {
        1 = Features
        2 = Stories
        3 = Pricing
    }
}
```

## SetupTS <a href="#setupts" id="setupts"></a>

```typoscript
[page|layout = 1]
page.bodyTagCObject = COA
page.bodyTagCObject.wrap = <body class="features-page">
}
[end]
[page|layout = 2]
page.bodyTagCObject = COA
page.bodyTagCObject.wrap = <body class="stories-page">
}
[end]
[page|layout = 3]
page.bodyTagCObject = COA
page.bodyTagCObject.wrap = <body class="pricing-page">
}
[end]
```


# Frontendlayouts

Add Frontendlayouts to your TYPO3 distribution.

## Basic Informations <a href="#basic-informations" id="basic-informations"></a>

You can select a Frontendlayout in the TYPO3 backend when you edit a Page. („Apperiance“ Tab)

### PageTS <a href="#pagets" id="pagets"></a>

{% code lineNumbers="true" %}

```typoscript
# Frontendlayouts 
TCEFORM.tt_content {
    layout{
        addItems {
            100 = Background Red
            101 = Background Gray
        }
        altLabels{
            100 = Background Red
            101 = Background Gray
        }
    }
}
```

{% endcode %}

### SetupTS <a href="#setupts" id="setupts"></a>

{% code lineNumbers="true" %}

```typoscript
# Frontendlayouts (Wraps)
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
    key.field = layout
    100 = TEXT
    100.value = <div class="red-bg">|</div>
    101 = TEXT
    101.value = <div class="graydark-bg">|</div>
}
```

{% endcode %}

### Fluid/HTML <a href="#fluidhtml" id="fluidhtml"></a>

{% code lineNumbers="true" %}

```html
<f:if condition="{data.layout} == 101">
    <f:then>
        Markup für das bestimmte Frontendlayout
    </f:then>
    <f:else>
        Standardmarkup
    </f:else>
</f:if>
```

{% endcode %}


# Force SSL

Force SSL (https\://) via the .htaccess

```apacheconf
RewriteBase /
RewriteEngine on
RewriteCond %{SERVER_PORT} !443
RewriteRule (.*) https://%{HTTP_HOST}$1 [R=301,L]
```