Which css and js links should I use? - javascript

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.

Related

Can you mix bootstrap 3.3 and bootstrap 4.1? I have tried and it breaks the website

I am trying to use bootstrap and twitter bootstrap at the same time. Basically, I can't seem to get them to work together. Are they even supposed to work together? You can see the js Fiddle here. https://jsfiddle.net/paralaxwombat/v7hpoc6m/4/
There are two sets of bootstrap call lines.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
If you remove one of them, the nav bar works and the bottom doesn't. If you remove the bottom the nav bar doesn't work but the bottom does.
I am wondering if there is a workaround.
Twitter Bootstrap is Bootstrap. You are trying to mix version 3 and version 4.
They are not designed to work together. Bootstrap 4 is designed to completely replace Bootstrap 3.
Use version 4. Change the code which is following version 3 conventions to use version 4 conventions.
You are trying to use two different versions of the same library so I think the answer will be 'No'.
I don't know if there's a document with all the similarities and differences, but I know the 3.3 javascript api and the 4.1 javascript api conflict.
There are 2 versions of bootstrap and you are trying to use both of them at the same time. These are all versions of bootstrap Versions. If you want to know more about them check bootstrap.

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

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!

jQuery Mobile bad behaviour

I'm trying to use the jQuery Mobile swipe feature but I'm experiencing a little problem when I include this:
http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js
and this:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
The issue is a "Loading" text in the bottom of the page that is shown when i load the Mobile library.
Who knows why is it shown? I have the problem with both Chrome/Chromium and Firefox browsers.
You can take a look to my code here:
http://jsfiddle.net/rfringuello89/yLGKT/
as you can see I used 3 not draggable but swipeable <div></div>
Thanks guys
You need to include the appropriate css for jQuery Mobile too, that should do the trick.
Edit: check this fiddle, I included the css and it works fine.
This is the right way to include the libraries:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
according to the docs.
Edit2: according to this answer by eivers88 you can use the following code to stop jQuery Mobile from initialising the page on DOM-Ready (without the need to include the css dependency):
<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script>

Using the plugin Magnific Popup, I have to use jquery. However when I load the page it slows down dramatically

Here is the code that includes the jquery reference:
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet prefetch" href="popup.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
When I comment out the jquery reference the page loads much quicker (albeit without the necessary functionality). I have also tried storing the file locally but that did not help the issue.
First of all, consider using jQuery locally. It could speed up page dramatically. However, if this doesn't help, use remote sources. But,
don't link jQuery directly from their side! Use jQuery CDN instead:
http://codeorigin.jquery.com/,
jQuery Download Page -- see "Using jQuery with a CDN" section.
An alternative, though requiring a lot of work, would be dropping jQuery in favor of ZeptoJS, which gives you nearly exactly the same syntax, as jQuery, and most of its core functionallity, with 1/4 (25%) of code size. And it loads helly fast!

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