I'm surprised I couldn't find the answer to this problem before. I tried to incorporate the fullpage plugin into my site and basically disabled the scrolling function. It is stuck on the first section. I tried to make a simplified version, cutting everything to the bone, same issue.
in the head section...
<link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="scripts/jquery.fullPage.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.fullpage();
});
</script>
In the body section...
<body>
<header class="section">
<div><h1>A</h1></div>
</header>
<main>
<section class="section">
<div><h1>B</h1></div>
</section>
<section class="section">
<div><h1>C</h1></div>
</section>
</main>
</body>
What's going on? Thanks in advance.
You are not following the required structure for the plugin.
Your class="section" elements should be at the same level as pointed out in the documentation. You can not have a section inside <main>. It should be at the same level.
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
Also, if you are using the last version of the plugin, you should use a wrap for all the sections and use it also at the initialization:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Initialization:
$(document).ready(function() {
$('#fullpage').fullpage();
});
Related
I want to add datetimepicker into my in my laravel 8 app with jquery 3.4/bootstrap 4.6 , but adding m
#section('headerscripts')
<link rel="stylesheet" href="{{admin_assets}}/css/jquery.fancybox.min.css"/>
<link rel="stylesheet" href="{{admin_assets}}/css/selectize.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
#stop
...
#section('footerscripts')
<script src="{{admin_assets}}/js/jquery.fancybox.min.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/widgets/select2.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/summernote.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/AutoNumeric/AutoNumeric.js"></script>
<script src="{{admin_assets}}/js/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
...
$(document).ready(function () {
$('#dob').datetimepicker();
...
<div class="form-group">
<label for="user_id">
User <span class="text-danger">*</span>
</label>
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-addon">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
But having datetimepicker on form(without any errors in browser's console)
it looks like icons are not supported : https://prnt.sc/1r10yxn
If to uncomment line in
#section('headerscripts')
section
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
all icons of datetimepicker are shown ok, but I have some design breaks on my page.
I think that is a not goodidea to add 3.3.7/css/bootstrap.min.css into my bootstrap 4.6 for icons support.
If there is a way to fix it correctly?
Maybe are some some bettre datetimepicker libraries for my app?
Thanks!
It's not wise to use both version of Bootstrap. Some css elements may be changed or deprecated that cause your design broken.
I suggest using daterangepicker at here
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input id="my-calendar" type="text" name="date">
<i class="fa fa-calendar" aria-hidden="true"></i> <!-- Using Font Awesome -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$('#my-calendar').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
locale: { format: 'DD/MM/YYYY' },
});
</script>
So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.
I have already tried changing the path (as suggested in other similar questions) to something like #{css/styles.css} instead of #{/css/styles.css} but that did not work.
Does anyone know if I'm missing something here?
Below is the HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="#{/css/styles.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">Don't have account?
Signup Now
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/loginscript.js}"></script>
</body>
where is your css folder?
css, js should be in static folder
src
main
java
resources
static
css
i18n
img
js
templates
Add this in your head tag:
<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="#{/styles.css}">
Note: Above code will only work if styles.css present in below path:
|--resources
|--static
|--css
|--styles.css
This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="#{../static/css/styles.css}". Thanks to everyone who answered!
I'm trying to use owl carousel in laravel 5.6
I've included the following in the header and footer sections of the layout template
layouts/app.blade.php
<head>
<link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.theme.default.min.css') }}">
</head>
<body>
<script src="{{ asset("js/jquery/dist/jquery.min.js") }}"></script>
<script src="{{ asset("js/owlcarousel/dist/owl.carousel.min.js") }}"></script>
</body>
I have added the below in the welcome.blade.php
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
I do not see any slider. I see an error in the developer tools console that says
Uncaught ReferenceError: $ is not defined
How to solve this?
The issue is with bootstrap 4. However it works fine with bootstrap 4.1. Hence closing this question.
Hope it helps!
You should link JQuery first like this:
<script src="jquery.js" type="text/javascript"></script>
I have downloaded a JQuery-plugin for a searchable drop down list. Here is the source
I fill the list using D3.js. It works well for few elements, but when I want to load all elements (around 1200) the design is crashed and the list is displayed in the top so that I can't see the items and there is no scroll-bar.
Here how it looks like when I load the whole elements:
Here we can see from the developer tool in the browser that the data is loaded correctly:
The console shows these violations:
Here is my D3.js code:
d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
if (error) throw error;
d3.select("#my-select").selectAll(".option")
.data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
.enter().append("option")
.text(function (d) { return d; })
.attr("value", function (d) { return d; });
});
Html script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Crypto Trading Project</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sol.css">
</head>
<body>
<header>
<div class="collapse bg-light" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-6 py-4">
<select id="my-select" name="Cryptos" multiple="multiple"></select>
</div>
<div class="col-sm-6 py-4">
From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
</div>
<div class="col-sm-3 py-4">
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Cryptos VA
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/date-time-picker.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sol.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/loadsol.js"></script>
<script type="text/javascript">
$(function() {
// initialize sol
$('#my-select').searchableOptionList({
showSelectAll: true
});
//dateTimePicker
$('#J-demo-04').dateTimePicker({
limitMax: $('#J-demo-05')
});
$('#J-demo-05').dateTimePicker({
limitMin: $('#J-demo-04')
});
});
</script>
</body>
</html>
How can I have it work?
I could finally figure it out. The idea is simply to fix the height of the active container and add a scroll bar. So I add in the sol.css file to the .sol-container.sol-active .sol-selection-container class these two css attributes:
height: 300px;
overflow-y: auto;
New to Bootstrap and trying to layout a very simple page.
When adding the img element ('Great price') below, this causes some sort of gap down the right-hand side on portable devices, and the html and body elements no longer cover the full page. I have tried adjusting this using CSS and adjusting the row class to row-fluid etc., however after many hours, I still can't find the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\brian\Desktop\Web Design\Traders web\TemplateOne.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<title>Template One</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-#674c8a .bg-#e23c3a">
<a class="navbar-brand" href="#">Joe Bloggs Electrics</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Tel: 077777777777</li>
</ul>
</nav>
<div class="row">
<div class="col-lg-12">
<img src="C:\Users\brian\Desktop\Great Price.png" class="img-responsive" style="width: 100%">
</div>
</div>
<div class="row-fluid">
<div class="col-lg-12">
<h2>Plymouth and surrounding areas</h2>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
<i class="fas fa-pound-sign fa-8x"></i>
<p>Pricing</p>
</div>
<div class="col-lg-4">
<i class="fas fa-comment-alt fa-8x"></i>
<p>Testimonials</p>
</div>
<div class="col-lg-4">
<i class="fas fa-mobile-alt fa-8x"></i>
<p>Contact</p>
</div>
</div>
</div>
<!-- <div class="row-fluid">
<footer>
<p id="copyright">Copyright: Joe Bloggs Electrics</p>
</footer>
</div> -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Just try replacing the img-responsive class with img-fluid. Because some classes updated in bootstrap 4 version ...