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
Related
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
The button color is not blue when i use the btn-info class, but works fine when i tried in jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
screenshot
I think there are conflict between the material-bootstrap and bootstrap stylesheets. Try commenting one ans leave the other one, it should work. And if you do not want that way ,try manually via CSS coding, try the following:
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;}
Did you try :
"background-color:#000;"
for example on .btn-info ?
I think you have some problem with your bootstrap file try using these cdns.
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Working fine here
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
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 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(){
});
I connect multiple skewed divs, so that a ring arise.
But between the different divs there are white pixels. The gaps depend on the zoom-level.
How can I fix this?
Here is my code:
<!DOCTYPE html>
<html ng-app="o4iApp">
<head>
<title>Kompetenzatlas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script data-require="angular-route#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
<script data-require="angular-resource#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-resource.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css" />
<script src="app.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
You can see how it works at http://plnkr.co/edit/uv6W2CpqXdY8jMJTDKKf?p=preview
In Firefox the problem becomes very clear. There are white lines between the segments.