I'm trying to use the actionsheet plugin with jqMobi and the overlay panel loads and the html is added to the DOM, but the animation doesn't run and I can't actually see the actionsheet.
I've included the script and link tags for the javascript file and stylesheet and confirmed that both are being loaded by the browser.
When I run the code from the api docs only the overlay is shown :s
$.ui.actionsheet("<a href='javascript:;' class='button'>Settings</a> <a href='javascript:;' class='button red'>Logout</a>")
Do I need to add the javascript and css files or are they included by default with jqMobi UI?
if you aren't using jqUi, plugins are generally accessed by $(selector)._function(params)
$(document.body).actionsheet("<a href='javascript:;' class='button'>Settings</a> <a href='javascript:;' class='button red'>Logout</a>")
Related
I have created a React Application and copied navbar from bootstrap component. I also added cdn files at index.html file. Also changed changed class to className but still but when run I get error with failed to compile and cursor is placed on data-toggle="colapse". upon removing this line it moves to next one. but its not working. .
working with bootstrap in react is not simple, it is easier to use React-bootstrap.
https://react-bootstrap.github.io/
you then just download the npm package and import the buttons and other options you want.
If you want to go about doing it this way, then you would need to use <button className="bootstrapclass">hello</button>
or specifically
<button className="btn btn-secondary">hello</button>
outside of that, there is no way to use bootstrap.
it is advisable that you share your code, so people can see what the mistake is.
The error was because of attaching cdn at outside the body. I resolved this by placing cdn of CSS and JS at just before the closing body tag.
I am using snipcart which looks at the static html document and looks for #snipcart element. You can put vue elements in there and the magic will be done on the snipcart.js side.
When using Gatsby, in order to edit the index.html file, you have to create a React file called html.js. In this file I can successfully add Snipcart and everything works. That is until I want to customize the cart and Snipcart uses vue for that. You have to add the vue items in between the #snipcart div.
snipcart-docs-customization
An example
<div hidden id="snipcart" data-api-key="<API_KEY>">
<component-to-override>
<div class="root">
{{ vue_variable.itemText }}
</div>
</component-to-override>
</div>
The problem is, webpack will throw an error if I add vue. This makes sense. So Gatsby has a couple of nice middleware type API's gatsby-ssr and gatsby-browser that might help this.
Looking at these API's I am still unsure how to do this. I need this code added to the index.html as Gatsby is rendering the static pages, at least I feel that is best.
Because Snipcart looks in the #snipcart divs innerHTML for vue formatted components, this is difficult because webpack wants to convert the vue, I do not want it converted.
How can I go about this?
Some useful links I have entertained:
Gatsby Lifecyle
Gatsby-ssr api
Gatsby-browser api
Snipcart customizing components
I have an image shown below and I want to make it into a button where you can download files. I have seen examples on how to download such as Angularjs simple file download
but this didn't work for me.
<li ng-init="imgsrc_local='../img/local.png'"></li>
Try to use button tag and an img with ng-src pointing out to your image path, like this:
<button><img ng-src="../img/local.png"/></button>
Use md-button and md-icon using angular material
<md-button class="md-fab">
<md-icon md-svg-src="path"></md-icon>
</md-button>
To use this you have to add angular_material.js script to your html
You can install it using bower command
bower install angular-material
Then add this to your html file
<script src="bower_components/angular-material/angular-material.js"></script>
I am trying an Angular app project with the Google Angular Material library.
Added #master branch via Bower as directed. Linked the CSS and JS fils from Bower Components to my index page as directed.
Works as expected, except things like dialogs have SVG icons, which are defined in the html an pathed as so:
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
Which is not in my project nor the Bower Components folder...
And therefore gives me a 404:
How should i configure the project to get all the images as expected? I'd create that img/icons path if I knew where to get all possible icons...
OK, I have added this to my app.js:
angular.module('app').config(function($mdIconProvider) {
// Configure URLs for icons specified by [set:]id.
$mdIconProvider
.defaultIconSet('bower_components/material-design-icons');
});
But still a 404... the bower download is like 200 mb of icons... do I need ot list each icon I want to link? As in .icon("menu", "./assets/svg/menu.svg", 24)
I did have the same problem and I was not able to find a proper answer.
After some research, I've finally found something !
https://github.com/angular/material/issues/1668#issuecomment-156368247
As "ranbuch" said, once you've loaded the font Material Icons (either from a CDN or locally), you can just use this directive :
<md-icon aria-label="Menu" class="material-icons">menu</md-icon> and replace menu by the name of the icon you're looking for.
This way, it allows you to skip the long listing of every svg.
PS : There's also a good stackoverflow answer here.
Copy all the selected svg icons you need to images/icons folder inside your application and then use them as below :
<md-icon md-svg-src="images/icons/leftArrow.svg"
ng-click="previous()" class="icon-color">
</md-icon>
If you are planning to use lots of icons, use css font icons. One css file will load all your icons, instead of multiple svg links.
Check section 1 here of material icons guide
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);