Jquery mobile VS JQuery and Bootstrap - javascript

I have stuck a bit with what to choose .So i have a few questions .
1) If i want to create website which will work well on mobile and desktop without loosing any performance on mobile (like do not work buttons or effects) so what should i use Jquery mobile or Bootstrap and Jquery?
2) Why when we include Jquery mobile we also have to import just Jquery ?
<!DOCTYPE html>
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
3) Is Jquery(not mobile) stucking on mobiles ?
Thank you every one for your time )).

Related

how to hide website assets such as js and css files?

I came across the following index.html page in which i didn't find any custom assets, such as js and css files. The assets path is as follows
I am not able to find where we have included assets/css/custom/.css assets/js/custom/.js files.
Is there a way to hide these css and js file from html code?
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where passion meets potential</title>
</head>
<body>
<!-- start of loading jquery -->
<script src="assets/js/vendor/jquery/jquery.min.js"></script>
<script src="assets/js/vendor/lazyload/lazyload.js"></script>
<!-- Loading angular and angular route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<!-- Loading Angular Controller -->
<script src="controller.js"></script>
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
<!-- Main Content -->
<div id="main">
<!-- angular template injection-->
<div ng-view></div>
</div>
<!-- END Content -->
</body>
</html>
Just read the comments. A library called lazyload is used to load all dependencies, probably from the folders you named.
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
I don't know how it works exactly but I assume it will add the lazily loaded files somewhere to the DOM. The client will always be able to find those resources somehow (e.g. the network tab of chrome devtools).
The files in the code above will probably contain information about how it works for your project.

Bootstrap: slow loading with the glyphicons

I gave a try to Bootstrap but I'm bit surprised about one thing is that it seems that the Glyphicons are kinda really slow to be loaded or displayed.
I have the feeling that even the carousel is faster to show up.
However, it does not seem that be that slow on other websites.
Therefore, I guess I must have done something wrong, but I do not see a lot of differences with the code used for displaying glyphicons online, is there any way to fix it up?
But so far since I'm trying to run everything locally, it should fast as the light, nope? It takes two seconds for the glyphicons whereas the rest it's instantaneously displayed.
Is there any way to have a better way to measure how fast something can be displayed onto the screen (rather than just using my end-user feeling), please let me know.
Just starting to do web front-end development, please be indulgent.
Here is below the code I am using to display just one glyphicon-home:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>My Page...</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Favicons... -->
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="faviconOthers.ico" sizes="196x196">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if IE 9]>
<script src="html5shiv - 3.7.2/html5shiv.min.js"></script>
<script src="respond - 1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" ></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" ></script>
</head>
<body>
<i class="glyphicon glyphicon-home"></i>
</body>
</html>
I found out what was the wrong, the bottom line resided in the bootstrap.min.css.
Reason is that a while ago I used an online bootstrap customizer cause at that time I havent installed any CSS preprocessor yet. It was enough to change a couple of colors.
However, I did not know that the customizer added a couple of links about where to get certain fonts online which I would rather like to avoid since I'm in China and some websites are really slow to access.
E.g.
#font-face{font-family:'Glyphicons Halflings';
src:url(http://bootstrap-live-customizer.com/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot);

How to add date picker jquery plugins to bootstrab?

I need to add datepicker in my form. I want to use jquery with bootstrap. For the purpose, I googled and got free jquery plugins here. Now I am unable to get the functionality.
I am novice to bootstrap.
Please help me.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="input-append date datepicker" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker();
});
</script>
</body>
</html>
There are plugins to do this which are adapted to work just fine with bootstrap like datepicker - Demo. Repository here.They even add snippets and are well documented.
I personally use the Bootstrap twitter datepicker plugin. It's relatively easy to setup and is one of the best looking pickers out there IMHO, also the possible customization is great.
This is the tutorial i used to set it up: http://develop.alpdesigns.ch/pages/other/bootstrap-datepicker.html
You can also use the bootstrap libs to theme your whole form like the plugin http://getbootstrap.com/components/

How to properly use jQuery Mobile with PhoneGap

I've recently set up PhoneGap to start learning app development, I heard jQuery Mobile was the best way to go as far as a framework goes so I'm looking to use that. I've found the CDN for jQuery but it seems at the moment it's conflicting with the PhoneGap stylesheet and javascript, should I prioritise one of these over the other? Or is there a a way to do it so both are used?
I know this sounds like a stupid question but I'm still learning. Thanks for any help.
What I chose to do with jquery is call it locally from my phonegap app and not use the cdn.... one big thing to note in phonegap is that you call resources without the leading "/"
IE.
Also, what I did was this:
<link rel="stylesheet" href="jquery/jquery.mobile-1.4.0.css" />
<script src="jquery/jquery-ui-1.10.4.custom.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
$.mobile.autoInitializePage = false;
$.mobile.touchOverflowEnabled = true;
</script>
Then in your onDeviceReady function, call this:
$.mobile.initializePage();
Especially if your jquery page handlers are calling specific phonegap plugins for things like location or such then deferring the page initialization until the ondeviceready fires can be good.
So in short:
1) I'd rccommend calling your resources locally from your app since its a mobile app
2) Make sure you are calling your resources in the way cordova / phonegap would like
3) You might try deferring your jquery mobile intialization until after your ondeviceready has fired.
I just recently built an app in jquery mobile / cordova and i'd say it went pretty well.
A typical JQuery Mobile Page with PhoneGap page is the one below
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" href="css/mytheme.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<!--Page-->
<div data-role="page" data-theme="a" id="searchpage">
<div data-role="header">
<h4>First Page</h4>
</div><!-- /header -->
<div role="main" class="ui-content">
Hello World!
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {}
</script>
</body>
</html>
Note:
I used JQuery Mobile 1.4.0 in this example
I used a custom theme mytheme.min.css
Your page should be arrange like this and you are good to go

Bootstrap 3 and IE8 issue

I'm using Bootstrap 3 framework for a new design. All works fine in Safari, Chrome and Firefox, but not in IE8. I've added respond.min.js and html5shiv.js in my functions.php file.
Those files get loaded as I can see in 'inspect-element -> resources" in Chrome.
Still, in IE8, the site is displayed as is is a mobile device, which isn't correct.
How to resolve this?
When Googling Bootstrap 3 IE 8 one of the top results is: http://www.telegraphicsinc.com/2013/10/using-bootstrap-3-with-internet-explorer-8-ie8/
Ultimately it says you need to add, "" which you can grab from here: https://code.google.com/p/css3-mediaqueries-js/
my head tag:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
If you want to try in local, try through localhost, or create a QA server and set the content and try.
We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header.
It will say access denied, it works only through server as IE has security restriction.
Bootstrap will work in IE 8, to do the same follow below steps:
Add below mentioned Scripts
Dont use CDN for the same its worth to add those scripts from local folder
<!-- language: lang-html -->
<!--[if lt IE 9]>
<script src="../../scripts/IE8/html5shiv.js"></script>
<script src="../../scripts/IE8/respond.min.js"></script>
<![endif]-->
<!-- end snippet -->
Download Respond.js And Html5Shiv.js
Note: Adding Sequence would be very important
Add your css first then add those js
Bootstrap.css
YourCustom.css
Respond.js
html5shiv.js
Bootstrap IE Support details : http://getbootstrap.com/getting-started/#support

Categories