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.
Related
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').
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 am using jquery mobile and custom i18n functionality. When the user changes the language from the settings I want to remove the existing pages and put them again into the DOM (I am using Handlebars.js so the new pages will be shown in the new language).
What is the proper way to accomplish this? Simply removing the pages with .remove() and then appending them to the DOM is definitely not the way to go - the history gets broken, the pages don't get enhanced and I'm not even sure if it is possible to change the current page this way.
Is this even possible or should I consider refactoring my i18n so it doesn't require refreshing the whole DOM?
What is the purpose of the div 'data-role' option seen in the TriggerIO template files? Am I to assume that I can ignore this and build my app as if I would build a normal website in HTML5? Or do I need to use different tag options in order to initiate CSS selectors and such? There doesn't seem to be much information about the real differences between your TriggerIO apps and how you would write a normal HTML5 app.
I'm creating a children's story app whereby you can view an image and some text, and swipe for the next page). Should I be using canvas to load the images and text or is it best to use the older school img tags and other markup?
The example app that you get when you create a new app using the TriggerToolkit uses jQuery mobile. The data-role attributes are used by jQuery mobile:
In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
From: http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
You can delete all this and use whatever markup, stylesheets and JavaScript you would usually when making a website. I'd definitely recommend using <img> and regular text rather than doing everything in a <canvas>. My advice would be to "try it and see", treating the development as you would a mobile website, but with assets stored locally and the ability to leverage forge APIs.
A question about jquery UI widgets. Is there a way to get them without all the bloat of CSS that they carry and render out ? I'm having a complete mess with tabs rendering all those jquery-ui-widget, jquery-ui-panel etc. etc. classes.
This guy here does it somehow
http://www.davereederdesign.com/post/2010/04/23/Tabs-with-Memory.aspx
?
He doesn't use the JQuery Tab widget.
I know this as an old post, but I'm having a similar problem applying UI widgets to an already very heavy website. If you inspected the widget in Firebug you might be able to only grab the rules that the widget uses and create a custom CSS file to apply to it. I'm going to try this when I'm back at work tomorrow and I'll report back on my progress.