Loading...
 
Skip to main content

History: Bootstrap JavaScript JQuery

Preview of version: 20 (current)

bootstrap.js and external .js (jQuery)

preliminary remark
Tiki uses jQuery 1.10.2 whilst Bootstrap users at the moment can use either 1.10.2 or 2.0.1. It is said, that one should use the last version of either one of both branches.So we are fine in the respect of jQuery compatibility.

bootstrap.js -> add in tiki-setup.php

To integrate Bootstrap into Tiki we have to add bootstrap.js to Tiki to make Bootstraps dropdown elements and the mobile navigation working. The first question is, where to store the bootstrap files ... I assume, that we will get it with the composer into the "vendors" directory, when we install via shell/SSH/SVN and that this will be the place aswell, when we install a packed Tiki via FTP. So assumably we will have a directory /vendors/bootstrap with all the content in it:

bootstrap directories
  • vendors/bootstrap
  • vendors/bootstrap/dist
  • vendors/bootstrap/dist/css
  • vendors/bootstrap/dist/fonts
  • vendors/bootstrap/dist/js
  • vendors/bootstrap/examples
  • vendors/bootstrap/examples/...
  • vendors/bootstrap/fonts
  • vendors/bootstrap/_includes
  • vendors/bootstrap/js
  • vendors/bootstrap/js/tests
  • vendors/bootstrap/_layouts
  • vendors/bootstrap/less
  • vendors/bootstrap/assets
  • vendors/bootstrap/assets/css
  • vendors/bootstrap/assets/ico
  • vendors/bootstrap/assets/js
  • vendors/bootstrap/assets/img

To integrate bootstrap.js into Tiki we have to add the file into the file /tiki-setup.php in the document root of the Tiki installation. This is done with the following line of code near the end of the file (somebody find a good place?):

loading by default

Copy to clipboard
$headerlib->add_jsfile('vendors/bootstrap/dist/js/bootstrap.js');

It is possible to integrate the "Bootstrap Plugins" which sort out for example the drop down behaviour, one by one, but the easiest is to integrate the bootstrap.js because it contains all plugins.

It would be further more not a big deal to set up a preference for Bootstrap and to load the .js file only when the preference ist active (tried today and worked). Do we need that? Code would be then:

add conditional to a preference

Copy to clipboard
if ( $prefs['style_bootstrap_layout'] == 'y' ) {     $headerlib->add_jsfile('bootstrap/swfobject/swfobject.js')}

Pls mind, that the second version needed modification in
/lib/prefs/style.php and /templates/admin/include_look.tpl
aswell. That is pretty much it, what is necessary from the JavaScript/jQuery point of view to make Bootstrap running in Tiki.

external jQuery plugins

Wouldn't it be awesome, if even non-tecchie users could easily download jQuery Plugins like for example responsive slideshows and integrate them into tiki mainly with three easy steps?
The idea is as following:

  1. The user downloads the plugin and uploads it to the Tiki document root in a directory "/customjquery", similar to vendors
  2. The user types the path to the .js file into an array in "Look and Feel" similar to the existing custom code areas or similar to the domain areas in "General -> Navigation"
    one line per plugin
  3. The user copies the Plugins .css file to an appropriate place in "/styles" and adds it to his theme with @inlcude


Codewise there should be a few lines in tiki-setup.php that "check" for the above mentioned array and include all plugins line per line into the tiki-setup.php.

There could be naming conflicts of variables and selector between different external .js files, but we could include a linktip to the doc.t.o and there provide a few hints how to deal with such iussues in general. More to write about .js in respect of Bootstrap? Well, go on ...

Alias

BS js

History

Advanced
Information Version
Mon 03 of Apr, 2023 03:43 GMT-0000 Gary Cunningham-Lee Categorized as Archived (Registered users only) due to outdated information. 20
View
Tue 05 of Nov, 2013 02:15 GMT-0000 Torsten Fabricius ML asked to rename for the purpose of SEO optimisation 19
View
Sun 03 of Nov, 2013 00:37 GMT-0000 Torsten Fabricius fix typo 18
View
Sun 03 of Nov, 2013 00:37 GMT-0000 Torsten Fabricius done for now 17
View
Sun 03 of Nov, 2013 00:15 GMT-0000 Torsten Fabricius added info - not yet finished 16
View
Thu 31 of Oct, 2013 20:37 GMT-0000 Torsten Fabricius 15
View
Thu 31 of Oct, 2013 20:19 GMT-0000 Torsten Fabricius it is even more pain 14
View
Thu 31 of Oct, 2013 20:18 GMT-0000 Torsten Fabricius it's a pain 13
View
Thu 31 of Oct, 2013 20:17 GMT-0000 Torsten Fabricius 12
View
Thu 31 of Oct, 2013 20:14 GMT-0000 Torsten Fabricius 11
View
Thu 31 of Oct, 2013 20:13 GMT-0000 Torsten Fabricius no comment 10
View
Thu 31 of Oct, 2013 20:12 GMT-0000 Torsten Fabricius no comment 9
View
Thu 31 of Oct, 2013 20:11 GMT-0000 Torsten Fabricius 8
View
Thu 31 of Oct, 2013 20:08 GMT-0000 Torsten Fabricius arrg WIEEESIEEEWIEEEG ... styling 7
View
Thu 31 of Oct, 2013 19:58 GMT-0000 Torsten Fabricius page style - I hate WYSIWYG!!!! aslways necessary to go through HTML a few times until it fits 6
View
Thu 31 of Oct, 2013 19:47 GMT-0000 Torsten Fabricius 5
View
Thu 31 of Oct, 2013 19:43 GMT-0000 Torsten Fabricius 4
View
Thu 31 of Oct, 2013 19:37 GMT-0000 Torsten Fabricius 3
View
Thu 31 of Oct, 2013 19:34 GMT-0000 Torsten Fabricius started the "bootstrap.js" page on themes.t.o 2
View
Tue 29 of Oct, 2013 02:39 GMT-0000 Torsten Fabricius startes with .js 1
View