Archives

bookmark_borderPHP-Function: Create slugs from string

Posted on by Christian Hänsel

Every website needs to implement readable URLs for internal linking. When you are using a blogging tool like WordPress or a CMS like Typo3, you automatically get the URL slug generator built in.

But sometimes, you are developing your own software and are in need of a function that simply generates a slug for you.

Search no more, because here it is: the PHP function to generate slugs for you.

function slugify($input, $word_delimiter='-') {
	$slug = iconv('UTF-8', 'ASCII//TRANSLIT', $input);
	$slug = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", '', $slug);
	$slug = strtolower(trim($slug, '-'));
	$slug = preg_replace("/[\/_|+ -]+/", $word_delimiter, $slug);
	return $slug;
}

$slugString = slugify("This is just a small test for a slug creation");
echo $slugString;
// returns : this-is-just-a-small-test-for-a-slug-creation

This PHP function takes a simple string as first parameter, which will be turned into your slug. In this example, we are using the string This is just a small test for a slug creation .

The function slugify  then returns a nice, readable slug for you.

this-is-just-a-small-test-for-a-slug-creation

If you want to use another delimiter, simply pass it as the second parameter to the function.

bookmark_borderjsPDF / html2pdf: add header and footer text to each page

Posted on by Christian Hänsel

In a recent project I needed to add header and footer text (like page count) to every single generated html2pdf / jsPDF page.

There are a lot of instructions on the web, but none of those are really doing what I wanted.

Basically, I needed to use the callback  function of html2pdf to loop over the total pages, and then access that single page to add text to it.

html2PDF: Add a header and footer to every page

So the first step is to use the callback  function of html2pdf :

html2pdf(content, {
    margin: 10,
    filename: "my.pdf",
    image: {type: 'jpeg', quality: 1},
    html2canvas: {dpi: 72, letterRendering: true},
    jsPDF: {unit: 'mm', format: 'a4', orientation: 'landscape'},
    pdfCallback: pdfCallback
})

And within the callback function, I am looping over the pages of the generated document. You can find the total number of pages within the returned jsPDF-Object  which is called pdfObject in my example.

function pdfCallback(pdfObject) {
    var number_of_pages = pdfObject.internal.getNumberOfPages()
    var pdf_pages = pdfObject.internal.pages
    var myFooter = "Footer info"
    for (var i = 1; i < pdf_pages.length; i++) {
        // We are telling our pdfObject that we are now working on this page
        pdfObject.setPage(i)
        // The 10,200 value is only for A4 landscape. You need to define your own for other page sizes
        pdfObject.text(myFooter, 10, 200)
    }
}

Using this code you can simply add a header and a footer text to each page of the generated PDF document.

To add a header text, you can simply add the following line to the above code.

pdfObject.text("my header text", 10, 10)

This will add the text “my header text” at the position x = 10, y = 10 to every page of your PDF document.

bookmark_borderCheck all checkboxes with jQuery and trigger change event

Posted on by Christian Hänsel

With jQuery, it is easy to check and uncheck all checkboxes on a page. But that does not fire the change event of the changes checkboxes. But what do you do if you need to have to do something when the status of the checkboxes changes? It’s actually quite easy.

Here is what we are going to achieve:

So what we are going to do is

  • Set up an event listener which fires when the “Check all checkboxes” checkbox is being checked or unchecked (change event )(phew, loads of checkboxes there…)
  • Set up an event listener which fires when one of the checkboxes (or all of them) is being changed.

I have set up 30 checkboxes to play with:

<label for="checkbox1" <input class="checkme" type="checkbox" id="checkbox1"> Checkbox 1</label><br>
<label for="checkbox2" <input class="checkme" type="checkbox" id="checkbox2"> Checkbox 2</label><br>
<label for="checkbox3" <input class="checkme" type="checkbox" id="checkbox3"> Checkbox 3</label><br>
<label for="checkbox4" <input class="checkme" type="checkbox" id="checkbox4"> Checkbox 4</label><br>
<label for="checkbox5" <input class="checkme" type="checkbox" id="checkbox5"> Checkbox 5</label><br>
<label for="checkbox6" <input class="checkme" type="checkbox" id="checkbox6"> Checkbox 6</label><br>
<label for="checkbox7" <input class="checkme" type="checkbox" id="checkbox7"> Checkbox 7</label><br>
<label for="checkbox8" <input class="checkme" type="checkbox" id="checkbox8"> Checkbox 8</label><br>
<label for="checkbox9" <input class="checkme" type="checkbox" id="checkbox9"> Checkbox 9</label><br>
<label for="checkbox10" <input class="checkme" type="checkbox" id="checkbox10"> Checkbox 10</label><br>
<label for="checkbox11" <input class="checkme" type="checkbox" id="checkbox11"> Checkbox 11</label><br>
<label for="checkbox12" <input class="checkme" type="checkbox" id="checkbox12"> Checkbox 12</label><br>
<label for="checkbox13" <input class="checkme" type="checkbox" id="checkbox13"> Checkbox 13</label><br>
<label for="checkbox14" <input class="checkme" type="checkbox" id="checkbox14"> Checkbox 14</label><br>
<label for="checkbox15" <input class="checkme" type="checkbox" id="checkbox15"> Checkbox 15</label><br>
<label for="checkbox16" <input class="checkme" type="checkbox" id="checkbox16"> Checkbox 16</label><br>
<label for="checkbox17" <input class="checkme" type="checkbox" id="checkbox17"> Checkbox 17</label><br>
<label for="checkbox18" <input class="checkme" type="checkbox" id="checkbox18"> Checkbox 18</label><br>
<label for="checkbox19" <input class="checkme" type="checkbox" id="checkbox19"> Checkbox 19</label><br>
<label for="checkbox20" <input class="checkme" type="checkbox" id="checkbox20"> Checkbox 20</label><br>
<label for="checkbox21" <input class="checkme" type="checkbox" id="checkbox21"> Checkbox 21</label><br>
<label for="checkbox22" <input class="checkme" type="checkbox" id="checkbox22"> Checkbox 22</label><br>
<label for="checkbox23" <input class="checkme" type="checkbox" id="checkbox23"> Checkbox 23</label><br>
<label for="checkbox24" <input class="checkme" type="checkbox" id="checkbox24"> Checkbox 24</label><br>
<label for="checkbox25" <input class="checkme" type="checkbox" id="checkbox25"> Checkbox 25</label><br>
<label for="checkbox26" <input class="checkme" type="checkbox" id="checkbox26"> Checkbox 26</label><br>
<label for="checkbox27" <input class="checkme" type="checkbox" id="checkbox27"> Checkbox 27</label><br>
<label for="checkbox28" <input class="checkme" type="checkbox" id="checkbox28"> Checkbox 28</label><br>
<label for="checkbox29" <input class="checkme" type="checkbox" id="checkbox29"> Checkbox 29</label><br>
<label for="checkbox30" <input class="checkme" type="checkbox" id="checkbox30"> Checkbox 30</label><br>

The first listener: What to do when one of the boxes is being checked.

// The box's status has changed. 
$(document).on('change', '.checkme', function () {
    var label = $(this).parent();
    if ($(this).prop('checked')) {
        label.css('color', 'red');
    } else {
        label.css('color', 'black');
    }

});

Here, we are setting up the event listener to listen for the change event  of the checkboxes with the class checkme . Once the event fires, the surrounding label’s text color is set to red in case the checkbox is checked. Otherwise, it’s set to black.

If you check or uncheck a checkbox now, the color will change. Yay, it’s working.

Let’s check them all!

Here’s a bit of JavaScript that does exactly that:

// One checkbox to check them all
$('#checkThemAll').on('change', function () {
    if ($(this).prop('checked')) {
        $('.checkme').each(function () {
            $(this).prop('checked', true).trigger('change');
        });
    } else {
        $('.checkme').each(function () {
            $(this).prop('checked', false).trigger('change');
        });
    }
});

Notice the .trigger(‘change’)  at the there? This part “manually” triggers the change event  of the changed elements.

And hey, this even works with Foundation’s Colored Switches! (See it in the demo below).

Oh yeah, here’s the demo :)

Hope I could help :)

bookmark_borderLösung: VirtualBox und Ubuntu: ALTGr funktioniert nicht

Posted on by Christian Hänsel

Wenn man VirtualBox auf Windows nutzt und (wie in meinem Fall) als Gastsystem Ubuntu (Desktop wie auch Server) betreibt, hat man das Problem, dass die AltGr-Taste nicht funktioniert. Dies verhindert unter anderem die Eingabe der Zeichen “@”, “\”, “€” usw…. halt alle Zeichen, für die man die AltGr-Taste nutzt.

Eine sehr einfache Abhilfe findet sich in den Einstellungen von VirtualBox. Hier ist die bebilderte Anleitung.

1. Öffnen des Einstellungen-Dialogs

Settings1

2. Entfernen des Hakens bei “Auto-Fangmodus für Tastatur”

Settings2

Die Änderungen werden durch Klicken auf “OK” gespeichert. Ein Neustart der VM ist nicht notwendig.
Alle AltGr-Funktionen sind sofort auf dem Gastsystem verfügbar.