Now I am making Angular JS app.No error is shown in terminal, but by using Google's verification, many errors are shown in console like
I wrote in html file like
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.min.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css" />
so I think href cannot be found in program, for example href="bower_components/angular-ui-select/dist/select.css"
bower_components is under User directory so I added User/ to href, it is like
<link rel="stylesheet" href="User/bower_components/selectize/dist/css/selectize.css" />
However,same error happens.How can I fix this?I think url is wrong, but another thing cause error?
Related
After deploying a Next app to Vercel, I'm getting the following error code:
Uncaught (in promise) DOMException: Document.querySelector: 'style[data-href="https://fonts.googleapis.com/css2?family=Mulish:wght#400;500;600;700;800;900&display=swap" rel="stylesheet"]' is not a valid selector
Right now I'm calling this link through API on a whitelabel application in NextJS. I currently have a Layout component which wraps my application and it's called on _app.tsx.
This error doesn't occur on my local Next Server, only appears in production as you can see here:
https://www.wellaedu.com.br/
The code is wrapped on a Head tag as following:
<Head>
<title>{course?.title}</title>
<meta name="description" content={course?.short_description} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href={brand?.settings?.fonts?.font_link} rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
</Head>
Has anybody faced this before? Any ideas of what is happening?
You must use the <link> tag in a custom _document.js as in the docs.
// _document.js
import { Head } from 'next/document'
...
<Head>
<link rel="icon" href={brand?.logo} />
<link href={brand?.settings?.fonts?.font_link} rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
</Head>
...
I want to add a favicon to my react application but it doesn't seem to working.
Tried the below:
add the code to the index.html file in the head section
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
Also placed the icons in the same folder as index.html. Could you please let me know where the problem persists.
Thanks.
Remember to add %PUBLIC_URL% to all your href attributes in index.html
For example;
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
That should fix your issue.
I have downloaded the demo for mobileangularui. Upon loading in chrome I get error for loading mobile-angular-ui-hover.min.css, dist/css/mobile-angular-ui-base.min.css, dist/css/mobile-angular-ui-desktop.min.css and mobile-angular-ui.gestures.min.js. Am not able to understand what am I missing.
Here's my code:
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
Hope someone can help me here
I am trying to host the angular application using Tomcat 6.0. Now the problem is when hit the index.html not all the CSS and JS files loading properly.Especially bootstrap.css and Jquery files.
But angular-min and angular-route loads properly.
Console logs says Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Help me out here. Not sure what is wrong...
My html ref
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="assets/css/zabuto_calendar.css">
<link rel="stylesheet" type="text/css" href="assets/js/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css" href="assets/lineicons/style.css">
<link href="assets/css/table-responsive.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style-responsive.css" rel="stylesheet">
<link href="assets/css/form_style_7.css" rel="stylesheet">
<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="app.js"></script>
URL i use : http://localhost:8080/PMPortalRedesign/index.html
folder structure :
within webapps of tomcat
PMPortalRedesign\assets\css and PMPortalRedesign\assets\js
I've downloaded the script for the latest version of lightbox2. I've added both .js files as well as the .css file to my head tag. I've used the new attributes in my code for the images, and I've made sure all the files are in the folder that they're supposed to be in. Still, I cannot get the functionality of when you click the thumbnail, the larger image pops out.
Please help. Here is my head:
<head>
<meta charset="UTF-8" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" HREF="index.css" />
<link href="css/lighbox.css" rel="stylesheet" />
<title>
Welcome! | DaveAyotte.com
</title>
</head>
And here is the section where I'm showing the pictures:
<div class="photobox">
<img src="img/img1thumb.jpg" />
<img src="img/img2thumb.jpg" />
<img src="img/img3thumb.jpg" />
<img src="img/img4thumb.jpg" />
<img src="img/img5thumb.jpg" />
</div>
edit: I actually just noticed that instead of creating a popout as it's supposed to, it's opening the picture outside of the main div of my website (used to hold everything in a uniform size), creating a scroll-bar that needs to be scrolled down a long way to view the clicked image.
Please check the lightbox.css file to see if its linked properly or not and add type attribute as well in the link tag of lightbox.css
You need to add rel attribute under anchor tag like this
<a href="color lef.jpg" data-type="album" rel="lightbox" >
<img src="color lef.jpg" width="100" height="100" />
</a>
<link href="css/lighbox.css" rel="stylesheet" />
should be
<link href="css/lightbox.css" rel="stylesheet" />
There is a spelling error in 'light'. Your original code is missing the 't'.