I have a site that is using fontawesome. I am lazy loading many of the CSS files to increase first page load time, etc.
However, I need the fa-phone-alt to working on first load because it appears at the top of the page.
Can anyone provide guidance as to how I an add inline style just for the fa-phone-alt so that it works without having to load the entire style sheet?
Hope I am explaining this well enough.
Thanks.
I'm not sure how to solve exactly what you're asking, but a workaround could be that you download an SVG of a phone and place it so it loads instantly.
Related
I have a problem with using Bootstrap plus Masonry for my layout. Trying it out on my computer, it works perfectly, but when I upload it to GitHub pages or Godaddy hosting, it sometimes gets destroyed like the image I shared. I bought Lightgallery and tried it instead of Fancybox to make the photo gallery, just in case something there was making a problem, but it's the same.
The problem being Masonry or bootstrap, I can't get rid of bootstrap but could use an alternative to Masonry. My client just needs the Pinterest-like layout.
It's very frustrating because it works perfectly until it is live. I tried a lot of things but nothing has worked. Thank you for any idea you could give me, and sorry for my bad English.
Github link: https://m-ribero.github.io/mubles-ballena/galeria.html
edit: Very important detail, it often gets fixed after reloading or resizing the page, but for the first time someone enters there, then it doesn't motivate people to invest more time in the site if it looks that bad.
gallery destroyed
gallery destroyed 2
The problem is with Masonry and not Fancybox (or any other lightbox alternative). Looks like it incorrectly calculates height for the container. Since it works after assets have been cached, I guess that your masonry script does all calculations before your CSS is loaded. Therefore top/bottom padding is not taken into account for calculations.
I have been working with Vaadin charts during this week and I found a problem that I cannot solve. I need to send several charts to a PDF generation (using iTextpdf) and I could do it using SVGGenerator. The main problem is I cannot use this solution because the final laptop doesn't allow any installation, and Phantomjs is required for SVG Generator (no add-on can be installed neither). I tried to find a different solution to convert the chart content into file or buffer that I can manage, but I think I have been reading so much posts and I am not able to distinguish the solution.
So, I will try to clarify basic questions first:
a) Is it possible to manage SVG Generator without any installation in the laptop?
b) If not, is there a different way to convert a chart into an object which class could be managed to insert it into a PDF?
I can assure you I tried to read all documentation in this forum and official Vaadin forum related to this topic but I couldn't find any solution. I don't want to seem lazy, I only want to avoid spending more time and clarify the maining pre-conditions to solve this issue.
thanks in advance for your time and help.
Kind regards,
David.
You can take a screenshot of your chart and append it to pdf:
Screenshot screenshot = new Screenshot();
screenshot.setTargetComponent(myTargetComponent);
myChartLayout.addComponent(screenshot);
//when complete
screenshot.addScreenshotListener(new ScreenshotListener() {
public void screenshotComplete(ScreenshotImage image) {
//do something
}
});
//take screenshot
screenshot.takeScreenshot();
You will not be able to render a Vaadin Chart without a web browser engine of some kind. That's what PhantomJS provides. If you have a full-blown web browser at your disposal, though, you can grab the SVG markup manually from there; it's just a bit more difficult to automate. This works in Chrome:
Open your Charts app in the browser
Open the JavaScript console (Ctrl/Cmd + Shift + J)
Type something like this: copy(document.getElementsByTagName('svg')[0].outerHTML)
Paste the contents of your clipboard to a new text file and save it as an SVG.
You don't need to install phantomjs, just bundle its binary along with your web application (Reference). I did the same thing with my Amazon AWS deployment and it works just fine.
I'm using Bootstrap files within my application and I want to enable "Use runtime optimized JavaScript and CSS resources".
the problem I have is once enabled; glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg and glyphicons-halflings-regular.woff cannot be found:
I know for Bootstrap 2.3 we could use a Theme that loads a .CSS file that changes relative locations as described here http://www.bootstrap4xpages.com/bs4xp/site.nsf/article.xsp?documentId=F435B6DC54486B67C1257B6B002E5A6C&action=openDocument
So, what should I do to handle relative locations with Bootstrap 3?
You have to tweak the path to the web font resoureces in the Bootstrap CSS files.
Delete the part with "../" and replace it with the relative path to the font files within your project structure, e.g.
bootstrap/fonts/...
Then aggregation will load the fonts correctly.
This does not answer your question but if you want to use Bootstrap 3 you'd be MUCH better off using the Boostrap4Xpages project on OpenNTF.org. It will perform better and the resource aggregation will work better. It's easy to install and use but it is a plugin on the sever so that needs to be done. It's not self contained to the NSF. Try and move to this if at all possible.
Regarding the actual question. I'm not sure I know the answer specifically. I do know that using relative links can sometimes be a problem if the browser's URL doesn't have the page.xsp portion. So it works on the page.xsp and NOT the default launch XPage where the URL ends with the database.nsf. What I've done in the past there is set the application to launch to something like "start.xsp" and in that page in beforePageLoad to a redirect to "home.xsp". This forces the browser url to always show the page name and made life a little easier when dealing with adding projects to WebContent.
Dear community im using the masonry script on this site: http://www.hoeckernetworks.impulsfaktor.abcde.biz/
I was searching for an option to fix the picture loading problem and i found imagesLoaded. I try to get it to work, but it wont do its job. I am not a great javascript programmer and tryed it with the example code. Maybe someone has a hint for me. Just to inform: i use masonry working with html. If its needed i can send my source but i think one can see it on the site.
regards an already thanks for any help
I'm testing the WebView as a RichTextEditor.
I've noticed there are 3 methods to load data into it, so I googled to find out which are the differences between them, but find no clear answer.
Could someone please give me some insight about that?
Am I right supposing it's best to use loadHtmlString for local content and loadRequest for web content?
Thanks for your support!
There are three recipes in the MonoTouch docs (see bottom of page) that pretty clearly illustrate the three methods.
LoadData() - load non-HTML data, can specify MIME type
LoadRequest() - load content using async HTTP request
LoadHTMLData() - load an HTML string