I am currently trying to figure out why my dialog boxes are not working. I took code directly from jQuery UI and put it into my own new file too see if I could troubleshoot the problem, but the code from the website doesn't even work correctly when I copy and paste it into a new HTML file. The code in question (directly from jQuery UI):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It is supposed to be simple and straightforward but it is driving me crazy at the moment. Any help fixing this would be fantastic.
I just tried the code on codepen and it works fine
But when I tried it on my computer, the css format did not appear in front of me, due to a simple reason
Focus on the following code
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
As you can see, there is only // without https:, so to solve the problem, we just add this https: to the format, so the format becomes as follows:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
The problem is solved, of course, if this is your problem, but if it is not, please explain the problem more with an example of a picture
Related
i am trying to link a stylesheet in another file. I've tried everything, copied it from multiple websites. But it doesen't seem to work. The css doesen't load any way. This is probably a really dumb mistake somewhere. Maybe it just needs another pair of eyes. The css works fine, what is causing problems is the link tag. What i noticed is, when i try to go to http://localhost:8080/styles.css it gives me Cannot GET /styles.css in plain text. I've tried modifying the permissions of the files, doesen't work. The filename is correct.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test zabezpečení prohlížeče</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 id="page-title">Test zabezpečení prohlížeče</h1>
</body>
</html>
I hope I am asking it correctly, I am creating a website and saved an HTML and CSS files for my navbar and footer.
I am trying to load those files from different pages on the site.
My index page isn't loading anything, it has the navbar and footer inside the index.html and index-style.css.
However, when I am using the load function on the other pages there is some kind of delay and you can see on the top left side of the page some kind of a "jump" where you see the HTML for half a second then the navbar and footer are loaded.
This is how my code looks like:
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="icon" type="image/png" href="../images/logo/soup.png">
<title>Souplease - Gallery</title>
<link rel="stylesheet" type="text/css" href="../css/gallery-style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://kit.fontawesome.com/44f557ccce.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
</head>
<body>
<!-- Navigation Bar -->
<nav class="load-navbar"></nav>
<!-- more code here -->
<!-- Footer -->
<footer id="load-footer"></footer>
<script type="text/javascript">
$(document).ready(function() {
$(".load-navbar").load("navbar.html");
$("#load-footer").load("footer.html");
});
</script>
</body>
</html>
You can also check this short video to understand the problem better. Pay attention to the top left side of the screen
The load() will always execute asynchronously, so it'll get painted as you see it in the video, there's no way to change that using jquery's load().
If you really want to use it though, I'd use some kind of transition or loading element.
On the other hand I would never load components like that on a project of my own, I'd rather use an iframe even if not elegant, at least it'll load (or try) as the page is painted.
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
I would like to know if someone could help me with a responsive Datatable that I have been creating for a website. I have been creating it with Bootstrap 4. I am going to show the code of the head of the website here, because I guess that the mistake is there, since the Datatable itself is fine, and only the search box, the pages buttons and the entries option are totally out of the place where they should be. So I would like some help specifically with those elements. Could you see if there are any problems with the:
Search box
Page buttons
Options
If you see any other mistake in my "head" code and you would like to tell me about it, I would appreciate it. Thank you all.
<!DOCTYPE html>
<html lang="cz">
<head>
<title> Semestrální projekt (měnit)</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
</script>
<script>
$(document).ready(function() {
$('#tabulka').DataTable();
} );
</script>
<script src="DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/styl2.css" type="text/css">
</head>
I am answering my own question, since I have already solved it by myself, and I suppose it may help other people.
The problem why the Datatable was not working (displaying) properly was really due to the "head" code that was formatted wrongly.
The code should be formatted like this:
<!DOCTYPE html>
<html lang="cz">
<head>
<title>Semestrální projekt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.carousel').carousel({
interval: 3000
})
});
</script>
<script src="DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function()
{
$('#tabulka').DataTable();
});
</script>
<script src="DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap4.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/styl.css" type="text/css">
</head>
The mistake was simply that the version of the Bootstrap that was being using to create the responsive Datable was not specified in the code. If you look at the "head" code in the question, the Javascript and CSS files of the Datatable are included in it, but for a "general Bootstrap" (say it). Like this:
<script src="DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap.css" type="text/css">
While if you look at the "head" code here in the answer, the version of the Bootstrap that was being using is already specified, which was the Bootstrap 4. See the specific part of the code below:
<script src="DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap4.min.css" type="text/css">
In this case, this solved the problem. If you use the Bootstrap 4, and you have a similar problem, try this solution.
Besides that, in the "head" code in the question, there are two "jquery" files, which is not necessary. In the answer here, you may see that there is only one (the jquery 3.3.1), the javascript and CSS files of Bootstrap, and the javascript and CSS of the Datatable (specifying the version of the Bootstrap that was being used to create the Datatable, which is the version 4).
I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).
The problem is illustrated below with the toolbar being misaligned:
My steps were:
1) I downloaded the source code for WebSlides
2) ran a simple Bokeh plot obtaining the div and script components
3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.
Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.
A copy of the html doc is here and a snippet without the javascript is below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>
Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.