I am trying to develop a iframe based facebook application using ROR
here is my code for view
%fb:serverfbml.fbml-server
%script{:type => "text/fbml"}
%fb:fbml
= stylesheet_link_tag "http://serveraddress/stylesheets/main.css"
.title Check the Deck
the css simply doesn;t apply
i have accessed the css using absolute address and it has all the css for my application.
Thanks
You can't link to a css in serverfbml, however you can embed the actual css directly into the serverfbml block. They will be processed and recognized - but they need to be inside the block.
Related
I have a content management system that uses TinyMCE to edit text, and I am using the inline option. The issue I have is when the content contains an iframe - when TinyMCE is initialised, it converts the iframes to an image tag:
<img data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="0" data-mce-p-src="https://www.youtube.com/embed/xxxxx" width="560" height="315" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-mce-object="iframe" class="mce-object mce-object-iframe" data-mce-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
I then need to get the edited HTML to save to the server. The docs for this functionality give no suggestion on how to do this, so currently I use jQuery to just get the HTML content of the element the TinyMCE editor was initialised on, however this contains the image tag instead of the original iframe, which is what then gets saved.
Is there a better way to get the HTML from n inline TinyMCE instance, or change how TinyMCE displays iframes?
Here is a TinyMCE Fiddle that shows TinyMCE running inline with an iFrame in the content. When I use getContent() to extract the content it just shows as an iFrame.
http://fiddle.tinymce.com/rkgaab
As a rule of thumb I would not use jQuery to try to get the raw HTML as TinyMCE does a variety of things to accommodate for how inline editing works. The getContent() API is documented here:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#getcontent
I am trying out divshot for to evaluate if we can use it for our company, but have one question. Our company uses a custom version of bootstrap, is there a way to specify a "theme" for bootsrap or to replace the bootstrap default css? I've basically ripped all drop shadows and border radius from everything and made the styles more flat. Just wanted to know if we could over ride that default bootstrap stylesheet.
Thanks!
Yes, you can upload a custom bootstrap.css file into your project and then simply replace the <link> tag in any Divshot HTML page with a relative link. So if I uploaded my custom theme to css/my-bootstrap.css in the project, I could then link it like so:
<link rel="stylesheet" href="css/my-bootstrap.css">
My (MVC2) application displays several addresses in a View.
Each address contains just a subset of information, like first- and lastname. The request is that the complete address information should be displayed when the mouse is over a result.
An html template should be used therefor.
This template defines how(!) the complete address should be displayed – but it doesn’t defines what(!) should be displayed.
Means it can be assumed that the complete address is always “firstname“, “lastname”, “street”, “zipcode” and “city” (for example and to keep it simple). This will never be changed.
But for example the background color can be changed in the html template from white to green or the size of the lastname can be changed from <h1> to <h2> …
What is the best way to solve it?
I would prefer to write some shared code (keyword: ascx).
This shared code should wrap the template, would be very easy and would look like this:
<div id=”mouseOver” style="display: none;" >
X_REPLACE_X
</div>
The template would look like this simplified example:
FirstName: {Name}<br/>
Lastname: <h1>{Lastname}/<h1><br/>
ZipCode: {ZipCode}<br/>
I would then render the ascx code via “Html.RenderPartial” on the View and map each address to a javascript mouseover function.
The javascript function would replace the placeholder (like {FistName}, {LastName} , etc.) in the template, position and display it.
And thats my problem:
The template should NOT be put directly in the wrapper (ascx - code)!
Means at runtime must “X_REPLACE_X” be replaced with a somewhere on the server stored template.
Because this gives me the ability to change the template without changing and publishing the code!
How can this be managed?
Is there a much better way to solve it? Should I use instead ajax calls to get the template in a variable?
Any help would be really great!
thxs in advance!
It sounds like the best way to accommodate your display differences is to simply use different css classes. The html template used for the full information does not change and can be used for all addresses, while the differences between background colors and text size can be handled by different css settings.
Relatedly, I wouldn't handle the different text sizes by using <h1></h1> and <h2></h2> but rather a common tag (such as <span></span>) whose text size is handled via css.
I'm new to the whole "iPhone Dev" world, and I am creating a simple app which has a feature to see the latest entries from a number of different Wordpress blogs.
I am able to grab encoded content ( node) from the RSS feeds and display it easily enough using a UIWebView and the loadHTMLString function.
What I cannot figure out how to do right now is change the look of the text in any way, shape, or form... I don't think it's possible for me to change the data coming back in the RSS feed, so I need to know how to do it in the code.
Thanks!
--d
There are at least two ways to change the appearance.
One is to modify the html before passing it to loadHTMLString. For example, you could insert a <link href="local.css" rel="stylesheet" type="text/css"> just before </head> using simple string replacement. You could do the same thing with a <style>...</style> tag.
html = [html stringByReplacingOccurrencesOfString:#"</head>" withString:#"<link ... /></head>"];
Another way is to call stringByEvaluatingJavaScriptFromString in webViewDidFinishLoad and do whatever you want with javascript. You have full access to the DOM through javascript and can manually create styles and assign classes.
You may need to use both together.
I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
The text loads without the CSS first
It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
Basic layout HTML,
All JavaScript, and CSS
Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.
To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.
To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);
That should show the spinner till GWT loads itself.
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
<div id="loading">
<div id="loading-msg">
<img src="icons/loading-page.gif" lt="loading">
<span>Loading the application, please wait...</span>
</div>
</div>
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
DOM.removeChild(RootPanel.getBodyElement(),
loading.getElement());
}
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.