I've got a problem with CssSandpaper script. Once I run it on one of my site's pages, I get following error:
"rules is null" in FF,
"Error: 'rules.length' is null or not an object" in IE,
"Uncaught TypeError: Cannot read property 'length' of null" in Chrome,
so basically object 'rules' is undefined. Here is CSS for my div (id="textTransform"):
#textTransform {
border: 1px solid green;
-sand-transform: rotate(90deg);
width: 23px;
height: 74px;
}
Has anyone of you ever had such issue? Any help would be much appreciated.
Thanks
Two things for me caused an "uncaught exception error" in combination with the csssandpaper.js and the other required scripts for the css sandpaper library.
html5doctor.com Reset Stylesheet
Typekit js
Removing both of those removed the error
Ok. I've got it. This library gets all the references that are listed in "link" tags in you "meta" section in HTML. I've had this line that defines a link to favicon:
<link rel="shortcut icon" href="/favicon.ico" />
The favicon wasn't present at the server and its response was 404. That was the reason. Once I removed it it start working.
Related
Coding ASP.net web app with visual studio, i never had any problem when chrome or firefox is the default explorer. But when it's IE, a new project called Script documents suddently appear in my project explorer and visual studio always shows that exception in the new project for every pages load :
JavaScript execution error: Unable to get the property "tagName" of a null or undefined reference
Which doesn't prevent the web app to work, it's just annoying to have to click on the window in visual studio every time i switch pages while debuging.
The window offers me to Stop, Continue, or Ignore.
Ignore make the window reappear instantly, continue make it disapear for a little while...
Haven't found anything that solve it on google, neither in here.
How can this be solved ? And how is explorer so different ?
Edit :
Taking this as an exemple, i'm pretty sure it SHOULD work :
jQuery is not defined twitter bootstrap
And still, the window always pop-up in my IE 11, saying that it haven't foud the tagName property.
So now my new question is, do i have to specify the tag name of every object because i use boothstrap ? Or is it something else that cause the problem ?
EDIT :
This is the Master Page's codes :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Canevas.master.cs" Inherits="MandatMobile.Canevas" %>
<%# Register Src="~/Controls/Menu.ascx" TagPrefix="ctrl" TagName="Menu" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" >
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server" style="position:absolute; left:10px;">
<asp:Image runat="server" ImageUrl="~/Img/Fullogo.jpg" ></asp:Image>
<h2 style="position:absolute; top:-5px; left:120px; width:1200px;" >
<asp:ContentPlaceHolder ID="title" runat="server" >
</asp:ContentPlaceHolder>
</h2>
<%if (Convert.ToInt32(Session["Level"]) != 1)
{ %>
<div style="position:absolute; top:110px; left:0px;">
<ctrl:Menu ID="Menu1" runat="server" ></ctrl:Menu>
</div>
<% } %>
<br /><br /><br /><br />
<asp:ContentPlaceHolder ID="BodyContent" runat="server" >
</asp:ContentPlaceHolder>
</form>
</body>
</html>
SOLVED :
It was ridiculus... there was another menu before i build this one, what i did was put the previous menu in HTML comment and code my new menu on the same page, but the menu in comment was still up and even though it was in comment it was still looking for it's references, just like it WASEN'T in comment... What the... i think that is going to be my new question
Ok A lot of questions lets answer one by one:
"But when it's IE, a new project called Script documents suddently appear in my project explorer ..."
This project as you called, is a mechanism of visual studio that allows the developers debug javascript in the IDE (Visual Studio), but this only work for IE, because, as long as I know, there wasn't no interesting from Microsoft (or the browsers creators) to make it work for other browsers.
If you want to understand better what is it and how to use, enable, disable see this post: Using Visual Studio to Debug JavaScript in IE.
"...and visual studio always shows that exception in the new project for every pages load :"
As #Mithun Pattankar commented in your question, probably this exception occurs in other browsers too, but when you use chrome or firefox, you will get this exception more quietly. To see you have to go to DevTools (F12 in chrome) or some other custom tool, only then will see it.
But because you have the debug javascript in VS enabled, when you used the IE, the exception was thrown in VS instead of the browser.
And still, the window always pop-up in my IE 11, saying that it haven't foud the tagName property.
So now my new question is, do i have to specify the tag name of every object because i use boothstrap ?
Ok some misguidance here. First the problem isn't with the tagName property. Let me explain:
The message error that you got was "Unable to get the property "tagName" of a null or undefined reference". See the code bellow:
var v1 = { aGenericPropertyName: 10 };
v1.aGenericPropertyName = 20;
var v2 = v1.aGenericPropertyName;
v1 = null;
//or:
v1 = undefined;
var v3 = v1.aGenericPropertyName;
In the last line, depending on the browser, you may get this exception:
"Unable to get the property "aGenericPropertyName" of a null or undefined reference."
Did you get it now? The problem isn't the property, is the object that call the property or more accuracy the absence of an object (null or undefined) in a variable (in my sample code the variable v1).
Or is it something else that cause the problem ?
Well here's the real problem, because this kind of error can occur basically in any part of any javascript code that you added to the page. So it's not possible to solve this only by looking superficially.
I have some suggestions if you want to try. First, make sure you have the correct files of bootstrap.js and jquery.js and they are compatible between itself. Second check if this error is occurring in one of your custom javascript files.
Beyond that we will only be able to help you, if you post the exact line of the exception and how file the error occurs.
I am trying to bundle my css like below.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/styles.css"));
But when i run the code i get this.
JavaScript critical error at line 1, column 1 in
http://localhost:49934/Content/css?v=8I6_j_wgn_9yNhfGU_-N-R8Ya98JN2nc600cBlm8VBM1
SCRIPT1002: Syntax error
Assuming my css had some funny characters or invalid paths, i removed everything except the below. It still did not work
.full {
height: 100%;
}
.content {
padding-top: 52px;
padding-right: 10px;
padding-left: 55px;
width: 100%;
}
When i disable bundling, add the link the usual way like below, it works
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
I googled and most of the links talk about javascript error in javascript. I dont know why i am getting Javascript error in css.
Any help will be appreciated.
I have the following JSFiddle: http://jsfiddle.net/rodneyhickman/NYh2b/1/ I'm trying to set it up to test some Kendo UI DataViz graphs.
I'm getting the following script errors:
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.all.min.js:9
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.dataviz.min.js:10
Uncaught ReferenceError: global is not defined
Any help would be appreciated.
Couple of things. If you are referencing the kendo.all.min.js, you don't need any other .js files, it has all of them included (dataviz, web and mobile). Also you need to include the dataviz.common.css and dataviz.THEMENAME.css (I included default). Also switch back to jquery 1.9.1 and it should work fine.
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
Here is a forked jsfiddle. http://jsfiddle.net/fWG9R/ (I used the latest version 2013.3.1119)
If you want to include other components from web or mobile, you will need to include the kendo.common.css, and kendo.THEMENAME.css, and kendo.mobile.css respectively.
I've just opened up a website for the first time in VS2013 and I'm getting Javascript exceptions when I run debugger:
Unhandled exception at line 194, column 21 in http://localhost:49809/
0x800a1391 - JavaScript runtime error: '$' is undefined
And here's the code:
<script type="text/javascript">
$(function () {
$('#one').ContentSlider({
width: '960px',
height: '250px',
speed: 400,
easing: 'easeOutSine'
});
});
</script>
Click Continue and I get a further exception:
Unhandled exception at line 37, column 59140 in http://localhost:52306/27fadf043d464a019907842c2a5a764e/browserLink
0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: unsupported pseudo: plusone
This website works fine live and debugs without issue in VS2012. I have a suspicion it's to do with referring to remote Javascript blocks (<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> and <script type="text/javascript" src="//apis.google.com/js/plusone.js">). Is there a permissions setting I need to amend?
Any help would be greatly appreciated.
Numb
This seems to be a bug in the new Browser Link feature of VS 2013. See Browser Link Feature. It is a way for dynamic communication between a running app and the Visual Studio.
From that article, you can turn off the feature by adding the following line to Web.config:
<appSettings>
...
<add key="vs:EnableBrowserLink" value="false" />
</appSettings>
It looks as though your script manager adds in the jquery reference in the body tag of a master page.
You're putting in your own script and referencing jquery using the '$' symbol before the master page gets to the body tag.
Just move your own script to after the body. If you're using a content placeholder then move the content placeholder after the body (and not in the 'head' section).
I'm trying to get the example code in this SO question running on my system
getting the X/Y coordinates of a mouse click on an image with jQuery
It displays the position of the mouse on a click inside a div. It works fine on Firefox and Safari but doesn't update on Chrome and I'm wondering if I've done something wrong.
I'm using Google Chrome Version 23.0.1271.101
Here's the code I'm using.
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<p>Click to see the position!</p>
<div class="box" style="width: 200px; height: 200px; background: #F00"> </div>
<p id="position">Position will go here</p>
<script>
$(document).ready(function() {
$('.box').click(function(e) {
var offset = $(this).offset();
$('#position').html(Math.round(e.clientX - offset.left) + ", " + Math.round(e.clientY - offset.top));
});
});
</script>
</body>
</html>
Update:
Here is the error I see on Chrome's JavaScript console Uncaught ReferenceError: $ is not defined but I'm not sure what to make of it.
Update2:
I cleared the browser cache and reloaded the page while having the JavaScript console open and noticed an error I had not seen before
[blocked] The page at https://<mywebsite>/index.html ran insecure content from http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.
Uncaught ReferenceError: $ is not defined
So, I downloaded jquery.min.js and placed it in the same directory as index.html and changed the loading of the script to
<script src="./jquery.min.js" type="text/javascript"></script>
It now works on all three browsers.... so for some reason Chrome was the only one that complained about the url for jquery.min.js being insecure. To compound the problem, it didn't give me that error when I went into the JavaScript console, and I didn't see it until I had cleared the cache and I had the JavaScript console open.
The error you are getting is that jQuery is not loaded when executing your script. So therefore $ is not defined when you try to use it.
Also, your screenshot is not showing the same markup as your example.