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>
Related
I am just learning and checking if jQuery is working but I am unable to get the changes as it is showing unable to load I am using Google cdn and yes I have the script of it above my local js file
Javascript
$("h1").css("color", "red");
HTML:
<!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">
<title>jQuery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<button>Click me</button>
<button>Click me</button>
<button>Click me</button>
<button>Click me</button>
<button>Click me</button>
<script src="https://ajaxgoogleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
It is ajax.googleapis.com not ajaxgoogleapis
https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
<!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">
<title>Inversion</title>
</head>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<body>
<input type="button" onclick="loadlevel()" id="levelsel">
<canvas id="mycanvas"></canvas>
<div
id="message"
> Hi </div>
</body>
</html>
Here is my code. When I delete
<canvas id="mycanvas"></canvas>
the button and the message "Hi" shows up. When that section is included, nothing shows up. Eventually I want it to show a series of 32x32 pixel images to make a map for a simple game. I am using Chrome and it is up to date. I also have a CSS file that should be making the height and width of the canvas 832px and 672px respectively.
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 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>
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html