In my recent Angular project I am using material icons by using google fonts as
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp
I have tried using all preload mechanism with attribute.
When loading the Angular app, it takes while to display the icon. I have tried using self hosting also, but to no avail. It takes a while to render the actual icon.
Can any one suggest possible options to make the rendering of the material icon smoother/faster without having flickering effect to the users?
Try to use FontFace.load(). It will give you a Promise. https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load
Related
I am trying to find or figure out a way to create https://facebook.github.io/react-native/docs/maskedviewios.html that supports Android, with the main goal to mask image with another image outline (think twitter logo put over any photo where contents are only shown within twitter logo) This works fine in iOS, but there are no components I found that do similar job on Android. How would one go about creating this?
Find a masked view built in Android (or build one) and the hook the native implementation to React Native.
In a lot of cases, you use ClipPath from react native svg (shipped by default with expo) to do the job. Such example can be found here:
https://snack.expo.io/#wcandillon/soundcloud-player
I'm currently working to develop a real estate website for a client. The client is stuck with the idea to create something like this :
http://woodfield-sillery.com/plans/
Basically, I'm looking to find a way to recreate the same thing, technically it would require :
Managing image map behaviour (to be able to react to mouseover)
Managing the onclick to open a view of the selected floor
Once selected, a second map would show of the floor, with available condos
Then onclick again, it would show pricing, availability, etc.
I'm having trouble managing the rollover image map through CSS.
Besides that, of course, the client would want to manage all by himself (so he can update the condo statuses), and I was planning to host the website through Wordpress
Questions :
Has anyone worked on a solution like this and would be willing to share experience?
Has anyone come across a Wordpress solution that works this?
Has anyone have a technical solution for this (Javascript, HTML5, CSS combined?)
I'm the author of MapSVG WordPress / jQuery plugin which is able to do what you need: http://mapsvg.com
To get started you would need to create a blank image in any vector editor (InkScape, Adobe Illustator, etc.). Then embed building image (png/jpeg) to the background. Then add shapes on top of the image and give them a transparent color fill (=rgba(0,0,0,0)). Save image as SVG, upload it to MapSVG map builder.
Everything else will be done in MapSVG Builder - colors, tooltips, popovers, links, event handlers, etc. See the demo.
you can use maphilight plugin
or you can use jvector
tutorial use link
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
This is kind of a nit-picky issue but it's driving me crazy. I've built a boostrap responsive web template that uses Font Awesome icons throughout.
When I go to load or reload a page what seems to happen is that a split second before the font awesome icons load the grid loads and then is populated by the icons. Now because the template is responsive it shutters/jiggles when it loads from a grid without the icons in it to the correct size when the icons come in and take up their respective places.
Does anyone have a suggestion on how to either change the order of what loads first or to hold back the entire page until everything has loaded and then display in one go?
I've attempted to re-arrange what order the CSS files load in (tried swapping bootstrap with font-awesome CSS links)
I'm wondering if there is a JavaScript event that will wait until everything loads before displaying. While this approach found more info on the intertubes it was decided not condoned. However, I didn't see an alternative put forward in the answers I read through.
I've got a crazy feeling that this is so basic that I can't see the wood for the trees, so if I'm just not using the right vocabulary to find this, just give me the terms of what I need to be searching and I'll go off and learn something new.
You could use WebfontLoader to load the font awesome fonts. That way you can use their events and classes to show and hide the grid.
https://github.com/typekit/webfontloader
I am building a web SPA and I'd love to use semantic zoom. I rather not bother implementing it, so I was wondering if such a library has already been built (SO and googled showed only results concerning Win.Js).
I found the following jQuery plugin library. while it is not in itself a semantic zoom library it can Aid you in creating semantic zoom.
http://jaukia.github.io/zoomooz/
When you zoom on an element it adds the class selectedZoomTarget you could use this in css to show/toggle more data inside your target.
The page doesn't show examples of nested zoom targets but you might be able to do it using jQuery click events.