I am using JQueryUI with dialogextend on a boostrap template (Shards UI).
I have the issue that the dialog can move outside the window and makes scrollbars to the webpage:
Does anyone know what can cause this? I've tried to include the CSS and JS in different orders, but that doesn't help.
Here is the minimal code on which the issue still appears:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">s
</head>
<body class="h-100">
<div id="testdialog" 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>
<div class="container-fluid">
<div class="row">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#testdialog" ).dialog({
resizable: true,
closeText: "",
height: "auto",
width: 400
});
$('.ui-dialog').css('z-index',9999);
} );
</script>
</body>
</html>
Thanks for the replies.
Solved it.
I was using a different version of the JS file and CSS file. Using the same version works.
Related
I have a basic CRUD web app with Spring and thymeleaf, I have a fragmented navbar that I use in each page but whenever I have a page with a datetimepicker the navbar is conflicted (basically navbar parts are mixed up and don't work). So below is my home page, which works fine (no datetimepicker), but in my newEmployees page I have the same bootstrap, jQuery etc links and sources as 'home' but as soon as I add the datetimepicker code the navbar is wrong, also I have to remove:
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
for the datetimeicker to work, but with my minimal jquery understanding, isn't that whats is needed for the navbar? Is something conflicting here?
home.html works fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css" >
<link rel="stylesheet" type="text/css" href="/css/ines.css" >
<title>InES Employee</title>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<div th:replace="/fragments/deleteModal :: deleteModal"></div>
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script th:src="#{/js/home.js}"></script>
</body>
</html>
home.js
$(' #deleteButton').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#deleteModal #delRef').attr('href', href);
$('#deleteModal').modal();
});
setInterval(function(){ $(".alert").fadeOut(); }, 3000);
newEmployee.html cant get navbar to work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>InES Employee</title>
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/css/newEmployee.css">
<!--datetimepicker code-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<!-- <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>-->
<!-- <script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>-->
<script th:src="#{/js/newEmployee.js}"></script>
</body>
</html>
newEmployee.js
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
correct navbar
incorrect navbar
Thanks in advance!
I need a little help to create this. My idea is to have a welcome popup on my web page. When the user firstly loaded the site.
[
And after few seconds i need to place this image on top right corner of the site. like this
How can i do this by using bootstrap css. Please help me :)
This is with Bootstrap 4 and JQuery. JQuery slim changed to min to allow animations. Run the code snippet.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
img {
width: 100%;
width: 100%;
position: relative;
float: right;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<img src="https://i.stack.imgur.com/Jrbqf.png">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
$('img')
.hide()
.fadeIn(1000)
.delay(2000)
.animate({
width: "50%",
height: "50%"
}, 1500);
});
</script>
</body>
</html>
<!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">
<title>Appraisal</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="animated bounceInUp">dummy text</h1>
<hr>
<h4>portfolio</h4>
</header>
<div class="slides">
</div>
<div class="skills">
</div>
<div class="certs">
</div>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to import Bootstrap from the cdn links provided on the site. I believe I have done everything correctly, however the animations tied to the h1 tag in the header will not animate. Can anyone see anything that is wrong?
The animation you're tying to achieve is with MDBootstrap (Material Design for Bootstrap), and it isn't included with the base Bootstrap files. To use the animation methods you want, include
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
after your Bootstrap CSS files, and include
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
after your current scripts at the end of the body content. That should be all you need to achieve the animations!
Dynamically generate animations using jQuery
You can also dynamically generate your animations by using the addClass jQuery method:
<script>$(document).ready(function(){ $("h1").addClass("animated bounceInUp"); });</script>
You forgot to import the CDN for Animate.css. Add this into your <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
Your browser is literally seeing animated bounceInUp as
Huh? What is this "animated" and "bounceInUp"? Oi! Developerrrr!? Hello! What are these? - Your browser.
put this code in script tag
wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
wow.init();
and add this class="wow" in your html component
My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/
I have a mockup here
http://dummytest.herokuapp.com/
At the moment the plain vanilla HTML shows first and then it flickers and it is rendered with CSS applied. How can I get my page to show the CSS styling as the first thing completely bypassing the unstyled text?
Your document is not well formed (wiki), which is leading to this behavior.
Generally web pages go:
<html>
<head>
<!-- meta tags go here along with title,
script links, and css style references -->
</head>
<body>
<!-- elements for rendering go here -->
</body>
</html>
You would like to correct your HTML to comply with HTML standard:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Harness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--<Le>HTML5 shim, for IE6-8 support of HTML elements</Le>--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--<Le>styles</Le>-->
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/datepicker.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<style>body {
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="/javascripts/slimScroll.min.js"></script>
<script src="/javascripts/housefix.js"></script>
<script src="/javascripts/bootstrap-transition.js"></script>
<script src="/javascripts/bootstrap-alert.js"></script>
<script src="/javascripts/bootstrap-datepicker.js"></script>
<script src="/javascripts/bootstrap-modal.js"></script>
<script src="/javascripts/bootstrap-dropdown.js"></script>
<script src="/javascripts/bootstrap-scrollspy.js"></script>
<script src="/javascripts/bootstrap-tab.js"></script>
<script src="/javascripts/bootstrap-tooltip.js"></script>
<script src="/javascripts/bootstrap-popover.js"></script>
<script src="/javascripts/bootstrap-button.js"></script>
<script src="/javascripts/bootstrap-collapse.js"></script>
<script src="/javascripts/bootstrap-carousel.js"></script>
<script src="/javascripts/bootstrap-typeahead.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<p>
Home |
Log In
</p>
<h2>Welcome! Please log in.</h2>
</body>
</html>
Put all your <head></head> code in one place and all your <body></body> code in one place as well.
Currently you have 2 sets of <head> and <body>. Take the one above (with menu) and merge it with the one below (with welcome message).
It would be best to run all your webpages through http://validator.w3.org/ to avoid future problems like this.