Including Bootstrap to Crossrider project - javascript

I'm working on Crossrider project, which should be styled as bootstrap(both js and css).
I tried to include them as other js files inside extension.js, but instead of styling popover, current site was styled.
At the moment I'm using standard <link> and <script> tags inside popover.html.
What is the best way to attach those files to project?

There isn't a lot to go on here, but from the description provided it seems you are injecting the bootstrap components into the page scope and hence experiencing conflicts with sites using bootstrap. I suggest you make your bootstrap classes unique to avoid this issue. I found the following site which might help you get started: https://formden.com/blog/isolate-bootstrap
[Disclosure: I am a Crossrider employee]

Related

Adding external HTML CSS and Javascript in Wordpress

I created a cookie banner with some HTML, CSS and Javascript.
My question is how can I add these files within Wordpress to make the banner works on the whole site?
I know I could just use a Wordpress plugin to generate a cookie banner, but I was wondering if it was possible to integrate my code.
Thanks
These are the following methods:
You may use the plugin "Header and Footer" (This plugin have different TABS like html, CSS, JavaScript) and add your whole in this plugin. So Your code work in whole WordPress website.
First, you need to install and activate the SyntaxHighlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you can go ahead and edit the blog post where you want to display the code.

Update CSS Variable with Javascript On page load without causing a flicker or glitch

I am using one HTML file as the template for many pages and want to show different coloured buttons and links on some pages. I am trying to use CSS VARIABLES so that I can update them with javascript. But it all happens once the JS is loaded which causes a glitch.
Can anyone suggest a better solution or any alternative approach?
Project uses Jquery, Bootstrap and a Laravel backend.

Applying a dependency with javascript to Angular 2 such as bootstrap, foundation or jquery

creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.
You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).

Popover for Twitter

I am trying to make the popover feature that is included in bootstrap which Twitter has provided. I have been trying to make it work for a while now and am totally burnt out of ideas on making it work, here is a sample of what I currently have for it http://jsfiddle.net/JPf9y/1
HTML
popover
Javascript
$("a[rel=popover]").popover();
It won't work when I click it, I checked to make sure my directory is written correctly.
Thank you!
You need to include the bootstrap javascript, bootstrap css, and jQuery javascript in your page. They can be downloaded here:
http://twitter.github.com/bootstrap/assets/bootstrap.zip
http://code.jquery.com/jquery-1.9.1.js
For the JSFiddle you can include jQuery under the Frameworks and Extensions menu on the left and other files, such as bootstrap's js and css, using the External Resources tag on the left side. For your fiddle I referenced the .js and .css files from http://cdnjs.com/.
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css
Updated JSFiddle

prettyPhoto in Expression Engine

Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.

Categories