Joomla

Details: Written by: Stanko Milosev; Category: Joomla; Published: 10 February 2022; Last Updated: 10 February 2022; Hits: 1230

In order to add SyntaxHighlighter to Joomla 4 in System -> Site Templates -> "Cassiopeia Details and Files" -> index.php somewhere on line 133 in head tag I have added two lines of code:

<script type="text/javascript" src="syntaxhighlighter/syntaxhighlighter.js"></script>
<link rel="stylesheet" href="syntaxhighlighter/theme.css">

My head block now looks like:

<head>
	<jdoc:include type="metas" />
	<jdoc:include type="styles" />
	<jdoc:include type="scripts" />
	<script type="text/javascript" src="syntaxhighlighter/syntaxhighlighter.js"></script>
	<link rel="stylesheet" href="syntaxhighlighter/theme.css">	  
</head>

Details: Written by: Stanko Milosev; Category: Joomla; Published: 04 June 2019; Last Updated: 09 November 2021; Hits: 2517

One example of anchors in Joomla!:

When using external link

<a id="flights" href="http://milosev.com/2015-01-23-20-08-55/adventures-planning?id=119#flights">Flights:</a>

POI: id="flights"

When using internal link:

<a href="#flights">Flights:</a>

Where anchor looks like:

<div id="flights">Flights:</div>

Details: Written by: Stanko Milosev; Category: Joomla; Published: 31 December 2015; Last Updated: 14 November 2021; Hits: 5478

google maps

Small example how to include Google maps into Joomla!

HTML part is simple:

<div id="map-canvas" style="width: 400px; height: 400px"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Note here that I had to add width and height, otherwise maps refuses to show. Also, note that I added Google APIs.

JS:

/*global google*/
(function (){
    "use strict";

    var mapOptions,
        mapCanvas,
        map;

    mapOptions = {
        zoom: 6,
        center: { lat: -34.397, lng: 150.644},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    mapCanvas = document.getElementById('map-canvas');

    if (!map) {
        map = new google.maps.Map(mapCanvas, mapOptions);
    }

}());

Live example:

Details: Written by: Stanko Milosev; Category: Joomla; Published: 24 February 2015; Last Updated: 06 December 2015; Hits: 5663

First disable editor: System -> Global configuration -> Default Editor: Editor - None -> Save

Then when you upload some script, or jquery file, in my case you can use it like this:

<script type="text/javascript" src="http://www.milosev.com/Download/dontLooseFocus/jquery-2.1.3.js"></script>

But when you use jQuery in your article, then you have to use jQuery instead of "$", for example:

jQuery("#myText").val("");

Page 1 of 4

Add SyntaxHighlighter to Joomla 4

Anchores

Google maps

Add jQuery in Joomla 3.x article