i would like to use FastClick in an Application for iOS. I downloaded the fastclick and included it into my header which looks like:
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/jquery.simpleWeather.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
Now i added the script directly above my body tag:
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
But i haven't eliminated the 300ms delay... its still there. Do i use it the wrong way?
You don't need to use 3rd party plugins like Fastclick.
jQuery Mobile has already solved this problem with vclick event. It works on desktop and mobile devices and don't have 300ms delay.
Read my other answer if you want to find out more.
$(document).on('vclick', '#someButton', function(){
});
Related
This answer: https://stackoverflow.com/a/26198380/4370354 unfortunately doesn't seem to be working for BS4, even after trying André Rocha's answer at the end, so here is my problem:
I am trying to load bootstrap 4 via CDN, but have a fallback to a local CSS file in place, just in case.
The below code results in the bootstrap 4 css file being loaded twice, but I would like it to be loaded only once.
here is what I have (pretty much the same as in the answer above) The fallback function for the CSS file is at the very end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 4.1.1 CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<title>Home | phpMIDAS viewer</title>
</head>
<body>
<!-- jQuery 3.3.1 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap 4.1.1 JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
<!-- Bootstrap 4.1.1 JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap 4.1.1 CSS local fallback -->
<div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(":visible")) {
$("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
}
});
</script>
</body>
</html>
After experimenting further, I figured out that all I needed to do was to replace class="hidden" with class="collapse".
Here the corrected code, in case someone wants to see/use it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 4.1.1 CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<title>Home | phpMIDAS viewer</title>
</head>
<body>
<!-- jQuery 3.3.1 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap 4.1.1 JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
<!-- Bootstrap 4.1.1 JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap 4.1.1 CSS local fallback -->
<div id="bootstrapCssTest" class="collapse"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(":visible")) {
$("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
}
});
</script>
</body>
</html>
I'm using kalendae calendar in my site.When there are no other stylsheets other than kalendae's stylesheet and script src then it works properly.But when i add all of them then it behave abnormally.I also tried removing all the links one by one to see what is causing the problem but could not figure it out.It only works normally when i remove all the stylesheets and script src.Here are the two images that will make my question clear.
When i remove all stylesheets and script src
After adding them
And here are the stylesheets and script src.I'm really sorry for using so many bootstrap link but some were not doing the tasks i wanted so i added so many of them.
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="js/wheelnav.min.js"></script>
<script src="js/wheelnav.js"></script>
<script src="js/raphael.icons.min.js"></script>
<script src="js/raphael.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/Livie_ccs1.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Please help.
Here is the code for kalendae
<html>
<head>
<title>JavaScript calendar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="auto-kal" ></div>
</body>
</html>
Here is the fiddle link. https://fiddle.jshell.net/qyf96yrk/.
The Kalandae is not appearing on the fiddle though i have added the link.Also the src code is very long.That is the reason why i was not adding my code.Sorry for the onconvenience
I am able to use some of the bootstrap elements but not all.
I have tried this, but I get an error for some of the elements attributes saying not a valid attribute for that element.
<head runat="server">
<title></title>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
</head>
in the head try this:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head >
and
before closing the body try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
why the Jquery?
because without the Bootstrap does not work
I'm not well-versed with javascript or jQuery and I am (therefore?) struggling with integrating datatables with an HTML UI in Shiny. All the examples I can find seem to work with ui.r and not with an HTML UI.
Any example or advice on how to do this?
( I've been pointed to the excellent app at http://emoteer.com/ but I'm unable to find out how it works )
You could try something like this for the index.html
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<script src="js/jquery.dataTables.min.js"></script>
<link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="css/dataTables.extra.css" rel="stylesheet" />
<script src="js/dataTables.bootstrap.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>HTML UI</h1>
<div id="table" class="shiny-datatable-output"></div>
</body>
</html>
And in the server.R:
shinyServer(function(input, output, session) {
output$table <- renderDataTable({iris})
})
You will need to put the javascript, css and images in the www directory where the index.html is.
Edit on 13th March -
If you copy the C:\Users\<username>Documents\R\win-library\3.1\shiny\www\shared folder to the www folder inside which the index.html file is place, then the following should take care of it.
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<link href="shared/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="shared/datatables/css/dataTables.extra.css" rel="stylesheet" />
<script src="shared/datatables/js/jquery.dataTables.min.js"></script>
<script src="shared/datatables/js/dataTables.bootstrap.js"></script>
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
</head>
I've created a simple layout using grails default layout pattern.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
</html>
Now so far as I understand the <g:layoutBody /> renders the body content. (Please correct me if I'm mistaken). Now I've applied custom styling to the <body> tag of each pages. But that styling is not being applied to my rendered view. Eg. I've an image which I want to apply to the body. But that is not being applied. When I insert a div inside the body and apply the same image to it, its getting applied to it.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainLayout"/>
<title>Match List</title>
<script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass"> </body>
</html>
My css file is getting included as my styling is being applied to other elements.
What am I missing? Is something wrong with my g:layout? I tried finding in the documentation but so far did'nt find anything much.
Let me know if my question is not clear.
Thanking you!!
I suspect this is because the layout needs to understand you have properties that you wish to supply for the body tag. The Grails documentation has a good example about using page property to specify an onload attribute of the body tag.
Here is the example modified for your needs.
layout
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>