I am most of the time using browsers with JavaScript switched off, and no pictures. At Ebay they give me a warning message("Please activate JavaScript") that stays right in the middle of the screen - is there a way to turn that off? This seems to be css styling:
<!DOCTYPE html>
<html class="no-touch" lang="de">
<head></head>
<body class="sz1200 full-width LV FIREFOX FIREFOX_35 FIREFOX_35_0">
<noscript class="nojs">
<div class="nojs-msk"></div>
<div class="nojs-msg shdw"></div>
</noscript>
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
<div id="HtmlFrags"></div>
<div id="JSDF"></div>
</body>
</html>
I tried disabling css (Disable CSS 1.0 for Firefox) but that works on all elements - what makes the page unreadable.
Can I make Firefox ignore just those two classes?
You could create a userscript to do this.
GM_addStyle ('.nojs {display: none;}');
Grease Monkey | Userscripts how-to
Related
If you load javascript by specifying a path, there is a problem that you cannot enter even if you specify a breakpoint.
Intermittently enters breakpoints, to be exact. In the case of the code below, it may enter after 5 to 6 refreshes, and in some cases, it may not enter the breakpoint even after 20 refreshes. This number of refresh attempts seems to be purely random, with no regularity.
Below is the HTML code for loading javascript.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="test">
<script src="/js/test.js"></script>
<div class="mx-auto container-lg top-div">
<div>TEST</div>
</div>
</th:block>
</html>
And below is the javascript code that is called.
window.onload = function() {
var aa = 100;
}
As you can see, it's just a code to see if you enter a breakpoint at the time of window.onload.
However, if you write the javascript in the HTML file as shown below, it will enter the breakpoint every refresh without any problems.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="test">
<!--<script src="/js/test.js"></script>-->
<script>
window.onload = function() {
var aa = 100;
}
</script>
<div class="mx-auto container-lg top-div">
<div>TEST</div>
</div>
</th:block>
</html>
And the above page is loaded into the common Layout HTML using th:replace as shown in the code below.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!--Layout Head-->
<div th:replace="/fragments/head.html :: head"></div>
<!--Layout Nav Header-->
<div th:replace="/fragments/topnav.html :: topnav"></div>
<!------------------------------------------------------------->
<!--Layout Content(Page)-->
<!--This is the part where the main content page is delivered from the controller and the
appropriate page is retrieved.-->
<!--The example in this article replaces the test fragment with th:replace below.-->
<div th:replace="#{'/page/' + ${layoutContent_Page}} :: ${layoutContent_Fragment}"></div>
<!------------------------------------------------------------->
<!--Layout Footer-->
<div th:replace="/fragments/footer.html :: footer"></div>
<!--Sidebar(Collapsed)-->
<div th:replace="/fragments/sidebar.html :: sidebar"></div>
</html>
What's the problem? As you can see, I'm using Intellij community, SpringBoot, and Bootstrap.
I think there is something different about loading pages with javascript into th:replace.
One peculiarity is that when you check and refresh Chrome JS Debugger's Event Listener Breakpoints -> Load -> load, bootstrap eventhandler runs first and always enters the window.onload function of test.js written above.
I am trying to build a simple webpage that replaces the contents of the <div id="body"> with something new based on the user clicking on a "link"
The following code does exactly what I expect in Chrome and Firefox, but does nothing (except turn the link to the visited color) in IE 10 or 11:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("test02.html");
});
});
</script>
</head>
<body>
<div id="header">
Activities
<!-- this stays the same -->
</div>
<div id="body">
<p>this is the content that arrives without needing prompting</p>
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
This is the content of "test02.html":
<p>---</p>
<p>Hello world!</p>
<p>---</p>
I've checked the javascript security settings in IE and everything is set to "enable." I've also tried adding type="text/javascript" to the script tags.
Some amount of Googling has turned up the possible need to reinstall IE, which I have tried.
Anyone have an idea about how to get this working in IE?
The problem is that IE breaks itself in "compatibility" mode. The way in which it breaks itself in this case is failing to correctly look up your div id="body" element. I think that was observation error on my part, I think the real problem is addEventListener (because jQuery 2.x doesn't fall back to attachEvent anymore, since it doesn't support IE8 and earlier [or the "compatibility" modes that act like them]):
I can replicate the problem. The problem goes away if I tell IE not to break itself (e.g., not to use compatibility mode) by adding this to the top of the head element:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
IE's default for intranet sites is to display them in "compatibility" mode.
At one point I wasn't at all sure that when in "compatibility" mode it didn't get confused about that element with the id "body". IE has a history of getting confused by things like that. So you might also consider the-body or similar, but I tested and didn't seem to need it.
Side note: You probably also want to add a return false or e.preventDefault() to your click handler, so it doesn't follow the # link (which will scroll back to the top of the page and add # to the address bar).
add meta tag below to your page
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Do you mean <body> tag or <div id="body"> and do you ever try preventing default behavior of the link by using this below code :
$(document).ready(function(){
$("#activities").click(function( e ){
e.preventDefault(); //<---- add here
$("#body").load("test02.html");
});
});
I am attempting to code a simple example of a Dojo dialog box. I have copied the example shown in the Dojo reference here => http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html
My code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dialog Test</title>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.widget.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer")
dojo.require("dijit.layout.ContentPane")
</script>
</head>
<body>
<div id="dialogOne" dojoType="dojox.widget.Dialog" title="My Dialog Title">
<div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
<div dojoType="dijit.layout.ContentPane" title="foo">Content of Tab "foo"</div>
<div dojoType="dijit.layout.ContentPane" title="boo">Hi, I'm Tab "boo"</div>
</div>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonOne" dojoType="dijit.form.Button">Show me!
<script type="dojo/method" event="onClick" args="evt">
// Show the Dialog:
dijit.byId("dialogOne").show();
</script>
</button>
</body>
</html>
When the page loads in a browser, the Dialog doesn't work. I just see the text from the tabbed panes appear in the browser.
I've copied the code from the reference guide exactly so I'm very confused. Any suggestions?
Thanks.
James.
The Dojo samples unfortunately tend not to work fully 'as is', but are bits of skeleton code that need wrapping up in various standard bits of ceremony.
You've at least three things causing this not to work and render correctly. There may be other problems on top, but these will definitely cause it not to render:
You need to link to a version of the core Dojo scripts. Linking to a CDN version is a simple way to go. e.g. <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>. Details are here: http://dojotoolkit.org/download/. Be sure to put this before your require scripting.
Add a link to a Dijit theme style sheet (CSS file) in your page, otherwise none of the widgets will display correctly. e.g. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"/>
Add a class attribute on the body element describing which theme you want to use. e.g. <body class="claro">.
Only when you've done all those three things will it have a chance of working. There may be other problems too, but they're the fundamental three.
Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16.
You're calling impress before loading the library, try switching the order of your script tags:
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
Alternatively use a ready handler function to initialise your page scripts, like window.onload or jquery's ready(). For more on this see this question.
Also, going by the impress examples, in the simplest case each step of the presentation should be an element inside the #impress element with a class name of step.
I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
<header> .... </header>
with
<div class='header'> .... </div>
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
You need the innershiv.