I try creating nested wizard with jQuery Steps plugin. On the official site written
Multiple wizards
Have multiple wizards on one page or even have nested wizards like you want.
site -> http://www.jquery-steps.com/GettingStarted
But when I try this, I'm getting confused. Before step with nested wizard, all fine. But after this step slides content is not displayed.
Demo on JsFiddle
All code (including Css) taken from the demo example of project. From here
I just added next code snippets
$("#wizard_embedded").steps();
<div id="wizard_embedded">
<h1>Embedded Wizzard Step 1</h1>
<div>Embedded Wizzard Content 1</div>
<h1>Embedded Wizzard Step 2</h1>
<div>Embedded Wizzard Content 2</div>
</div>
Tested it and found some small issues on js and css site. Worked once a while ago. Seems to be a regression bug. I will fix it. Would be nice if you could post a bug on github with a meaningful title and describtion.
Related
So my client has a website he's created on weebly and he wants me to add a page with some complex functionality. I went ahead and coded the page with angularJs, but now when I add it to weebly with an embed code element, the angular doesn't work. Any clue how to either
A) just add a page normally (.html file)
B) get angular to work within the weebly page
Any help is greatly appreciated
I guess it would really depend on what you are trying to do. Please provide your code, for reference.
To directly answer your questions;
You can add, at least some, angular JS. (I haven't tested it all, but what I did worked)
With Weebly you do not have the ability to add .html files as standard pages.
You CAN add a 'Page Type' to the Theme. (which is essentially an HTML file).
You can add a page and then assign said page type.
~
Example, adding the following to the embed code element will work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
I figured out this issue, the angular was working with embed, but not on weebley's editor site. Once deployed, the code worked fine
Ok, so in our 'innovation lab', there is currently a push to use Ionic, an hybrid app framework built on top of Cordova for native access and angularJS for the ‘web code’.
There are also some projects which are pure mobile web, using Angular + bootstrap for responsive design for example.
The thing is some projects coming up will need to have both a mobile web site and native apps (ionic hybrid). Most features and screens will be the same, sharing back end and most of the UI but there still will be some difference.
So my question is; How to architecture a project so that it can be both an ionic project and a normal angular website with 2 different deployment approaches. Most of the code being reused but some views for the mobile website and some views for the hybrid app (using more native components and conventions), maybe some routing differences as well.
Is that even a good idea?
And in the shared code, is there a simple way to know in which case you are? some IF, some directives inactive outside of their context, etc.
It feels like there is some sort of missing link i may be unaware of.
Thanks in advance.
I'm working on this same problem. The approach I'm taking is to use separate templates, and when possible, key CSS off the device detection classes ionic adds to the body tag.
Desktop version (default)
.your-style
Mobile Version
.platform-webview .your-style {...}
.platform-cordova .your-style {...}
There's a repository on on Github that might offer some guidance.
https://github.com/jonathanwax/jw-ionic-desktop
To quote from of the source code from his project, you would create a folder for each view with the mobile version of the template.
For example your bootstrap desktop version of template.html could look like this:
<div class="container">
<h1 class="text-danger" id="helpHeader">Help Needed?</h1>
<li ng-repeat="help in vm.service.data"> {{ help.title }} - {{ help.content }}</li>
</ul>
<pre dir="ltr">HelpController: {{vm|json}}</pre>
And a ionic mobile version of this same template could be located at mobile/template.html
<ion-view view-title="Help">
<ion-content>
<ion-list>
<ion-item ng-repeat="help in vm.service.data">
{{ help.title }} - {{ help.content }}
</ion-item>
</ion-list>
</ion-content>
You could create a conditional to work with your router to serve the mobile template if you're in a cordova/mobile environment. I feel like maintaining two templates could be development hell. Which is why ionic snubs its nose at developing for the desktop--this is hard work! And prone to bugs. It's pretty much a flytrap ( ya know for bugs :) ).
We could try writing templates with conditionals, but I suspect different files may have less overhead.
A conditional approach to templating:
Test for mobile environment
var isMobile = ionic.Platform.isWebView();
In the template or view html:
<{{isMobile ? 'ion-container' : ' div class="container"'}}>
Or a use an ng-switch:
<div ng-switch="expression">
<div ng-switch-when="isMobile">
CODE FOR MOBILE HERE
</div>
<div ng-switch-default>
CODE FOR DESKTOP HERE
</div>
</div>
Depending on your application, you can get away with using ionic directives for most of your desktop application. You can sprinkle in desktop styling when needed. There's really not a huge amount of code that would actually need to be served by a different mobile/desktop template.
I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app
I'm building a web application with AngularJS.
The application should behave like Codepen:
4 sections,
allowing the user to hide/show one section or another
with a resizing element allowing the user to shrink or enlarge sections.
I snooped on Codepen's code and I realized it's intensively relying on JQuery-UI.
I'd like to find any Codepen-like boilerplate template or similar example using Twitter Bootstrap or matching AngularJS
Thanks in advance
Plunker (http://www.plnkr.co) which is similar to CodePen is created using Angular.
Check out the GitHub Repo: https://github.com/filearts/plunker
At last I found these solutions:
UI-Layout
Flexy Layout (discontinued?)
this stackoverflow (CSS based)
Even if I set the target to _self in CKEDitor. It is putting this into every link, it seems to be the default and override any other setting the user picks. In CKEDitor source view it will not show _target="blank" but when the node is published the link turns into this.
a link looks like this
<a target="_blank" rel="nofollow" href="#" style="color: rgb(85, 26, 139); text-decoration: none;">submitting an online application</a>
http://screencast.com/t/BEbaMw8SZ
I downloaded the latest CKEditor Full Package and am using it with the Drupal module.
UPDATE: I changed to TINYMCE and am getting the same issue so this is an issue with Drupal not CKEditor
Are you using any module that alters links like External Links, External Links Filter etc? Check that.
The same was happening to me. My problem was with Twitter module.
I've solved it unchecking the Twitter link converter filter in the format that was experimenting this problem (Filtered HTML in my case). This filter was adding "target=_blank" to all of my links.
Hope it helps.
You may have this set in the format you have set for the wysiwyg editors. Check admin/config/content/formats/wysiwyg_editor and make sure that in 'Limit allowed HTML tags' the 'Add rel="nofollow" to all links' option is not checked.