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>
Related
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.
Some of you may be familiar with Textillate. ( https://jschr.github.io/textillate/ ) On the website, it says to fully implement the animations, I have to make sure I include JQuery, animate.css ( http://daneden.github.io/animate.css/ ) and lettering.js (https://github.com/davatron5000/Lettering.js). Ofcourse, I also have to implement the textillate.js file.
For some reason, I'm not able to get this working, I think I'm making a mistake with loading in the javascript or JQuery files. Sadly, the console doesn't display any errors, so it's a bit strange..
My code to make it work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.css"/>
<h1 class="tlt" data-in-effect="rollIn">This should have a rollIn effect</h1>
It should be a very simple css animation. If anyone of you would be interested, you can view a live-demo here: http://codepen.io/jschr/pen/GaJCi.
Here is a small tutorial to use Textillate: https://github.com/jschr/textillate.
As you can see on the link above, the usage should be very basic and I don't see what I'm doing wrong.
The first two scripts depend on jQuery, but you don't try to load jQuery until after them.
You need to load dependancies of a script before you load the script that depends on them.
Change the order of your <script> elements.
I've been facing some problems in my website. I have a lot of js files in my web server, but the bootstrap.js file does not work. Here is the link to the ressource and it also blocks AddThis sharing tools. I have no Idea how this is happening!
here are the main js which I'm using:
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
And here is the website link
Thanks for your time!
You need to load the jQuery script first followed by the Bootstrap js and finally the custom scripts last like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
Either use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Or this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
BUT NOT BOTH
You must load jquery before bootstrap because bootstrap use jquery. If any custom script use jquery too....jquery must be loaded before that custom script.
I recommend you that use minified version of all js files because it increase your web site performance
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html
In addition to jQuery being a pre-requisite for Bootstrap's Javascript to work (as mentioned in the previous answers), it is also worth noting that as of v 3.3.6,
"Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but
lower than version 3"
(just in case you thought using the latest version of jQuery would be better, as I did.)
In jquery mobile website there 3 things to add.
1 css file
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
JQuery Library
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
jQuery Mobile Library
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
My question is , is it ok to use js libraries at bottom just before . Becuase it will improve the loading speed. jQuery adds css throught javascript classes
As long as the main body doesn't require the use of the libraries, yes it all right to put your js libraries at the bottom. In fact it's a common practice to that, so that the main body is ready to play with instead of using $(document).ready( function () { /* code */ ) );.
Simplest approach is probably just to test it. However, in an app of mine that uses jQM version 1.0a4, placing the jQM Javascript and CSS files right at the end of the mark-up was fine. The docs advise that you place your custom $.mobile calls before referencing the jQM Javascript source anyway:
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
http://jquerymobile.com/demos/1.0b3/docs/api/globalconfig.html
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>