I am developing a new web site, for which I installed the latest version of Joomla, 3.1.1.
I created a template from scratch, using the Twitter Bootstrap. I downloaded the latest version of Bootstrap, and loaded the related javascript in the index.php of my template.
While creating a carousel on one of my pages, I encountered a bug with the carousel indicators that were not reflecting the current picture. By investigating with Firebug, I realised that the bootstrap.min.js that was loaded on the page was not the one that I placed in /template/xxx/js, but another one in /media/jui/js, loaded by Joomla itself. And the one loaded by Joomla was an older version.
So I copied the latest version of bootstrap.min.js to /media/jui/js, and my carousel is now working perfectly. But (there is always a but), I now have some menus that don't work on the admin side of the site, using the default Isis template. If I put back the older version of bootstrap.min.js, they work again...
I would like to do one of these 2 things:
find a way to have Joomla load a different version of bootstrap.min.js for the admin side and the user side of the site
find a way to override the javascript loaded by Joomla from my template index.php
Any idea on how to achieve one or the other?
Thanks,
Patrick
Joomla ships with a slightly modified version of Bootstrap, so you cannot exchange it with a newer version.
The best thing for you to do is to find a version of that carousel script for the Bootstrap version shipped with Joomla. Otherwise you'll get problems on any update.
You can override the media by placing a file at templates/<your_template>/js/jui/bootstrap.min.js. But as warned by nibra, there are some modifications in the JS that you'll need to apply in your environment to keep things working. As well, you'd then be using a version of the JS that isn't intended for what we're shipping in the core currently.
So, it's possible to cleanly do it, but there's a fair amount of risk involved.
I found a solution that seems to be acceptable: I inserted a <script src=" line in the index.php of my template, to load the latest version of the bootstrap template.
As a result, both versions of the bootstrap javascript are loaded, but the most recently loaded is used, and my carousel is working.
I don't expect this to create problems with other modules in Joomla, as I use only basic ones or new modules that I created myself. In any case, the menu module of Joomla was not compatible with bootstrap navbar, and I had to add a few jQuery lines to add the needed classes.
Rgds,
Patrick
remove JHtml::_('bootstrap.framework'); from your index.php of your template and add any version of bootstrap you want manually, no big deal....except you prolly have to change your entire template markup...
Related
I'm using a site that only lets me create new pages by editing them in an iframe. I want to use bootstrap in these, but the main site itself seems to be hosting (much) older versions of bootstrap that are overriding styles in my iframe.
After some googling, I used this method to block the main sites bootstrap CSS file:
<script>$('link[rel=stylesheet][href~="URL of the main sites bootstrap.min.css file"]').remove();</script>
This worked at first, but then a different version of bootstrap (still very old) started overriding again. Instead of playing whack-a-mole, is there a way to simply block the entire folder that houses the main site's CSS files, instead of just a specific file?
The problem
I am in the process of migrating my website to another webserver.
The problem is that on my new site the LaTeX equations are not displayed.
The configuration
I used Wordpress plugin "Duplicator" to copy my site from one server to another.
I have the exact same plugins on each website and the exact same configuration.
I use the plugin LaTeX for WordPress to display the equations:
Both of them are using the CDN from MathJax.
What I tried
I tried to change the CDN on the new site and it did not work
I tried running http or https versions of the CDN and it did not change anything
I tried running a simple html page with the CDN and the equation displayed correctly, telling me it does not seems to be CDN related.
I tried to clear the cache of my browser, I tried to use different browsers, no difference
So I though it was because of the plugin:
I tried disabling every plugin except the LaTex for Wordpress plugin and it did not work
I compared each php file of the plugin between the two versions and they have the same content
The configuration of the plugin is strictly the same
I tried comparing the generated html code between the two pages and I see that there is 8 MathJax related style in the old site, and only 5 on the new site.
The style for the classes:
.MathJax_Preview
.MathJax_Hover_Frame
.MathJax_Display
#MathJax_About
#MathJax_Zoom
But in the working version there are also the styles for the classes:
.MathJax_Preview .MJXf-math
.MJX_Assistive_MathML
.MJXp-script
Moreover I found that the generated html code is different.
Example of the code on a working test page:
<script type="math/tex" id="MathJax-Element-1">1+x=x^2</script>
We can clearly see the math "1+x=x^2" inside the script.
But on the non working page, the math is gone:
<script type="math/tex" id="MathJax-Element-1"></script></p>
When the page load, I can quickly see the preview image being displayed, and then dissapear.
The Question
What can be the cause of this problem? How can I fix it?
---------------- EDIT -----------------
The Answer
The problem was with the version of PHP.
I was using PHP 7.1 on the new server and 5.6 on the old one.
The plugin was using regex to make text replacement:
$text= preg_replace('/&#x([a-f0-9]+);/mei',"chr(0x\\1)",$text);
By removing the /e flag in each preg_replace function it fixed the plugin.
$text= preg_replace('/&#x([a-f0-9]+);/mi',"chr(0x\\1)",$text);
alexandrekow wrote the answer in his question:
The problem was with the version of PHP.
I was using PHP 7.1 on the new server and 5.6 on the old one.
The plugin was using regex to make text replacement:
$text= preg_replace('/&#x([a-f0-9]+);/mei',"chr(0x\\1)",$text);
By removing the /e flag in each preg_replace function it fixed the plugin.
$text= preg_replace('/&#x([a-f0-9]+);/mi',"chr(0x\\1)",$text);
i am having troubles with defer and async js files.
My website is loading JQuery and Jquery-UI libraries and they are kind of big files even .min files
When i am moving those libraries to the bottom of website or just defering - asyncing them, my website stops rendering most of elements, for example
Select2 plugin not working properly on mobile phones
Jquery range slider not dragging
Some other custom elements like infinite load are not working as well
So i am trying to improve my website speed, but those 2 libraries render blockers and with them i got only 53 rating on PageSpeed Insights.
So another way to make Website run faster is merging(combine) JS files, but after combine website stops rendering also, so i guess only some of them are able to be combined.
Can someone help me resolve this problem ? below i will give a list of all JS that is used on my website
jquery-2.1.1.min.js
greensock.js
layerslider.transitions.js (actually trying to find some lightweight alternative)
layerslider.kreaturamedia.jquery.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
select2.min.js
jquery.tooltipster.min.js
bootstrap.min.js
placeholders.js
jquery.magnific-popup.min.js
owl.carousel.min.js
html5shiv.js
What i already did
Browser Caching - On
GZip on the fly - On
So and the main question is how to move jquery to the bottom without losing functionality
Which libraries i am able to merge, to reduce HTTP requests
In addition to what #Dr.Web said you can also combine them into one file and make sure that the plugin code is added at the bottom of jQuery
Please note that using async let's the browser know that the script can be loaded asynchronously and not necessarily in order. This opens up issues when you are trying to load an async script that has multiple dependencies. In this case you should load the jQuery in your footer without async attribute and load the jQueryUI using async attribute.
Reference: Source
I am trying to implement a split view, as we can see on jquery mobile demo:
http://jquerymobile.com/demos/1.1.1/
The plugin :
http://asyraf9.github.com/jquery-mobile/
Inside the archive, they are many (unneeded) files, and the author also include an old jquery mobile version.
I already have the latest version of jquery mobile, and i'm trying to add juste the files I need to make it work.
I have readen the readme files, the author show a basic html page to make it work, but don't provide any explaination about the installation.
I'm pretty sure i don't need everything.
The best way is opening the index.html in the zip file and check what files are included in header, which can make splitview run correctly. You need include all those files too. Another thing is you need to notice the different versions of jquery mobile and jquery (both js and css files ). For my experience, it seemly cannot work fine with latest versions of jquery mobile and jquery. What I did is open each js and css file and copy them to my library.
Hope this could be helpful for you.
Splitview makes changes INSIDE JQM (adds a class .forgotwhatitwas to events, so they can be disabled later on from inside splitview.js). Unless you port these tweaks over to the current version of JQM, the splitview script will not get you anywhere.
I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.