I have a validator problem:
Bad value http://fonts.googleapis.com/css?family=Dosis:400,700,800|Varela+Round|Architects+Daughter for attribute href on element link: Illegal character in query: not a URL code point.
But I have the follow code, no spaces anywhere:
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800|Varela+Round|Architects+Daughter/" rel="stylesheet" type="text/css">
in the link href change | by %7C
There are 2 ways to fix this validation problem:
URL encode the | (vertical bar/line) character in the href attribute of the link element (as %7C) :
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800%7CVarela+Round%7CArchitects+Daughter" rel="stylesheet" type="text/css">
Separate fonts inclusion with multiple link elements :
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css">
Avoid illegal characters such as empty space. For example, instead of <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Carter One" /> use <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Carter+One" />.
Related
I would like to sort table using tablesorter with expectation like the attached fiddle
https://jsfiddle.net/saranya2020/ykn035rf/6/
Table sorts but the problem is my first column has an href link when only when +icon clicked it should expand. But after applying the below script tags for sorting,when i click up or down arrow my href automatically expands:( and during page load is get error,
Uncaught TypeError: Cannot read property 'themes' of undefined
#line: $.extend($.tablesorter.themes.jui, {
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css"/>
<link rel="stylesheet" href=" https://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../css/theme.jui.min.css"/>
Please let me know what i have missed or added wrong to avoid this problem.
I want to implement a date picker in one of my text input page. I have a page call panel.blade.php and app.blade.php which is the layout page. Since Laravel comes with bootstrap and jquery installed, I did the usual import to include the necessary files to make it work.Below is the code.
app.blade.php:
<head>
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
.
.
.
.
.
.
<script>
$('.date').datepicker({
format: 'mm-dd-yyyy'
});
</script>
panel.blade.php:
<tr>
<td>454542</td>
<td><input class="date form-control" type="text"></td>
<td>Chair</td>
<td>Received</td>
<td>xxxx</td>
</tr>
The problem is when I click on the textbox, it's supposed to pop out the date picker UI but nothing came out. I spent some time trying to figure out what went wrong but to no avail. Anyone can point out what went wrong?
Appreciate it.
The problem is that you are assuming that Laravel includes Bootstrap and jquery, but I don't see it in a fresh install. (Are you using a template maybe?)
Put this lines in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
And it should works perfectly ;)
EDIT:
Try putting the jquery import before the bootstrap datepicker import:
app.blade.php
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
EDIT2:
To change the format you can also try to add a property to the input field:
<input class="date form-control" data-date-format="mm/dd/yyyy">
Hope it works flawlessly!
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
When I include the js for lightbox it prevents my other js from running; which means my jquery nav and slide down effects for divs stop working. Am I including the files in the correctly? I tried the endconflict() in the top of my script but that didn't work. Any help is greatly appreciated.
Thx
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
***<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />***
<script type="text/javascript" src="js/jquery.js"></script>
<script src="javascript/jquery-1.7.1.min.js"></script>
<script src="javascript/bootstrap.js"></script>
***<script type="text/javascript" src="../lightbox2.05/js/prototype.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/scriptaculous.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/lightbox.js"></script>***
<script>
<a href="images/Screen Shot 2012-02-27 at 9.51.49 PM.png" rel="lightbox">
<img src="../../images/Screen Shot 2012-02-27 at 9.56.49 PM.png" height="180" width="460" alt="">
</a>
The problem is that lighbox uses pieces of Scriptaculous and Prototype, which are other javascript libraries like jQuery is. They don't play nicely with each, so you have to tell jQuery to avoid them.
Rather than the typical document ready setup that you normally put your jQuery code in:
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
You will instead wrap your jQuery code in this:
jQuery(document).ready(function($){
// Stuff to do as soon as the DOM is ready;
});
You can read more about handling javascript library conflicts here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I have this in a HAML layout (layout.haml)
- #fonts.each do |font|
%link{:href=>"//fonts.googleapis.com/css?family={font}",:rel=>"stylesheet",:type=>"text/css"}
And I have this in the HAML template index.html.haml
- #fonts = ['Lato:400,300,100','Droid+Serif:700,400'];
When I compile, I get this:
<link href='//fonts.googleapis.com/css?family={font}' rel='stylesheet' type='text/css' />
<link href='//fonts.googleapis.com/css?family={font}' rel='stylesheet' type='text/css' />
What am I doing wrong?
You forgot the hash symbol.
- #fonts.each do |font|
%link{:href=>"//fonts.googleapis.com/css?family=#{font}",:rel=>"stylesheet",:type=>"text/css"}
^ here