I am trying to develop a simple front end for displaying images using BootStrap. However before using BootStrap the button to view images was working fine but after styling the page using bootstrap, It does nothing, Can anybody tell me what am I doing wrong? When I tried seeing in Developer tools of Chrome , I get 2 exceptions:
Uncaught Error: You must include the utils.js file before tether.js
at tether.js:4
(anonymous) # tether.js:4
bootstrap.min.js:7 Uncaught ReferenceError: Tether is not defined
Code:
<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></title>
<script src="script/tether.min.js"></script>
<script src="script/tether.js"></script>
<script src="script/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/styles.css"></link>
<script src="script/bootstrap.min.js"></script>
</head>
<body>
<h1 class="mt-4" align='center'> Demo Website </h1><br>
<div class="container" style="width:300px; background-color:ghostwhite;">
<div class="form-group">
<form action='viewimages2.php' method="GET">
<button class="btn-block btn btn-info" align='center' type="submit" name="Submit"> View Images </button>
</form>
</div>
</body>
</html>
Working Code without Bootstrap:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<H1 align='center'>Demo Website/h1><br>
<button align='center' type="button" onclick="window.location='Register.php';" value="Register"> Register </Button>
<button align='center' type="button" onclick="window.location='Login.php';" value="Login"> Login </Button>
<form action='viewimages2.php' method="GET">
<button type='submit' name="Submit"> View Images </button>
</form>
</body>
</html>
You can try this, put the jquery.min.js before the other .js files. I think you can remove tether.js since you are already using tether.min.js
<script src="script/jquery.min.js"></script>
<script src="script/tether.min.js"></script>
Related
Here I can totally assure you that directory is working just fine but still the problem persists.
<!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.0">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/style.css">
<title>Helper</title>
</head>
<body>
<h1>Just click below </h1>
<button class="btn btn-success">Click Here </button>
<script src="../../node_modules/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Here it should have been button success but it's showing simple button.
The problem is definitely from the bootstrap directory, there is no possible way that there is any other problem, please use a code editor to help you navigate to your directory correctly.
here is a Code with a cdn bootstrap and its working normally.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="col-xl-12 text-center">
<h1>Just click below </h1>
<button class="btn btn-success">Click Here </button>
<button class="btn btn-primary">Click Here </button>
<button class="btn btn-danger">Click Here </button>
</div>
</body>
</html>
I've been working on a Javascript To-Do app and included some icons from Font Awesome. But they're just not showing up. So far I've tried:
Disabling adblockers and reloading Pages
Trying out different browsers.
Removing CDN and using Font Awesome CSS itself in the project.
I've already googled regarding this problem double-checked my CDN link, checked the recent documentation and everything seems alright. What did I do wrong?
I have attached the HTML Code Snippet and the screenshot from the browser below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght#300&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>My todo list</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit">
<i class="fas fa-user-md"></i>
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Browser View
Change fas fa-user-md to fa fauser-md and add it directly to button.
Like so -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght#300&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>My todo list</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button fa fa-user-md" type="submit">
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Edit: fas, far etc is supported in Font Awesome 5 and above. The version is used in this example is 4.7.0 which is supports fa.
I found the below code from the website mentioned below after my two-days search for a bootstrap datepicker for my website. Being a newbie I do not know how to implement but I gave it a try, however, I did not get the result as expected, I got only an inputfield but no datepicker. Can somebody help me implement the code?
I create a test.html file in my project and added the below code to test.
NOTE: This is the only code I have for datepicker.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
</div>
</div>
<script>
// Data Picker Initialization
$('.datepicker').pickadate();
</script>
</body>
</html>
Source of the code
In your input tag with id=date-picker-example replace type field with "date". I mean the code of your input field will be like this.
<input placeholder="Selected date" type="date" id="date-picker-example" class="form-control datepicker">
I hope this solves your problem.
According to the HTML GetUiKit documentation, this html code should create 3 nice buttons, with a rectangle around the text. But this code only shows the text of the button, without the rectangle.
https://getuikit.com/v2/docs/button.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
</head>
<body>
<a class="uk-button" href="">Link</a>
<button class="uk-button" type="button">Button</button>
<button class="uk-button" type="button" disabled>Disabled</button>
</body>
</html>
how to solve this?
You are referring to old documentation and a lot of things were changed since v2. Have a look at current UIKit v3 (as you're using v3 in the snippet and you've used it in the previous question too)
https://getuikit.com/docs/button
Below you can see correctly used classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
</head>
<body>
<a class="uk-button uk-button-default" href="">Link</a>
<button class="uk-button uk-button-primary" type="button">Button</button>
<button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
</body>
</html>
I am using ionic framework to make a simple application( you can search through itunes for tracks). However, when displaying a lot of results, the ion content isn't scrollable. Here is my markup:
<!DOCTYPE html>
<html ng-app="hiphop">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-controller="SearchCtrl" ng-app="hiphop">
<ion-pane>
<ion-header-bar class="bar-stable">
<label class="item-input-wrapper header">
<i class="icon ion-android-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search.query" ng-enter="search()" />
</label>
</ion-header-bar>
<ion-content class="has-header" animation="slide-left-right" padding="true" scroll="true" has-bouncing="true">
<!-- our list and list items -->
<div class="list">
<a class="item item-avatar" href="#" ng-repeat="item in items">
<img src="{{ item.artworkUrl60 }}">
<h2>{{item.trackName}}</h2>
<p>{{item.artistName}}
</p>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Codepen demo (with also js).
Why isn't it possible to scroll? How to do it?
PS: I am using Intel XDK
You had included ionic.bundle script 2 times, I removed one in your code-pen example and scrolling worked.
http://codepen.io/anon/pen/ynCsc