While creating graphs using vis.js we can specify how the nodes can be displayed using the options.
var options = {
width: '400px',
height: '400px',
edges:{
style:'arrow'
},
nodes:{
shape:'icon'
}
};
by using 'icon' for style we use either bootstrap or fontawesome glyph icons. The documentation talks about using unicodes.
Created a Plunker and the Icons are not showing up.
http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview
Not sure what i am doing wrong.
Thanks
I took a look at your plunker and I fixed it here:
http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview
I'm one of the devs of vis.js and I'd like to explain what went wrong here. First, you will need to include the css of fontawesome so vis knows where to find the glyphs. So we add:
< link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Second, going by your plunker, you set the shape of the nodes to 'circle'. That means the nodes will not care about the icon options. In your question you have set the node shape to 'icon'. This means, the node will use the additional icon options for configuring the icons.
So we added (to the global nodes options):
iconFontFace:'FontAwesome',
iconSize:50
Now for the unicode. You will need to specify which icon vis is supposed to show you. This is done by the icon option. So where do we find the unicode? Lets look at this example: http://fortawesome.github.io/Font-Awesome/icon/coffee/
and we find: fa-coffee · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons
So the unicode is f0f4 and in javascript we write this as \uf0f4
From your problem I noticed there are no default settings for the icons, which will be fixed with the 4.0 release.
For further reference you can take a look at the docs: http://visjs.org/docs/network.html#Nodes_configuration
a working example with multiple icons from fontawesome and Ionicons:
http://visjs.org/examples/network/38_node_as_icon.html
To wrap up, next time you have an issue, please post it in our Github page, we try to collect all the questions there :)
https://github.com/almende/vis/issues
Good luck!
Related
I'm building landing pages with the amazing Gatsby framework (version 2.16.1).
Everything would have worked perfectly, except that I can't find a way to make changes to the HTML that's being loaded before any script is loaded (the 'over-the-fold' initial HTML).
For example, if I change the HTML's background color in Gatsby - Users can wait up to 5 seconds since the 'over-the-fold' initial HTML is displayed, until the background color is applied.
I know about gatsby-browser.js and the ability to make global CSS files, but that's no use for me as I use a different color or background-picture for each landing page.
My question is: Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Illustration: I color the background color as yellow, but the flow is like this -
HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow
#ksav answered the question in a comment to the question! Thank you!
The answer is using a function called onRenderBody under the gatsby-ssr.js file, as explained in the article that was mentioned: https://www.gatsbyjs.org/docs/custom-html/
exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
// Differentiate between the landing pages here
switch(pathname) {
case 'landing_page_a':
case 'landing_page_b':
}
// Affect the HTML that gets loaded before React here
setBodyAttributes({
style: {
backgroundColor: 'red',
},
});
}
The funny thing is, that I've already bumped into this article before, but didn't think it was relevant because it talked about server-side-rendering, and I know that Gatsby is server-less. After #ksav 's comment, I re-read it, and understood that the server-side-rendering happens during Gatsby's build process, and not during run-time (i.e. when the user enters the landing pages).
Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Yes, you can directly in the JSX React code. Google has documentation how you can optimize CSS delivery so your above-the-fold content is always styled correctly. It comes down to using inline CSS for all your components above the fold. With inline CSS your HTML elements are always styled when they are loaded because the styling is part of the HTML code.
See the React documentation for how to handle inline styles in React.
An example from the Gatsby tutorial:
src/pages/index.js
import React from "react"
export default () => (
{/* inline CSS */}
<div style={{ margin: `3rem auto`, maxWidth: 600 }}>
<h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
</div>
)
I am using Vue Material Design Icons ref, and they automatically have a title attribute set - by default it is a human readable form of the icon's name, e.g. Plus Icon. Because this is being imported directly from the Node Package, I don't want to mess with the components themselves. I also know that I could write some custom JS to fix it, but I don't really want to do that.
Is there a standard way to disable the title attribute during component registration or in some other fashion that doesn't add a performance cost or require any patchwork code?
note: I'm also using Webpack if this can be done that way.
From the link you've provided, that icon component provides a prop where you can set the title to whatever you wish if you don't want to use the default.
Props
title - This changes the hover tooltip as well as the title shown to screen readers. By default, those values are a "human readable"
conversion of the icon names; for example chevron-down-icon becomes
"Chevron down icon".
Example:
<android-icon title="this is an icon!" />
Previously (v0.5.2) core-icons/social-icons.html was defining:
post-facebook
post-twitter
post-gplus
This doesn't seem to be the case in v0.5.4 anymore.
Are there any other icons subject to removal?
Thanks,
F.
Yes. The open source material icons do not include the post-* icons, and 0.5.3/4 rebased on the open source set.
I have my own design for a Twitter feed and I want to style the default feed using my own design. Is there a way to do that?
The issue is that you can't use the CSS selectors because it appears only after the loading the page.
Please check this pic to give you more idea about what I need
Thanks,
Well, You can customize Your twitter widget by doing something like this:
Default Code
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID">Tweets by #Test</a>
To remove Header footer, Just add data-chrome="nofooter transparent noheader transparent" and it will look something like this:
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID" data-chrome="nofooter transparent noheader transparent">Tweets by #Test</a>
For more customization like link color, Borders etc refer to this article. https://dev.twitter.com/docs/embedded-timelines#customization
I hope this helps :)
1# Getting a fully customisable timeline like suggested earlier (by using the API), would require that you fetch the timeline as a json file (https://api.twitter.com/1.1/statuses/home_timeline.json) and manually loop them in your display. More details here https://dev.twitter.com/rest/reference/get/statuses/home_timeline
2# This is as close as I could come with your design #shadeed9. Most of the restrictions are here https://dev.twitter.com/overview/terms/display-requirements
3# This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1 by Kevin Burke
If this solves your question, kindly accept it!
If by twitter widget you mean the embedded timelines, then see the "client side options" section of the docs https://dev.twitter.com/docs/embedded-timelines for options that you can set.
If you want totally customised output using CSS, then you'll need to write your own solution using the API to spit out content that can be styled.
Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);