A Page on my website loads perfectly for very first time but if i reload it, it gets struck untill we clear browser cache.
Why is this happenng?
How can we resolve it?
Below is the code
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="ENoESU-ILobE1sHAs8D6mm3S3CohuUHq9ivlMeT2szI" />
<title>My Activity Sheet</title>
<!--Favicon-->
<link rel='shortcut icon' type='image/x-icon' href="<%url('favicon.ico')%>" />
<!-- Core Css -->
<link href="<% asset('static/vendors/angular-select/ui-select.css') %>" rel="stylesheet">
<link href="<% asset('css/mas.css') %>" rel="stylesheet">
<link href="<% asset('css/responsive.css') %>" rel="stylesheet">
<link href="<% asset('static/vendors/bootstrap/dataTables.bootstrap.min.css') %>" rel="stylesheet">
<link href="<% asset('static/vendors/dateipcker-angular/angular-datepicker.min.css') %>" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css"/>
#yield('pageLevelCSS')
<style>
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
#yield('pageLevelHeadJs')
<script>
Related
I have a favicon Logo for a website inside the folder "public/img/". This is the code that I have written:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/img/Logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"
rel="stylesheet"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
But favicon is not displayed. Why is it not visible?
Try to refresh the cache by holding down СTRL + F5. Or test your app with another browser.
If that doesn't help, try this option:
<link rel="icon" type="image/png" href="/img/Logo.png" />
I have WAMP as my local server. I followed instructions carefully and i cant get my css and script loaded on my Page.ss. I flushed the cache and refresh the page and update the hrefs but none of them seem to have worked.
Page.ss
<html>
<head>
<title></title>
<meta charset = "UTF-8">
<meta name="description" content= "">
<meta name="author" content= "Lisandro">
<meta name="keywords" content= "">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/slick.css">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/slick-
theme.css">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/style.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
"TONS OF HTML CODES"
</body>
</html>
Found the answer. All you have to do is add these lines in your .SS file.
<% require css("<my-module-dir>/css/some_file.css") %>
<% require themedCSS("some_themed_file") %>
<% require javascript("<my-module-dir>/javascript/some_file.js") %>
These were not mentioned on the lessons in their website neither on the videos. You will have to dig on your own.
The code is....
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Videos - Pranked Bros</title>
<link rel="icon" type="image/png" href="img/logo-7.png">
</head>
<body>
<!-- other codes -->
</body>
in the browser it's like:
So the code inside head tags goes inside the body tag. In this case, what should I do?
There's probably something wrong with the tags before the part, maybe this is the problem.
I am creating jquery collapsible set with sidebar and a search button. I need to apply bootstrap for this. If i include the bootsrap css file the collapsible is not visible.
Please help me to solve this problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/demo_collapsible.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<link href="css/jqueryscripttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />-->
</head>
<body>
</body>
</html>
This might help you jquery-ui-bootstrap
Also look at jQuery.noConflict().
You can customize your bootstrap to omit some features in order to prevent confliction: http://getbootstrap.com/customize/
Why my Bootstrap 3 is not working as responsive in my play framework?
This is my head contain of main.scala.html which use every where..
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("bootstrap/css/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("bootstrap/css/sticky-footer-navbar.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/intlTelInput.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/icon.jpeg")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script type="text/javascript" src='#routes.Application.javascriptRoutes()'></script>
</head>