I am trying to delete the first css rule.
However, this does not work in Firefox 3.6.28. Is this the same for everyone and why is this the case?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
console.log(document.styleSheets);
document.styleSheets[0].deleteRule(0);
console.log(document.styleSheets); // same as the first console.log
});
</script>
<style>
body{font-size:62.5%;}
#mc{padding:310px 0 10px 162px; color:#fff;}
#content{width:500px;}
#header{padding-top:10px;}
#banner{padding:10px 0}
</style>
</head>
<body>
Test JS
</body>
</html>
Update
Just to clarify, the delete seems to be working however the console.log shows the same number of rules before and after the delete.
Seems to work just fine for me
example at http://jsfiddle.net/gaby/JmWwM/
you need to check the length of the cssRules property.
If you log the actual object in firebug then when you try to dig deeper it will show you the current state of the stylesheet, so it will have a reduced number of rules.. (since by the time you start digging the deletion will have occured)
but if you log the actual number of rules before and after the deletion then it will show the correct results..
so the problem is a mistake in understanding how the console.log command works.
According to https://developer.mozilla.org/en/DOM/CSSStyleSheet/deleteRule stylesheet.deleteRule(index) , delete rule accepts an index so your 1 should be a 0.
I created a jsfiddle http://jsfiddle.net/N3zsw/. I had to make some changes to your code since there are other stylesheets on the page so 0 == 3.
It appears to work for me. When you do console.log you should be displaying console.log(document.styleSheets[0]) instead of console.log(document.styleSheets). The CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
body{font-size:62.5%;}
#mc{padding:310px 0 10px 162px; color:#fff;}
#content{width:500px;}
#header{padding-top:10px;}
#banner{padding:10px 0}
</style>
<script type="text/javascript">
(function () {
var s = document.styleSheets[0];
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
})();
</script>
</head>
<body>
Test JS
</body>
</html>
it is working fine, i think its about firebug's object reference thing
Related
I'm starting to coding in angular.js on webstorm:
<!DOCTYPE html>
<html ng-app="store">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="store">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
but the browser display
Nothing here {{'yet' + '!'}}
{{1 + 1}}
what can i do?
You don't provide enough details to resolve the issue, but I made these four changes to your HTML to get it working, at least with respect to AngularJS:
Remove the 'ng-app' attribute from the body tag.
Use a CDN URL for angularjs.
Remove the reference to your js file.
Remove your store app from the 'ng-app' attribute in the html tag.
This modified version of your HTML runs fine using WebStorm:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
Once you see that working, you can progressively undo the changes I made (undo 2, then 3 then 4, but retain change 1), and retest to identify the problem.
More details are needed to determine the root cause, but the most likely issues are:
Your angularjs file can't be found.
Your "app.js" file can't be found.
Some problem(s) with your code in app.js.
But since you are using WebStorm, it may be able to identify your precise problem. Run Code=>Inspect Code on your project, then review the output. It will identify very basic problems, such as failing to locate your script files.
I've tested on JSFiddle without problem
This is the file hosted on a server: http://users3.jabry.com/apasajja/37/file.html
It works perfectly. The image loaded every second.
But when run on local computer, it not works as expected, even the codes are same. The image is not loaded every second.
You can have the same copy: http://users3.jabry.com/apasajja/37/file.zip
try something like this
Change from this
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
to
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
You did not mention DOCTYPE and html
try this one it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"> </script>
<script type='text/javascript' src='script.js'></script>
<style type="text/css">
#mr3{
height:200px
}
</style>
</head>
<body>
<div id="mr3" style="background:url(http://users3.jabry.com/apasajja /37/banner1.jpg)"> </div>
</body>
</html>
Hi I'm trying to use jQuery to load an html document into an existing html document.
I've tried using the code below, but the text doesn't load.
I'm not sure why. Could someone point me towards what I'm doing wrong please?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">$("#test").load("test.txt")</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Try on DOM ready like
<script type="text/javascript">
$(document).ready(function(){
$("#test").load("test.txt");
});
</script>
And you also forgotted ending ;.You can also try like
$(function(){
$("#test").load("test.txt");
});
You need to add it in dom ready
jQuery(function($){
$("#test").load("test.txt")
})
The problem was when your script is executed the element with id test was not yes added to the dom so the selector $("#test") would return zero elements
I'm new to JavaScript and I've learned that JavaScript can be place between the <head></head> or <body></body> sections, I have been working in a project and it works fine inside the head but not the body section of the page.
examples:
working fine like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
And is not working this way:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
</script>
</body>
</html>
Your code snippet didn't show you closing the tag. Double check if you close your script block correctly.
It's also better to specify the type of scripting language too.
<script language='javascript'>
....
</script>
I have this code:
<body onLoad="subcatSelection();">
The function is inside a .js file which is included with this code:
<script type="text/javascript" src="bincgi/search_lists.js"></script>
The function contains an alert('hello'); just for testing purposes to see if it gets called, but it doesn't.
The "Page error" or whatever its called on the bottom left corner of Explorer 6 is displayed and when double clicking it it assumes there is an error on LINE x ROW y, which is the body-onload event.
Anybody has an ide?
If you need more input let me know... Thanks
UPDATE:
Some html before the onload event...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript" src="bincgi/jsfunctions.js"></script>
<script type="text/javascript" src="bincgi/calendar_eu.js"></script>
<link href="bincgi/main_styles.css" rel="stylesheet" type="text/css">
<link href="bincgi/calendar.css" rel="stylesheet" type="text/css">
<!--[if lt IE 8]>
<link href="bincgi/main_styles_ie_lt7.css" rel="stylesheet" type="text/css">
<![endif]-->
<style type="text/css">
body {
background-color: #fffec7;
background-image: url(Graphics/test_bgr.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body onLoad="subcatSelection();">
If [Juriy] answer didn't work, then try calling your function in your page:
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript" >
alert("first test");
subcatSelection();
</script>
If that doesn't work, it has to be a trivial problem (e.g., file in wrong location, need to re-start browser, clean cache, etc.)) that is giving you troube.
As far as I see from the comments, the problem might be in the other line of search_lists.js (that might be before subcatSelection definition). IE just stops parsing it and doesn't load the function correctly. Try to leave a single function definition in that file and see what happens:
function subcatSelection() {
alert ("Hello");
}
It may be possible that there's a syntax error that it is avoiding the correct definition of the function. Make that function the only function in your .js file, put your test alert("hello!), and try again.
Check the permissions, you are running inside a cgi bin folder which operates a bit different
I would also suggest not mixing your js files with your CGI (who uses cgi anymore)
Because you have the problem on IE6 only from what I understand, I would try to first use Fiddler to determine if your file is downloaded correctly, if it is then I would modify the content of search_list.js to be:
alert('Before def');
function subcatSelection() {
alert('In subcatSelection');
}
alert('After def');
Then create a page like this to see if you get the alerts in that order: 'Before def', 'After def', 'Before Call', 'In subcatSelection', 'After Call'.
At that point, you should know for sure where is the problem if it's still there. If you don't have the error, then start plugging back the pieces one by one (move the call in body onload then try, re-add the code in search_list.js then try, re-add the other JS includes then try, etc.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript">
alert("Before Call");
subcatSelection();
alert("After Call");
</script>
</head>
<body>test</body></html>