font-awesome icons rendered as squares even in vis.js example - javascript

I am working on an app which should visualize some data and show it as a graph. To be able to do this, I have chosen to work with vis.js and FontAwesome (both of them latest versions, loaded from CDNs), since I would like to show some icons too. Lets assume that my graph looks similar to this one provided in the vis.js examples. I have realized that the first line the body tag of the example is important for rendering.
<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.
As soon as I remove it or hide it, icons will be rendered as squares. Furthermore if I leave it there it does not mean that the icons will be rendered in every case. Try to refresh 10-20 times the example I've posed above by using the combination CTRL+SHIFT+R (aka. ignore cashed content) and you will probably end up with the same issue like I did.
So I would like to know if anyone of you have faced this issue before and is there any workaround? I would like be able to render graph only and to make sure that whenever and however the page gets refreshed (F5, CTRL+F5, CTRL+SHIFT+R etc.) icons will be there.
EDIT
Here can you see which links I am using and how it looks like. It is quite similar to the jsfiddle posted below by Mr. Polywhirl
<!DOCTYPE html>
<html>
<head>
<title>Network Graph Renderer</title>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.js"></script>
</head>
<body>
<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.
<div id="network"></div>
<script type="text/javascript">
// vis.js options, ajax etc.
</script>
</body>
</html>
Thx in advance

The font is not loaded and ready until you use it in your page.
So, as the example provided by Vis.js website, insert an icon in the DOM and then it works.
Just before your network div put an invisible icon:
<i class="fa fa-flag" style="visibility:hidden;"></i>
This makes the trick!

Related

jVector map displays on website but code not showing in HTML

I am studying web development and as part of a project I am doing I need to add an SVG map. I have managed to add a jVector map of New Zealand but am unable to alter in in any way because the container for the map has not displayed in HTML, it only shows in dev tools when I hover over the map. I'm not sure where I am going wrong.
I have been trying to find an answer online but haven't found the same issue anywhere and no one on my course seems to know either. I followed videos on you tube but did it slightly different because in the videos they put everything on the HTML page including any JS or JQuery and on my course they have said these should be kept in a separate file, so I wonder if this is causing the problem. I did try however putting it directly into the HTML but got the same result.
This shows API info displaying in Dev Tools
Shows files and folders
<!--JVECTOR SCRIPT TOP OF PAGE-->
<link rel="stylesheet" href="assets/jsvector/jquery-jvectormap-2.0.3.css" type="text/css" media="all"/>
<script src="assets/jsvector/jquery.js"></script>
<script src="assets/jsvector/jquery-jvectormap-2.0.3.min.js"></script>
<script src="assets/jsvector/jquery-jvectormap-nz-mill.js"></script>
<!--START OF JVECTOR MAP DIV EMPTY-->
<div id="map">
</div>
<!--END OF JVECTOR MAP-->
//SCRIPT KEPT IN SPEARATE FILE FROM HTML BUT REFERENCING #MAP IN HTML
$(function(){
$('#map').vectorMap({map: 'nz_mill'});
});
I expected to see all of the map info from the API show under the #map div in HTML like it had done on the demo videos I watched. It has obviously connected OK but I have no way to adjust anything on it.

How do I fix an issue where my website only shows in HTML form?

I used javascript, css, html, bootstrap and jquery for my portfolio website. When I look at the live preview in Brackets, it shows perfectly fine with the style/custom hamburger menu/font/everything. I uploaded the files onto my github pages repo and loaded up my site a little while after, only to see that it is just in full HTML.
Like, my menu has disappeared and the nav bar is a simple list and the font is the Times New Roman font that comes standard w/ html. What can I do to fix this? I'm not really sure what caused the issue. Here's what my github repo looks like for the site: https://i.stack.imgur.com/kVnkI.png
It sounds a lot like the HTML document is missing or unable to locate the corresponding CSS stylesheet. Therefore you likely need to provide an absolute path of the CSS stylesheet, as opposed to a relative path, in your HTML document.
You need to do something like this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://github.com/path/to/your/stylesheet/css/portfolio.css">
...
Instead of something like this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/portfolio.css">
...

Which css and js links should I use?

I am confused as to why there is a difference in both of these CDN links when used to modify my simple website. What is the difference?
Method 1: These links allows my code to resize perfectly as the window goes from widest possible width to minimum width using chrome, IE11, and Firefox. The problem is 2-fold: 1) I lose the <span class="input-group-addon">$</span> as a neat looking symbol and instead get a plain ol' dollar sign. 2) I am a beginner, so I don't know if using these seemingly outdated links will make me have to backktrack in the future. See example here.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Method 2: These links have a hiccup when resizing. As you pass mid-width the AddMoney element jumps to the full width of the textarea above it. I want it to resize similar to the above. Fortunately, these links are directly from the current bootstrap page so I assume they are the most recent. Using the same link above simply paste over the js and css links using the below.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Because in your first example, you are including Bootstrap 2 and in the second you are including Bootstrap 3. These two versions of Bootstrap are vastly different in the way the HTML needs to be structured as well as what features they offer. I would suggest that you use the latest version of Bootstrap 3, so go take a look at the docs to figure out how the HTML should be formatted for that version and adjust your code accordingly.

Is it possible to hide include part in view source of html

I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.

HTML JavaScript How can I create this Form?

I came across a really nice looking form while using RapidShare and I was curious as to how they made it. If you look HERE and click on "Eliminate annoying waiting with RapidPro!" a menu / form will appear. I am using Intuit to design my webpage and I was curious whether or not this was actually a form that is appearing in front of me.
As a possible side question - Is there an easy way to make a nice looking table with checkboxes in it similar to the one displayed by RapidShare? I really like this method for comparing and contrasting two different plans.
Thank you for reading,
Evan
Yes, the contents of that "popup" is a plain HTML table with some css to make it fancier. All they are doing is using Javascript to animate a div to popup into the center of the screen, and using css to style it nicely. They seem to have a custom solution that doesn't use jQuery, but there are many framework plugins that do the same:
Lightbox for prototype.js
Lightbox for jQuery
Fancybox or jQuery
Colorbox for jQuery
There are others too.
Look for fancybox in jQuery
Shadowbox
Greybox
You can load a page in a popup style like this and for the table, yeah you can create a comparasion table. Look are they source code and it will be easier for you to replicate.
See nyroModal in Jquery, you can see lightbox examples for HTML forms and image gallery.
Download the bundle from: http://nyromodal.nyrodev.com/create.php?dl=1 and create a file and include these codes
**index.html**
<script SRC="jquery.tools.min.js"></script>
<link rel="stylesheet" href="nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.nyroModal.custom.js"></script>
<script type="text/javascript" src="jquery.nyroModal-ie6.js"></script>
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
<a class="nyroModal" href="test.html"> Light Box view</a>
----------------------------------------------------------------------------------------
**test.html**
<form>
<label> name </label><input type="text" name="testname" />
</form>

Categories