Document.write link tag - javascript

I don't understand that error when validating my document:
Line 14, Column 91: document type does not allow element "link" here
…e (' <link rel="stylesheet" type="text/css" href="1400.css" media="screen" />');
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
the code was:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<link id="disabled" type="text/css" rel="stylesheet" href="disabled.css" media="screen"/>
<script type="text/javascript">
document.write(' <link rel="stylesheet" type="text/css" href="1400.css" media="screen"/>');
document.write('<link rel="stylesheet" type="text/css" href="1024.css" media="screen"/>');
document.write(' <link rel="stylesheet" type="text/css" href="320.css" media="screen"/>');
document.write(' <link rel="stylesheet" type="text/css" href="Ipad.css" media="screen"/>');
</script>
<!--[if IE]>
<link rel="stylesheet" href="IE.css" media="screen"/>
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="disabled.css" media="screen"/>
<![endif]-->
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
What I want to know is how to fix that probleme cause I proceed this way for graceful degradation(users who have JS disabled)

Your document is being parsed as strict XML.
The XML parser sees the <link /> tag inside the Javascript string and complains that <link>s cannot be nested inside of <script>s.

Related

How to load external iframe?

I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?

"TypeError: 'undefined' is not a function" when trying to use jQuery UI

I'm trying to use the slider() function of jQuery UI, and keep getting the following error in the console:
TypeError: undefined is not a function (evaluating jQuery('#slider').slider())
I've definitely linked to the jQuery UI javascript and CSS files correctly - when I view the page source, they're all there. Why am I still getting this error?
If it's of any use, I'm using Rails and also some Bootstrap stuff. Here's the javascript code:
<script type="text/javascript">
$(document).ready(function(){
$('#slider').slider();
});
</script>
Thanks
Here's the <head>:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/companies.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery-ui.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<script src="/assets/bootstrap.min.js?body=1"></script>
<script src="/assets/companies.js?body=1"></script>
<script src="/assets/jquery-1.11.0.min.js?body=1"></script>
<script src="/assets/jquery-ui.min.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<title>New Company - OE Fort by Oxford Entrepreneurs</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="FcOEJfo8vcCzR+Dq+5zOVSvm7Npfo+R+FoXrEPpV3js=" name="csrf-token" />
<!-- Bootstrap core CSS -->
<link href="../../../app/assets/stylesheets/bootstrap.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="../../../app/assets/stylesheets/jquery-ui.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../jumbotron.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#slider').slider();
});
</script>
</head>
I would surmise the error would be caused by loading this function before JQuery is loaded yet (hence why you're seeing the undefined error -- JQuery is undefined)
Can you detail the way you're loading the code? Can you post your <head> tag?
The possible causes could be:
JQuery is not loaded
JQueryUI is not loaded
$("#slider") is not a valid element
The error is related to a missing line in your application.js.coffee file. As mentioned here: https://github.com/joliss/jquery-ui-rails you can require special modules here.
So just add the following line to your application.js.coffee file and it should work:
#= require jquery.ui.slider
Another possible cause, I've just discovered, is when you have two different versions of jquery linked.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
... (some other bundles), and then:
bundles.Add(new ScriptBundle("~/bundles/ajax").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js"));
E.g. in my jqueryui bundle, I had jquery-1.10.4.min.js (or rather, the latest version), but in my ajax bundle I had jquery-1.10.2.min.js. Double clicking on the error in Chrome element inspector, revealed links to code in 1.10.2. When I changed that to 1.10.4 in the ajax bundle, the jqueryui element suddenly worked (in my case it was Tabs).
What I should have done, of course, is just leave everything at jquery-{version}.js.
So in summary, a(n overlooked) version conflict is another possible cause for this error.
I know that this will not answer this exact question but it may help others getting the same error message for the slider() function.
If you have preset the value in the slider when initialising it, you could have something like the following:
$('#slider').val(5).slider();
if you remove the value (5), you also get the “TypeError: 'undefined' is not a function”
ie.
$('#slider').val().slider();
instead you would need to insert the starting value into the input tag.
<input type="text" id="slider" value="5">
You may have this kind of setup if the slider is used in many places in your site and you want to have your js file contain the default rather than having each slider contain the same information. In my case I needed to decentralise the value and it caused the error seen here.
In case anyone else runs into this, I had trouble getting selectable to work with asp.net
Turns out I wasn't properly including everything, but this gentleman made it dummy proof:
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
try this if you are facing "uncaught typeerror is not a function javascript"
It works
jQuery(function($) {
// your code here
});

How to access class name by javaScript

I want to access class"pdocCover" for set width and height of body by javaScript . How should I do?.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by PubliForge, $Date: 2012/02/03 12:17:54 $ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<title>Couverture</title>
<link rel="StyleSheet" href="Css/reset.css" type="text/css"/>
<link rel="StyleSheet" href="Css/publidoc.css" type="text/css"/>
<link rel="StyleSheet" href="Css/main.css" type="text/css"/>
</head>
<body class="pdocCover">
<div>
<img src="Images/9782919504060.png" alt="Couverture"/>
</div>
</body>
</html>
By using jQuery
$(".pdocCover").css("height","500px");
$(".pdocCover").css("width","500px");
By using JavaScript
document.getElementsByClassName('pdocCover').style.height="500px;"
document.getElementsByClassName('pdocCover').style.width="500px;"
To achieve what you specifically described:
document.getElementsByClassName('pdocCover')[0].width = '100px'
... but that probably isn't what you want. For one you can access the body more quickly and clearly by doing:
document.getElementsByTagName('body')[0]
and this will not change the width or height of the window itself if that is what you are attempting to do. Unless you create a new window with window.open you do not have control of the window size.
document.getElementByClassName("Classname") should return array of object who have class "classname". choose your one by selecting the index: [0] the first element, [1] the second etc.

jquery not working in wordpress

Wordpress is not loading jquery - I think it may have something to do with the fact that it is loading the files absolutely, not relatively, and it won't go to the url (firebug is saying access denied to restricted uri). I have tested vanilla javascript and that works, however as soon as i try to do even the most basic function in $(document).ready(function(){}) it stops working.. is there a way to stop wordpress from appending the website uri to the linked files, and reference them relatively instead, as i think this may fix it.
The outputted head is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>simplespace — not quite ready yet</title>
<meta name="generator" content="WordPress 3.0.1" /> <!-- leave this for stats -->
<link rel="stylesheet" href="http://simplespace.co.nz/wp-content/themes/blass2/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://simplespace.co.nz/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://simplespace.co.nz/feed/rss/" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://simplespace.co.nz/feed/atom/" />
<link rel="pingback" href="http://simplespace.co.nz/xmlrpc.php" />
<link rel="shortcut icon" href="http://simplespace.co.nz/wp-content/themes/blass2/favicon.ico" />
<link rel='archives' title='September 2010' href='http://simplespace.co.nz/2010/09/' />
<link rel='stylesheet' id='sociable3-css' href='http://simplespace.co.nz/wp-content/plugins/sociable-30/sociable.css?ver=5.10' type='text/css' media='all' />
<script type='text/javascript' src='http://simplespace.co.nz/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/js/jquery.lightbox.js?ver=3.0.1'></script>
<script type='text/javascript' src='http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/js/wfm-lightbox.php?ver=3.0.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://simplespace.co.nz/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://simplespace.co.nz/wp-includes/wlwmanifest.xml" />
<link rel='index' title='simplespace' href='http://simplespace.co.nz/' />
<meta name="generator" content="WordPress 3.0.1" />
<script type="text/javascript" src="http://simplespace.co.nz/wp-content/plugins/audio-player/assets/audio-player.js?ver=2.0.4.1"></script>
<script type="text/javascript">AudioPlayer.setup("http://simplespace.co.nz/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1", {width:"400",animation:"yes",encode:"yes",initialvolume:"60",remaining:"no",noinfo:"no",buffer:"5",checkpolicy:"no",rtl:"no",bg:"dcf2fa",text:"333333",leftbg:"dcf2fa",lefticon:"333333",volslider:"666666",voltrack:"cfcfcf",rightbg:"9ee1f7",rightbghover:"dcf2fa",righticon:"333333",righticonhover:"333333",track:"FFFFFF",loader:"9ee1f7",border:"CCCCCC",tracker:"dcf2fa",skip:"666666",pagebg:"FFFFFF",transparentpagebg:"yes"});</script>
<!-- WFM INSERT LIGHTBOX FILES -->
<link rel="stylesheet" href="http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/css/lightbox.css" type="text/css" />
<!-- WFM END INSERT -->
<script type='text/javascript'>
$(document).ready(function() {
alert('test');
});
</script>
</head>
Wordpress puts jQuery in no-conflict mode which disabled the $() function. Unless you disable no-conflict mode in jQuery you'll have to use jQuery() instead of $().
Try this:
Full answer for those who are facing same problem
You can wrap your javascript inside a self-invoking function, then pass jQuery as an argument to it, using $ as the local variable name. For example:
(function($) {
$(document).ready(function(){
alert('test');
});
}(jQuery));
The jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.
In the noConflict() mode, the global $ shortcut for jQuery is not available.
I looked at the site and jquery is loading. This:
<script type='text/javascript'>
$(document).ready(function() {
alert('test');
});
</script>
wont work because WordPress uses jquery in no conflict mode. This:
jQuery(document).ready(function($){
alert('test');
});
is how it should be called in no conflict mode. Also the lightbox plugin is throwing an error:
Uncaught TypeError: Object # has no method 'lightBox'

weird javascript/jquery behavior [duplicate]

This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Why don’t self-closing script tags work?
I had this bit of javascript code inside a <head> element.
<script src="jquery-1.3.2.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function() {
$("#welcome").addClass("centered");
$("#created").addClass("centered");
});
</script>
Which refused to work until I used an explicit end script element:
<script src="jquery-1.3.2.js" type="text/javascript"></script>
Why is there a difference?
EDIT: the entire header was:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<link rel="stylesheet" href="css/blueprint/src/typography.css" />
<link rel="stylesheet" href="css/common.css" />
<script src="jquery-1.3.2.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function() {
$("#welcome").addClass("centered");
$("#created").addClass("centered");
});
</script>
</head>
I don't understand why the script element needs an explicit end element but the link element doesnt.
Yeah, you always need to end script elements like that. It doesn't support the XHTML format of ' />' to end the tag.
What is the doctype of your document? Technically minimized tags like your first example are an XML-only thing. In most cases HTML allow them, but the correct HTML is your second example.
Certain elements like script and iframe dont work correctly in all browsers unless you have a closing tag, even if there is no content inside. While I agree that this is stupid, its just one more of those inconsistencies that web developers need to be aware of.
I would imagine that once browser vendors implement actual XHTML (so we can send XHMTL as application/xhtml+xml not text/html) that at that point they would also fix inconsistencies like this. Or maybe I'm just an optimist.

Categories