I try to build my project locally and ran it using serve and succeeded, but when I deploy it to cloudflare pages the pages is blank, here the html source from cloudflare build
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
</script>
<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="icon" href="favicon.ico">
<title>xxxxx</title>
<link id="theme-link" rel="stylesheet" href="themes/lara-light-indigo/theme.css">
</head>
<body>
<div id="app">
<div class="preloader">
<div class="preloader-content">
</div>
</div>
</div>
</body>
</html>
and here's the one from local build
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93461466-1"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="favicon.ico">
<title>xxx</title>
<link id="theme-link" rel="stylesheet" href="themes/lara-light-indigo/theme.css">
<link href="/css/chunk-079f4803.395e4d4d.css" rel="prefetch">
<link href="/css/app.4c84c43c.css" rel="preload" as="style">
<link href="/css/chunk-vendors.3827bea3.css" rel="preload" as="style"><link href="/js/app.4d1812d8.js" rel="preload" as="script">
<link href="/js/chunk-vendors.bc9985c6.js" rel="preload" as="script"><link href="/css/chunk-vendors.3827bea3.css" rel="stylesheet">
<link href="/css/app.4c84c43c.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="preloader">
<div class="preloader-content">
</div>
</div>
</div>
<script src="/js/chunk-vendors.bc9985c6.js">
</script><script src="/js/app.4d1812d8.js"></script></body></html>
why there's no script tag there? the last one: <script src="/js/chunk-vendors.bc9985c6.js"> and <script src="/js/app.4d1812d8.js">
Related
I have 5 buttons. With Fetch, the api is fetched and written to the screen. I want the top 50 countries to be listed when I click on button 1. After that, when you press button number 2, the countries between 50-100 should appear on the screen. In this order, I want to remove 250 countries 50-50 when each button is clicked
const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button')
fetch('https://restcountries.com/v3.1/all')
.then(res=>res.json())
.then(data=>{
let card = "";
data.map(item=>{
card+=`
<div class="col-md-4">
<div class="card" >
<img height="300" src="${item.flags.png}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.name.common}</h5>
<p class="card-text">${item.capital}</p>
Go somewhere
</div>
</div>
</div>
`
})
row.innerHTML = card;
});
<!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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<section>
<div class="container mt-5">
<div class="row g-5"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
This is my main container component,
<template>
<div class="main-content">
<slot />
</div>
</template>
This is my topbar component,
<template>
<!-- top bar with back component -->
<div class="top-bar">
<div class="back"><i class="far fa-arrow-left"></i></div>
<div class="page-name">
<div class="main-topic">Management</div>
<div class="dot"></div>
<div class="sub-topic">Products</div>
</div>
</div>
<!--End top bar with back component -->
</template>
This is my product component (With main container & top bar)
<template>
<Main>
<Topbar />
</Main>
</template>
<script setup>
import Main from "../components/Main.vue";
import Topbar from "../components/Topbar.vue";
</script>
Here my CSS not working I have imported all my CSS files into the main HTML file.
<!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>Vite App</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/negus.css">
<link rel="stylesheet" href="assets/css/all.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app"></div>
<script src="assets/scripts/jQuery.min.js"></script>
<script src="assets/scripts/jQuery-resize.js"></script>
<script src="assets/scripts/script.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
It should look like this,
But it look like this,
I don't know why my CSS is not working. Appreciate it if somebody can help. Thanks
Try importing those CSS files in your App.vue like this-
<style>
#import "./assets/css/reset.css";
#import "./assets/css/negus.css";
#import "./assets/css/all.css";
#import "./assets/css/style.css";
</style>
I would like to center and align with the search box/page lenght the PDF button I've added to this datatable.
Don't look at the data I've insert in the table, I've just insert one element to reduce the lenght of the code.
This is my code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studen</title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.3.1.js">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css">
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>2018</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
buttons: ['pdf']
});
table.buttons().container()
.appendTo('#example_wrapper .col-md-6:eq(0)');
});
</script>
</body>
Using dom option
l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element
r - processing display element
B - buttons
$(document).ready(function() {
var table = $('#example').DataTable({
buttons: ['pdf'],
dom: "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4 text-center'B><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.3.1.js">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>2018</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
Note: Use Full page option to view demo
I'm trying to use Ionicons in buttons of Materialize but it isn't showing up instead I'm getting an odd box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Materialize</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-
2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-
facebook"></i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-
twitter"></i></a>
</body>
<html>
This is what I'm getting -
Please tell me that you're not actually splitting the rows in the mid of a class name... and that you hope everything works...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Materialize</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-facebook"></i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="ion-social-twitter"></i></a>
</body>
result:
i've already seen some user with the same problem:
Lightgallery not working
but i still can't get it to work, here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</li>
<li <a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</ul>
</div>
</div>
</body>
</html>
Can't figure out what i'm missing.
Thanks for any help
You haven't connect main file - lightgallery.js.
Connect it.
Can you please check this code and see if it does any help? Hope it does :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
<li ><a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
</ul>
</div>
</body>
</html>