I'm only using Angular.dart on part of my page...The rest contains another Dart app (compiled down to JS...everything is in JS from Dart) and some other HTML, etc. Essentially my Angular.dart app is just a component within the page.
However, now all links on the page seem to want to go through Angular.dart routing. I don't even need routing (though have a few defined) technically.
Is there a way to disable the routing altogether? So that when clicking on Another page actually works like normal, changing the URL in the address bar? Right now it's just going to # and all my links are disabled. I wasn't even using ng-click or anything like that either.
How can I make Angular.dart just leave those links alone?
Thanks.
Since route_hierarchical-0.4.19 you can simply add a target="_self" to your <a href="...."> to avoid angular router.
You can reduce the scope of Angular in your page by putting ng-app on the element where Angular.dart is used. Thus, the links outside of this element will work.
link
<div ng-app>
link
</div>
For links inside Angular part there's perhaps a native way to handle them but you can add a directive that handle onClick on the element and performs window.location.assign('link').
Related
I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.
I'm using jQuery mobile to build a simple web app and I want to add a navigation bar common to all pages.
I've found this great example, which led me to this question: do I really need the attribute data-role="navbar"?
Because it adds unnecessary html and css to my code, obligating me to override all these unnecessary styles.
Thank you
I haven't seen the need for data-role="navbar". This page here might help: jQuery Mobile Data Attributes.
It looks like it might only be needed for styling.
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
I have used a tutorial to create a widget for my site.
This widget now needs to be dropped into a complex page with existing CSS rules on important tags like *, body, ul, and li.
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
The easiest way would be to use an iframe.
If you want an embedded widget, the wisest thing to do is to specify the CSS properties inline in the widget's markup. It's bad practice usually, but is the right thing here.
Check out for example what the Facebook Profile badge (you need to be a Facebook user to see it) looks like:
<!-- Facebook Badge START -->Pekka Gaiser<br/><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /><br/>Create Your Badge<!-- Facebook Badge END -->
They are very likely to have done a lot of testing on this, so the CSS properties they set in their code, I would recommend to set in your widget, too.
It can be done with an IFrame, but I wouldn't reccomend that. IFrames are messy and they usually don't work as expected. Some browsers block them, some don't support them at all, and interacting with the page they're in from the IFrame page is really hard.
The most clean way is by wrapping the widget in an extra div with an id like widgetwrapper. Then prefix every css rule with #widgetwrapper [space]. That way, the css from the widget won't affect the rest of the page. Make sure you put the css for the widget last in the css. If there's still page rules messing with your widget, overwrite them in the widget css.
a Project I am currently working on uses the jQuery UI framework for some of its widgets.
To provide the user with a global look and feel I would like to use the framework also for its css stuff.
I am implementing at the moment a dashboard like homepage, where the user can see an overall status of its data. This dashboard is build of some divs that should be aligned into a grid layout.
I try to style the divs like follows
<div class="ui-widget">
<div class="ui-widget-header">Box Header</div>
<div class="ui-widget-content">
Content of the Box
</div>
</div>
Later I would like to implement some draggable-and-sortable functionality.
The Problem I am facing right now is that the boxes aren't properly aligned.
Does anyone has a hint on using jQuery.UI for that kind of css work?
I was studing the CSS framework documentation on jqueryui.com but there aren't that much information.
best regards,
Gordon
I tried your example and it works. I didn't see anything wrong... Which browser are you using? if you are using IE by any chance that could be the problem. Even though it is suppose to be cross-browser... I do not use IE so I can't check that, sorry. Try it with any other browser and see if that is fixed. Also be sure you are including the ui-core and the ui-theme files. Do not include any other CSS file and see if that is fixed. I recommend you to use firebug (in firefox) to see how the styles are applied.
Check how the CSS is applied in this page. You may find it useful.
Can you provide an example where it doesn't work for you?
Maybe you load your own css after you load the jQuery-UI-css and overwrite something.
If your content box and header box don't align, it is probably due to different padding in the css, try setting your content box padding to the same as your heading box padding. This fixed the issue when I came across it.