bootstrap component tabs, carousels etc not respond - javascript

Until my contact page was a static HTML ie contact.html the bootstrap component tab, carousel etc work fine
as soon as I used ngRoute, routing to a partial view these components functionality no longer worked. is anyone ever had this issue?

After a little research, I found out that Twitter bootstrap style works out of the box with AngularJS.
However, to use components that rely on javascript, you need to go to other frameworks.
Bootstrap part of Angular UI has some "migrated" components you can use. I tried a few and they work straight out of the box. (copied and pasted examples given with the components)
Quantum UI also has some nice working components. I tried a few and I'm personally thinking of using those instead.

Related

Trying to see what options are pre-configured with another site's Ckeditor

So I basically have a rails app that is loading another full page in Ckeditor, but it's having a ton of issues trying to render the HTML. The styling is different, lots of text is being manipulated and swapped around, etc.
However, there's another app that uses ckeditor and the site renders just fine for it. I've tried hunting through the source code to see how the ckeditor is initialized, but the only thing I see is $("#html_editor").ckeditor(); which doesn't appear that any extra options are being loaded.
Just trying to find some other ways to determine why my ckeditor isn't displaying HTMl pages properly even though I'm initializing it the same way.
I've tried enabling the fullPage option, but it still looks extremely weird (things are completely misplaced), etc.
Looking for any suggestions.
Found it after hunting down a default config.js that contains default options when loading CKEditor

Angular page alike script

Im looking for a Angular page script, that could do something like this on the drawing.
I need a goto page button and prev/next buttons.
The page should contain a page starting with a div tag and contain normal html and angular tags.
I have tried out some Carousels, but they are not build for this purpose.
Anyone with a good link og code exampel?
Im using Bootstrap, HTML5 and AngularJS, and I want to keep it to this.
Anyone else with a suggestion?
AngularStrap dosent support carousel, and Im using AngularStrap in other parts of my code. When I using ui.bootstrap it fails when using ui-bootstrap-tpls-0.12.0.min, and AngularStrap uses of different versions of ui-bootstrap-tpls.

What is the difference between these two plunkers? (angularjs, angular-ui)

Somewhere in my attempt to use the wonderful ui-bootstrap project in my own current project I am going terribly wrong. I've used ui-bootstrap with no issues in the past and cannot see where I am making a mistake. The following punkers illustrate my issue and what it ought to look like.
Link to functional popover directive plunker from angular ui site.
Link to non-functional replication of popover directive that I put together.
Where am I going wrong? I've tried stripping everything down to the barebones and I'm not having any luck in determining what is causing this issue.
For what it's worth this issue applies to any directive that requires a layover of other DOM elements in its functionality (datepicker, tooltip, typeahead, etc.).
It seems the issue lies in the specific files I've included, but being as the versions are the same it doesn't explain to me why including them as I have (as opposed to how they are included in the working example) should make any difference. Any help/advice in this matter would be greatly appreciated.
Your bootstrap css file has a number of issues (including looking truncated and thus missing a number of key css properties you were trying to use).
Using a good version of the Bootstrap css file fixes everything. Here's a new version of your plunker that works: http://plnkr.co/edit/VTjb2S?p=preview
Note the new "new.min.css" which I added- it's just a good copy of the bootstrap minified css. The only change I made is to use that css file instead of the one originally in the plunker.
Or, alternatively, using the CDN version of the bootstrap css also fixes the issues:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

How to build a widget to embed in third-party websites using AngularJs?

I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.

jQuery Tools (horizontal accordion) combined with jQuery UI (tabs)?

Hello everybody and thanks for taking your time.
I got an existing project where the main-page uses a horizontal accordion for the main content area from jQuery Tools (the Tabs element).
Now i have to implement a Tabs-menu (into one of the existing accordion pages) which is build with jQuery UI (the main container are Tabs and inside of them are several nested accordions).
Is there any easy way I can solve this problem and combine jQuery Tools with jQuery UI?
I did a search-replace on the tabs code of jQuery UI (js+css) and changed everything from "tabs" to "tabsnew"..
The script seems to work with this, but the css is not working correctly with this (even tough I changed all elements which are used to build up the Tabs).. I think there must be an easier solution for this..
I'm very thankful for any ideas or solutions!
Drop jQuery UI and implement the tabs again in jQuery Tools. If this is production code for a website there's no reason the users should load both libraries.

Categories

Resources