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?
I'm currently having the problem that the javascript related features in my component files breaks when switching to another route in VueJS.
In my Home.vue file, there is a revolution slider system and typed text that were included in the template I purchased. I am trying to implement Vue Router into the template. The template file has all the scripts that require to be included and the is in the content area of the template.
When I switch to some other route and switch back to the Home.vue route, all the javascript related features are broken. The revolution slider doesnt show and the typed text doesnt change anymore. Im assuming that this is because the Home.vue doesnt use the scripts anymore. What's the most optimal way to fix this? Is there some way to like reload the scripts when switching routes?
Im also using Laravel as backend framework.
I have SPA with Laravel and I have main.js file and I set up this file in my main.blade.php file and I write some code in main.js with jquery plugins. Problem is when I change vue-router not working this plugins so main.js file, but when I refresh page everything is fine working.Any idea?
I have a similar issue with angular with using jquery plugins. As vue and angular are SPA(Single Page Application).
The reasoning for this is when the whole document loads, jquery onDocument.ready() will then kick off - enabling event handlers to listen and attached to HTML DOMs.
Using SPA Routers to navigate through your application will not load again everything. So jquery cannot attach listeners to your newly rendered views.
Find a way to manually initialize those jquery plugins.
I am working on a mobile app where I am using MDL for app UI and Angualr js
I bought the theme from themeforest named "FAB".
I am using angular js to show the data from server using API's where I am displaying all the products which is coming from server.I want to run Add to Cart section on the page which has some in-built jquery applied to it. if I dont write Angualr js then my Jquery is working fine.
here is the link of my Page without Angular js
Link without Angular js ,
link with angualr js
I am new to angular js .. so it is something which is blocking jquery click event
While I'm creating plunker for the answer, I ran into the same problem.
But, It was solved by inserting app.js before </body> tag. I think it might be related with angular's inside operation.
Here are different plunkers(app.js in head, app.js in body)
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...